@licuido-ui/ui_filter v0.0.2

Filter

The Filter component is a flexible and customizable filtering tool. It allows users to apply filters and refine their data based on various criteria. The component provides a user-friendly interface with options like search functionality, chip display, and more. Users can select from a list of custom data items and use buttons to trigger specific actions based on their selected filters. With its configurable styles and options, the Filter component offers a powerful solution for creating interactive and dynamic filtering experiences in web applications.

Author

• @author Akila Kalaiyarasan akila@crayond.co

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_filter

Import component

import { Filter } from '@licuido-ui/ui_filter';

Usage

<Filter customData={[]} buttons={[]} />

Image

Sample code

    <Filter
      icon={<FunnelIcon color='#fff' width='16px' height='16px' />,}
    customData={[
      {
        listName: 'Category',
        selected: false,
        subList: [
          {
            list: 'Category1',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category2',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category3',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category4',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category5',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'Category6',
            selected: false,
            listStyle: {},
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
        ],
        listNameStyle: {},
        subListType: 'checkbox',
      }
      {
        listName: 'product',
        selected: false,
        subList: [
          {
            list: 'Product1',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'product2',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'product3',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: 'product4',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
        ],
        subListType: 'chip',
      },
      {
        listName: 'Price',
        selected: false,
        subList: [
          {
            list: '100',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: '200',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
          {
            list: '300',
            selected: false,
            LabelbgColor: '#E9E9E9',
            LabelColor: '#666666',
          },
        ],
        subListType: 'checkbox',
      },
    ]}

    buttons={[
      {
        label: 'Clear all',
        onClick: (data, getClearState) => {
          getClearState();
        },
        btnstyle: {
          backgroundColor: '#FFE8E9',
          padding: '4px',
          color: '#F44F5A',
          width: '121px',
          height: '36px',
        },
      },
      {
        label: 'Apply',
        onClick: (data: any) => {
          const selectedData: any = [];

          data.forEach((item: any) => {
            const { listName, subList } = item;
            const selectedSubList = subList?.filter((subItem: any) => subItem.selected);
            if (selectedSubList && selectedSubList.length > 0) {
              selectedData.push({ listName, subList: selectedSubList });
            }
          });
          console.log(selectedData);
        },
        btnstyle: {
          backgroundColor: '#665CD7',
          padding: '4px',
          color: '#fff',
          width: '121px',
          height: '36px',
        },
      },
    ]}
    rootStyle={{}}
    anchorOrigin={{
     vertical: 'bottom',
      horizontal: 'left',
    }}

    filterTitle={'Filter'}
    filterTitleStyle={{
      fontSize: '16px',
      textalign: 'left',
      color: '#262626',
      fontWeight: 'bold',
    }}
    listIconStyle={{}}
    subListContainerStyle={{}}
    buttonContainerStyle={{}}
    PopoverStyle={{}}
    contentWrapStyle={{}}
    searchBarStyle={{}}
    showSearchBar={true}
    filterButtonStyle={{ height: '36px', width: '10px' }}
    labelStyle={{}}
    listItemStyle={{}}
    maxLabelShow={}
    moreLabelStyle={{
     backgroundColor: '#E9E9E9',
      fontSize: '10px',
      m: 0,
      borderRadius: '4px',
    }}
    titleWrapperStyle={{}}
    btnWrapperStyle={{}}
    selectedchipConStyle={{}}
    searchPlaceHolder={'Search'}
    searchVariant={'outlined'}
    searchbarSize={'small'}
    checkboxStyle={{}}
    chipStyle={{}}
    chipVariant={'outlined'}
    visibleSubList={3}
    badgeColor={'secondary'}
    moreLabelcolor={'#666666'}
  />

Props