Skip to content

Commit ad6b721

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: review Dialog and ConfirmDialog
1 parent 58a26c8 commit ad6b721

101 files changed

Lines changed: 4941 additions & 2080 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/__store__/index.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
160160
'filePath': 'demo/headless/compare/basic-demo.tsx',
161161
},
162162
},
163+
'confirmdialog': {
164+
'basic-demo': {
165+
'component': React.lazy(() => import('demo/headless/confirmdialog/basic-demo')),
166+
'filePath': 'demo/headless/confirmdialog/basic-demo.tsx',
167+
},
168+
},
163169
'confirmpopup': {
164170
'basic-demo': {
165171
'component': React.lazy(() => import('demo/headless/confirmpopup/basic-demo')),
@@ -178,6 +184,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
178184
'filePath': 'demo/headless/datepicker/basic-demo.tsx',
179185
},
180186
},
187+
'dialog': {
188+
'basic-demo': {
189+
'component': React.lazy(() => import('demo/headless/dialog/basic-demo')),
190+
'filePath': 'demo/headless/dialog/basic-demo.tsx',
191+
},
192+
},
181193
'divider': {
182194
'basic-demo': {
183195
'component': React.lazy(() => import('demo/headless/divider/basic-demo')),
@@ -510,6 +522,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
510522
'filePath': 'demo/primitives/compare/basic-demo.tsx',
511523
},
512524
},
525+
'confirmdialog': {
526+
'basic-demo': {
527+
'component': React.lazy(() => import('demo/primitives/confirmdialog/basic-demo')),
528+
'filePath': 'demo/primitives/confirmdialog/basic-demo.tsx',
529+
},
530+
},
513531
'confirmpopup': {
514532
'basic-demo': {
515533
'component': React.lazy(() => import('demo/primitives/confirmpopup/basic-demo')),
@@ -528,6 +546,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
528546
'filePath': 'demo/primitives/datepicker/basic-demo.tsx',
529547
},
530548
},
549+
'dialog': {
550+
'basic-demo': {
551+
'component': React.lazy(() => import('demo/primitives/dialog/basic-demo')),
552+
'filePath': 'demo/primitives/dialog/basic-demo.tsx',
553+
},
554+
},
531555
'divider': {
532556
'basic-demo': {
533557
'component': React.lazy(() => import('demo/primitives/divider/basic-demo')),

‎apps/showcase/assets/apidoc/index.json‎

Lines changed: 2625 additions & 451 deletions
Large diffs are not rendered by default.

‎apps/showcase/assets/menu/submenu/menu-headless.data.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -142,18 +142,18 @@ export const headlessMenu = [
142142
{
143143
name: 'Overlay',
144144
children: [
145-
// {
146-
// name: 'useConfirmDialog',
147-
// href: '/docs/headless/confirmdialog'
148-
// },
145+
{
146+
name: 'useConfirmDialog',
147+
href: '/docs/headless/confirmdialog'
148+
},
149149
{
150150
name: 'useConfirmPopup',
151151
href: '/docs/headless/confirmpopup'
152152
},
153-
// {
154-
// name: 'useDialog',
155-
// href: '/docs/headless/dialog'
156-
// },
153+
{
154+
name: 'useDialog',
155+
href: '/docs/headless/dialog'
156+
},
157157
{
158158
name: 'useDrawer',
159159
href: '/docs/headless/drawer'

‎apps/showcase/assets/menu/submenu/menu-primitives.data.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -142,18 +142,18 @@ export const primitivesMenu = [
142142
{
143143
name: 'Overlay',
144144
children: [
145-
// {
146-
// name: 'ConfirmDialog',
147-
// href: '/docs/primitives/confirmdialog'
148-
// },
145+
{
146+
name: 'ConfirmDialog',
147+
href: '/docs/primitives/confirmdialog'
148+
},
149149
{
150150
name: 'ConfirmPopup',
151151
href: '/docs/primitives/confirmpopup'
152152
},
153-
// {
154-
// name: 'Dialog',
155-
// href: '/docs/primitives/dialog'
156-
// },
153+
{
154+
name: 'Dialog',
155+
href: '/docs/primitives/dialog'
156+
},
157157
{
158158
name: 'Drawer',
159159
href: '/docs/primitives/drawer'

‎apps/showcase/demo/headless/confirmdialog/basic-demo.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
'use client';
2+
import { ExclamationTriangle } from '@primeicons/react/exclamation-triangle';
3+
import { Times } from '@primeicons/react/times';
4+
import { useMotion } from '@primereact/core/motion';
5+
import { useConfirmDialog } from '@primereact/headless/confirmdialog';
6+
import { usePortal } from '@primereact/headless/portal';
7+
import * as React from 'react';
8+
import { createPortal } from 'react-dom';
9+
10+
export default function BasicDemo() {
11+
const { triggerProps, backdropProps, backdropMotionProps, popupProps, closeProps, headerProps, contentProps, rootProps, state } =
12+
useConfirmDialog();
13+
const portal = usePortal();
14+
15+
const popupRef = React.useRef<HTMLDivElement>(null);
16+
const popupMotion = useMotion({
17+
name: 'p-confirmdialog',
18+
appear: true,
19+
elementRef: popupRef,
20+
visible: state.open,
21+
enterFromClassName: 'opacity-0 scale-75',
22+
enterActiveClassName: 'transition-[opacity,transform] duration-150 ease-out',
23+
enterToClassName: 'opacity-100 scale-100',
24+
leaveFromClassName: 'opacity-100 scale-100',
25+
leaveActiveClassName: 'transition-[opacity,transform] duration-150 ease-out',
26+
leaveToClassName: 'opacity-0 scale-75'
27+
});
28+
29+
const backdropMotion = useMotion({
30+
...backdropMotionProps.motionProps,
31+
visible: backdropMotionProps.visible,
32+
enterFromClassName: 'opacity-0',
33+
enterActiveClassName: 'transition-opacity duration-150',
34+
enterToClassName: 'opacity-100',
35+
leaveFromClassName: 'opacity-100',
36+
leaveActiveClassName: 'transition-opacity duration-150',
37+
leaveToClassName: 'opacity-0'
38+
});
39+
40+
return (
41+
<div {...rootProps} className="flex justify-center">
42+
<button
43+
{...triggerProps}
44+
className="px-4 py-2 border border-surface-200 dark:border-surface-700 bg-transparent rounded-lg cursor-pointer font-medium text-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition hover:bg-surface-50 dark:hover:bg-surface-800"
45+
>
46+
Save
47+
</button>
48+
49+
{portal.state.mounted &&
50+
popupMotion.state.rendered &&
51+
createPortal(
52+
<div className="fixed inset-0 z-1100">
53+
{backdropMotion.state.rendered && <div {...backdropProps} className="fixed inset-0 bg-black/50" />}
54+
{popupMotion.state.rendered && (
55+
<div
56+
{...popupProps}
57+
ref={popupRef}
58+
className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[25rem] max-w-[90vw] bg-surface-0 dark:bg-surface-900 rounded-xl shadow-2xl flex flex-col border border-surface-200 dark:border-surface-700 z-50"
59+
>
60+
<div {...headerProps} className="flex items-center justify-between p-5">
61+
<span className="text-lg font-semibold">Confirm</span>
62+
<button
63+
{...closeProps}
64+
className="inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
65+
>
66+
<Times />
67+
</button>
68+
</div>
69+
<div {...contentProps} className="px-5 pb-5 flex items-center gap-4">
70+
<ExclamationTriangle className="w-8! h-8! text-amber-500 shrink-0" />
71+
<span className="text-sm text-surface-600 dark:text-surface-300">Are you sure you want to proceed?</span>
72+
</div>
73+
<div className="px-5 pb-5 flex justify-end gap-2">
74+
<button
75+
{...closeProps}
76+
className="px-4 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-transparent text-sm font-medium cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
77+
>
78+
Cancel
79+
</button>
80+
<button
81+
{...closeProps}
82+
className="px-4 py-2 rounded-lg bg-primary text-primary-contrast text-sm font-medium cursor-pointer hover:bg-primary-emphasis focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
83+
>
84+
Confirm
85+
</button>
86+
</div>
87+
</div>
88+
)}
89+
</div>,
90+
document.body
91+
)}
92+
</div>
93+
);
94+
}

‎apps/showcase/demo/headless/dialog/basic-demo.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
'use client';
2+
import { Times } from '@primeicons/react/times';
3+
import { useMotion } from '@primereact/core/motion';
4+
import { useDialog } from '@primereact/headless/dialog';
5+
import { usePortal } from '@primereact/headless/portal';
6+
import * as React from 'react';
7+
import { createPortal } from 'react-dom';
8+
9+
export default function BasicDemo() {
10+
const { triggerProps, backdropProps, backdropMotionProps, popupProps, closeProps, headerProps, contentProps, rootProps, state } = useDialog();
11+
const portal = usePortal();
12+
13+
const popupRef = React.useRef<HTMLDivElement>(null);
14+
const popupMotion = useMotion({
15+
name: 'p-dialog',
16+
appear: true,
17+
elementRef: popupRef,
18+
visible: state.open,
19+
enterFromClassName: 'opacity-0 scale-75',
20+
enterActiveClassName: 'transition-[opacity,transform] duration-150 ease-out',
21+
enterToClassName: 'opacity-100 scale-100',
22+
leaveFromClassName: 'opacity-100 scale-100',
23+
leaveActiveClassName: 'transition-[opacity,transform] duration-150 ease-out',
24+
leaveToClassName: 'opacity-0 scale-75'
25+
});
26+
27+
const backdropMotion = useMotion({
28+
...backdropMotionProps.motionProps,
29+
visible: backdropMotionProps.visible,
30+
enterFromClassName: 'opacity-0',
31+
enterActiveClassName: 'transition-opacity duration-150',
32+
enterToClassName: 'opacity-100',
33+
leaveFromClassName: 'opacity-100',
34+
leaveActiveClassName: 'transition-opacity duration-150',
35+
leaveToClassName: 'opacity-0'
36+
});
37+
38+
return (
39+
<div {...rootProps} className="flex justify-center">
40+
<button
41+
{...triggerProps}
42+
className="px-4 py-2 bg-primary text-primary-contrast rounded-lg cursor-pointer font-medium text-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition hover:bg-primary-emphasis"
43+
>
44+
Edit Profile
45+
</button>
46+
47+
{portal.state.mounted &&
48+
popupMotion.state.rendered &&
49+
createPortal(
50+
<div className="fixed inset-0 z-1100">
51+
{backdropMotion.state.rendered && <div {...backdropProps} className="fixed inset-0 bg-black/50" />}
52+
{popupMotion.state.rendered && (
53+
<div
54+
{...popupProps}
55+
ref={popupRef}
56+
className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[28rem] max-w-[90vw] max-h-[90vh] bg-surface-0 dark:bg-surface-900 rounded-xl shadow-2xl flex flex-col border border-surface-200 dark:border-surface-700 z-50"
57+
>
58+
<div {...headerProps} className="flex items-center justify-between p-5">
59+
<span className="text-lg font-semibold">Edit Profile</span>
60+
<button
61+
{...closeProps}
62+
className="inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
63+
>
64+
<Times />
65+
</button>
66+
</div>
67+
<div {...contentProps} className="px-5 pb-5 flex flex-col gap-4 overflow-y-auto">
68+
<div className="flex flex-col gap-1">
69+
<label htmlFor="name" className="text-sm font-semibold">
70+
Name
71+
</label>
72+
<input
73+
id="name"
74+
defaultValue="Amanda Miller"
75+
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
76+
/>
77+
</div>
78+
<div className="flex flex-col gap-1">
79+
<label htmlFor="username" className="text-sm font-semibold">
80+
Username
81+
</label>
82+
<input
83+
id="username"
84+
defaultValue="@amandamiller"
85+
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
86+
/>
87+
</div>
88+
<div className="flex flex-col gap-1">
89+
<label htmlFor="email" className="text-sm font-semibold">
90+
Email
91+
</label>
92+
<input
93+
id="email"
94+
defaultValue="amanda@example.com"
95+
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
96+
/>
97+
</div>
98+
<div className="flex justify-end gap-2 mt-2">
99+
<button
100+
{...closeProps}
101+
className="px-4 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-transparent text-sm font-medium cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
102+
>
103+
Cancel
104+
</button>
105+
<button
106+
{...closeProps}
107+
className="px-4 py-2 rounded-lg bg-primary text-primary-contrast text-sm font-medium cursor-pointer hover:bg-primary-emphasis focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
108+
>
109+
Save Changes
110+
</button>
111+
</div>
112+
</div>
113+
</div>
114+
)}
115+
</div>,
116+
document.body
117+
)}
118+
</div>
119+
);
120+
}

‎apps/showcase/demo/headless/drawer/basic-demo.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ const navItems = [
1515
];
1616

1717
export default function BasicDemo() {
18-
const { triggerProps, backdropProps, portalProps, closeProps, headerProps, rootProps, portalMotionProps, backdropMotionProps, setMaskRef } =
19-
useDrawer();
18+
const { triggerProps, backdropProps, popupProps, closeProps, headerProps, rootProps, backdropMotionProps, setMaskRef, state } = useDrawer();
2019
const portal = usePortal();
2120

22-
const portalRef = React.useRef<HTMLDivElement>(null);
23-
const portalMotion = useMotion({
24-
...portalMotionProps.motionProps,
25-
elementRef: portalRef,
26-
visible: portalMotionProps.visible,
21+
const popupRef = React.useRef<HTMLDivElement>(null);
22+
const popupMotion = useMotion({
23+
name: 'p-drawer',
24+
appear: true,
25+
elementRef: popupRef,
26+
visible: state.open,
2727
enterFromClassName: '-translate-x-full',
2828
enterActiveClassName: 'transition-transform duration-200',
2929
enterToClassName: 'translate-x-0',
@@ -54,14 +54,14 @@ export default function BasicDemo() {
5454
</button>
5555

5656
{portal.state.mounted &&
57-
portalMotion.state.rendered &&
57+
popupMotion.state.rendered &&
5858
createPortal(
5959
<div className="fixed inset-0 z-1100">
6060
{backdropMotion.state.rendered && <div ref={setMaskRef} {...backdropProps} className="fixed inset-0 bg-black/50" />}
61-
{portalMotion.state.rendered && (
61+
{popupMotion.state.rendered && (
6262
<div
63-
{...portalProps}
64-
ref={portalRef}
63+
{...popupProps}
64+
ref={popupRef}
6565
className="fixed top-0 left-0 h-full w-80 bg-surface-0 dark:bg-surface-900 shadow-2xl flex flex-col z-50"
6666
>
6767
<div {...headerProps} className="flex items-center justify-between p-4 border-b border-surface">

0 commit comments

Comments
 (0)