Skip to content

Commit 656df32

Browse files
committed
merge SelectList updates from 2.0 Branch
1 parent d922978 commit 656df32

File tree

7 files changed

+162
-109
lines changed

7 files changed

+162
-109
lines changed

docs/components/examples/selectlist.jsx

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
1-
/**
2-
* @jsx React.DOM
3-
*/
4-
1+
'use strict';
52
var React = require('react')
63
, Button = require('react-bootstrap/Button')
7-
, buttonGroup = require('react-bootstrap/ButtonGroup')
8-
, RW = require('../../../index')
9-
, SelectList = RW.SelectList
10-
, NumberPicker = RW.NumberPicker;
11-
12-
var valueComp = React.createClass({
13-
render: function() {
14-
return (<span><i className='fa fa-comment'></i>{ ' ' + this.props.item.label }</span>)
15-
}
16-
});
17-
18-
var itemComp = React.createClass({
19-
render: function() {
20-
var icons = ['bicycle', 'area-chart', 'anchor']
21-
22-
this._icon || (this._icon = icons[_.random(0, 2)])
23-
return (
24-
<div>
25-
<i className={'fa fa-' + this._icon}></i>
26-
{ ' ' + this.props.item.label}
27-
</div>
28-
);
29-
}
30-
});
31-
4+
, ButtonGroup = require('react-bootstrap/ButtonGroup')
5+
, RW = require('../../../index');
6+
// var valueComp = React.createClass({
7+
// render: function() {
8+
// return (<span><i className='fa fa-comment'></i>{ ' ' + this.props.item.label }</span>)
9+
// }
10+
// });
11+
12+
// var itemComp = React.createClass({
13+
// render: function() {
14+
// var icons = ['bicycle', 'area-chart', 'anchor']
15+
16+
// this._icon || (this._icon = icons[getRandomInt(0, 2)])
17+
// return (
18+
// <div>
19+
// <i className={'fa fa-' + this._icon}></i>
20+
// { ' ' + this.props.item.label}
21+
// </div>
22+
// );
23+
// }
24+
// });
25+
26+
// function getRandomInt(min, max) {
27+
// return Math.floor(Math.random() * (max - min + 1)) + min;
28+
// }
29+
30+
var list = [
31+
{ label: 'orange', id: 1 },
32+
{ label: 'blue', id: 2 },
33+
{ label: 'red', id: 3 },
34+
{ label: 'maroon', id: 4 },
35+
{ label: 'purple', id: 5 },
36+
{ label: 'mauve', id: 6 },
37+
];
3238

