fixes #24

wow, numberpicker-input was relying on lodash but it wasn't required

Author: jquense

browser/react-widgets.js

@@ -47,10 +47,10 @@ var Docs = React.createClass({
             <div className='nav-aside'>
               <Nav className='side-nav' onSelect={this.handleNavItemSelect}>
                 <NavItem key={0} href='#intro' active={href === '#intro' }>Getting Started</NavItem>
-                <NavItem key={1} href='#dropdown-list' active={ href === '#dropdown-list' }>Dropdown List</NavItem>
+                <NavItem key={1} href='#dropdownlist' active={ href === '#dropdownlist' }>Dropdown List</NavItem>
                 <NavItem key={2} href='#combobox' active={href === '#combobox'}>Combobox</NavItem>
                 <NavItem key={6} href='#number-picker' active={href === '#number-picker' }>Number Picker</NavItem>
-                <NavItem key={3} href='#select-list' active={href === '#select-list'}>Select</NavItem>
+                <NavItem key={3} href='#multiselect' active={href === '#multiselect'}>Select</NavItem>
                 <NavItem key={4} href='#calendar' active={href === '#calendar'}>Calendar</NavItem>
                 <NavItem key={5} href='#date-picker' active={href === '#date-picker'}>Date {' & '} Time Picker</NavItem>
               </Nav>
@@ -63,10 +63,10 @@ var Docs = React.createClass({
 
             <NumberPicker className={cx({"tab-pane": true, "active": href === '#number-picker' })}/>
             <Select className={cx({"tab-pane": true, "active": href === '#multiselect' })}/>
-            {/*<SelectList className={cx({"tab-pane": true, "active": href === '#selectlist' })}/>*/}
-
+          
             <Calendar className={cx({"tab-pane": true, "active": href === '#calendar' })}/>
             <DatePicker className={cx({"tab-pane": true, "active": href === '#date-picker' })}/>
+            
             <div className='clearfix'style={{ marginTop: 20 }}>
               { locations.indexOf(href) > 0 && 
                 <button type='button' className='btn btn-link pull-left' onClick={this.prev}>« prev</button>
@@ -75,6 +75,7 @@ var Docs = React.createClass({
                 <button type='button' className='btn btn-link pull-right' onClick={this.next}>next »</button>
               }
             </div>
+            {/*<SelectList className={cx({"tab-pane": true, "active": href === '#selectlist' })}/>*/}
           </article>
         </div>
       </div>

docs/components/docs.jsx

@@ -37,7 +37,7 @@ var NumberPicker = React.createClass({
 
         </h1>
         <p>
-          Select an item from the list, or input a custom value. The vombobox can also make suggestions as you type
+          Spinner for selecting numbers. Supports multiple formats for display and editing through Globalize.js
         </p>
         <NumberPickerExample/>
         <Example code={
@@ -47,8 +47,8 @@ var NumberPicker = React.createClass({
           "    <NumberPicker \n"+
           "      value={this.state.value}\n"+
           "      onChange={this._change}\n"+
-          "      min='2'\n"+
-          "      max='10'/>\n\n"+
+          "      min={2}\n"+
+          "      max={10}/>\n\n"+
           "    <NumberPicker \n"+
           "      format='c'\n" +
           "      step={1.5}/>\n\n"+

docs/components/pages/NumberPicker.jsx

@@ -10,6 +10,18 @@ var CheckboxList = require('../src/select/SelectList.jsx')
 var chance = new (require('chance'))
 //var _ = require('lodash')
 
+function test(...args){
+  console.log(args)
+}
+
+function test2(first, sec, ...args){
+  console.log(first, sec, args)
+}
+
+test(1,2,3,5)
+test2(1,2,3,5)
+
+
 var ListItem = React.createClass({
 
   render: function(){
@@ -72,6 +84,13 @@ var App = React.createClass({
 
             onChange={change.bind(null, 'selectValues')}/>
         </section>
+        <section className="example" style={{ marginBottom: 20 }}>
+          <NumberPicker id='AwesomeNumPicker'
+            isRtl={false}
+            format="D"
+            value={this.state.numberValue}
+            onChange={change.bind(null, 'numberValue')}/>
+        </section>
         {/* 
           <section className="example" style={{ marginBottom: 20 }}>
             <DropdownList

example/example.jsx

@@ -0,0 +1,19 @@
+/**
+ *  React.DOM
+ */
+
+var React = require('react');
+
+var BusyOverlay = React.createClass({displayName: 'BusyOverlay',
+
+  render: function() {
+    return (
+      React.DOM.div({className: "rw-loading-mask"}, 
+        React.DOM.div({className: "rw-loading-backdrop"}), 
+        React.DOM.div({className: "rw-loading-image"})
+      ) 
+    );
+  }
+});
+
+module.exports = BusyOverlay;

lib/common/busy-overlay.js

@@ -72,7 +72,6 @@ module.exports = React.createClass({
     var emptyList   = React.DOM.li(null,  this.props.messages.emptyList)
       , emptyFilter = React.DOM.li(null,  this.props.messages.emptyFilter)
       , items;
-
 
     items = _.map(this.props.data, function(item, idx){
       var focused = this.props.focusedIndex === idx;

lib/common/list.js

@@ -114,6 +114,7 @@ var DropdownList = React.createClass({
            onBlur: _.partial(this._focus, false), 
            'aria-expanded':  this.props.open, 
            'aria-haspopup': true, 
+           'aria-busy': !!this.props.busy, 
            'aria-activedescendent':  this.props.open ? optID : undefined, 
            'aria-disabled':  this.props.disabled, 
            'aria-readonly':  this.props.readOnly, 
@@ -207,7 +208,7 @@ var DropdownList = React.createClass({
     else if ( key === 'Escape' && isOpen ) {
       this.close()
     }
-    else if ( key === 'Enter' && isOpen ) {
+    else if ( (key === 'Enter' || key === ' ') && isOpen ) {
       change(this.state.focusedIndex)
     }
     else if ( key === 'ArrowDown' ) {

lib/dropdowns/dropdown-list.js

@@ -8,7 +8,7 @@ var React  = require('react')
 
 
 
-module.exports = function(stateKey) {
+module.exports = function(stateKey, disabled) {
   var methodName = stateKey.charAt(0).toUpperCase() + stateKey.substr(1)
 
     , ifValueChanges = compose.provided(function(props){
@@ -31,30 +31,38 @@ module.exports = function(stateKey) {
 
   mixin['set' + methodName] = fluent(setIndex)
 
-  mixin['prev' + methodName] = function(){
+  mixin['prev' + methodName] = function(nextIdx){
     var data = this._data()
-      , nextIdx = this.state && this.state[stateKey] || 0;
+      , stateIdx = this.state && this.state[stateKey] || 0;
+    
+    nextIdx = (nextIdx === undefined ? stateIdx : nextIdx) -1;
 
-    nextIdx -= 1
+    while( nextIdx > -1 && isDisabled(this, data[nextIdx])) nextIdx--
 
-    if ( nextIdx < 0 )
-      nextIdx = 0
+    if ( nextIdx < 0 ) 
+      nextIdx = disabled ? -1 : 0
 
     return nextIdx;
   }
 
-  mixin['next' + methodName] = function(){
+  mixin['next' + methodName] = function(nextIdx){
     var data = this._data()
-      , nextIdx = this.state && this.state[stateKey] || 0;
+      , stateIdx = this.state && this.state[stateKey] || 0;
+
+    nextIdx = (nextIdx === undefined ? stateIdx : nextIdx) + 1
 
-    nextIdx += 1
+    while( nextIdx < data.length && isDisabled(this, data[nextIdx])) nextIdx++
 
     if ( nextIdx >= data.length )
-      nextIdx = data.length -1;
+      nextIdx = disabled ? -1 : data.length - 1;
 
     return nextIdx;
   }
 
+  function isDisabled(ctx, item){
+    return disabled && ctx[disabled](item)
+  }
+
   return mixin;
 }
 

lib/mixins/DataIndexStateMixin.js

@@ -33,7 +33,7 @@ module.exports = {
         , self    = this;
 
       return _.findIndex(self._data(), function(item, i) { 
-        return i != current
+        return i >= current
             && matcher(
                 helper._dataText.call(self, item).toLowerCase()
               , word.toLowerCase())

lib/mixins/TextSearchMixin.js

@@ -58,7 +58,7 @@ var NumberPicker = React.createClass({
 
   getDefaultProps: function(){
     return {
-      value: '',
+      value: null,
       open: false,
 
       format: 'd',
@@ -135,8 +135,8 @@ var NumberPicker = React.createClass({
           role: "spinbutton", 
           min: this.props.min, 
           'aria-valuenow': val, 
-          'aria-valuemin': _.isFinite(this.props.min) ? this.props.min : '', 
-          'aria-valuemax': _.isFinite(this.props.max) ? this.props.max : '', 
+          'aria-valuemin': _.isFinite(this.props.min) ? this.props.min : null, 
+          'aria-valuemax': _.isFinite(this.props.max) ? this.props.max : null, 
           'aria-disabled':  this.props.disabled, 
           'aria-readonly':  this.props.readonly, 
           disabled: this.props.disabled, 
@@ -220,18 +220,20 @@ var NumberPicker = React.createClass({
   },
 
   change: function(val){
-    val = this.inRangeValue(val)
+    val = this.inRangeValue(val === '' ? null : val)
+    
     if ( this.props.value !== val )
       this.notify('onChange', val)
   },
 
   inRangeValue: function(value){
-    if( !_.isFinite(this.props.min) && value == null || value === '' )
+    var max = this.props.max == null ? Infinity : this.props.max
+      , min = this.props.min == null ? -Infinity : this.props.min;
+
+    if( value == null )
       return value
 
-    return Math.max(
-        Math.min(value, this.props.max)
-      , this.props.min)
+    return Math.max(Math.min(value, max), min)
   }
 
 })