fk-react-ui-components/lib/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 React.createElement('i', { className: 'fa fa-chevron-up inprogress-icon-color' });
        }
        return React.createElement('i', { className: 'fa fa-chevron-down inprogress-icon-color' });
    }

    static valueRenderer({ label }) {
        return React.createElement(
            'span',
            { className: 'selected-text' },
            label
        );
    }

    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 React.createElement(
            SelectFilterContainer,
            { width: width, height: height },
            React.createElement(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
            })
        );
    }
}

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
};
//# sourceMappingURL=index.js.map