Components

ComfirmDialog

The ConfirmDialog component is used to display a confirmation dialog before performing important actions, such as deleting items or applying changes, by providing confirmation and cancellation options to the user

Imports

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

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'

1import { ConfirmDialog } from 'dd360-ds'

Usage

Use the ConfirmDialog component as shown below:

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

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    position={{
5      show: true,
6      left: 100,
7      top: 100
8    }}
9    onConfirm={()=>alert('onConfirm')}>
10    You want to confirm?
11</ConfirmDialog>
12

Position

To manage the ConfirmDialog 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 ConfirmDialog visibility and updates its position based on the click event's coordinates

1import { useEffect, useState } from 'react'
2import { ConfirmDialog } from 'dd360-ds'
3import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
4
5const ConfirmDialogCustom = () => {
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        <div>
23          <button
24            className="flex items-center gap-1"
25            onClick={(event) => {
26              setPosition((position) => ({
27                top: event.pageY,
28                left: event.pageX,
29                show: !position.show
30              }))
31            }}
32          >
33            Confirm Dialog
34            <DynamicHeroIcon icon="FilterIcon" className="w-4 h-4" />
35          </button>
36          <ConfirmDialog
37            position={{
38              top: position.top,
39              left: position.left,
40              show: position.show
41            }}
42            onConfirm={() => alert('onConfirm')}
43          >
44            You want to confirm?
45          </ConfirmDialog>
46        </div>
47      )}
48    </>
49  )
50}
51
52export default ConfirmDialogCustom
53

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

Title

The prop title is used to display a descriptive title in the confirmation dialog

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    title='Example title'
5    position={{
6      show: true,
7      left: 100,
8      top: 100
9    }}
10    onConfirm={()=>alert('onConfirm')}>
11    You want to confirm?
12</ConfirmDialog>
13

Text Confirm Btn

The prop textConfirmBtn is used to define the text of the confirmation button in the dialog box

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    textConfirmBtn='Example Confirm'
5    position={{
6      show: true,
7      left: 100,
8      top: 100
9    }}
10    onConfirm={()=>alert('onConfirm')}>
11    You want to confirm?
12</ConfirmDialog>
13

On Cancel and Text Cancel Btn

The props onCancel and textCancelBtn they are used to cancel the confirmDialog, onCancel should carry the function that closes it and textCancelBtn the text that you want it to carry

Note that it is recommended that the textCancelBtn and handleCancel props be defined together, as defining only textCancelBtn would not make much sense

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    onCancel={()=>alert('Cancel')} 
5    textCancelBtn='Example Confirm'
6    position={{
7      show: true,
8      left: 100,
9      top: 100
10    }}
11    onConfirm={()=>alert('onConfirm')}>
12    You want to confirm?
13</ConfirmDialog>
14

Width

The prop width is used to set the custom width of the confirmation dialog to

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    width={300} 
5    position={{
6      show: true,
7      left: 100,
8      top: 100
9    }}
10    onConfirm={()=>alert('onConfirm')}>
11    You want to confirm?
12</ConfirmDialog>
13

API Reference

Name	Types	Default
"title"	string	-
"position"	{ show: boolean, top: number, left: number }	{ show: false, top: 0, left: 0 }
"textConfirmBtn"	string	Apply
"textCancelBtn"	string	Reset
"children"*	ReactNode	Reset
"onConfirm"*	function	-
"onCancel"	function	-
"width"	string number	-
"className"	string	-
"idRoot"	string	-

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

CircleDate Picker