Alphabetical Order for properties and methods

components/autocomplete/index.jsx

@@ -51,13 +51,6 @@ class Autocomplete extends React.Component {
     this.refs.input.setValue(state.query);
   }
 
-  handleQueryChange = () => {
-    const query = this.refs.input.getValue();
-    if (this.state.query !== query) {
-      this.setState({query});
-    }
-  };
-
   handleKeyPress = (event) => {
     if (event.which === 13 && this.state.active) {
       this._selectOption(this.state.active);
@@ -72,6 +65,10 @@ class Autocomplete extends React.Component {
     }
   };
 
+  handleBlur = () => {
+    if (this.state.focus) this.setState({focus: false});
+  };
+
   handleFocus = () => {
     const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
@@ -81,14 +78,17 @@ class Autocomplete extends React.Component {
     this.setState({active: '', up: up, focus: true});
   };
 
-  handleBlur = () => {
-    if (this.state.focus) this.setState({focus: false});
-  };
-
   handleHover = (event) => {
     this.setState({active: event.target.getAttribute('id')});
   };
 
+  handleQueryChange = () => {
+    const query = this.refs.input.getValue();
+    if (this.state.query !== query) {
+      this.setState({query});
+    }
+  };
+
   handleSelect = (event) => {
     utils.events.pauseEvent(event);
     this._selectOption(event.target.getAttribute('id'));
@@ -138,16 +138,17 @@ class Autocomplete extends React.Component {
         {this.renderLabel()}
         {this.renderSelected()}
         <Input
-          ref='input'
-          {...this.props}
-          label=''
-          value=''
           data-role='input'
+          {...this.props}
+          ref='input'
           className={style.input}
+          label=''
           onBlur={this.handleBlur}
           onChange={this.handleQueryChange}
           onFocus={this.handleFocus}
-          onKeyUp={this.handleKeyPress} />
+          onKeyUp={this.handleKeyPress}
+          value=''
+        />
         <ul
           ref='suggestions'
           data-role='suggestions'
@@ -162,14 +163,6 @@ class Autocomplete extends React.Component {
     );
   }
 
-  _indexDataSource (data = {}) {
-    if (data.length) {
-      return new Map(data.map((item) => [item, item]));
-    } else {
-      return new Map(Object.keys(data).map((key) => [key, data[key]]));
-    }
-  }
-
   _getSuggestions () {
     const query = this.state.query.toLowerCase().trim() || '';
     const suggestions = new Map();
@@ -181,6 +174,14 @@ class Autocomplete extends React.Component {
     return suggestions;
   }
 
+  _indexDataSource (data = {}) {
+    if (data.length) {
+      return new Map(data.map((item) => [item, item]));
+    } else {
+      return new Map(Object.keys(data).map((key) => [key, data[key]]));
+    }
+  }
+
   _selectOption (key) {
     const { dataSource } = this.state;
     let { values } = this.state;

components/button/index.jsx

@@ -48,9 +48,9 @@ class Button extends React.Component {
 
     return (
       <button
+        data-react-toolbox='button'
         {...others}
         className={className}
-        data-react-toolbox='button'
         onMouseDown={this.handleMouseDown}
         disabled={this.props.disabled || this.props.loading}
       >

components/card/index.jsx

@@ -29,6 +29,14 @@ class Card extends React.Component {
     }
   };
 
+  renderActions () {
+    if (this.props.actions) {
+      return (
+        <Navigation data-role='actions' className={style.navigation} actions={this.props.actions} />
+      );
+    }
+  }
+
   renderTitle () {
     const styleFigure = {};
     const styleOverflow = {};
@@ -49,14 +57,6 @@ class Card extends React.Component {
     }
   }
 
-  renderActions () {
-    if (this.props.actions) {
-      return (
-        <Navigation data-role='actions' className={style.navigation} actions={this.props.actions} />
-      );
-    }
-  }
-
   render () {
     let className = style.root;
     if (this.props.type) className += ` ${style[this.props.type]}`;

components/checkbox/index.jsx

@@ -41,14 +41,14 @@ class Checkbox extends React.Component {
     if (!this.props.disabled) this.handleChange(event);
   };
 
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
-  };
-
   handleInputClick = (event) => {
     events.pauseEvent(event);
   };
 
+  handleMouseDown = (event) => {
+    if (!this.props.disabled) this.refs.ripple.start(event);
+  };
+
   render () {
     let fieldClassName = style.field;
     let checkboxClassName = style.check;
@@ -66,8 +66,8 @@ class Checkbox extends React.Component {
           {...this.props}
           ref='input'
           type='checkbox'
-          className={style.input}
           checked={this.state.checked}
+          className={style.input}
           onChange={this.handleChange}
           onClick={this.handleInputClick}
         />

components/date_picker/dialog.jsx

@@ -53,7 +53,7 @@ class CalendarDialog extends React.Component {
     const headerClassName = `${style.header} ${style[display]}`;
 
     return (
-      <Dialog ref="dialog" type="custom" className={style.dialog} actions={this.state.actions}>
+      <Dialog ref='dialog' type='custom' className={style.dialog} actions={this.state.actions}>
           <header className={headerClassName}>
             <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}
@@ -69,7 +69,7 @@ class CalendarDialog extends React.Component {
 
           <div className={style.wrapper}>
             <Calendar
-              ref="calendar"
+              ref='calendar'
               display={this.state.display}
               onChange={this.handleCalendarChange}
               selectedDate={this.state.date} />

components/date_picker/index.jsx

@@ -19,16 +19,16 @@ class DatePicker extends React.Component {
     value: this.props.value
   };
 
-  handleMouseDown = (event) => {
-    events.pauseEvent(event);
-    this.refs.dialog.show();
-  };
-
   handleDateSelected = (value) => {
     this.refs.input.setValue(this.formatDate(value));
     this.setState({value});
   };
 
+  handleMouseDown = (event) => {
+    events.pauseEvent(event);
+    this.refs.dialog.show();
+  };
+
   formatDate (date) {
     return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
   }
@@ -38,11 +38,11 @@ class DatePicker extends React.Component {
       <div data-toolbox='date-picker'>
         <Input
           ref='input'
-          type='text'
-          readOnly={true}
           className={style.input}
           onMouseDown={this.handleMouseDown}
           placeholder='Pick up date'
+          readOnly={true}
+          type='text'
           value={this.state.value ? this.formatDate(this.state.value) : null}
         />
         <CalendarDialog

components/dialog/index.jsx

@@ -50,13 +50,13 @@ class Dialog extends React.Component {
     );
   }
 
-  show () {
-    this.setState({active: true});
-  }
-
   hide () {
     this.setState({active: false});
   }
+
+  show () {
+    this.setState({active: true});
+  }
 }
 
 export default Dialog;

components/form/index.jsx

@@ -75,7 +75,7 @@ class Form extends React.Component {
       if (attribute.type === 'autocomplete') {
         return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
       } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} type='square' ref='submit' onClick={this.onSubmit}/>;
+        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
       } else if (attribute.type === 'checkbox') {
         return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
       } else if (attribute.type === 'date_picker') {

components/input/index.jsx

@@ -47,22 +47,24 @@ class Input extends React.Component {
     if (this.props.multiline) {
       return (
         <textarea
-          ref='input'
           role='input'
           {...this.props}
+          ref='input'
           className={className}
           onChange={this.onChange}
-          value={this.state.value} />
+          value={this.state.value}
+        />
       );
     } else {
       return (
         <input
-          ref='input'
           role='input'
           {...this.props}
+          ref='input'
           className={className}
+          onChange={this.onChange}
           value={this.state.value}
-          onChange={this.onChange} />
+        />
       );
     }
   }

components/link/index.jsx

@@ -20,10 +20,10 @@ const Link = (props) => {
 };
 
 Link.propTypes = {
-  label: React.PropTypes.string,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
-  icon: React.PropTypes.string
+  icon: React.PropTypes.string,
+  label: React.PropTypes.string
 };
 
 Link.defaultProps = {

components/menu/menu.jsx

@@ -47,6 +47,15 @@ class Menu extends React.Component {
     this.setState({ position, width, height });
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.active && !this.state.active) {
+      if (this.props.onHide) this.props.onHide();
+      utils.events.removeEventsFromDocument({click: this.handleDocumentClick});
+    } else if (!prevState.active && this.state.active && this.props.onShow) {
+      this.props.onShow();
+    }
+  }
+
   componentWillReceiveProps (nextProps) {
     if (this.props.position !== nextProps.position) {
       const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
@@ -54,6 +63,12 @@ class Menu extends React.Component {
     }
   }
 
+  componentWillUpdate (prevState, nextState) {
+    if (!prevState.active && nextState.active) {
+      utils.events.addEventsToDocument({click: this.handleDocumentClick});
+    }
+  }
+
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
       const position = this.calculatePosition();
@@ -67,21 +82,6 @@ class Menu extends React.Component {
     return true;
   }
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
-      utils.events.addEventsToDocument({click: this.handleDocumentClick});
-    }
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      if (this.props.onHide) this.props.onHide();
-      utils.events.removeEventsFromDocument({click: this.handleDocumentClick});
-    } else if (!prevState.active && this.state.active && this.props.onShow) {
-      this.props.onShow();
-    }
-  }
-
   handleDocumentClick = (event) => {
     if (this.state.active && !utils.events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
@@ -104,12 +104,6 @@ class Menu extends React.Component {
     return `${toTop ? 'top' : 'bottom'}-${toLeft ? 'left' : 'right'}`;
   }
 
-  getRootStyle () {
-    if (this.state.position !== POSITION.STATIC) {
-      return { width: this.state.width, height: this.state.height };
-    }
-  }
-
   getMenuStyle () {
     const { width, height, position } = this.state;
     if (position !== POSITION.STATIC) {
@@ -127,6 +121,12 @@ class Menu extends React.Component {
     }
   }
 
+  getRootStyle () {
+    if (this.state.position !== POSITION.STATIC) {
+      return { width: this.state.width, height: this.state.height };
+    }
+  }
+
   renderItems () {
     return React.Children.map(this.props.children, (item) => {
       if (item.type === MenuItem) {
@@ -151,7 +151,7 @@ class Menu extends React.Component {
     return (
       <div className={className} style={this.getRootStyle()}>
         { this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null }
-        <ul ref="menu" className={style.menu} style={this.getMenuStyle()}>
+        <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
           { this.renderItems() }
         </ul>
       </div>

components/progress_bar/index.jsx

@@ -37,14 +37,6 @@ class ProgressBar extends React.Component {
     }
   }
 
-  renderCircular () {
-    return (
-      <svg className={style.circle}>
-        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
-      </svg>
-    );
-  }
-
   linearStyle () {
     if (this.props.mode !== 'indeterminate') {
       return {
@@ -56,6 +48,14 @@ class ProgressBar extends React.Component {
     }
   }
 
+  renderCircular () {
+    return (
+      <svg className={style.circle}>
+        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
+      </svg>
+    );
+  }
+
   renderLinear () {
     const {buffer, value} = this.linearStyle();
     return (
@@ -75,10 +75,10 @@ class ProgressBar extends React.Component {
     return (
       <div
         data-react-toolbox='progress-bar'
-        className={className}
         aria-valuenow={this.props.value}
         aria-valuemin={this.props.min}
         aria-valuemax={this.props.max}
+        className={className}
       >
         { this.props.type === 'circular' ? this.renderCircular() : this.renderLinear() }
       </div>

components/radio/radio_button.jsx

@@ -22,25 +22,25 @@ class RadioButton extends React.Component {
     disabled: false
   };
 
-  handleClick = (event) => {
-    events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
-  };
-
   handleChange = (event) => {
     if (!this.props.checked && this.props.onChange) {
       this.props.onChange(event, this);
     }
   };
 
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
+  handleClick = (event) => {
+    events.pauseEvent(event);
+    if (!this.props.disabled) this.handleChange(event);
   };
 
   handleInputClick = (event) => {
     events.pauseEvent(event);
   };
 
+  handleMouseDown = (event) => {
+    if (!this.props.disabled) this.refs.ripple.start(event);
+  };
+
   render () {
     let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
     const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
@@ -51,10 +51,10 @@ class RadioButton extends React.Component {
         <input
           {...this.props}
           ref='input'
-          type='radio'
           className={style.input}
           onChange={this.handleChange}
           onClick={this.handleInputClick}
+          type='radio'
         />
         <span role='radio' className={radioClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />

components/ripple/index.jsx

@@ -19,12 +19,17 @@ class Ripple extends React.Component {
 
   state = {
     active: false,
+    left: null,
     restarting: false,
     top: null,
-    left: null,
     width: null
   };
 
+  handleEnd = () => {
+    document.removeEventListener('mouseup', this.handleEnd);
+    this.setState({active: false});
+  };
+
   start = ({ pageX, pageY }) => {
     document.addEventListener('mouseup', this.handleEnd);
     const {top, left, width} = this._getDescriptor(pageX, pageY);
@@ -34,11 +39,6 @@ class Ripple extends React.Component {
     });
   };
 
-  handleEnd = () => {
-    document.removeEventListener('mouseup', this.handleEnd);
-    this.setState({active: false});
-  };
-
   _getDescriptor (pageX, pageY) {
     const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {
@@ -58,7 +58,7 @@ class Ripple extends React.Component {
 
     return (
       <span data-react-toolbox='ripple' className={style.wrapper}>
-        <span ref="ripple" role='ripple' className={className} style={rippleStyle} />
+        <span ref='ripple' role='ripple' className={className} style={rippleStyle} />
       </span>
     );
   }

components/slider/index.jsx

@@ -40,10 +40,6 @@ class Slider extends React.Component {
     this.handleResize();
   }
 
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
   componentDidUpdate (prevProps, prevState) {
     if (prevState.value !== this.state.value) {
       if (this.props.onChange) this.props.onChange(this);
@@ -51,19 +47,10 @@ class Slider extends React.Component {
     }
   }
 
-  handleResize = (event, callback) => {
-    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
-    const cb = callback || () => {};
-    this.setState({sliderStart: left, sliderLength: right - left}, cb);
-  };
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize);
+  }
 
-  handleSliderFocus = () => {
-    utils.events.addEventsToDocument(this.getKeyboardEvents());
-  };
-
-  handleSliderBlur = () => {
-    utils.events.removeEventsFromDocument(this.getKeyboardEvents());
-  };
 
   handleInputBlur = () => {
     this.setState({value: this.trimValue(this.refs.input.getValue()) });
@@ -84,29 +71,53 @@ class Slider extends React.Component {
     utils.events.pauseEvent(event);
   };
 
-  handleTouchStart = (event) => {
-    this.start(utils.events.getTouchPosition(event));
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    utils.events.pauseEvent(event);
-  };
-
   handleMouseMove = (event) => {
     utils.events.pauseEvent(event);
     this.move(utils.events.getMousePosition(event));
   };
 
-  handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
-  };
-
   handleMouseUp = () => {
     this.end(this.getMouseEventMap());
   };
 
+  handleResize = (event, callback) => {
+    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
+    const cb = callback || () => {};
+    this.setState({sliderStart: left, sliderLength: right - left}, cb);
+  };
+
+  handleSliderBlur = () => {
+    utils.events.removeEventsFromDocument(this.getKeyboardEvents());
+  };
+
+  handleSliderFocus = () => {
+    utils.events.addEventsToDocument(this.getKeyboardEvents());
+  };
+
   handleTouchEnd = () => {
     this.end(this.getTouchEventMap());
   };
 
+  handleTouchMove = (event) => {
+    this.move(utils.events.getTouchPosition(event));
+  };
+
+  handleTouchStart = (event) => {
+    this.start(utils.events.getTouchPosition(event));
+    utils.events.addEventsToDocument(this.getTouchEventMap());
+    utils.events.pauseEvent(event);
+  };
+
+  addToValue (value) {
+    this.setState({value: this.trimValue(this.state.value + value)});
+  }
+
+  getKeyboardEvents () {
+    return {
+      keydown: this.handleKeyDown
+    };
+  }
+
   getMouseEventMap () {
     return {
       mousemove: this.handleMouseMove,
@@ -121,45 +132,40 @@ class Slider extends React.Component {
     };
   }
 
-  getKeyboardEvents () {
-    return {
-      keydown: this.handleKeyDown
-    };
+  end (revents) {
+    utils.events.removeEventsFromDocument(revents);
+    this.setState({pressed: false});
   }
 
-  start (position) {
-    this.handleResize(null, () => {
-      this.setState({pressed: true, value: this.positionToValue(position)});
-    });
+  knobOffset () {
+    const { max, min } = this.props;
+    return this.state.sliderLength * (this.state.value - min) / (max - min);
   }
 
   move (position) {
     this.setState({value: this.positionToValue(position)});
   }
 
-  end (revents) {
-    utils.events.removeEventsFromDocument(revents);
-    this.setState({pressed: false});
-  }
-
   positionToValue (position) {
     const { sliderStart: start, sliderLength: length } = this.state;
     const { max, min } = this.props;
     return this.trimValue((position.x - start) / length * (max - min) + min);
   }
 
-  trimValue (value) {
-    if (value < this.props.min) return this.props.min;
-    if (value > this.props.max) return this.props.max;
-    return utils.round(value, this.stepDecimals());
+  start (position) {
+    this.handleResize(null, () => {
+      this.setState({pressed: true, value: this.positionToValue(position)});
+    });
   }
 
   stepDecimals () {
     return (this.props.step.toString().split('.')[1] || []).length;
   }
 
-  addToValue (value) {
-    this.setState({value: this.trimValue(this.state.value + value)});
+  trimValue (value) {
+    if (value < this.props.min) return this.props.min;
+    if (value > this.props.max) return this.props.max;
+    return utils.round(value, this.stepDecimals());
   }
 
   valueForInput (value) {
@@ -167,11 +173,6 @@ class Slider extends React.Component {
     return decimals > 0 ? value.toFixed(decimals) : value.toString();
   }
 
-  knobOffset () {
-    const { max, min } = this.props;
-    return this.state.sliderLength * (this.state.value - min) / (max - min);
-  }
-
   renderSnaps () {
     if (this.props.snaps) {
       return (
@@ -211,32 +212,34 @@ class Slider extends React.Component {
         data-react-toolbox='slider'
         className={style.root + className}
         tabIndex='0'
+        onBlur={this.handleSliderBlur}
         onFocus={this.handleSliderFocus}
-        onBlur={this.handleSliderBlur} >
-
+      >
         <div
           ref='slider'
           className={style.container}
+          onMouseDown={this.handleMouseDown}
           onTouchStart={this.handleTouchStart}
-          onMouseDown={this.handleMouseDown} >
-
+        >
           <div
             ref='knob'
             className={style.knob}
-            style={knobStyles}
             onMouseDown={this.handleMouseDown}
-            onTouchStart={this.handleTouchStart} >
-              <div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
+            onTouchStart={this.handleTouchStart}
+            style={knobStyles}
+          >
+            <div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
           </div>
 
           <div className={style.progress}>
             <ProgressBar
               ref='progressbar'
-              mode='determinate'
               className={style.innerprogress}
-              value={this.state.value}
               max={this.props.max}
-              min={this.props.min}/>
+              min={this.props.min}
+              mode='determinate'
+              value={this.state.value}
+            />
             { this.renderSnaps() }
           </div>
         </div>

components/snackbar/index.jsx

@@ -29,8 +29,8 @@ class Snackbar extends React.Component {
     if (this.props.action) {
       return (
         <Button
-          kind='flat'
           className={style.button}
+          kind='flat'
           label={this.props.action}
           onClick={this.handleClick}
         />

components/switch/index.jsx

@@ -58,11 +58,11 @@ class Switch extends React.Component {
         <input
           {...this.props}
           ref='input'
-          type='checkbox'
           checked={this.state.checked}
           className={style.input}
           onChange={this.handleChange}
           onClick={this.handleInputClick}
+          type='checkbox'
         />
         <span role='switch' className={switchClassName}>
           <span role='thumb' className={style.thumb} onMouseDown={this.handleMouseDown}>

components/table/index.jsx

@@ -88,10 +88,10 @@ class Table extends React.Component {
         this.state.dataSource.map((data, index) => {
           return (
             <Row
-              key={index}
-              index={index}
               changed={this.isChanged(data, this.props.dataSource[index])}
               data={data}
+              index={index}
+              key={index}
               model={this.props.model}
               onChange={this.props.onChange ? this.handleRowChange : null}
               onSelect={this.props.onSelect ? this.handleRowSelect : null}

components/tabs/tab.jsx

@@ -41,7 +41,6 @@ class Tab extends React.Component {
     );
   }
 
-
   active (value) {
     this.setState({active: value});
     if (this.props.onActive && value) {

components/time_picker/clock/face.jsx

@@ -41,7 +41,7 @@ class Face extends React.Component {
   render () {
     return (
       <div
-        ref="root"
+        ref='root'
         className={style.face}
         onTouchStart={this.props.onTouchStart}
         onMouseDown={this.props.onMouseDown}

components/time_picker/clock/index.jsx

@@ -105,7 +105,7 @@ class Clock extends React.Component {
   render () {
     return (
       <div data-react-toolbox='clock' className={style.root}>
-        <div ref="wrapper" className={style.wrapper} style={{height: this.state.radius * 2}}>
+        <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
           { this.props.display === 'hours' ? this.renderHours() : '' }
           { this.props.display === 'minutes' ? this.renderMinutes() : '' }
         </div>

components/time_picker/dialog.jsx

@@ -82,7 +82,7 @@ class TimePickerDialog extends React.Component {
     const className = `${style.dialog} ${style[display]} ${style[format]}`;
 
     return (
-      <Dialog ref="dialog" className={className} type="custom" actions={this.state.actions}>
+      <Dialog ref='dialog' className={className} type='custom' actions={this.state.actions}>
         <header className={style.header}>
           <span className={style.hours} onClick={this.displayHours}>
             { ('0' + this.formatHours()).slice(-2) }
@@ -94,7 +94,7 @@ class TimePickerDialog extends React.Component {
           { this.renderAMPMLabels() }
         </header>
         <Clock
-          ref="clock"
+          ref='clock'
           display={this.state.display}
           format={this.props.format}
           initialTime={this.props.initialTime}

components/time_picker/index.jsx

@@ -40,17 +40,17 @@ class TimePicker extends React.Component {
       <div data-react-toolbox='time-picker'>
         <Input
           ref='input'
-          type='text'
           className={style.input}
-          readOnly={true}
           onMouseDown={this.openTimeDialog}
           placeholder='Pick up time'
+          readOnly={true}
+          type='text'
           value={this.formatTime()}
         />
         <TimeDialog
           ref='dialog'
-          initialTime={this.state.value}
           format={this.props.format}
+          initialTime={this.state.value}
           onTimeSelected={this.onTimeSelected}
         />
       </div>