Rewrite component tests in ES6

components/date_picker/dialog.jsx

@@ -27,8 +27,8 @@ export default React.createClass({
       date: this.props.initialDate,
       display: 'months',
       actions: [
-        { caption: 'Cancel', type: 'flat accent', onClick: this.onDateCancel },
-        { caption: 'Ok', type: 'flat accent', onClick: this.onDateSelected }
+        { label: 'Cancel', type: 'flat accent', onClick: this.onDateCancel },
+        { label: 'Ok', type: 'flat accent', onClick: this.onDateSelected }
       ]
     };
   },

components/input/index.jsx

@@ -115,8 +115,6 @@ export default React.createClass({
     if (this.props.type === 'radio') className += ' radio';
     if (this.state.value && this.state.value.length > 0) className += ' valid';
 
-    console.log(this.state.touch);
-
     return (
       <div data-react-toolbox='input' className={className}>
         { this.renderInput() }

components/tabs/tab.jsx

@@ -1,10 +1,8 @@
 /* global React */
 
-import { addons } from 'react/addons';
 import style from './style';
 
 export default React.createClass({
-  mixins: [addons.PureRenderMixin],
 
   displayName: 'Tab',
 

components/tabs/tabs.jsx

@@ -76,11 +76,7 @@ export default React.createClass({
         onClick: !tab.props.disabled ? this.onClick.bind(null, index) : null
       });
 
-      return React.addons.cloneWithProps(tab, {
-        active: active,
-        key: index,
-        tabIndex: index
-      });
+      return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
     });
 
     return (

components/time_picker/dialog.jsx

@@ -31,8 +31,8 @@ export default React.createClass({
       display: 'hours',
       time: this.props.initialTime,
       actions: [
-        { caption: 'Cancel', type: 'flat accent', onClick: this.onTimeCancel },
-        { caption: 'Ok', type: 'flat accent', onClick: this.onTimeSelected }
+        { label: 'Cancel', type: 'flat accent', onClick: this.onTimeCancel },
+        { label: 'Ok', type: 'flat accent', onClick: this.onTimeSelected }
       ]
     };
   },

spec/components/autocomplete.jsx

@@ -0,0 +1,51 @@
+/* global React */
+
+import Autocomplete from '../../components/autocomplete';
+
+export default React.createClass({
+  displayName: 'AutocompleteTest',
+
+  getInitialState () {
+    return {
+      countries: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
+      countries_obj: {
+        'ES-es': 'Spain',
+        'TH-th': 'Thailand',
+        'EN-gb': 'England',
+        'EN-en': 'USA'
+      }
+    };
+  },
+
+  onAutocompleteValues () {
+    console.log(this.refs.autocomplete_multiple.getValue());
+    console.log(this.refs.autocomplete_simple.getValue());
+  },
+
+  render () {
+    const countries_selected = ['USA', 'Tongo'];
+    const countries_obj_selected = 'TH-th';
+
+    return (
+      <section>
+        <h2>Autocomplete</h2>
+        <p>lorem ipsum...</p>
+
+        <Autocomplete
+          ref="autocomplete_multiple"
+          label="Choose a country"
+          onChange={this.onAutocompleteValues}
+          placeholder="Elements is up to you..."
+          dataSource={this.state.countries}
+          value={countries_selected}/>
+
+        <Autocomplete
+          ref="autocomplete_simple"
+          multiple={false}
+          onChange={this.onAutocompleteValues}
+          dataSource={this.state.countries_obj}
+          value={countries_obj_selected}/>
+      </section>
+    );
+  }
+});

spec/components/button.jsx

@@ -0,0 +1,25 @@
+/* global React */
+
+import Button from '../../components/button';
+
+export default React.createClass({
+  displayName: 'ButtonTest',
+
+  onClick (ref, method){
+    this.refs[ref][method]();
+  },
+
+  render () {
+    return (
+      <section>
+        <h2>Buttons</h2>
+        <p>lorem ipsum...</p>
+        <Button className="accent" label="Flat button" />
+        <Button className="primary" type="raised" label="Raised" />
+        <Button className="accent" type="raised" label="Raised" icon="assignment_turned_in" />
+        <Button className="primary" type="floating" icon="add" />
+        <Button className="accent mini" type="floating" icon="add" />
+      </section>
+    );
+  }
+});

spec/components/card.jsx

@@ -0,0 +1,43 @@
+/* global React */
+
+import Card from '../../components/card';
+
+export default React.createClass({
+  displayName: 'CardTest',
+
+  onClick () {
+    console.log('onClick', arguments);
+  },
+
+  onActionClick () {
+    console.log('onClick', arguments);
+  },
+
+  render () {
+    const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
+    const legend = 'Lorem Ipsum is simply dummy text';
+    const actions = [
+      { label: 'Save', icon: 'add', onClick: this.onActionClick },
+      { label: 'Close', onClick: this.onActionClick }];
+
+    return (
+      <section>
+        <h2>Cards</h2>
+        <h3>Basic properties</h3>
+
+        <Card title='Default Card' />
+        <Card title='Default Card loading' loading />
+        <Card title='Default Card with text' text={text} />
+        <Card title='Default Card with legend' legend={legend} />
+        <Card title='Default Card with actions' actions={actions} />
+        <Card title='Default Card with text and image' text={text} image='http://cdn.tapquo.com/photos/soyjavi.jpg' />
+        <Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} />
+        <Card title='Default Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
+        <h3>Sizes using type property</h3>
+        <Card type='small' title='Small Card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
+        <Card type='square' title='Square Card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
+        <Card type='wide' title='Wide card with text and onClick event' text={text} color='#00bcd4' onClick={this.onClick} />
+      </section>
+    );
+  }
+});

spec/components/dialog.jsx

@@ -0,0 +1,37 @@
+/* global React */
+
+import Button from '../../components/button';
+import Dialog from '../../components/dialog';
+
+export default React.createClass({
+  displayName: 'DialogTest',
+
+  getInitialState () {
+    return {
+      actions: [{
+        label: 'Cancel', style: 'transparent', onClick: this.onClose
+      }]
+    };
+  },
+
+  onClose () {
+    this.refs.dialog.hide();
+  },
+
+  onShow () {
+    this.refs.dialog.show();
+  },
+
+  render () {
+    return (
+      <section>
+        <h2>Dialog</h2>
+        <p>lorem ipsum...</p>
+        <Button type='raised' label='Show Dialog' onClick={this.onShow} />
+        <Dialog ref='dialog' type='profile' title='Your profile' className='small' actions={this.state.actions}>
+          <p>Welcome to your first Dialog</p>
+        </Dialog>
+      </section>
+    );
+  }
+});