Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/Checkable/Checkable.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Provider } from './context';
+
+class Checkable extends React.Component {
+    static propTypes = {
+        children: PropTypes.node.isRequired,
+        tag: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.string
+        ])
+    };
+    static defaultProps = {
+        tag: "div"
+    };
+
+    constructor(props) {
+        super(props);
+        
+        this.state = {
+            isChecked: false
+        };
+    }
+
+    render() {
+        const { tag, children, ...otherProps } = this.props;
+        const Tag = this.props.tag;
+
+        return (
+            <Provider
+                value={{
+                    isChecked: this.state.isChecked,
+                    toggle: (enabled) => { this.setState({ isChecked: enabled || !this.state.isChecked }) }
+                }}
+            >
+                <Tag { ...otherProps }>
+                    { children }
+                </Tag>
+            </Provider>
+        );
+    }
+}
+
+export { Checkable };

app/components/Checkable/CheckableInput.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'reactstrap';
+
+import { Consumer } from './context';
+
+class CheckableInput extends React.Component {
+    static propTypes = {
+        tag: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.string
+        ]),
+        type: PropTypes.string,
+        defaultChecked: PropTypes.bool,
+        toggle: PropTypes.func,
+        isChecked: PropTypes.bool
+    };
+    static defaultProps = {
+        tag: Input,
+        type: "checkbox"
+    };
+
+    componentDidMount() {
+        if (this.props.defaultChecked) {
+            this.props.toggle(this.props.defaultChecked);
+        }
+    }
+
+    render() {
+        const { tag, isChecked, toggle, ...otherProps } = this.props;
+        const Tag = tag;
+
+        return (
+            <Tag
+                checked={ isChecked }
+                onChange={ (e) => { toggle(e.target.checked) } }
+                { ...otherProps }
+            />
+        );
+    }
+}
+
+const ContextCheckableInput = (props) => (
+    <Consumer>
+    {
+        (value) => (
+            <CheckableInput { ...{ ...props, ...value } } />
+        )
+    }
+    </Consumer>
+);
+
+export { ContextCheckableInput as CheckableInput };

app/components/Checkable/CheckableTrigger.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Consumer } from './context';
+
+import classes from './CheckableTrigger.scss';
+
+const CheckableTrigger = (props) => {
+    const { children, tag, className, ...otherProps } = props;
+    const Tag = tag;
+    const tagClass = classNames(classes['checkable__trigger'], className);
+
+    return (
+        <Consumer>
+        {
+            (value) => (
+                <Tag { ...otherProps } className={ tagClass } onClick={ () => { value.toggle() } }>
+                    { children }
+                </Tag>
+            )
+        }
+        </Consumer>
+    );
+};
+CheckableTrigger.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tag: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string
+    ])
+};
+CheckableTrigger.defaultProps = {
+    tag: "div"
+};
+
+export { CheckableTrigger };

app/components/Checkable/CheckableTrigger.scss

@@ -0,0 +1,3 @@
+.checkable__trigger {
+    cursor: pointer;
+}

app/components/Checkable/context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const { Provider, Consumer } = React.createContext();
+
+export {
+    Provider,
+    Consumer
+};

app/components/Checkable/index.js

@@ -0,0 +1,8 @@
+import { Checkable } from './Checkable';
+import { CheckableTrigger } from './CheckableTrigger';
+import { CheckableInput } from './CheckableInput';
+
+Checkable.Trigger = CheckableTrigger;
+Checkable.Input = CheckableInput;
+
+export default Checkable;