fk-react-ui-components/components/SelectFilter/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 PropTypes from 'prop-types';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import SelectFilterContainer from './styles/SelectFilter';
import SelectOption from './SelectOption';

class SelectFilter extends React.Component {
    static arrowRenderer({ isOpen }) {
        if (isOpen) {
            return <i className="fa fa-chevron-up inprogress-icon-color" />;
        }
        return <i className="fa fa-chevron-down inprogress-icon-color" />;
    }

    static valueRenderer({ label }) {
        return <span className="selected-text">{label}</span>;
    }

    constructor(props) {
        super(props);
        this.onOptionChange = this.onOptionChange.bind(this);
    }

    onOptionChange(value) {
        if (this.props.onOptionChange) {
            this.props.onOptionChange(value);
        }
    }

    render() {
        const {
            width,
            height,
            simpleValue,
            placeholder,
            arrowRenderer,
            name,
            searchable,
            clearable,
            options,
            valueRenderer,
            value,
            optionComponent
        } = this.props;
        return (
            <SelectFilterContainer width={width} height={height}>
                <Select
                    simpleValue={simpleValue}
                    name={name}
                    placeholder={placeholder}
                    arrowRenderer={arrowRenderer || SelectFilter.arrowRenderer}
                    searchable={searchable}
                    clearable={clearable}
                    options={options}
                    onChange={this.onOptionChange}
                    valueRenderer={valueRenderer || SelectFilter.valueRenderer}
                    value={value}
                    optionComponent={optionComponent || SelectOption}
                />
            </SelectFilterContainer>
        );
    }
}

export default SelectFilter;

SelectFilter.propTypes = {
    onOptionChange: PropTypes.func,
    width: PropTypes.string,
    height: PropTypes.string,
    simpleValue: PropTypes.bool.isRequired,
    placeholder: PropTypes.string.isRequired,
    arrowRenderer: PropTypes.func,
    name: PropTypes.string.isRequired,
    searchable: PropTypes.bool.isRequired,
    clearable: PropTypes.bool.isRequired,
    options: PropTypes.arrayOf(
        PropTypes.shape({
            name: PropTypes.string,
            label: PropTypes.string,
            clearableValue: PropTypes.bool
        })
    ).isRequired,
    valueRenderer: PropTypes.func,
    value: PropTypes.string,
    optionComponent: PropTypes.func
};

SelectFilter.defaultProps = {
    onOptionChange: f => f,
    width: '220px',
    height: '20px',
    arrowRenderer: SelectFilter.arrowRenderer,
    valueRenderer: SelectFilter.valueRenderer,
    value: '',
    optionComponent: SelectOption
};