Switcher

src/Switcher/Switcher.jsx

@@ -0,0 +1,106 @@
+'use strict';
+
+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,
+        /**
+         * On change event handler
+         */
+        onChange: PropTypes.func
+    };
+
+    static defaultProps = {
+        isChecked: false
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isChecked: props.isChecked
+        };
+
+        this._onClickHandler = this._onClickHandler.bind(this);
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (this.state.isChecked !== newProps.isChecked) {
+            this.setState({ isChecked: newProps.isChecked });
+        }
+    }
+
+    _onClickHandler(event) {
+        const props = this.props;
+
+        if (!props.isDisabled) {
+            this.setState({ isChecked: !this.state.isChecked }, () => {
+                props.onClick && props.onClick(event); 
+                props.onChange && props.onChange(this.state.isChecked);
+            })
+        };
+    }
+
+    render() {
+        const props = this.props;
+
+        return (
+            <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>
+                </div>
+            </div>
+            )
+    }
+}
+
+const STYLE = StyleSheet.create({
+    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'
+    },
+    isDisabled: {
+        opacity: 0.5
+    }
+});

src/Switcher/Switcher.md

@@ -0,0 +1,24 @@
+### Usage
+
+```js
+import Switcher from '@roistat/ui/lib/Switcher';
+```
+const View = require('../View').default;
+
+*Switcher*
+
+    <View>
+        <Switcher />
+    </View>
+
+*Switcher is disabled*
+
+    <View>
+        <Switcher isDisabled={true} />
+    </View>
+
+*Switcher is checked*
+
+    <View>
+        <Switcher isChecked={true} />
+    </View>

src/Switcher/index.js

@@ -0,0 +1 @@
+export { default } from './Switcher';

src/Switcher/story.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Switcher from './Switcher';
+import View from '../View';
+
+storiesOf('Switcher', module)
+    .add('Switcher', () => (
+        <View>
+            <Switcher />
+        </View>
+    ))
+
+    .add('Switcher is disabled', () => (
+        <View>
+            <Switcher isDisabled={true} />
+        </View>
+    ))
+
+    .add('Switcher is checked', () => (
+        <View>
+            <Switcher isChecked={true} />
+        </View>
+    ));