Skip to content

Commit f2dd5b8

Browse files
jquensejquense
committed
v2.2.2
fixes #41 and mostly fixes #39
1 parent 7bb9046 commit f2dd5b8

File tree

10 files changed

+24374
-84
lines changed

10 files changed

+24374
-84
lines changed

‎browser/react-widgets.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/pages/Advanced.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use strict';
2+
var React = require('react');
3+
var EditableExample = require('../EditableExample')
4+
5+
var AdvancedPage = React.createClass({
6+
7+
render(){
8+
9+
return (
10+
<section {...this.props}>
11+
<h1></h1>
12+
</section>
13+
)
14+
}
15+
})
16+
17+
module.exports = AdvancedPage

‎docs/docs.js

Lines changed: 24274 additions & 14 deletions
Large diffs are not rendered by default.

‎example/example.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ var App = React.createClass({
3636
dropdownValue: list[0],
3737
comboboxValue: 1,
3838
//comboboxValue: list[0],
39-
selectValues: 3,
39+
selectValues: [3,4,5,2],
4040
calDate: new Date,
4141
numberValue: 1,
4242
open: false
@@ -77,7 +77,7 @@ var App = React.createClass({
7777
return (
7878
<div style={{ fontSize: 14 }}>
7979
<div style={{ maxWidth: 600 }}>
80-
<section className="example">
80+
{/*<section className="example">
8181
<div style={{ height: 150 }}>
8282
sgsdgsdg sdgdg<br/>assdgsdgsdg<br/>asdasdasdasdasd
8383
</div>
@@ -91,7 +91,7 @@ var App = React.createClass({
9191
name="super_name"
9292
multiple
9393
onChange={change.bind(null, 'selectValues')}/>
94-
</section>
94+
</section>*/}
9595

9696
<section className="example" style={{ marginBottom: 20 }}>
9797
<DropdownList
@@ -126,19 +126,20 @@ var App = React.createClass({
126126
onChange={change.bind(null, 'comboboxValue')}/>
127127
</section>
128128
<section className="example" style={{ marginBottom: 20 }}>
129-
{/*<Select
129+
<Select
130130
isRtl={false}
131131
data={ this.state.data }
132132
placeholder="hi i am a placeholder"
133133
textField='name'
134134
valueField='id'
135135
value={ this.state.selectValues }
136+
readOnly={this.state.selectValues.slice(0,1)}
136137
busy={false}
137138
allowCustomTags
138139
onCreate={create}
139140
tagComponent={ListItem}
140141
itemComponent={ListItem}
141-
onChange={change.bind(null, 'selectValues')}/>*/}
142+
onChange={change.bind(null, 'selectValues')}/>
142143
</section>
143144
<section className="example" style={{ marginBottom: 20 }}>
144145
<DatePicker

‎lib/Multiselect.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ var propTypes = {
5656
})
5757
};
5858

59-
var Select = React.createClass({
59+
var Multiselect = React.createClass({
6060

61-
displayName: "Select",
61+
displayName: "Multiselect",
6262

6363
mixins: [require("./mixins/WidgetMixin"), require("./mixins/DataFilterMixin"), require("./mixins/DataHelpersMixin"), require("./mixins/PopupScrollToMixin"), require("./mixins/RtlParentContextMixin")],
6464

@@ -118,11 +118,14 @@ var Select = React.createClass({
118118
var className = _$omit.className;
119119
var children = _$omit.children;
120120
var props = _objectWithoutProperties(_$omit, ["className", "children"]);
121+
121122
var listID = this._id("_listbox");
122123
var optID = this._id("_option");
123124
var items = this._data();
124125
var values = this.state.dataItems;
126+
125127
var List = this.props.listComponent || this.props.groupBy && GroupableList || PlainList;
128+
var listProps = _.pick(this.props, Object.keys(List.type.propTypes));
126129

127130
return React.createElement(
128131
"div",
@@ -143,7 +146,7 @@ var Select = React.createClass({
143146
}) }),
144147
React.createElement(
145148
"div",
146-
{ className: "rw-multiselect-wrapper", onClick: this._maybeHandle(this._click) },
149+
{ className: "rw-multiselect-wrapper" },
147150
this.props.busy && React.createElement("i", { className: "rw-i rw-loading" }),
148151
!!values.length && React.createElement(TagList, {
149152
ref: "tagList",
@@ -176,7 +179,9 @@ var Select = React.createClass({
176179
"div",
177180
null,
178181
React.createElement(List, _extends({ ref: "list"
179-
}, _.pick(this.props, Object.keys(List.type.propTypes)), {
182+
}, listProps, {
183+
readOnly: !!listProps.readOnly,
184+
disabled: !!listProps.disabled,
180185
id: listID,
181186
optID: optID,
182187
"aria-autocomplete": "list",
@@ -223,10 +228,10 @@ var Select = React.createClass({
223228
}));
224229
},
225230

226-
_click: function _click(e) {
227-
this._focus(true);
228-
!this.props.open && this.open();
229-
},
231+
// _click(e){
232+
// this._focus(true)
233+
// !this.props.open && this.open()
234+
// },
230235

231236
_focus: function _focus(focused, e) {
232237
var _this = this;
@@ -235,7 +240,10 @@ var Select = React.createClass({
235240
clearTimeout(this.timer);
236241

237242
this.timer = setTimeout(function () {
238-
if (focused) _this.refs.input.focus();else {
243+
if (focused) {
244+
_this.refs.input.focus();
245+
_this.open();
246+
} else {
239247
_this.close();
240248
_this.refs.tagList && _this.refs.tagList.clear();
241249
}
@@ -358,11 +366,11 @@ var Select = React.createClass({
358366
});
359367

360368

361-
module.exports = controlledInput.createControlledClass(Select, { open: "onToggle", value: "onChange", searchTerm: "onSearch" }, { onChange: defaultChange, onCreate: defaultChange });
369+
module.exports = controlledInput.createControlledClass(Multiselect, { open: "onToggle", value: "onChange", searchTerm: "onSearch" }, { onChange: defaultChange, onCreate: defaultChange });
362370

363371

364372
function defaultChange() {
365373
if (this.props.searchTerm === undefined) this.setState({ searchTerm: "" });
366374
}
367375

368-
module.exports.BaseMultiselect = Select;
376+
module.exports.BaseMultiselect = Multiselect;

‎lib/less/core.less

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212

1313
.rw-btn {
1414
color: @btn-color;
15-
line-height: @input-height;
16-
display: inline-block;
17-
margin: 0;
18-
text-align: center;
19-
vertical-align: middle;
20-
background: none;
21-
background-image: none;
22-
border: 1px solid transparent;
23-
padding: 0;
24-
white-space: nowrap;
15+
line-height: @input-height;
16+
display: inline-block;
17+
margin: 0;
18+
text-align: center;
19+
vertical-align: middle;
20+
background: none;
21+
background-image: none;
22+
border: 1px solid transparent;
23+
padding: 0;
24+
white-space: nowrap;
2525
}
2626

2727
.rw-rtl {
@@ -30,10 +30,10 @@
3030

3131
.rw-input {
3232
color: @input-color;
33-
height: @input-height;
34-
line-height: @input-height;
35-
padding: @input-padding;
36-
//text-indent: 0.64em;
33+
height: @input-height;
34+
line-height: @input-height;
35+
padding: @input-padding;
36+
//text-indent: 0.64em;
3737

3838
&[disabled] {
3939
.state-disabled();
@@ -106,7 +106,7 @@
106106

107107
ul.rw-list,
108108
ul.rw-selectlist {
109-
.list-unstyled();
109+
.list-unstyled();
110110
padding: 5px 0;
111111
overflow: auto;
112112
outline: 0;

‎lib/less/normalize.less

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,26 +40,26 @@ input.rw-input::-moz-focus-inner {
4040

4141

4242
.rw-sr {
43-
position: absolute;
44-
width: 1px;
45-
height: 1px;
46-
margin: -1px;
47-
padding: 0;
48-
overflow: hidden;
49-
clip: rect(0,0,0,0);
50-
border: 0;
43+
position: absolute;
44+
width: 1px;
45+
height: 1px;
46+
margin: -1px;
47+
padding: 0;
48+
overflow: hidden;
49+
clip: rect(0,0,0,0);
50+
border: 0;
5151
}
5252

5353
.rw-widget {
54-
&,
55-
& * {
56-
.box-sizing(border-box);
57-
}
54+
&,
55+
& * {
56+
.box-sizing(border-box);
57+
}
5858

59-
&:before,
60-
& *:before,
61-
&:after,
62-
& *:after, {
63-
.box-sizing(border-box);
64-
}
59+
&:before,
60+
& *:before,
61+
&:after,
62+
& *:after, {
63+
.box-sizing(border-box);
64+
}
6565
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-widgets",
3-
"version": "2.2.1",
3+
"version": "2.2.2",
44
"description": "React widgets",
55
"main": "index.js",
66
"author": {

‎src/Multiselect.jsx

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ var propTypes = {
6363
})
6464
};
6565

66-
var Select = React.createClass({
66+
var Multiselect = React.createClass({
6767

68-
displayName: 'Select',
68+
displayName: 'Multiselect',
6969

7070
mixins: [
7171
require('./mixins/WidgetMixin'),
@@ -124,11 +124,14 @@ var Select = React.createClass({
124124
className
125125
, children
126126
, ...props } = _.omit(this.props, Object.keys(propTypes))
127+
127128
, listID = this._id('_listbox')
128129
, optID = this._id('_option')
129130
, items = this._data()
130131
, values = this.state.dataItems
131-
, List = this.props.listComponent || (this.props.groupBy && GroupableList) || PlainList;
132+
133+
, List = this.props.listComponent || (this.props.groupBy && GroupableList) || PlainList
134+
, listProps = _.pick(this.props, Object.keys(List.type.propTypes));
132135

133136
return (
134137
<div {...props}
@@ -179,7 +182,9 @@ var Select = React.createClass({
179182
<Popup open={this.props.open} onRequestClose={this.close} duration={this.props.duration}>
180183
<div>
181184
<List ref="list"
182-
{..._.pick(this.props, Object.keys(List.type.propTypes))}
185+
{...listProps}
186+
readOnly={!!listProps.readOnly}
187+
disabled={!!listProps.disabled}
183188
id={listID}
184189
optID={optID}
185190
aria-autocomplete='list'
@@ -232,7 +237,10 @@ var Select = React.createClass({
232237
clearTimeout(this.timer)
233238

234239
this.timer = setTimeout(() => {
235-
if( focused) this.refs.input.focus()
240+
if( focused) {
241+
this.refs.input.focus()
242+
this.open()
243+
}
236244
else {
237245
this.close()
238246
this.refs.tagList && this.refs.tagList.clear()
@@ -241,7 +249,6 @@ var Select = React.createClass({
241249
if( focused !== this.state.focused){
242250
this.notify(focused ? 'onFocus' : 'onBlur', e)
243251
this.setState({ focused: focused })
244-
this.open()
245252
}
246253
})
247254
},
@@ -390,7 +397,7 @@ var Select = React.createClass({
390397
})
391398

392399

393-
module.exports = controlledInput.createControlledClass(Select
400+
module.exports = controlledInput.createControlledClass(Multiselect
394401
, { open: 'onToggle', value: 'onChange', searchTerm: 'onSearch' }
395402
, { onChange: defaultChange, onCreate: defaultChange });
396403

@@ -400,4 +407,4 @@ function defaultChange(){
400407
this.setState({ searchTerm: '' })
401408
}
402409

403-
module.exports.BaseMultiselect = Select
410+
module.exports.BaseMultiselect = Multiselect

‎test/multiselect.jsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,19 @@ describe('Multiselect', function(){
5151
}, 0)
5252
})
5353

54-
it('should open when clicked', function(done){
54+
it('should open when focused', function(done){
5555
var select = render(<Select defaultValue={['jimmy']} data={dataList} duration={0}/>);
5656
var popup = findType(select, require('../src/Popup.jsx'))
5757

58-
trigger.click(findClass(select, 'rw-multiselect-wrapper').getDOMNode())
58+
trigger.focus(select.getDOMNode())
5959

6060
setTimeout(function() {
6161
expect(select.state.open).to.be(true)
6262
expect(select.getDOMNode().className).to.match(/\brw-open\b/)
6363
expect(findClass(select, 'rw-input').getDOMNode().getAttribute('aria-expanded')).to.be('true')
6464
expect(popup.props.open).to.be(true)
6565
done()
66-
}, 0)
66+
})
6767
})
6868

6969
it('should remove tag when clicked', function(){
@@ -156,7 +156,6 @@ describe('Multiselect', function(){
156156
trigger.click(tags.children[1].children[1]) // click button
157157

158158
setTimeout(function() {
159-
expect(select.state.open).to.be(true)
160159
expect(tags.children.length).to.be(2)
161160
done()
162161
}, 0)
@@ -184,16 +183,14 @@ describe('Multiselect', function(){
184183
, tags = findType(select, TagList).getDOMNode();
185184

186185
expect(tags.children.length).to.be(2)
186+
expect(tags.children[1].className).to.match(/\brw-state-readonly\b/);
187187

188188
trigger.click(tags.children[1].children[1]) // click button
189189

190190
setTimeout(function() {
191-
expect(select.state.open).to.be(true)
192191
expect(tags.children.length).to.be(2)
193-
expect(select.getDOMNode().className).to.match(/\brw-state-focus\b/)
194-
195192
done()
196-
}, 10)
193+
})
197194
})
198195

199196
it('should call Select handler', function(done){

0 commit comments

Comments
 (0)