fk-react-ui-components/lib/FormElements/Checkbox/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import PropTypes from 'prop-types';
import classname from 'classnames';
import styled from 'styled-components';
import FormElement from "../FormElement.js";

const CheckboxStyled = styled.input`
    margin: 10px;
`;

const CheckboxLabel = styled.label`
    text-align: center;
`;

class CheckBox extends FormElement {

    constructor(props) {
        super(props);
        this.state = _extends({}, this.state, {
            selected: typeof props.selected !== 'undefined' ? props.selected : !!props.initialSelected
        });
        this.handleChange = this.handleChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.selected !== this.props.selected) {
            this.setState({
                selected: nextProps.selected
            });
        }
    }

    handleChange(event) {
        this.setState(prevState => ({
            selected: !prevState.selected
        }));
        super.handleChange(event, this.state.selected ? '' : 'true');
    }

    render() {
        return React.createElement(
            'div',
            null,
            React.createElement(CheckboxStyled, {
                checked: this.state.selected,
                type: 'checkbox',
                name: this.props.name || '',
                value: this.props.value || '',
                id: this.props.id || '',
                style: this.props.style,
                className: this.props.className,
                onChange: this.handleChange,
                disabled: this.props.disabled
            }),
            React.createElement(
                CheckboxLabel,
                {
                    className: this.props.labelClass,
                    style: this.props.labelStyle
                },
                this.props.label
            )
        );
    }
}

export default CheckBox;
//# sourceMappingURL=index.js.map