Components

Filter Date
Storybook

The Filter Date component allows users to filter and select dates intuitively in web and mobile applications.

Imports

The first alternative is recommended since they can reduce the application bundle

1import FilterDate from 'dd360-ds/FilterDate'

1import { FilterDate } from 'dd360-ds'

Usage

The prop onApply of type function is mandatory, this function returns an object containing the month and year values selected by the user.

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

1import { FilterDate } from 'dd360-ds''
2
3<FilterDate
4  onApply={() => undefined}
5/>
6

Customization

The FilterDate component can be customized using the following props:

title: The title displayed when the component is opened.
textApplyBtn: The text displayed on the apply button.
textResetBtn: The text displayed on the reset button.
language: The language used for the component. Accepts 'en' (English) or 'es' (Spanish) as values.

Example customization:

The code snippet below shows how to customize the FilterDate component:

1import { FilterDate } from 'dd360-ds'
2
3<FilterDate
4  onApply={() => undefined}
5  title="Select date"
6  textApplyBtn="Apply date"
7  textResetBtn="Reset date"
8  language="en"
9/>
10

Visibility & position

To manage the visibility and position of the FilterDate component, you can use the useState hook in a functional component. The position state variable 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 to toggle the 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 { FilterDate } from 'dd360-ds'
2
3const FilterComponent = () => {
4  const [position, setPosition] = useState<{
5    top: number
6    left: number
7    show: boolean
8  }>({
9    top: 0,
10    left: 0,
11    show: false
12  })
13
14  return (
15    <div>
16      <button
17        className="flex items-center gap-1"
18        onClick={(event) => {
19          setPosition((position) => ({
20            top: event.pageY,
21            left: event.pageX,
22            show: !position.show
23          }))
24        }}
25      >
26        <Text size="lg" bold>
27          "Filter date on top"
28        </Text>
29        <DynamicHeroIcon icon="FilterIcon" className="w-4 h-4" />
30      </button>
31      <FilterDate
32        onApply={() => undefined}
33        position={{
34          top: position.top,
35          left: position.left,
36          show: position.show
37        }}
38      />
39    </div>
40  )
41}
42
43export default FilterComponent
44

Support Server Side Rendering

For applications that use server-side rendering, you can ensure that the FilterDate component is fully rendered before displaying it by using the domLoaded state variable. This helps avoid any issues that may arise due to server-side rendering.

Example usage:

1import { FilterDate } from 'dd360-ds'
2
3const FilterComponent = () => {
4  const [domLoaded, setDomLoaded] = useState<boolean>(false)
5
6  useEffect(() => {
7    setDomLoaded(true)
8  }, [])
9
10  return (
11    <>
12      {domLoaded && (
13         <FilterDate
14            onApply={() => undefined}
15          />
16      )}
17    </>
18  )
19}
20
21export default FilterComponent
22

API Reference

Name	Types	Default
"onApply"*	function	-
"title"	string	-
"language"	es en	es
"textApplyBtn"	string	Apply
"textResetBtn"	string	Reset
"position"	{ show: boolean, top: number, left: number }	{ show: false, top: 0, left: 0 }
"width"	string number	-
"className"	string	-

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

Filter Range SliderFilter Select