fk-react-ui-components/lib/ToggleComponent/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

/**
 * Created by manoraj.k on 17/08/17.
 */
import React from 'react';
import enhanceWithClickOutside from 'react-click-outside';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { ToggleComponentContainer, ResetButton } from './styles/ToggleComponent';

class ToggleComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: props.default,
            disabled: props.disable
        };
        _.bindAll(this, ['resetFilters', '_toggle']);
    }
    componentWillReceiveProps(nextProps) {
        if (this.props.disable !== nextProps.disable) {
            this.setState({
                disabled: nextProps.disable
            });
        }
        if (this.props.default !== nextProps.default) {
            this.setState({
                show: nextProps.default
            });
        }
    }
    resetFilters(event) {
        event.stopPropagation();
        this.props.resetFilters(this.props.name);
    }
    _toggle() {
        this.setState({
            show: !this.state.disabled && !this.state.show
        });
        if (this.props.onToggle) {
            this.props.onToggle(this.props.name);
        }
    }
    handleClickOutside() {
        if (this.state.show) {
            this._toggle.call(this);
        }
    }

    render() {
        let resetButton = '';
        if (this.props.activeFilter) {
            resetButton = React.createElement(ResetButton, {
                className: this.props.activeFilter ? 'fa fa-undo active-icon-color' : '',
                onClick: this.resetFilters
            });
        }

        return React.createElement(
            ToggleComponentContainer,
            { className: this.props.className },
            React.createElement(
                'div',
                {
                    onClick: this._toggle,
                    className: `toggle-button ${this.props.openedClass || ''}
                    ${this.props.activeFilter ? ' has-filter' : ''} ${this.state.disabled ? 'disabled' : 'active'}`
                },
                resetButton,
                this.props.label,
                React.createElement('span', {
                    className: `toggle-icon fa ${this.state.show ? 'fa-chevron-up ' : 'fa-chevron-down '}${this.props.activeFilter ? 'active-icon-color' : 'inprogress-icon-color'}`
                })
            ),
            this.state.show && this.props.children
        );
    }
}
ToggleComponent.propTypes = {
    openedClass: PropTypes.string,
    name: PropTypes.string,
    className: PropTypes.string,
    disable: PropTypes.bool,
    label: PropTypes.string,
    default: PropTypes.node,
    resetFilters: PropTypes.func,
    onToggle: PropTypes.func,
    activeFilter: PropTypes.string,
    children: PropTypes.node.isRequired
};

ToggleComponent.defaultProps = {
    default: false,
    disable: false,
    className: '',
    label: '',
    openedClass: '',
    name: '',
    resetFilters: f => f,
    onToggle: f => f,
    activeFilter: ''
};

export default enhanceWithClickOutside(ToggleComponent);
//# sourceMappingURL=index.js.map