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

import React from 'react';
import { PropTypes } from 'prop-types';
import { FilterComponentContainer, FiltersContainer, Filter, Filters, FilterActions, ResetButton, ApplyButton, Label, Chip, Chips, ChipsContainer } from './styles/FilterComponent';

class FilterComponent extends React.Component {
    render() {
        const {
            onFilterReset,
            onFilterSubmit,
            onFilterClear,
            expand,
            filterChips,
            className
        } = this.props;
        return React.createElement(
            FilterComponentContainer,
            {
                className: `${className} ${expand ? 'open' : ''}`
            },
            filterChips && filterChips.length > 0 ? React.createElement(
                ChipsContainer,
                null,
                React.createElement(
                    Label,
                    null,
                    'Filter by'
                ),
                React.createElement(
                    Chips,
                    null,
                    filterChips.map(filter => React.createElement(
                        Chip,
                        { key: `${filter.type}_${filter.key}` },
                        React.createElement(
                            'span',
                            null,
                            filter.value
                        ),
                        React.createElement('i', {
                            className: 'fa fa-times',
                            'aria-hidden': 'true',
                            onClick: () => onFilterClear(filter)
                        })
                    ))
                )
            ) : null,
            React.createElement(
                FiltersContainer,
                null,
                React.createElement(
                    Filters,
                    null,
                    React.Children.map(this.props.children, filterItem => React.createElement(
                        Filter,
                        null,
                        filterItem
                    ))
                ),
                React.createElement(
                    FilterActions,
                    null,
                    React.createElement(
                        ResetButton,
                        { onClick: onFilterReset },
                        'Reset'
                    ),
                    React.createElement(
                        ApplyButton,
                        { onClick: onFilterSubmit },
                        'Apply'
                    )
                )
            )
        );
    }
}

FilterComponent.defaultProps = {
    filterChips: [],
    expand: false,
    className: ''
};

FilterComponent.propTypes = {
    /**
     * expands/collapses the filter component
     */
    expand: PropTypes.bool,
    /**
     * class for the component
     */
    className: PropTypes.string,
    /**
     * function to call on Apply clicked
     */
    onFilterSubmit: PropTypes.func.isRequired,
    /**
     * Filters to be shown
     */
    children: PropTypes.element.isRequired,
    /**
     * function to call when a chip is cleared
     */
    onFilterClear: PropTypes.func.isRequired,
    /**
     * function to call on Reset clicked
     */
    onFilterReset: PropTypes.func.isRequired,
    /**
     * chips too be shown
     */
    filterChips: PropTypes.arrayOf(PropTypes.string)
};

export default FilterComponent;
//# sourceMappingURL=FilterComponent.js.map