New Component: Search Field

docs/src/app/app-routes.jsx

@@ -35,6 +35,7 @@ let Menus = require('./components/pages/components/menus');
 let Paper = require('./components/pages/components/paper');
 let Progress = require('./components/pages/components/progress');
 let RefreshIndicator = require('./components/pages/components/refresh-indicator');
+let SearchField = require('./components/pages/components/search-field');
 let Sliders = require('./components/pages/components/sliders');
 let Snackbar = require('./components/pages/components/snackbar');
 let Switches = require('./components/pages/components/switches');
@@ -88,6 +89,7 @@ let AppRoutes = (
       <Route name="paper" handler={Paper} />
       <Route name="progress" handler={Progress} />
       <Route name="refresh-indicator" handler={RefreshIndicator} />
+      <Route name="search-field" handler={SearchField} />
       <Route name="sliders" handler={Sliders} />
       <Route name="switches" handler={Switches} />
       <Route name="snackbar" handler={Snackbar} />

docs/src/app/components/pages/components.jsx

@@ -21,6 +21,7 @@ class Components extends React.Component {
       { route: 'paper', text: 'Paper'},
       { route: 'progress', text: 'Progress'},
       { route: 'refresh-indicator', text: 'Refresh Indicator'},
+      { route: 'search-field', text: 'Search Field'},
       { route: 'sliders', text: 'Sliders'},
       { route: 'switches', text: 'Switches'},
       { route: 'snackbar', text: 'Snackbar'},

docs/src/app/components/pages/components/search-field.jsx

@@ -0,0 +1,50 @@
+let React = require('react');
+
+let { SearchField } = require('material-ui');
+let ComponentDoc = require('../../component-doc');
+
+let Code = require('search-field-code');
+
+class SearchFields extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+    let desc = null;
+
+    return (
+      <ComponentDoc
+        name="Search Field"
+        code={Code}
+        desc={desc}
+        componentInfo={[{
+          name: 'Search Field',
+          infoArray: [],
+        }]}>
+
+        <br/>
+
+        <div>
+          <SearchField
+            onUpdateRequests={(t) => {console.log(t); return [t,t+t,t+t+t];}}
+            onNewRequest={(t) => {console.log('request:'+t);}} />
+
+          <SearchField
+            fullWidth={true}
+            onUpdateRequests={(t) => {console.log(t); return [t,t+t,t+t+t];}}
+            onNewRequest={(t) => {console.log('request:'+t);}} />
+
+        </div>
+
+      </ComponentDoc>
+    );
+
+  }
+
+
+}
+
+module.exports = SearchFields;

docs/src/app/components/raw-code/search-field-code.txt

@@ -0,0 +1,8 @@
+<SearchField
+  onUpdateRequests={(t) => {console.log(t); return [t,t+t,t+t+t];}}
+  onNewRequest={(t) => {console.log('request:'+t);}} />
+
+<SearchField
+  fullWidth={true}
+  onUpdateRequests={(t) => {console.log(t); return [t,t+t,t+t+t];}}
+  onNewRequest={(t) => {console.log('request:'+t);}} />

src/index.js

