fk-react-ui-components/components/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 = (
                <ResetButton
                    className={
                        this.props.activeFilter
                            ? 'fa fa-undo active-icon-color'
                            : ''
                    }
                    onClick={this.resetFilters}
                />
            );
        }

        return (
            <ToggleComponentContainer className={this.props.className}>
                <div
                    onClick={this._toggle}
                    className={`toggle-button ${this.props.openedClass || ''}
                    ${this.props.activeFilter ? ' has-filter' : ''} ${
                        this.state.disabled ? 'disabled' : 'active'
                    }`}
                >
                    {resetButton}
                    {this.props.label}
                    <span
                        className={`toggle-icon fa ${
                            this.state.show
                                ? 'fa-chevron-up '
                                : 'fa-chevron-down '
                        }${
                            this.props.activeFilter
                                ? 'active-icon-color'
                                : 'inprogress-icon-color'
                        }`}
                    />
                </div>
                {this.state.show && this.props.children}
            </ToggleComponentContainer>
        );
    }
}
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)