Merge pull request #87 from ngsru/fix-module-checkbox

Fix module checkbox

Author: asvetliakov

.editorconfig

@@ -4,7 +4,7 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,jsx,es6}]
+[*.{js,jsx,es6,md}]
 charset = utf-8
 indent_style = space
 indent_size = 4

index.d.ts

@@ -1333,12 +1333,10 @@ export interface CheckboxProps extends BaseProps<Checkbox> {
     checked?: boolean;
     fitted?: boolean;
     disabled?: boolean;
-    indeterminate?: boolean;
     name?: string;
-    radio?: boolean;
+    onClick?: React.MouseEventHandler;
     readOnly?: boolean;
-    slider?: boolean;
-    toggle?: boolean;
+    type?: "default" | "radio" | "toggle" | "slider";
 }
 export class Checkbox extends React.Component<CheckboxProps, any> {
 }
@@ -1485,4 +1483,4 @@ export interface ModalProps extends BaseProps<Modal> {
      */
     onRequestClose: () => void;
 }
-export class Modal extends React.Component<ModalProps, any> { }
+export class Modal extends React.Component<ModalProps, any> { }

src/components/modules/checkbox/checkbox.jsx

@@ -1,79 +1,82 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import DefaultProps  from '../../defaultProps';
 
 export default class Checkbox extends Component {
     static propTypes = {
+        ...DefaultProps.propTypes,
+
+        /**
+         * State checked
+         */
         checked: React.PropTypes.bool,
-        children: React.PropTypes.node,
-        className: React.PropTypes.any,
-        component: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string
-        ]),
-        defaultClasses: React.PropTypes.bool,
+        /**
+         * Does not allow user interaction
+         */
         disabled: React.PropTypes.bool,
-        fitted: React.PropTypes.bool,
-        indeterminate: React.PropTypes.bool,
-        name: React.PropTypes.string,
-        onClick: React.PropTypes.func,
-        radio: React.PropTypes.bool,
+        /**
+         * It does disabled, but does not allow user interaction
+         */
         readOnly: React.PropTypes.bool,
-        slider: React.PropTypes.bool,
-        toggle: React.PropTypes.bool
+        /**
+         * Callback handler to click checkbox
+         */
+        onClick: React.PropTypes.func,
+        /**
+        * Attr name
+         */
+        name: React.PropTypes.string,
+        /**
+        * Checkbox - appearance
+         */
+        type: React.PropTypes.oneOf(['default', 'radio', 'toggle', 'slider']),
+        /**
+        * A fitted checkbox does not leave padding for a label
+         */
+        fitted: React.PropTypes.bool
     };
 
     static defaultProps = {
-        component: 'div',
-        defaultClasses: true
+        ...DefaultProps.defaultProps,
+        type: 'default',
+        onClick: () => { }
     };
 
