fk-react-ui-components/components/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 (
            <FilterComponentContainer
                className={`${className} ${expand ? 'open' : ''}`}
            >
                {filterChips && filterChips.length > 0 ? (
                    <ChipsContainer>
                        <Label>Filter by</Label>
                        <Chips>
                            {filterChips.map(filter => (
                                <Chip key={`${filter.type}_${filter.key}`}>
                                    <span>{filter.value}</span>
                                    <i
                                        className="fa fa-times"
                                        aria-hidden="true"
                                        onClick={() => onFilterClear(filter)}
                                    />
                                </Chip>
                            ))}
                        </Chips>
                    </ChipsContainer>
                ) : null}
                <FiltersContainer>
                    <Filters>
                        {React.Children.map(this.props.children, filterItem => (
                            <Filter>{filterItem}</Filter>
                        ))}
                    </Filters>
                    <FilterActions>
                        <ResetButton onClick={onFilterReset}>Reset</ResetButton>
                        <ApplyButton onClick={onFilterSubmit}>
                            Apply
                        </ApplyButton>
                    </FilterActions>
                </FiltersContainer>
            </FilterComponentContainer>
        );
    }
}

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;