merge SelectList updates from 2.0 Branch

Author: jquense

docs/components/examples/selectlist.jsx

@@ -1,34 +1,40 @@
-/**
- * @jsx React.DOM
- */
-
+'use strict';
 var React = require('react')
   , Button = require('react-bootstrap/Button')
-  , buttonGroup = require('react-bootstrap/ButtonGroup')
-  , RW = require('../../../index')
-  , SelectList = RW.SelectList
-  , NumberPicker = RW.NumberPicker;
-
-var valueComp = React.createClass({
-  render: function() {
-    return (<span><i className='fa fa-comment'></i>{ '  ' + this.props.item.label }</span>)
-  }
-});
-
-var itemComp = React.createClass({
-  render: function() {
-    var icons =  ['bicycle', 'area-chart', 'anchor']
-
-    this._icon || (this._icon = icons[_.random(0, 2)])
-    return (
-      <div>
-        <i className={'fa fa-' + this._icon}></i>
-        { '  ' + this.props.item.label}
-      </div>
-    );
-  }
-});
-
+  , ButtonGroup = require('react-bootstrap/ButtonGroup')
+  , RW = require('../../../index');
+// var valueComp = React.createClass({
+//   render: function() {
+//     return (<span><i className='fa fa-comment'></i>{ '  ' + this.props.item.label }</span>)
+//   }
+// });
+
+// var itemComp = React.createClass({
+//   render: function() {
+//     var icons =  ['bicycle', 'area-chart', 'anchor']
+
+//     this._icon || (this._icon = icons[getRandomInt(0, 2)])
+//     return (
+//       <div>
+//         <i className={'fa fa-' + this._icon}></i>
+//         { '  ' + this.props.item.label}
+//       </div>
+//     );
+//   }
+// });
+
+// function getRandomInt(min, max) {
+//   return Math.floor(Math.random() * (max - min + 1)) + min;
+// }
+
+var list = [
+        { label: 'orange', id: 1 },
+        { label: 'blue',   id: 2 },
+        { label: 'red',    id: 3 },
+        { label: 'maroon', id: 4 },
+        { label: 'purple', id: 5 },
+        { label: 'mauve',  id: 6 },
+      ];
 
 var DropdownApi = React.createClass({
 
@@ -40,27 +46,19 @@ var DropdownApi = React.createClass({
   },
 
   render: function() {
-    var disabled = this.state.disabled === true || _.isArray(this.state.disabled);
-    var list = [
-        { label: 'orange', id: 1 },
-        { label: 'blue', id: 2 },
-        { label: 'red', id: 3 },
-        { label: 'maroon', id: 4 },
-        { label: 'purple', id: 5 },
-        { label: 'mauve', id: 6 },
-      ];
+    var disabled = this.state.disabled === true || Array.isArray(this.state.disabled);
 
     return (
       <div className='example'>
         <div className='row'>
           <div className='col-sm-8 demo'>
             <div className='form-group'>
-              <SelectList 
+              <RW.SelectList 
                 disabled={disabled ? this.state.disabled : false}
                 readOnly={this.state.disabled === 'readonly'}
-                value={this.state.value || 1}
+                value={this.state.value}
                 data={list}
-                busy={this.state.multiple}
+                multiple={this.state.multiple}
                 busy={this.state.busy}
                 onChange={this._change}
                 isRtl={this.state.isRtl}
@@ -87,7 +85,7 @@ var DropdownApi = React.createClass({
               </label>
             </div>
             <div className='form-group'>
-              <buttonGroup>
+              <ButtonGroup>
                 <Button
                   active={this.state.disabled === 'disabled'}
                   onClick={this.disabled}>
@@ -98,7 +96,7 @@ var DropdownApi = React.createClass({
                   onClick={this.readOnly}>
                   Readonly
                 </Button>
-              </buttonGroup>
+              </ButtonGroup>
               <Button style={{ marginLeft: 10 }}
                 active={this.state.busy}
                 onClick={_.partial(this._set, 'busy', !this.state.busy)}>
@@ -108,13 +106,12 @@ var DropdownApi = React.createClass({
             <div className='form-group'>
               <label className='form-label'>Disable Values</label>
               <RW.Select 
-                  value={ _.isArray(this.state.disabled) ? this.state.disabled : [] } 
-                  data={allVals}
+                  value={ Array.isArray(this.state.disabled) ? this.state.disabled : [] } 
+                  data={list}
                   textField='label'
                   valueField='id'
                   disabled={this.state.disabled === true}
-                  messages={{ emptyList: "no values selected to the right"}}
-                  onChange={_.partial(this._set, 'disabled')}/>
+                  onChange={this._set.bind(null, 'disabled')}/>
             </div>
           </div>
         </div>

docs/components/pages/GettingStarted.jsx

@@ -41,7 +41,7 @@ var GettingStarted = React.createClass({
           which offer a quick way to display complex data structures.
         </p>
 
-        <h2>Install</h2>
+        <h2 id='intro/install' className='prop-header'>Install <a/></h2>
         <p>
           The prefered way is to use NPM <code>npm install react-widgets</code> and make use of something like Webpack or
           Browserify to bundle the lib.
@@ -58,7 +58,7 @@ var GettingStarted = React.createClass({
           As of 1.1.0 the package comes precompiled, and no build step is needed.
         </strong>
 
-        <h2>External Dependencies</h2>
+        <h2 id='intro/deps' className='prop-header'>External Dependencies</h2>
         <p>
           React-widgets is compatible with <code>React</code> 0.9.0+, and expects it to be bundled.
           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({
             </li>
           </ul>
         </p>
-        <h3>Older Browser Support</h3>
+        <h2 id='intro/browser'>Older Browser Support</h2>
         <p>
           Moving forward react-widgets is working to reduce dependence on external utility-belt libraries in favor of 
           using polyfills for older, non es5 compliant, browsers. For consumers supporting older browsers you will already
@@ -87,7 +87,7 @@ var GettingStarted = React.createClass({
           </a>
         </p>
 
-        <h2>Accessibility and Read Direction</h2>
+        <h2 id='intro/access' className='prop-header'>Accessibility and Read Direction</h2>
         <p>
           React-widgets tries to be as inclusive and wide reaching as possible. Along with an included solution for
           date and number localization, there is first class support for cultures and languages that read
@@ -101,7 +101,7 @@ var GettingStarted = React.createClass({
           the necessary id's to properly label and annotate the widget ARIA.
         </p>
 
-        <h2>Styling</h2>
+        <h2 id='intro/style' className='prop-header'>Styling</h2>
         <p>
           Styling each widget should be a simple matter of adjusting the relevant LESS variables to suit your needs.
           Included by default is a "Twitter Bootstrap" theme that mimics the look and feel of Twitter Bootstrap 3.0.

docs/components/pages/SelectList.jsx

@@ -1,21 +1,18 @@
-/**
- * @jsx React.DOM
- */
-
+'use strict';
 var React = require('react')
   , Default = require('../default.jsx')
   , Example = require('../example.jsx')
   , MenuItem = require('react-bootstrap/MenuItem')
   , DDButton = require('react-bootstrap/DropdownButton')
-  , DropdownListExample = require('../examples/selectlist.jsx');
+  , SelectListExample = require('../examples/selectlist.jsx');
 
 var prefix = 'selectlist/'
 var widgetName = 'SelectList'
 var SelectList = React.createClass({
 
   render: function() {
-    return this.transferPropsTo(
-      <section>
+    return (
+      <section {...this.props}>
         <h1 className="page-header">
           Select List
           <span className='pull-right'>
@@ -29,7 +26,10 @@ var SelectList = React.createClass({
               <MenuItem href={'#' + prefix + 'itemComponent'}>itemComponent</MenuItem>
 
               <MenuItem href={'#' + prefix + 'multiple'}>multiple</MenuItem>
+              <MenuItem href={'#' + prefix + 'onMove'}>onMove</MenuItem>
               <MenuItem href={'#' + prefix + 'busy'}>busy</MenuItem>
+              <MenuItem href={'#' + prefix + 'disabled'}>disabled</MenuItem>
+              <MenuItem href={'#' + prefix + 'readonly'}>readonly</MenuItem>
 
               <MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
               <MenuItem divider={true}></MenuItem>
@@ -40,7 +40,7 @@ var SelectList = React.createClass({
         <p>
           Creates a list of radio buttons or checkboxes bound to a {'set'} of data.
         </p>
-        <DropdownListExample/>
+        <SelectListExample/>
         <Example code={
           "render: function(){\n"+
           "  var SelectList = require('react-widgets').SelectList\n"+
@@ -114,21 +114,34 @@ var SelectList = React.createClass({
         </h3>
         <p>
           Whether or not the {widgetName} allows multiple selection or not. when <code>false</code> the {widgetName} will 
-          render as a list of radio buttonsand checkboxes when <code>true</code>.
+          render as a list of radio buttons, and checkboxes when <code>true</code>.
         </p>
 
+        <h3 className='prop-header' id={ prefix +"onMove" }>
+          onMove <small>{"Function(HTMLElement)"}</small></h3>
+        <p>
+          A handler called when focus shifts on the {widgetName}. Internally this is used to ensure the focused item is in view.
+          If you want to define your own "scrollTo" behavior or just disable the default one specify an <code>onMove</code> handler.
+        </p>
 
         <h3 className='prop-header' id={ prefix +"busy" }>
           busy <small>Boolean</small></h3>
         <p>
           mark whether the widget is in a busy or loading state. If <code>true</code> the widget will display a spinner gif, useful
           when loading data via an ajax call.
         </p>
-        <h3 className='prop-header' id={ prefix +"duration" }>
-          duration <small>Number<Default>250</Default></small></h3>
+        <h3 className='prop-header' id={ prefix +"disabled" }>
+          disabled <small>[Boolean, Array]</small></h3>
         <p>
-          The speed, in milliseconds, of the dropdown animation.
+          Disable the widget, if an <code>Array</code> of values is passed in only those values will be disabled.
         </p>
+
+        <h3 className='prop-header' id={ prefix + "readOnly" }>
+          readOnly <small>[Boolean, Array]</small></h3>
+        <p>
+          Place the {widgetName} in a readonly mode, If an <code>Array</code> of values is passed in only those values will be readonly.
+        </p>
+
         <h3 className='prop-header' id={ prefix +"isRtl" }>
           isRtl <small>Boolean<Default>false</Default></small></h3>
         <p>

lib/select/SelectList.js

@@ -7,6 +7,7 @@ var React = require('react')
   , mergeIntoProps = require('../util/transferProps').mergeIntoProps;
 
 var propTypes = {
+<<<<<<< HEAD:lib/select/SelectList.js
     data:          React.PropTypes.array,
     value:         React.PropTypes.oneOfType([
                     React.PropTypes.any,
@@ -16,6 +17,18 @@ var propTypes = {
 
     multiple:      React.PropTypes.bool,
     itemComponent: React.PropTypes.func,
+=======
+    data:           React.PropTypes.array,
+    value:          React.PropTypes.oneOfType([
+                      React.PropTypes.any,
+                      React.PropTypes.array
+                    ]),
+    onChange:       React.PropTypes.func,
+    onMove:         React.PropTypes.func,
+
+    multiple:       React.PropTypes.bool,
+    itemComponent:  CustomPropTypes.elementType,
+>>>>>>> e10cae4... select list:lib/SelectList.js
 
     valueField:    React.PropTypes.string,
     textField:     React.PropTypes.string,
@@ -331,4 +344,4 @@ var SelectListItem = React.createClass({displayName: 'SelectListItem',
 
 })
 
-module.exports = CheckboxList;
+module.exports = CheckboxList;

src/less/core.less

@@ -137,7 +137,7 @@
 }
 
 ul.rw-list,
-ul.rw-checkboxlist {
+ul.rw-selectlist {
 	.list-unstyled();
   padding: 5px 0;
   overflow: auto;

src/less/selectlist.less

@@ -3,31 +3,48 @@
   padding: 2px;
 }
 
-.rw-checkboxlist > ul {
-  height: 100%;
 
-  overflow: auto;
-
-  > li {
-  
-    &.rw-selectlist-item {
-      position: relative;
-      min-height: 27px;
-      cursor: auto;
-      padding-left: 5px;
-
-      > label > input {
-        position: absolute;
-        margin: 4px 0 0 -20px;
-      }
-   
-      > label {
-        padding-left: 20px;
-        line-height:  1.423em;
-        display: inline-block;
+.rw-selectlist {
+
+  > ul {
+    height: 100%;
+    overflow: auto;
+
+    > li {
+    
+      &.rw-selectlist-item {
+        position: relative;
+        min-height: 27px;
+        cursor: auto;
+        padding-left: 5px;
+
+        > label > input {
+          position: absolute;
+          margin: 4px 0 0 -20px;
+        }
+     
+        > label {
+          padding-left: 20px;
+          line-height:  1.423em;
+          display: inline-block;
+        }
       }
     }
   }
+
+  &.rw-rtl > ul > li.rw-selectlist-item {
+    padding-left: 0;
+    padding-right: 5px;
+
+    > label > input {
+       margin: 4px -20px 0 0px;
+    }
+
+    > label {
+      padding-left: 0;
+      padding-right: 20px;
+    }
+  }
 }
 
 .rw-checkboxlist {