Pure <Switch>

Author: soyjavi

components/switch/index.jsx

@@ -10,9 +10,7 @@ class Switch extends React.Component {
     disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
     name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
+    onChange: React.PropTypes.func
   };
 
   static defaultProps = {
@@ -21,19 +19,9 @@ class Switch extends React.Component {
     disabled: false
   };
 
-  state = {
-    checked: this.props.checked
-  };
-
   handleChange = (event) => {
-    this.setState({checked: !this.state.checked}, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
-  handleClick = (event) => {
     events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
+    if (this.props.onChange && !this.props.disabled) this.props.onChange(event);
   };
 
   handleInputClick = (event) => {
@@ -46,19 +34,19 @@ class Switch extends React.Component {
 
   render () {
     let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    const switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
+    const switchClassName = style[this.props.checked ? 'on' : 'off'];
     if (this.props.className) labelClassName += ` ${this.props.className}`;
 
     return (
       <label
         data-react-toolbox='checkbox'
         className={labelClassName}
-        onClick={this.handleClick}
+        onClick={this.handleChange}
       >
         <input
           {...this.props}
           ref='input'
-          checked={this.state.checked}
+          checked={this.props.checked}
           className={style.input}
           onChange={this.handleChange}
           onClick={this.handleInputClick}
@@ -81,14 +69,6 @@ class Switch extends React.Component {
   focus () {
     this.refs.input.focus();
   }
-
-  getValue () {
-    return this.state.checked;
-  }
-
-  setValue (value) {
-    this.setState({checked: value});
-  }
 }
 
 export default Switch;

components/switch/readme.md

@@ -24,6 +24,4 @@ const SwitchTest = () => (
 | `disabled`     | `Boolean`  | `false`  | If true, component will be disabled.|
 | `label`        | `String`   |       | The text string to use for the floating label element.|
 | `name`         | `String`   |        | The text string used as name of the input.|
-| `onBlur`       | `Function` |        | Callback function that is fired when when the switch is blurred.|
 | `onChange`     | `Function` |        | Callback function that is fired when the components's value changes.|
-| `onFocus`      | `Function`  |        | Callback function fire when the switch is focused.|

components/switch/style.scss

@@ -48,7 +48,7 @@
   transition-duration: $switch-ripple-duration;
 }
 
-.switch-on {
+.on {
   @extend %switch;
   background: $switch-track-on-color;
   .thumb {
@@ -58,7 +58,7 @@
   }
 }
 
-.switch-off {
+.off {
   @extend %switch;
   background: $switch-track-off-color;
   .thumb {

docs/app/components/layout/main/modules/examples/switch_example_1.txt

@@ -1,9 +1,36 @@
-const SwitchTest = () => (
-  <fieldset>
-    <Switch label="Push notifications" />
-    <Switch checked label="Mail notifications" />
-    <Switch disabled label="Nothing, thanks"/>
-  </fieldset>
-);
+class SwitchTest extends React.Component {
+  state = {
+    switch: [true, false, false]
+  };
+
+  handleChange = (index) => {
+    const state = this.state.switch;
+    state[index] = !state[index];
+    this.setState({switch: state});
+  };
+
+  render () {
+    return (
+      <section>
+        <Switch
+          checked={this.state.switch[0]}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 0)}
+        />
+        <Switch
+          checked={this.state.switch[1]}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 1)}
+        />
+        <Switch
+          checked={this.state.switch[2]}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 2)}
+        />
+      </section>
+    );
+  }
+}
 
 return <SwitchTest />;

spec/components/switch.jsx

@@ -2,18 +2,37 @@ import React from 'react';
 import Switch from '../../components/switch';
 
 class SwitchTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('[Switch] Changed', instance.getValue());
+  state = {
+    switch: [true, false, false]
+  };
+
+  handleChange = (index) => {
+    const state = this.state.switch;
+    state[index] = !state[index];
+    this.setState({switch: state});
   };
 
   render () {
     return (
       <section>
         <h5>Switches</h5>
         <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
-        <Switch label="Push notifications" />
-        <Switch checked label="Mail notifications" onChange={this.handleChange} />
-        <Switch disabled label="Nothing, thanks"/>
+        <Switch
+          checked={this.state.switch[0]}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 0)}
+        />
+        <Switch
+          checked={this.state.switch[1]}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 1)}
+        />
+        <Switch
+          checked={this.state.switch[2]}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 2)}
+        />
       </section>
     );
   }