final little tweaks for 1.3.0

jquense · Oct 9, 2014 · 451bad1 · 451bad1
1 parent 1c33502
commit 451bad1
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 44 deletions.
diff --git a/browser/react-widgets.js b/browser/react-widgets.js
diff --git a/docs/components/docs.jsx b/docs/components/docs.jsx
@@ -43,17 +43,17 @@ var Docs = React.createClass({
         <Navbar page={this.props.page}/>
         <div className='container'>
           <aside className='col-sm-3'>
-            <Affix offsetTop={52} className='nav-aside'>
+            <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={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={4} href='#calendar' active={href === '#calendar'}>Calendar</NavItem>
-                <NavItem key={5} href='#date-picker' active={href === '#date-picker'}>Date Picker</NavItem>
+                <NavItem key={5} href='#date-picker' active={href === '#date-picker'}>Date {' & '} Time Picker</NavItem>
               </Nav>
-            </Affix>
+            </div>
           </aside>
           <article className='col-sm-9 tab-content'>
             <GettingStarted className={cx({"tab-pane": true, "active": href === '#intro' })}/>

diff --git a/docs/components/examples/combobox.jsx b/docs/components/examples/combobox.jsx
@@ -97,11 +97,13 @@ module.exports = React.createClass({
               </Button>
             </div>
             <div className='form-group'>
-              <label className='form-label'>Suggest</label>
-              <RW.DropDownlist 
-                  value={this.state.suggest} 
-                  data={[false, true]}
-                  onChange={_.partial(this._set, 'suggest')}/>
+              <label className='form-label'></label>
+              <label className='checkbox-inline'>
+                <input type='checkbox'
+                  checked={this.state.suggest}
+                  onChange={_.partial(this._set, 'suggest', !this.state.suggest)}/>
+                  Suggestions
+              </label>
             </div>
             <div className='form-group'>
               <label className='form-label'>Filter</label>

diff --git a/docs/components/examples/select.jsx b/docs/components/examples/select.jsx
@@ -25,14 +25,7 @@ module.exports = React.createClass({
 
   render: function(){
     var allVals = this.state.value
-      , disabled = this.state.disabled === true || _.isArray(this.state.disabled)
-    // _.map(list, function(){ 
-    //   return this.state.value
-    // })
-    // 
-    console.log(disabled, this.state.disabled)
-
-    //allVals.unshift({ id: false, label: 'none'});
+      , disabled = this.state.disabled === true || _.isArray(this.state.disabled);
 
     return (
       <div className='example'>

diff --git a/docs/docs.css b/docs/docs.css
@@ -78,11 +78,17 @@ h3 > .default {
   max-width: 300px;
 }
 
+.nav-aside {
+  position: fixed;
+  top: 72px;
+}
+
 @media (max-width: 767px) {
   .nav-aside {
     position: static;
   }
 }
+
 pre > code.hljs {
   background: none;
 }

diff --git a/docs/docs.js b/docs/docs.js
diff --git a/lib/dropdowns/combobox.js b/lib/dropdowns/combobox.js
@@ -66,6 +66,7 @@ module.exports = React.createClass({
         , this.props.value)
       , idx = this._dataIndexOf(items, this.props.value);
 
+
 		return {
 			selectedIndex: idx,
       focusedIndex:  idx === -1 ? 0 : idx,
@@ -109,7 +110,6 @@ module.exports = React.createClass({
       , idx = this._dataIndexOf(items, nextProps.value)
       , focused = this.filterIndexOf(items, this._dataText(valueItem));
 
-    //console.log('set it', nextProps.value, this._dataText(valueItem))
     this._searchTerm = '';
 
     this.setState({
@@ -266,9 +266,8 @@ module.exports = React.createClass({
       , selectedIdx = this.state.selectedIndex
       , focusedIdx  = this.state.focusedIndex
       , isOpen = this.state.open
-      , noselection = selectedIdx == null || selectedIdx === -1 ;
+      , noselection = selectedIdx == null || selectedIdx === -1;
 
-    //console.log('focused:', focusedIdx, 'select: ', selectedIdx)
     if ( key === 'End' ) 
       select(this._data().length - 1)
 
@@ -287,7 +286,6 @@ module.exports = React.createClass({
       if ( alt ) 
         this.open()
       else {
-        //if( noselection) select(focusedIdx)
         if ( isOpen ) this.setFocusedIndex(this.nextFocusedIndex())
         else select(this.nextSelectedIndex())
       }
@@ -296,15 +294,14 @@ module.exports = React.createClass({
       if ( alt )
         this.close()
       else {
-        //if( noselection) select(focusedIdx)
         if ( isOpen ) this.setFocusedIndex(this.prevFocusedIndex())
         else select(this.prevSelectedIndex())
       }
     }
 
     function select(idx) {
       if( idx === -1 || self._data().length === 0) 
-        return self.change(self.refs.input.value, false)
+        return self.change(self.refs.input.getDOMNode().value, false)
 
       self.refs.input.accept(true); //removes caret
       self.change(self._data()[idx], false)

diff --git a/lib/mixins/DataFilterMixin.js b/lib/mixins/DataFilterMixin.js
@@ -37,12 +37,12 @@ module.exports = {
     },
 
     filterIndexOf: function(items, searchTerm){
-      var matches = typeof this.props.filter === 'string'
-            ? filters[this.props.filter]
-            : this.props.filter;
+      var matches = typeof this.props.filter === 'function'
+            ? this.props.filter
+            : filters[this.props.filter || 'eq'];
 
-      if ( !matches || !searchTerm || !searchTerm.trim() || searchTerm.length < (this.props.minLength || 1))
-        return items
+      if ( !searchTerm || !searchTerm.trim() || (this.props.filter && searchTerm.length < (this.props.minLength || 1)))
+        return -1
 
       if ( !this.props.caseSensitive)
         searchTerm = searchTerm.toLowerCase();

diff --git a/lib/mixins/DataHelpersMixin.js b/lib/mixins/DataHelpersMixin.js
@@ -11,8 +11,6 @@ module.exports = {
   _dataValue: function(item){
     var field = this.props.valueField;
 
-    //item = this._dataItem(item)
-
     return field && item && _.has(item, field)
       ? item[field]
       : item
@@ -42,6 +40,8 @@ module.exports = {
       , idx;
 
     // make an attempt to see if we were passed in dataItem vs just a valueField value
+    // either an object with the right prop, or a primitive
+    // { valueField: 5 } || "hello" [ "hello" ]
     if( _.has(item, field) || typeof(first) === typeof(val))
       return item
 

diff --git a/src/dropdowns/combobox.jsx b/src/dropdowns/combobox.jsx
@@ -65,6 +65,7 @@ module.exports = React.createClass({
         , this.props.value)
       , idx = this._dataIndexOf(items, this.props.value);
 
+
 		return {
 			selectedIndex: idx,
       focusedIndex:  idx === -1 ? 0 : idx,
@@ -108,7 +109,6 @@ module.exports = React.createClass({
       , idx = this._dataIndexOf(items, nextProps.value)
       , focused = this.filterIndexOf(items, this._dataText(valueItem));
 
-    //console.log('set it', nextProps.value, this._dataText(valueItem))
     this._searchTerm = '';
 
     this.setState({
@@ -265,9 +265,8 @@ module.exports = React.createClass({
       , selectedIdx = this.state.selectedIndex
       , focusedIdx  = this.state.focusedIndex
       , isOpen = this.state.open
-      , noselection = selectedIdx == null || selectedIdx === -1 ;
+      , noselection = selectedIdx == null || selectedIdx === -1;
 
-    //console.log('focused:', focusedIdx, 'select: ', selectedIdx)
     if ( key === 'End' ) 
       select(this._data().length - 1)
 
@@ -286,7 +285,6 @@ module.exports = React.createClass({
       if ( alt ) 
         this.open()
       else {
-        //if( noselection) select(focusedIdx)
         if ( isOpen ) this.setFocusedIndex(this.nextFocusedIndex())
         else select(this.nextSelectedIndex())
       }
@@ -295,15 +293,14 @@ module.exports = React.createClass({
       if ( alt )
         this.close()
       else {
-        //if( noselection) select(focusedIdx)
         if ( isOpen ) this.setFocusedIndex(this.prevFocusedIndex())
         else select(this.prevSelectedIndex())
       }
     }
 
     function select(idx) {
       if( idx === -1 || self._data().length === 0) 
-        return self.change(self.refs.input.value, false)
+        return self.change(self.refs.input.getDOMNode().value, false)
 
       self.refs.input.accept(true); //removes caret
       self.change(self._data()[idx], false)

diff --git a/src/mixins/DataFilterMixin.js b/src/mixins/DataFilterMixin.js
@@ -37,12 +37,12 @@ module.exports = {
     },
 
     filterIndexOf: function(items, searchTerm){
-      var matches = typeof this.props.filter === 'string'
-            ? filters[this.props.filter]
-            : this.props.filter;
+      var matches = typeof this.props.filter === 'function'
+            ? this.props.filter
+            : filters[this.props.filter || 'eq'];
 
-      if ( !matches || !searchTerm || !searchTerm.trim() || searchTerm.length < (this.props.minLength || 1))
-        return items
+      if ( !searchTerm || !searchTerm.trim() || (this.props.filter && searchTerm.length < (this.props.minLength || 1)))
+        return -1
 
       if ( !this.props.caseSensitive)
         searchTerm = searchTerm.toLowerCase();