Components

Filter Select
Storybook

The FilterSelect component is used to create an interactive dropdown menu that allows the user to select an option from several predefined options in the application.

Imports

1import { FilterSelect } from 'dd360-ds'

Usage

Use the FilterSelect component as shown below:

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

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

List Items

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

1import { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    position={{
5      top: 0,
6      left: 0,
7      show: true
8    }}
9    listItems={{
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 FilterSelect 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 FilterSelect 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 { FilterSelect, Flex, Text } from 'dd360-ds'
3import { FilterIcon } from '@heroicons/react/outline'
4
5const FilterSelectCustom = () => {
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                  FilterSelect
34                </Text>
35                <FilterIcon className="w-4 h-4" />
36              </Flex>
37            </button>
38          </div>
39          <FilterSelect
40            position={position}
41            listItems={{
42              A: {
43                label: 'Option A'
44              },
45              B: {
46                label: 'Option B',
47                disabled
48              }
49            }}
50            onApply={()=>alert('handleChange)}
51          />
52        </>
53      )}
54    </>
55  )
56}
57
58export default FilterSelectCustom
59

Note: The "domLoaded" state variable in the FilterSelectCustom is used to ensure that the component is fully rendered before displaying the FilterSelect 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 FilterSelect component not being fully initialized.

Title

The prop title serves to provide a descriptive title or label

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

Selected Value

The prop selectedValue is used to provide a default value

1import { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    selectedValue="A"
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    listItems={{
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 { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    textApplyBtn="Apply Example"
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    listItems={{
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 { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    textResetBtn="Reset Example"
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    listItems={{
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 { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    width={250}
5    position={{
6      top: 0,
7      left: 0,
8      show: true
9    }}
10    listItems={{
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	-
"listItems"*	Object	-
"selectedValue"	string	-
"textApplyBtn"	string	Apply
"textResetBtn"	string	Reset
"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 DateFilter Select Multi