Migrate autocomplete

components/autocomplete/Autocomplete.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Input from '../input';
 import events from '../utils/events';
 import Chip from '../chip';
-import style from './style';
 
 const POSITION = {
  AUTO: 'auto',
@@ -24,6 +24,18 @@ class Autocomplete extends React.Component {
    selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    showSuggestionsWhenValueIsSet: React.PropTypes.bool,
    source: React.PropTypes.any,
+   theme: React.PropTypes.shape({
+     active: React.PropTypes.string.isRequired,
+     autocomplete: React.PropTypes.string.isRequired,
+     focus: React.PropTypes.string.isRequired,
+     input: React.PropTypes.string.isRequired,
+     label: React.PropTypes.string.isRequired,
+     suggestion: React.PropTypes.string.isRequired,
+     suggestions: React.PropTypes.string.isRequired,
+     up: React.PropTypes.string.isRequired,
+     value: React.PropTypes.string.isRequired,
+     values: React.PropTypes.string.isRequired
+   }),
    value: React.PropTypes.any
  };
 
@@ -66,7 +78,7 @@ class Autocomplete extends React.Component {
    if (this.props.onChange) this.props.onChange(key, event);
    this.setState(
      {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
-     () => { this.refs.input.blur(); }
+     () => { ReactDOM.findDOMNode(this).querySelector('input').blur(); }
    );
  };
 
@@ -97,7 +109,7 @@ class Autocomplete extends React.Component {
 
  handleQueryKeyUp = (event) => {
    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
-   if (event.which === 27) this.refs.input.blur();
+   if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
    if ([40, 38].indexOf(event.which) !== -1) {
      const suggestionsKeys = [...this.suggestions().keys()];
      let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
@@ -194,7 +206,7 @@ class Autocomplete extends React.Component {
        return (
          <Chip
            key={key}
-           className={style.value}
+           className={this.props.theme.value}
            deletable
            onDeleteClick={this.unselect.bind(this, key)}
          >
@@ -203,13 +215,14 @@ class Autocomplete extends React.Component {
        );
      });
 
-     return <ul className={style.values}>{selectedItems}</ul>;
+     return <ul className={this.props.theme.values}>{selectedItems}</ul>;
    }
  }
 
  renderSuggestions () {
+   const { theme } = this.props;
    const suggestions = [...this.suggestions()].map(([key, value]) => {
-     const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
+     const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
      return (
        <li
          key={key}
@@ -222,14 +235,14 @@ class Autocomplete extends React.Component {
      );
    });
 
-   const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
+   const className = classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'});
    return <ul ref='suggestions' className={className}>{suggestions}</ul>;
  }
 
  render () {
-   const {error, label, ...other} = this.props;
-   const className = ClassNames(style.root, {
-     [style.focus]: this.state.focus
+   const {error, label, theme, ...other} = this.props;
+   const className = classnames(theme.autocomplete, {
+     [theme.focus]: this.state.focus
    }, this.props.className);
 
    return (
@@ -238,7 +251,7 @@ class Autocomplete extends React.Component {
        <Input
          {...other}
          ref='input'
-         className={style.input}
+         className={theme.input}
          error={error}
          label={label}
          onBlur={this.handleQueryBlur}
@@ -255,4 +268,4 @@ class Autocomplete extends React.Component {
  }
 }
 
-export default Autocomplete;
+export default themr('ToolboxAutocomplete')(Autocomplete);

components/autocomplete/readme.md

@@ -5,6 +5,7 @@ An input field with a set of predeterminated labeled values. When it's focused i
 <!-- example -->
 ```jsx
 import Autocomplete from 'react-toolbox/lib/autocomplete';
+import theme from 'react-toolbox/lib/autocomplete/theme';
 
 const source = {
   'ES-es': 'Spain',
@@ -30,6 +31,7 @@ class AutocompleteTest extends React.Component {
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
+        theme={theme}
         value={this.state.countries}
       />
     );
@@ -54,3 +56,20 @@ class AutocompleteTest extends React.Component {
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAutocomplete`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for a suggestion when it's active.|
+| `autocomplete`  | Used for the root element.|
+| `focus`   | Used when the input is focused.|
+| `input`   | Used to style the `Input` component.|
+| `label`   | Used for the label.|
+| `suggestion`   | Used to style each suggestion.|
+| `suggestions`   | Used to style the suggestions container.|
+| `up`   | Used for the suggestions when it's opening to the top.|
+| `value`   | Classname used for a single value.|
+| `values`   | Classname used for the values container.|

components/autocomplete/theme.scss

@@ -2,7 +2,7 @@
 @import "./config";
 @import "../input/config";
 
-.root {
+.autocomplete {
   position: relative;
   padding: $unit 0;
   &.focus {

spec/theme.js

@@ -1,18 +1,22 @@
 import defineTheme from '../components/define-theme';
 import ToolboxAppBar from '../components/app_bar/theme.scss';
+import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
+import ToolboxInput from '../components/input/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
 export default defineTheme({
   ToolboxAppBar,
+  ToolboxAutocomplete,
   ToolboxAvatar,
   ToolboxButton,
   ToolboxCard,
   ToolboxCheckbox,
   ToolboxChip,
+  ToolboxInput,
   ToolboxRipple
 });