Use full Toolbox input in autocomplete

react-toolbox · Dec 20, 2015 · 802f50f · 802f50f
1 parent 2c7d308
commit 802f50f
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 27 deletions.
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
@@ -37,6 +37,12 @@ class Autocomplete extends React.Component {
     query: this.query(this.props.value)
   };
 
+  componentWillReceiveProps (nextProps) {
+    if (!this.props.multiple) {
+      this.setState({query: nextProps.value});
+    }
+  }
+
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
       const direction = this.calculateDirection();
@@ -171,20 +177,20 @@ class Autocomplete extends React.Component {
   }
 
   render () {
+    const {error, label, ...other} = this.props;
     const className = ClassNames(style.root, {
-      [style.focus]: this.state.focus,
-      [style.errored]: this.props.error
+      [style.focus]: this.state.focus
     }, this.props.className);
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
         {this.renderSelected()}
         <Input
+          {...other}
           ref='input'
-          {...this.props}
           className={style.input}
-          label=''
+          error={error}
+          label={label}
           onBlur={this.handleQueryBlur}
           onChange={this.handleQueryChange}
           onFocus={this.handleQueryFocus}

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
@@ -28,7 +28,6 @@ class AutocompleteTest extends React.Component {
         direction="down"
         label="Choose countries"
         onChange={this.handleChange}
-        placeholder="Pick multiple elements..."
         source={source}
         value={this.state.value}
       />

diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
@@ -15,11 +15,6 @@
       box-shadow: $zdepth-shadow-1;
     }
   }
-  &.errored {
-    .suggestions {
-      margin-top: - $input-underline-height;
-    }
-  }
 }
 
 .label {
@@ -59,7 +54,7 @@
   transition-duration: $animation-duration;
   transition-property: max-height, box-shadow;
   &:not(.up) {
-    bottom: auto;
+    margin-top: - $input-padding;
   }
   &.up {
     bottom: 0;
@@ -75,6 +70,19 @@
 }
 
 .input {
-  padding-top: 0;
-  padding-bottom: 0;
+  position: relative;
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
 }
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
@@ -1,4 +1,3 @@
-$dropdown-offset: 1.6 * $unit;
 $dropdown-color-white: $color-white;
 $dropdown-color-primary: $color-primary;
 $dropdown-color-primary-contrast: $color-primary-contrast;

diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
@@ -42,8 +42,8 @@
     $size: ($input-field-height / 7);
     $border: $size solid transparent;
     position: absolute;
-    right: ($dropdown-offset / 2);
     top: 50%;
+    right: $input-chevron-offset;
     width: 0;
     height: 0;
     content: "";
@@ -67,31 +67,31 @@
     }
   }
   &.disabled {
-    cursor: normal;
     pointer-events: none;
+    cursor: normal;
     > .templateValue {
-      opacity: .7;
       border-bottom-style: dotted;
+      opacity: .7;
     }
   }
 }
 
 .templateValue {
-  border-bottom: 1px solid $input-text-bottom-border-color;
-  color: $color-text;
+  position: relative;
   min-height: $input-field-height;
-  background-color: $input-text-background-color;
   padding: $input-field-padding 0;
-  position: relative;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border-bottom: 1px solid $input-text-bottom-border-color;
 }
 
 .label {
   position: absolute;
+  top: $input-focus-label-top;
   left: 0;
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
-  top: $input-focus-label-top;
 }
 
 .error {
@@ -103,8 +103,8 @@
 
 .values {
   @include no-webkit-scrollbar;
-  z-index: $z-index-high;
   position: absolute;
+  z-index: $z-index-high;
   width: 100%;
   overflow-y: auto;
   list-style: none;

diff --git a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
@@ -16,7 +16,6 @@ class AutocompleteTest extends React.Component {
         label="Choose countries"
         name="countries"
         onChange={this.handleChange}
-        placeholder="Pick multiple elements..."
         source={source}
         value={this.state.countries}
       />

diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
@@ -25,9 +25,8 @@ class AutocompleteTest extends React.Component {
         <p>You can have a multiple or simple autocomplete.</p>
 
         <Autocomplete
-          label="Choose countries"
           onChange={this.handleMultipleChange}
-          placeholder="Pick multiple elements..."
+          label="Pick multiple elements..."
           source={countriesObject}
           value={this.state.multiple}
         />