diff --git a/src/Switcher/Switcher.jsx b/src/Switcher/Switcher.jsx new file mode 100644 index 0000000..8224c4b --- /dev/null +++ b/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 ( +
+
+
+
+
+
+ ) + } +} + +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 + } +}); diff --git a/src/Switcher/Switcher.md b/src/Switcher/Switcher.md new file mode 100644 index 0000000..a75c9e9 --- /dev/null +++ b/src/Switcher/Switcher.md @@ -0,0 +1,24 @@ +### Usage + +```js +import Switcher from '@roistat/ui/lib/Switcher'; +``` +const View = require('../View').default; + +*Switcher* + + + + + +*Switcher is disabled* + + + + + +*Switcher is checked* + + + + diff --git a/src/Switcher/index.js b/src/Switcher/index.js new file mode 100644 index 0000000..828e854 --- /dev/null +++ b/src/Switcher/index.js @@ -0,0 +1 @@ +export { default } from './Switcher'; diff --git a/src/Switcher/story.jsx b/src/Switcher/story.jsx new file mode 100644 index 0000000..97f66a1 --- /dev/null +++ b/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', () => ( + + + + )) + + .add('Switcher is disabled', () => ( + + + + )) + + .add('Switcher is checked', () => ( + + + + ));