Components

Filter Select Multi
Storybook

The FilterSelectMulti component allows users to select multiple options from a set of filters. Provides an interactive and easy-to-use interface to efficiently filter and organize data.

Imports

1import { FilterSelectMulti } from 'dd360-ds'

Usage

Use the FilterSelectMulti component as shown below:

The code snippet below shows how to use the FilterSelectMulti component:

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    position={{
5      top: 0,
6      left: 0,
7      show: true
8    }}
9    initialItemList={{
10      A: {
11        label: 'Option A'
12      },
13      B: {
14        label: 'Option B'
15      }
16    }}
17    onApply={handleChange}
18/>
19

Initial Item List

The prop initialItemList it is used to show the available options, there is also the possibility of disabling one of them

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    position={{
5      top: 0,
6      left: 0,
7      show: true
8    }}
9    initialItemList={{
10      A: {
11        label: 'Option A'
12      },
13      B: {
14        label: 'Option B',
15        disabled:true
16      }
17    }}
18    onApply={handleChange}
19/>
20

Position

To manage the FilterSelectMulti component's visibility and position, you can use the useState hook in a functional component. Position stores the top and left coordinates, as well as a boolean indicating whether the component should be shown. The component listens for clicks on a button, which toggles the FilterSelectMulti visibility and updates its position based on the click event's coordinates.

The code snippet below shows how to handle the visibility and position:

1import React, { useEffect, useState } from 'react'
2import { FilterSelectMulti, Flex, Text } from 'dd360-ds'
3import { FilterIcon } from '@heroicons/react/outline'
4
5const FilterSelectMultiCustom = () => {
6 const [domLoaded, setDomLoaded] = useState<boolean>(false)
7 const [position, setPosition] = useState<{
8    top: number
9    left: number
10    show: boolean
11  }>({
12    top: 0,
13    left: 0,
14    show: false
15  })
16
17  useEffect(() => { setDomLoaded(true)}, [])
18
19  return (
20    <>
21      {domLoaded && (
22        <>
23          <div className="h-8">
24            <button  onClick={(event) => {
25              setPosition((position) => ({
26                top: event.pageY,
27                left: event.pageX,
28                show: !position.show
29              }))
30            >
31              <Flex gap="3" justifyContent="center" alignItems="center">
32                <Text className="mt-0.5 mr-1" bold>
33                  FilterSelectMulti
34                </Text>
35                <FilterIcon className="w-4 h-4" />
36              </Flex>
37            </button>
38          </div>
39            <FilterSelectMulti
40              position={position}
41              initialItemList={{
42                A: {
43                  label: 'Option A'
44                },
45                B: {
46                  label: 'Option B',
47                  disabled
48                }
49              }}
50              onApply={handleChange}
51            />
52        </>
53      )}
54    </>
55  )
56}
57
58export default FilterSelectMultiCustom
59

Note: The "domLoaded" state variable in the FilterSelectMultiCustom is used to ensure that the component is fully rendered before displaying the FilterSelect Multi component. This is important when using Next.js, as it performs server-side rendering by default. By waiting for the client-side rendering to complete, we can avoid any issues with the FilterSelectMulti component not being fully initialized.

Title

The prop title serves to provide a descriptive title or label

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    title="Title Example"
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    initialItemList={{
11      A: {
12        label: 'Option A'
13      },
14      B: {
15        label: 'Option B'
16      }
17    }}
18    onApply={handleChange}
19/>
20

Text Apply Btn

The prop textApplyBtn it is used to customize the text of the apply button

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    textApplyBtn="Apply Example"
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    initialItemList={{
11      A: {
12        label: 'Option A'
13      },
14      B: {
15        label: 'Option B'
16      }
17    }}
18    onApply={handleChange}
19/>
20

Text Reset Btn

The prop textResetBtn it is used to customize the text of the reset button

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelect
4    textResetBtn="Reset Example"
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    initialItemList={{
11      A: {
12        label: 'Option A'
13      },
14      B: {
15        label: 'Option B'
16      }
17    }}
18    onApply={handleChange}
19/>
20

Width

The prop width used to customize the size

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelect
4    width={250}
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    initialItemList={{
11      A: {
12        label: 'Option A'
13      },
14      B: {
15        label: 'Option B'
16      }
17    }}
18    onApply={handleChange}
19/>
20

API Reference

Name	Types	Default
"title"	string	-
"initialItemList"*	Object	-
"textApplyBtn"	string	Apply
"textResetBtn"	string	Reser
"position"	{ show: boolean, top: number, left: number }	{ show: false, top: 0, left: 0 }
"className"	string	-
"width"	Object	-
"onApply"*	function	null

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

Filter SelectLanguage