Search field

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

@@ -99,23 +99,22 @@ class SearchFields extends React.Component {
 
     return (
       <ComponentDoc
-        name="Icon Menus"
+        name="Search Field"
         code={Code}
         desc={desc}
         componentInfo={componentInfo}>
 
         <br/>
 
         <div>
-          {/*
-          <SearchField>
+          <SearchField>{/*
             <MenuItem primaryText="Refresh" />
             <MenuItem primaryText="Send feedback" />
             <MenuItem primaryText="Settings" />
             <MenuItem primaryText="Help" />
             <MenuItem primaryText="Sign out" />
+            */}
           </SearchField>
-          */}
 
         </div>
 

src/ripples/circle-ripple.jsx

@@ -62,9 +62,6 @@ const CircleRipple = React.createClass({
       width: '100%',
       borderRadius: '50%',
       backgroundColor: color,
-      transition:
-        Transitions.easeOut('2s', 'opacity') + ',' +
-        Transitions.easeOut('1s', 'transform'),
     }, style);
 
     return (
@@ -74,6 +71,11 @@ const CircleRipple = React.createClass({
 
   _animate() {
     let style = React.findDOMNode(this).style;
+    const transitionValue = (
+      Transitions.easeOut('2s', 'opacity') + ',' +
+      Transitions.easeOut('1s', 'transform')
+    );
+    AutoPrefix.set(style, 'transition', transitionValue);
     AutoPrefix.set(style, 'transform', 'scale(1)');
   },
 

src/search-field.jsx

@@ -6,15 +6,11 @@ let TextField = require('./text-field');
 let Menu = require('./menus/menu');
 let MenuItem = require('./menus/menu-item');
 
-let Events = require('./utils/events');
-let debounce = require('./utils/debounce');
-
 let SearchField = React.createClass({
 
   mixins: [
     StylePropable,
     ClickAwayable,
-    React.addons.LinkedStateMixin,
   ],
 
   contextTypes: {
@@ -30,9 +26,9 @@ let SearchField = React.createClass({
     onChange: React.PropTypes.func,
     autoWidth: React.PropTypes.bool,
     menuStyle: React.PropTypes.object,
+    listStyle: React.PropTypes.object,
     menuProps: React.PropTypes.object,
     menuCloseDelay: React.PropTypes.number,
-    updateDebounceTime: React.PropTypes.number,
     onUpdateRequests: React.PropTypes.func,
     onNewSearchRequest: React.PropTypes.func,
   },
@@ -43,9 +39,10 @@ let SearchField = React.createClass({
       open: false,
       searchText: '',
       menuCloseDelay: 100,
-      updateDebounceTime: 500,
 
       onChange: () => {},
+//      onUpdateRequests: (t) => {console.log(t); return [t,t+t,t+t+t];},
+//      onNewRequest: (t) => {console.log('request:'+t);},
       onUpdateRequests: () => {},
       onNewRequest: () => {},
     };
@@ -56,6 +53,7 @@ let SearchField = React.createClass({
       open: this.props.open,
       searchText: this.props.searchText,
       requestsList: null,
+      focusOnTextField: true,
     };
   },
 
@@ -70,135 +68,187 @@ let SearchField = React.createClass({
       floatingLabelText,
       hintText,
       fullWidth,
-      errorText,
-      id,
       menuStyle,
       menuProps,
+      listStyle,
       ...other,
     } = this.props;
 
     let open = this.state.open;
     let requestsList = this.state.requestsList;
 
     let styles = {
-      input: {
+      root: {
+        display: 'inline-block',
+        position: 'relative',
         width: this.props.fullWidth ? '100%' : 256,
       },
+      input: {
+      },
       error: {
-
       },
       menu: {
-        top: 12,
-        left: 12,
+        top: 40,
+        left: 0,
+        width: '100%',
+      },
+      list: {
         width: this.props.fullWidth ? '100%' : 256,
+
       },
     };
 
     let textFieldProps = {
-      id: id,
       style: this.mergeAndPrefix(styles.input, style),
       floatingLabelText: floatingLabelText,
-      hintText: (!hintText && !floatingLabelText) ? ' ' : hintText,
-      fullWidth: fullWidth,
-      errorText: errorText,
+      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 = open && requestsList ? (
       <Menu
         {...menuProps}
+        key="dropDownMenu"
         animated={true}
-        initiallyKeyboardFocused={false}
-        onEscKeyDown={()=>this.close(true)}
+        autoWidth={false}
+        initiallyKeyboardFocused={true}
+        onEscKeyDown={()=>this.close()}
         onItemTouchTap={this._handleItemTouchTap}
+        listStyle={this.mergeAndPrefix(styles.list,listStyle)}
         openDirection="bottom-left"
-        value={this.state.searchText}
         style={mergedMenuStyles}>
         {
-          requestsList.map(request => {
-            /*eslint-disable */
+          requestsList.map((request,index) => {
             switch(typeof request){
               case 'string':
                 return (<MenuItem
+                          disableFocusRipple={true}
+                          key={index}
                           value={request}
                           primaryText={request} />);
-              case 'object':
-                if(request.value)
-                  return request;
-                // fall through
               default:
                 return null;
             }
-            /*eslint-enable */
           })
         }
       </Menu>
     ) : null;
 
     return (
-      <div>
-        <TextField
-          {...other}
-          ref="searchTextField"
-          value={this.state.searchText}
-          onChange={
-            debounce(this._handleSearchTextChange,
-              this.props.updateDebounceTime)
-          }
-          {...textFieldProps} />
-        <ReactTransitionGroup>{menu}</ReactTransitionGroup>
+      <div style={mergedRootStyles}
+          onKeyDown={(e)=>{
+            switch(e.keyCode){
+              case 27: //esc
+                this.setState({focusOnTextField:true});
+                this.close();
+                e.preventDefault();
+                break;
+              case 38: //up arrow
+                if(this.state.focusOnTextField){
+                  this.setState({focusOnTextField:false});
+                }
+                e.preventDefault();
+                break;
+              case 40: //down arrow
+                if(this.state.focusOnTextField){
+                  this.setState({focusOnTextField:false});
+                }
+                e.preventDefault();
+                break;
+            }
+          }}>
+        <div
+          style={{
+            widht:'100%',
+          }}
+          onClick={()=>{
+            if(!open && this.state.focusOnTextField)
+              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.state.focusOnTextField)
+                this.refs.searchTextField.focus();
+            }}
+            {...textFieldProps} />
+        </div>
+          <ReactTransitionGroup>{menu}</ReactTransitionGroup>
       </div>
     );
   },
 
-  open(textValue) {
-
-    let newState = {
-      open: true,
-    };
-    if(textValue){
-        newState.searchText = textValue;
-    }
-    if (!this.state.open) {
-      this.setState(newState);
-    }
+  setValue(textValue,menu=false) {
+    this.setState({
+      open: menu,
+      searchText: textValue,
+    });
   },
 
-  close(isESCKey) {
-    if (this.state.open) {
-      this.setState({open: false}, () => {
-        if (isESCKey) {
-          this.refs.searchTextField.focus();
-        }
-      });
-    }
+  close() {
+    this.setState({requestsList: false,focusOnTextField:true}, () => {
+      this.refs.searchTextField.focus();
+    });
   },
 
   _handleSearchTextChange(e){
 
     let searchText = e.target.value;
-    if(searchText!==''){
-      let requestsList = this.props.onUpdateRequests(e.target.value);
-      this.setState({requestsList:requestsList});
-    }
-    else {
-      this.close(Events.isKeyboard(e));
-    }
 
+    this.updateRequests(searchText);
   },
 
-  _handleItemTouchTap(e, child) {
+  updateRequests(searchText){
+    let requestsListPromise = new Promise(function(resolve,reject) {
+      let list = this.props.onUpdateRequests(searchText);
+      if(list){
+        resolve(list);
+      }
+      else{
+        reject();
+      }
+    }.bind(this));
 
-    console.log(child);
-    let isKeyboard = Events.isKeyboard(e);
+    requestsListPromise.then(list => {
+      this.setState({
+        searchText:searchText,
+        requestsList:list,
+        open:true,
+      });
+    },()=>{
+      this.setState({
+        searchText:searchText,
+        requestsList:null,
+      });
+      this.close();
+    });
+  },
+
+  _handleItemTouchTap(e, child) {
     setTimeout(() => {
-      this.close(isKeyboard);
+      this.close();
     }, this.props.touchTapCloseDelay);
 
-    this.refs.searchTextField.setValue(child.value);
-    this.props.onNewRequest(child.value);
+    let chosenRequest=this.state.requestsList[child.key];
+    this.setState({searchText:chosenRequest});
+    this.props.onNewRequest(chosenRequest);
 
   },