@@ -40,6 +40,7 @@ module.exports = {
   RefreshIndicator: require('./refresh-indicator'),
   Ripples: require('./ripples/'),
   SelectField: require('./select-field'),
+  SearchField: require('./search-field'),
   Slider: require('./slider'),
   SvgIcon: require('./svg-icon'),
   Icons: {

src/search-field.jsx

@@ -0,0 +1,275 @@
+const React = require('react/addons');
+const ReactTransitionGroup = React.addons.TransitionGroup;
+const StylePropable = require('./mixins/style-propable');
+const ClickAwayable = require('./mixins/click-awayable');
+const TextField = require('./text-field');
+const Menu = require('./menus/menu');
+const MenuItem = require('./menus/menu-item');
+
+const SearchField = React.createClass({
+
+  mixins: [
+    StylePropable,
+    ClickAwayable,
+  ],
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  propTypes: {
+    errorText: React.PropTypes.string,
+    floatingLabelText: React.PropTypes.string,
+    errorStyle: React.PropTypes.object,
+    hintText: React.PropTypes.string,
+    id: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+    autoWidth: React.PropTypes.bool,
+    menuStyle: React.PropTypes.object,
+    listStyle: React.PropTypes.object,
+    menuProps: React.PropTypes.object,
+    menuCloseDelay: React.PropTypes.number,
+    onUpdateRequests: React.PropTypes.func,
+    onNewSearchRequest: React.PropTypes.func,
+  },
+
+  getDefaultProps() {
+    return {
+      fullWidth: false,
+      open: false,
+      searchText: '',
+      menuCloseDelay: 100,
+
+      onChange: () => {},
+      onUpdateRequests: () => {},
+      onNewRequest: () => {},
+    };
+  },
+
+  getInitialState() {
+    return {
+      searchText: this.props.searchText,
+      requestsList: null,
+    };
+  },
+
+  componentWillMount(){
+    this.open = this.props.open;
+    this.focusOnInput = true;
+  },
+
+  componentClickAway() {
+    this.close();
+  },
+
+  render() {
+    let {
+      style,
+      errorStyle,
+      floatingLabelText,
+      hintText,
+      fullWidth,
+      menuStyle,
+      menuProps,
+      listStyle,
+      ...other,
+    } = this.props;
+
+    let requestsList = this.state.requestsList;
+
+    let styles = {
+      root: {
+        display: 'inline-block',
+        position: 'relative',
+        width: this.props.fullWidth ? '100%' : 256,
+      },
+      input: {
+      },
+      error: {
+      },
+      menu: {
+        top: 40,
+        left: 0,
+        width: '100%',
+      },
+      list: {
+        display: 'block',
+        width: this.props.fullWidth ? '100%' : 256,
+      },
+    };
+
+    let textFieldProps = {
+      style: this.mergeAndPrefix(styles.input, style),
+      floatingLabelText: floatingLabelText,
+      hintText: (!hintText && !floatingLabelText) ? '' : hintText,
+      fullWidth: true,
+      multiLine: false,
+      errorStyle: this.mergeAndPrefix(styles.error, errorStyle),
+    };
+
+    let mergedRootStyles = this.mergeAndPrefix(styles.root, style);
+    let mergedMenuStyles = this.mergeStyles(styles.menu, menuStyle);
+
+
+    let menu = this.open && requestsList ? (
+      <Menu
+        {...menuProps}
+        key="dropDownMenu"
+        animated={true}
+        autoWidth={false}
+        initiallyKeyboardFocused={true}
+        onEscKeyDown={()=>this.close()}
+        onItemTouchTap={this._handleItemTouchTap}
+        listStyle={this.mergeAndPrefix(styles.list, listStyle)}
+        openDirection="bottom-left"
+        style={mergedMenuStyles}>
+        {
+          requestsList.map((request, index) => {
+            switch(typeof request){
+              case 'string':
+                return (<MenuItem
+                          disableFocusRipple={true}
+                          key={index}
+                          value={request}
+                          primaryText={request}
+                          />);
+              default:
+                return null;
+            }
+          })
+        }
+      </Menu>
+    ) : null;
+
+    return (
+      <div style={mergedRootStyles}
+          onKeyDown={(e)=>{
+            switch(e.keyCode){
+              case 27: //esc
+                this.close();
+                break;
+              case 38: //up arrow
+                if(this.focusOnInput){
+                  this.focusOnInput = false;
+                  this.open = true;
+                  this.forceUpdate();
+                }
+                e.preventDefault();
+                break;
+              case 40: //down arrow
+                if(this.focusOnInput){
+                  this.focusOnInput = false;
+                  this.open = true;
+                  this.forceUpdate();
+                }
+                e.preventDefault();
+                break;
+              default:
+                break;
+            }
+          }}>
+        <div
+          style={{
+            widht:'100%',
+          }}
+          onClick={()=>{
+            this.updateRequests(this.state.searchText);
+          }}>
+          <TextField
+            {...other}
+            ref="searchTextField"
+            value={this.state.searchText}
+            onEnterKeyDown={()=>{
+                setTimeout(() => {
+                  this.close();
+                }, this.props.touchTapCloseDelay);
+                this.props.onNewRequest(this.state.searchText);
+            }}
+            onChange={
+              this._handleSearchTextChange
+            }
+            onBlur={()=>{
+              if(this.focusOnInput && this.open)
+                this.refs.searchTextField.focus();
+            }}
+            onFocus={()=>{
+              this.focusOnInput = true;
+            }}
+
+            {...textFieldProps} />
+        </div>
+          <ReactTransitionGroup>{menu}</ReactTransitionGroup>
+      </div>
+    );
+  },
+
+  setValue(textValue) {
+    this.setState({
+      searchText: textValue,
+    });
+  },
+
+  getValue() {
+    return this.state.searchText;
+  },
+
+  close() {
+    this.open = false;
+    this.forceUpdate();
+  },
+
+  open() {
+    this.open = true;
+    this.forceUpdate();
+  },
+
+  _handleSearchTextChange(e){
+
+    let searchText = e.target.value;
+
+    this.updateRequests(searchText);
+  },
+
+  updateRequests(searchText){
+    let requestsListPromise = new Promise(function(resolve, reject) {
+      let list = this.props.onUpdateRequests(searchText);
+      if(list){
+        resolve(list);
+      }
+      else{
+        reject();
+      }
+    }.bind(this));
+
+    requestsListPromise.then(list => {
+      this.focusOnInput = true;
+      this.open = true;
+      this.setState({
+        searchText:searchText,
+        requestsList:list,
+      });
+    }, ()=>{
+      this.setState({
+        searchText:searchText,
+        requestsList:null,
+      });
+      this.close();
+    });
+  },
+
+  _handleItemTouchTap(e, child) {
+    setTimeout(() => {
+      this.close();
+    }, this.props.touchTapCloseDelay);
+
+    let index=parseInt(child.key, 10);
+
+    let chosenRequest=this.state.requestsList[index];
+    this.setState({searchText:chosenRequest});
+    this.props.onNewRequest(chosenRequest, index, this.state.requestsList);
+
+  },
+
+});
+
+module.exports = SearchField;

src/utils/debounce.js

@@ -0,0 +1,22 @@
+// JavaScript debounce function (as taken from Underscore.js):
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+
+function debounce(func, wait, immediate) {
+	let timeout;
+	return function() {
+		let context = this, args = arguments;
+		let later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		let callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+}
+
+module.exports = debounce;