-    constructor(props) {
-        super(props);
+    onClick = (event) => {
+        if (this.props.disabled || this.props.readOnly) return;
 
-        this.state = {
-            active: this.props.checked
-        }
-    }
-
-    onClick() {
-        if (!this.state.active || (this.state.active && !this.props.radio)) {
-            this.setState({
-                active: !this.state.active
-            });
-        }
-    }
+        this.props.onClick(event);
+    };
 
     renderChildren() {
         /* eslint-disable no-use-before-define */
-        let { children, defaultClasses, className, onClick,
-              radio, slider, toggle, component, readOnly, checked,
-              disabled, ...other } = this.props;
+        let { children, defaultClasses, className, onClick, type,
+              component, readOnly, checked, ...other } = this.props;
         /* eslint-enable no-use-before-define */
 
         let childElements = [
-            React.DOM.input({
-                type: 'checkbox',
-                key: 'input',
-                className: 'hidden',
-                checked: this.state.active || this.props.checked,
-                readOnly: true,
-                ...other
-            }),
-            React.DOM.label({
-                key: 'label'
-            }, this.props.children)
+            <input
+                { ...other }
+                type="checkbox"
+                key="input"
+                className="hidden"
+                readOnly
+                checked={checked} />,
+            <label key="label">
+                {children}
+            </label>
         ];
 
         return childElements;
     }
 
     render() {
         /* eslint-disable no-use-before-define */
-        let { component, defaultClasses, name, ...other } = this.props;
+        let { component, defaultClasses, checked, type, onClick, name, ...other } = this.props;
         /* eslint-enable no-use-before-define */
 
         other.className = classNames(this.props.className, this.getClasses());
-        other.onClick = typeof this.props.onClick === 'function' ? this.props.onClick : this.onClick.bind(this);
+        other.onClick = this.onClick;
 
         return React.createElement(
             this.props.component,
@@ -91,16 +94,16 @@ export default class Checkbox extends Component {
             // positioning
 
             // types
-            radio: this.props.radio,
+            radio: this.props.type == 'radio',
+            slider: this.props.type == 'slider',
+            toggle: this.props.type == 'toggle',
 
              // variations
             fitted: this.props.fitted,
-            slider: this.props.slider,
-            toggle: this.props.toggle,
 
             // state
             'read-only': this.props.readOnly,
-            checked: this.state.active || this.props.checked,
+            checked: this.props.checked,
             disabled: this.props.disabled,
             indeterminate: this.props.indeterminate
         };

src/components/modules/checkbox/examples/checkbox.examples.md

@@ -0,0 +1,27 @@
+A checkbox allows a user to select a value from a small set of options, often binary
+
+## Types
+
+```require
+./types.jsx
+```
+
+### Radio - a lot of
+
+```require
+./radios.jsx
+```
+
+## State
+
+### Read-only
+
+```require
+./read-only.jsx
+```
+
+### Disabled
+
+```require
+./disabled.jsx
+```

src/components/modules/checkbox/examples/disabled.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Checkbox from '../checkbox';
+import Form from '../../../collections/form/fields';
+import Field from './../../../collections/form/form';
+
+class MyCheckboxes extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isCheckbox: false,
+            isRadio: false,
+            isSlider: false,
+            isToggle: false
+        }
+    }
+
+    onClickCheckbox(name) {
+        this.setState({
+            [name]: !this.state[name]
+        });
+    }
+
+    render() {
+        let { isCheckbox, isRadio, isSlider, isToggle } = this.state;
+
+        return (
+            <Form>
+                <Field>
+                    <Checkbox
+                        disabled
+                        checked={isCheckbox}
+                        onClick={this.onClickCheckbox.bind(this, 'isCheckbox')}
+                    >
+                        Disabled, you can test
+                    </Checkbox>
+                </Field>
+                <Field>
+                    <Checkbox
+                        disabled
+                        type="radio"
+                        checked={isRadio}
+                        onClick={this.onClickCheckbox.bind(this, 'isRadio')}
+                    >
+                        Disabled, you can test
+                    </Checkbox>
+                </Field>
+                <Field>
+                    <Checkbox
+                        disabled
+                        type="slider"
+                        checked={isSlider}
+                        onClick={this.onClickCheckbox.bind(this, 'isSlider')}
+                    >
+                        Disabled, you can test
+                    </Checkbox>
+                </Field>
+                <Field>
+                    <Checkbox
+                        disabled
+                        type="toggle"
+                        checked={isToggle}
+                        onClick={this.onClickCheckbox.bind(this, 'isToggle')}
+                    >
+                        Disabled, you can test
+                    </Checkbox>
+                </Field>
+            </Form>
+        );
+    }
+}
+
+<MyCheckboxes />

src/components/modules/checkbox/examples/radios.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Checkbox from '../checkbox';
+import Form from '../../../collections/form/fields';
+import Fields from '../../../collections/form/Fields';
+import Field from './../../../collections/form/form';
+
+class MyRadios extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: null
+        };
+    }
+
+    onClickRadio(value) {
+        this.setState({
+            value: value
+        });
+    }
+
+    render() {
+        let { value } = this.state;
+
+        return (
+            <Form>
+                <Fields>
+                    <label>Omg bananas!</label>
+                    <Field>
+                        <Checkbox
+                            type="radio"
+                            checked={value === 'one'}
+                            onClick={this.onClickRadio.bind(this, 'one')}
+                        >
+                            One banana
+                        </Checkbox>
+                    </Field>
+                    <Field>
+                        <Checkbox
+                            type="radio"
+                            checked={value === 'two'}
+                            onClick={this.onClickRadio.bind(this, 'two')}
+                        >
+                            Two banana
+                        </Checkbox>
+                    </Field>
+                </Fields>
+            </Form>
+        );
+    }
+}
+
+<MyRadios />