3339
var DropdownApi = React.createClass({
3440

@@ -40,27 +46,19 @@ var DropdownApi = React.createClass({
4046
},
4147

4248
render: function() {
43-
var disabled = this.state.disabled === true || _.isArray(this.state.disabled);
44-
var list = [
45-
{ label: 'orange', id: 1 },
46-
{ label: 'blue', id: 2 },
47-
{ label: 'red', id: 3 },
48-
{ label: 'maroon', id: 4 },
49-
{ label: 'purple', id: 5 },
50-
{ label: 'mauve', id: 6 },
51-
];
49+
var disabled = this.state.disabled === true || Array.isArray(this.state.disabled);
5250

5351
return (
5452
<div className='example'>
5553
<div className='row'>
5654
<div className='col-sm-8 demo'>
5755
<div className='form-group'>
58-
<SelectList
56+
<RW.SelectList
5957
disabled={disabled ? this.state.disabled : false}
6058
readOnly={this.state.disabled === 'readonly'}
61-
value={this.state.value || 1}
59+
value={this.state.value}
6260
data={list}
63-
busy={this.state.multiple}
61+
multiple={this.state.multiple}
6462
busy={this.state.busy}
6563
onChange={this._change}
6664
isRtl={this.state.isRtl}
@@ -87,7 +85,7 @@ var DropdownApi = React.createClass({
8785
</label>
8886
</div>
8987
<div className='form-group'>
90-
<buttonGroup>
88+
<ButtonGroup>
9189
<Button
9290
active={this.state.disabled === 'disabled'}
9391
onClick={this.disabled}>
@@ -98,7 +96,7 @@ var DropdownApi = React.createClass({
9896
onClick={this.readOnly}>
9997
Readonly
10098
</Button>
101-
</buttonGroup>
99+
</ButtonGroup>
102100
<Button style={{ marginLeft: 10 }}
103101
active={this.state.busy}
104102
onClick={_.partial(this._set, 'busy', !this.state.busy)}>
@@ -108,13 +106,12 @@ var DropdownApi = React.createClass({
108106
<div className='form-group'>
109107
<label className='form-label'>Disable Values</label>
110108
<RW.Select
111-
value={ _.isArray(this.state.disabled) ? this.state.disabled : [] }
112-
data={allVals}
109+
value={ Array.isArray(this.state.disabled) ? this.state.disabled : [] }
110+
data={list}
113111
textField='label'
114112
valueField='id'
115113
disabled={this.state.disabled === true}
116-
messages={{ emptyList: "no values selected to the right"}}
117-
onChange={_.partial(this._set, 'disabled')}/>
114+
onChange={this._set.bind(null, 'disabled')}/>
118115
</div>
119116
</div>
120117
</div>

docs/components/pages/GettingStarted.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ var GettingStarted = React.createClass({
4141
which offer a quick way to display complex data structures.
4242
</p>
4343

44-
<h2>Install</h2>
44+
<h2 id='intro/install' className='prop-header'>Install <a/></h2>
4545
<p>
4646
The prefered way is to use NPM <code>npm install react-widgets</code> and make use of something like Webpack or
4747
Browserify to bundle the lib.
@@ -58,7 +58,7 @@ var GettingStarted = React.createClass({
5858
As of 1.1.0 the package comes precompiled, and no build step is needed.
5959
</strong>
6060

61-
<h2>External Dependencies</h2>
61+
<h2 id='intro/deps' className='prop-header'>External Dependencies</h2>
6262
<p>
6363
React-widgets is compatible with <code>React</code> 0.9.0+, and expects it to be bundled.
6464
Comsumers of the NPM package should note that React is not listed as direct, or peer dependency. This is help
@@ -77,7 +77,7 @@ var GettingStarted = React.createClass({
7777
</li>
7878
</ul>
7979
</p>
80-
<h3>Older Browser Support</h3>
80+
<h2 id='intro/browser'>Older Browser Support</h2>
8181
<p>
8282
Moving forward react-widgets is working to reduce dependence on external utility-belt libraries in favor of
8383
using polyfills for older, non es5 compliant, browsers. For consumers supporting older browsers you will already
@@ -87,7 +87,7 @@ var GettingStarted = React.createClass({
8787
</a>
8888
</p>
8989

90-
<h2>Accessibility and Read Direction</h2>
90+
<h2 id='intro/access' className='prop-header'>Accessibility and Read Direction</h2>
9191
<p>
9292
React-widgets tries to be as inclusive and wide reaching as possible. Along with an included solution for
9393
date and number localization, there is first class support for cultures and languages that read
@@ -101,7 +101,7 @@ var GettingStarted = React.createClass({
101101
the necessary id's to properly label and annotate the widget ARIA.
102102
</p>
103103

104-
<h2>Styling</h2>
104+
<h2 id='intro/style' className='prop-header'>Styling</h2>
105105
<p>
106106
Styling each widget should be a simple matter of adjusting the relevant LESS variables to suit your needs.
107107
Included by default is a "Twitter Bootstrap" theme that mimics the look and feel of Twitter Bootstrap 3.0.

docs/components/pages/SelectList.jsx

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
/**
2-
* @jsx React.DOM
3-
*/
4-
1+
'use strict';
52
var React = require('react')
63
, Default = require('../default.jsx')
74
, Example = require('../example.jsx')
85
, MenuItem = require('react-bootstrap/MenuItem')
96
, DDButton = require('react-bootstrap/DropdownButton')
10-
, DropdownListExample = require('../examples/selectlist.jsx');
7+
, SelectListExample = require('../examples/selectlist.jsx');
118

129
var prefix = 'selectlist/'
1310
var widgetName = 'SelectList'
1411
var SelectList = React.createClass({
1512

1613
render: function() {
17-
return this.transferPropsTo(
18-
<section>
14+
return (
15+
<section {...this.props}>
1916
<h1 className="page-header">
2017
Select List
2118
<span className='pull-right'>
@@ -29,7 +26,10 @@ var SelectList = React.createClass({
2926
<MenuItem href={'#' + prefix + 'itemComponent'}>itemComponent</MenuItem>
3027

3128
<MenuItem href={'#' + prefix + 'multiple'}>multiple</MenuItem>
29+
<MenuItem href={'#' + prefix + 'onMove'}>onMove</MenuItem>
3230
<MenuItem href={'#' + prefix + 'busy'}>busy</MenuItem>
31+
<MenuItem href={'#' + prefix + 'disabled'}>disabled</MenuItem>
32+
<MenuItem href={'#' + prefix + 'readonly'}>readonly</MenuItem>
3333

3434
<MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
3535
<MenuItem divider={true}></MenuItem>
@@ -40,7 +40,7 @@ var SelectList = React.createClass({
4040
<p>
4141
Creates a list of radio buttons or checkboxes bound to a {'set'} of data.
4242
</p>
43-
<DropdownListExample/>
43+
<SelectListExample/>
4444
<Example code={
4545
"render: function(){\n"+
4646
" var SelectList = require('react-widgets').SelectList\n"+
@@ -114,21 +114,34 @@ var SelectList = React.createClass({
114114
</h3>
115115
<p>
116116
Whether or not the {widgetName} allows multiple selection or not. when <code>false</code> the {widgetName} will
117-
render as a list of radio buttonsand checkboxes when <code>true</code>.
117+
render as a list of radio buttons, and checkboxes when <code>true</code>.
118118
</p>
119119

120+
<h3 className='prop-header' id={ prefix +"onMove" }>
121+
onMove <small>{"Function(HTMLElement)"}</small></h3>
122+
<p>
123+
A handler called when focus shifts on the {widgetName}. Internally this is used to ensure the focused item is in view.
124+
If you want to define your own "scrollTo" behavior or just disable the default one specify an <code>onMove</code> handler.
125+
</p>
120126

121127
<h3 className='prop-header' id={ prefix +"busy" }>
122128
busy <small>Boolean</small></h3>
123129
<p>
124130
mark whether the widget is in a busy or loading state. If <code>true</code> the widget will display a spinner gif, useful
125131
when loading data via an ajax call.
126132
</p>
127-
<h3 className='prop-header' id={ prefix +"duration" }>
128-
duration <small>Number<Default>250</Default></small></h3>
133+
<h3 className='prop-header' id={ prefix +"disabled" }>
134+
disabled <small>[Boolean, Array]</small></h3>
129135
<p>
130-
The speed, in milliseconds, of the dropdown animation.
136+
Disable the widget, if an <code>Array</code> of values is passed in only those values will be disabled.
131137
</p>
138+
139+
<h3 className='prop-header' id={ prefix + "readOnly" }>
140+
readOnly <small>[Boolean, Array]</small></h3>
141+
<p>
142+
Place the {widgetName} in a readonly mode, If an <code>Array</code> of values is passed in only those values will be readonly.
143+
</p>
144+
132145
<h3 className='prop-header' id={ prefix +"isRtl" }>
133146
isRtl <small>Boolean<Default>false</Default></small></h3>
134147
<p>

lib/select/SelectList.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ var React = require('react')
77
, mergeIntoProps = require('../util/transferProps').mergeIntoProps;
88

99
var propTypes = {
10+
<<<<<<< HEAD:lib/select/SelectList.js
1011
data: React.PropTypes.array,
1112
value: React.PropTypes.oneOfType([
1213
React.PropTypes.any,
@@ -16,6 +17,18 @@ var propTypes = {
1617

1718
multiple: React.PropTypes.bool,
1819
itemComponent: React.PropTypes.func,
20+
=======
21+
data: React.PropTypes.array,
22+
value: React.PropTypes.oneOfType([
23+
React.PropTypes.any,
24+
React.PropTypes.array
25+
]),
26+
onChange: React.PropTypes.func,
27+
onMove: React.PropTypes.func,
28+
29+
multiple: React.PropTypes.bool,
30+
itemComponent: CustomPropTypes.elementType,
31+
>>>>>>> e10cae4... select list:lib/SelectList.js
1932

2033
valueField: React.PropTypes.string,
2134
textField: React.PropTypes.string,
@@ -331,4 +344,4 @@ var SelectListItem = React.createClass({displayName: 'SelectListItem',
331344

332345
})
333346

334-
module.exports = CheckboxList;
347+
module.exports = CheckboxList;

src/less/core.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
}
138138

139139
ul.rw-list,
140-
ul.rw-checkboxlist {
140+
ul.rw-selectlist {
141141
.list-unstyled();
142142
padding: 5px 0;
143143
overflow: auto;

src/less/selectlist.less

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,48 @@
33
padding: 2px;
44
}
55

6-
.rw-checkboxlist > ul {
7-
height: 100%;
86

9-
overflow: auto;
10-
11-
> li {
12-
13-
&.rw-selectlist-item {
14-
position: relative;
15-
min-height: 27px;
16-
cursor: auto;
17-
padding-left: 5px;
18-
19-
> label > input {
20-
position: absolute;
21-
margin: 4px 0 0 -20px;
22-
}
23-
24-
> label {
25-
padding-left: 20px;
26-
line-height: 1.423em;
27-
display: inline-block;
7+
.rw-selectlist {
8+
9+
> ul {
10+
height: 100%;
11+
overflow: auto;
12+
13+
> li {
14+
15+
&.rw-selectlist-item {
16+
position: relative;
17+
min-height: 27px;
18+
cursor: auto;
19+
padding-left: 5px;
20+
21+
> label > input {
22+
position: absolute;
23+
margin: 4px 0 0 -20px;
24+
}
25+
26+
> label {
27+
padding-left: 20px;
28+
line-height: 1.423em;
29+
display: inline-block;
30+
}
2831
}
2932
}
3033
}
34+
35+
&.rw-rtl > ul > li.rw-selectlist-item {
36+
padding-left: 0;
37+
padding-right: 5px;
38+
39+
> label > input {
40+
margin: 4px -20px 0 0px;
41+
}
42+
43+
> label {
44+
padding-left: 0;
45+
padding-right: 20px;
46+
}
47+
}
3148
}
3249

3350
.rw-checkboxlist {

0 commit comments

Comments
 (0)