From b8a9c475ac60f37284eb963ab03766a32e1a55ce Mon Sep 17 00:00:00 2001
From: Maks <Sam1812@yandex.ru>
Date: Fri, 7 Oct 2016 12:59:16 +0300
Subject: [PATCH 1/6] Switcher

---
 src/Switcher/Switcher.jsx | 64 +++++++++++++++++++++++++++++++++++++++
 src/Switcher/Switcher.md  | 12 ++++++++
 src/Switcher/index.js     |  1 +
 src/Switcher/story.jsx    | 18 +++++++++++
 4 files changed, 95 insertions(+)
 create mode 100644 src/Switcher/Switcher.jsx
 create mode 100644 src/Switcher/Switcher.md
 create mode 100644 src/Switcher/index.js
 create mode 100644 src/Switcher/story.jsx

diff --git a/src/Switcher/Switcher.jsx b/src/Switcher/Switcher.jsx
new file mode 100644
index 0000000..2560429
--- /dev/null
+++ b/src/Switcher/Switcher.jsx
@@ -0,0 +1,64 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+
+export default class Switcher extends React.Component {
+    static propTypes = {
+        /**
+         * Is switcher in checked state
+         */
+        isChecked: PropTypes.bool,
+        /**
+         * On click event handler
+         */
+        onClick: PropTypes.func
+    };
+
+    static defaultProps = {
+        isChecked: false
+    };
+
+    render() {
+        const props = this.props;
+
+        return (
+            <div onClick={props.onClick}>
+                <div style={props.isChecked ? { ...styles.main, ...styles.on } : styles.main}>
+                    <div style={props.isChecked ? { ...styles.toggle, ...styles.toggleOn } : styles.toggle }>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+const styles = {
+    main: {
+        width: '32px',
+        height: '16px',
+        borderRadius: '50px',
+        cursor: 'pointer',
+        display: 'inline-block',
+        float: 'left',
+        boxShadow: 'rgba(27, 42, 48, 0.329412) 0px 1px 2px inset',
+        background: 'rgb(195, 200, 203)'
+    },
+    toggle: {
+        boxShadow: 'rgba(27, 42, 48, 0.4) 0px 2px 3px',
+        width: '12px',
+        height: '12px',
+        left: '2px',
+        top: '2px',
+        borderRadius: '100%',
+        background: '#ffffff',
+        position: 'relative',
+        transition: 'left .1s ease-in-out'
+    },
+    on: {
+        background: 'rgb(112, 195, 22)'
+    },
+    toggleOn: {
+        left: '19px',
+        color: '#70c316'
+    }
+};
diff --git a/src/Switcher/Switcher.md b/src/Switcher/Switcher.md
new file mode 100644
index 0000000..c4dbd26
--- /dev/null
+++ b/src/Switcher/Switcher.md
@@ -0,0 +1,12 @@
+### Usage
+
+```js
+import Switcher from '@roistat/ui/lib/Switcher';
+```
+const View = require('../View').default;
+
+*Switcher*
+
+    <View>
+        <Switcher onClick={() => setState({ isChecked: !state.isChecked })} isChecked={state.isChecked} />
+    </View>
diff --git a/src/Switcher/index.js b/src/Switcher/index.js
new file mode 100644
index 0000000..39a6558
--- /dev/null
+++ b/src/Switcher/index.js
@@ -0,0 +1 @@
+export { default } from './Switcher.jsx';
diff --git a/src/Switcher/story.jsx b/src/Switcher/story.jsx
new file mode 100644
index 0000000..a661306
--- /dev/null
+++ b/src/Switcher/story.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Switcher from './Switcher';
+import View from '../View';
+import StateProvider from '../StateProvider';
+
+storiesOf('Switcher', module)
+    .add('Switcher', () => (
+        <View>
+            <StateProvider>
+                {(state, setState) => (
+                    <div>
+                        <Switcher onClick={() => setState({ isChecked: !state.isChecked })} isChecked={state.isChecked} />
+                    </div>
+                )}
+            </StateProvider>
+        </View>
+    ));

From dbda9d7f87f3ad87c6f682482af2f55ce636697e Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Tue, 25 Oct 2016 11:06:48 +0300
Subject: [PATCH 2/6] Update Switcher.jsx

---
 src/Switcher/Switcher.jsx | 68 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/Switcher/Switcher.jsx b/src/Switcher/Switcher.jsx
index 2560429..688b407 100644
--- a/src/Switcher/Switcher.jsx
+++ b/src/Switcher/Switcher.jsx
@@ -2,37 +2,86 @@
 
 import React, { PropTypes } from 'react';
 
+import { COLOR } from '../const/theme';
+
+import { StyleSheet, css } from '../helpers/styles';
+
 export default class Switcher extends React.Component {
     static propTypes = {
         /**
          * Is switcher in checked state
          */
         isChecked: PropTypes.bool,
+        /**
+         * Is switcher in disabled state
+         */
+        isDisabled: PropTypes.bool,
         /**
          * On click event handler
          */
-        onClick: PropTypes.func
+        onClick: PropTypes.func,
+        /**
+         * On change event handler
+         */
+        onChange: PropTypes.func
     };
 
     static defaultProps = {
-        isChecked: false
+        isChecked: false,
+        isDisabled: false
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isChecked: props.isChecked,
+            isDisabled: props.isDisabled
+        };
+
+        this._onClickHandler = this._onClickHandler.bind(this);
+        this._onChangeHandler = this._onChangeHandler.bind(this);
+    }
+
+    _onChangeHandler(event) {
+        const props = this.props;
+
+        if (!props.isDisabled) {
+            props.onChange && props.onChange(event);
+        }
+    }
+
+    _onClickHandler(event) {
+        const props = this.props;
+
+        if (!props.isDisabled) {
+            this.setState({ isChecked: !this.state.isChecked });
+            props.onClick && props.onClick(event);
+        };
+    }
+
+    getDefaultRenderProps() {
+        return {
+            onChange: this._onChangeHandler,
+            onClick: this._onClickHandler
+        };
+    }
+
     render() {
         const props = this.props;
 
         return (
-            <div onClick={props.onClick}>
-                <div style={props.isChecked ? { ...styles.main, ...styles.on } : styles.main}>
-                    <div style={props.isChecked ? { ...styles.toggle, ...styles.toggleOn } : styles.toggle }>
+            <div {...this.getDefaultRenderProps()}>
+                <div className={css(STYLE.main, this.state.isChecked && STYLE.on, props.isDisabled && STYLE.isDisabled )}>
+                    <div className={css(STYLE.toggle, this.state.isChecked && STYLE.toggleOn, props.isDisabled && STYLE.isDisabled )}>
                     </div>
                 </div>
             </div>
-        )
+            )
     }
 }
 
-const styles = {
+const STYLE = StyleSheet.create({
     main: {
         width: '32px',
         height: '16px',
@@ -60,5 +109,8 @@ const styles = {
     toggleOn: {
         left: '19px',
         color: '#70c316'
+    },
+    isDisabled: {
+        opacity: 0.5
     }
-};
+});

From e9e87d3531ca2a070c2ab78b1f7041464f17ad80 Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Tue, 25 Oct 2016 11:08:55 +0300
Subject: [PATCH 3/6] Update story.jsx

---
 src/Switcher/story.jsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/Switcher/story.jsx b/src/Switcher/story.jsx
index a661306..97f66a1 100644
--- a/src/Switcher/story.jsx
+++ b/src/Switcher/story.jsx
@@ -2,17 +2,22 @@ import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import Switcher from './Switcher';
 import View from '../View';
-import StateProvider from '../StateProvider';
 
 storiesOf('Switcher', module)
     .add('Switcher', () => (
         <View>
-            <StateProvider>
-                {(state, setState) => (
-                    <div>
-                        <Switcher onClick={() => setState({ isChecked: !state.isChecked })} isChecked={state.isChecked} />
-                    </div>
-                )}
-            </StateProvider>
+            <Switcher />
+        </View>
+    ))
+
+    .add('Switcher is disabled', () => (
+        <View>
+            <Switcher isDisabled={true} />
+        </View>
+    ))
+
+    .add('Switcher is checked', () => (
+        <View>
+            <Switcher isChecked={true} />
         </View>
     ));

From a49dedf562cd5bb20bbe04fd9f631706962b8a2f Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Tue, 25 Oct 2016 11:10:07 +0300
Subject: [PATCH 4/6] Update Switcher.md

---
 src/Switcher/Switcher.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Switcher/Switcher.md b/src/Switcher/Switcher.md
index c4dbd26..a75c9e9 100644
--- a/src/Switcher/Switcher.md
+++ b/src/Switcher/Switcher.md
@@ -8,5 +8,17 @@ const View = require('../View').default;
 *Switcher*
 
     <View>
-        <Switcher onClick={() => setState({ isChecked: !state.isChecked })} isChecked={state.isChecked} />
+        <Switcher />
+    </View>
+
+*Switcher is disabled*
+
+    <View>
+        <Switcher isDisabled={true} />
+    </View>
+
+*Switcher is checked*
+
+    <View>
+        <Switcher isChecked={true} />
     </View>

From 9e9d87af1a55c766d37b1f9b24e403f805734eda Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Thu, 27 Oct 2016 10:16:21 +0300
Subject: [PATCH 5/6] Update Switcher.jsx

---
 src/Switcher/Switcher.jsx | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/Switcher/Switcher.jsx b/src/Switcher/Switcher.jsx
index 688b407..8224c4b 100644
--- a/src/Switcher/Switcher.jsx
+++ b/src/Switcher/Switcher.jsx
@@ -27,27 +27,22 @@ export default class Switcher extends React.Component {
     };
 
     static defaultProps = {
-        isChecked: false,
-        isDisabled: false
+        isChecked: false
     };
 
     constructor(props) {
         super(props);
 
         this.state = {
-            isChecked: props.isChecked,
-            isDisabled: props.isDisabled
+            isChecked: props.isChecked
         };
 
         this._onClickHandler = this._onClickHandler.bind(this);
-        this._onChangeHandler = this._onChangeHandler.bind(this);
     }
 
-    _onChangeHandler(event) {
-        const props = this.props;
-
-        if (!props.isDisabled) {
-            props.onChange && props.onChange(event);
+    componentWillReceiveProps(newProps) {
+        if (this.state.isChecked !== newProps.isChecked) {
+            this.setState({ isChecked: newProps.isChecked });
         }
     }
 
@@ -55,15 +50,10 @@ export default class Switcher extends React.Component {
         const props = this.props;
 
         if (!props.isDisabled) {
-            this.setState({ isChecked: !this.state.isChecked });
-            props.onClick && props.onClick(event);
-        };
-    }
-
-    getDefaultRenderProps() {
-        return {
-            onChange: this._onChangeHandler,
-            onClick: this._onClickHandler
+            this.setState({ isChecked: !this.state.isChecked }, () => {
+                props.onClick && props.onClick(event); 
+                props.onChange && props.onChange(this.state.isChecked);
+            })
         };
     }
 
@@ -71,7 +61,7 @@ export default class Switcher extends React.Component {
         const props = this.props;
 
         return (
-            <div {...this.getDefaultRenderProps()}>
+            <div onClick={this._onClickHandler} >
                 <div className={css(STYLE.main, this.state.isChecked && STYLE.on, props.isDisabled && STYLE.isDisabled )}>
                     <div className={css(STYLE.toggle, this.state.isChecked && STYLE.toggleOn, props.isDisabled && STYLE.isDisabled )}>
                     </div>

From 7656d13887ad8a8149968e9838f389cb719e0a31 Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Tue, 1 Nov 2016 09:08:58 +0300
Subject: [PATCH 6/6] Update index.js

---
 src/Switcher/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Switcher/index.js b/src/Switcher/index.js
index 39a6558..828e854 100644
--- a/src/Switcher/index.js
+++ b/src/Switcher/index.js
@@ -1 +1 @@
-export { default } from './Switcher.jsx';
+export { default } from './Switcher';