Skip to content

Commit 4b29894

Browse files
tugcekucukoglutugcekucukoglu
authored
Merge pull request #8157 from primefaces/v11-dialog-confirm
V11 dialog confirm
2 parents e8b5dd0 + 0bfa03b commit 4b29894

182 files changed

Lines changed: 6262 additions & 2 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/demo/confirmdialog/basic-demo.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { ConfirmDialog } from 'primereact/confirmdialog';
2+
3+
export default function BasicDemo() {
4+
return (
5+
<div className="card flex flex-wrap gap-2 justify-center">
6+
<ConfirmDialog>
7+
<ConfirmDialog.Trigger variant="outlined">Save</ConfirmDialog.Trigger>
8+
<ConfirmDialog.Portal>
9+
<ConfirmDialog.Header>
10+
<ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
11+
<ConfirmDialog.Close />
12+
</ConfirmDialog.Header>
13+
<ConfirmDialog.Content>
14+
<ConfirmDialog.Icon className="pi pi-exclamation-triangle" />
15+
<ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
16+
</ConfirmDialog.Content>
17+
<ConfirmDialog.Footer>
18+
<ConfirmDialog.Cancel variant="outlined">Cancel</ConfirmDialog.Cancel>
19+
<ConfirmDialog.Action>Save</ConfirmDialog.Action>
20+
</ConfirmDialog.Footer>
21+
</ConfirmDialog.Portal>
22+
</ConfirmDialog>
23+
<ConfirmDialog>
24+
<ConfirmDialog.Trigger severity="danger" variant="outlined">
25+
Delete
26+
</ConfirmDialog.Trigger>
27+
<ConfirmDialog.Portal>
28+
<ConfirmDialog.Header>
29+
<ConfirmDialog.Title>Danger Zone</ConfirmDialog.Title>
30+
<ConfirmDialog.Close />
31+
</ConfirmDialog.Header>
32+
<ConfirmDialog.Content>
33+
<ConfirmDialog.Icon className="pi pi-exclamation-triangle" />
34+
<ConfirmDialog.Message>Do you want to delete this record?</ConfirmDialog.Message>
35+
</ConfirmDialog.Content>
36+
<ConfirmDialog.Footer>
37+
<ConfirmDialog.Cancel variant="outlined">Cancel</ConfirmDialog.Cancel>
38+
<ConfirmDialog.Action severity="danger">Delete</ConfirmDialog.Action>
39+
</ConfirmDialog.Footer>
40+
</ConfirmDialog.Portal>
41+
</ConfirmDialog>
42+
</div>
43+
);
44+
}

‎apps/showcase/demo/confirmdialog/confirmdialog-pt.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { ConfirmDialog } from 'primereact/confirmdialog';
2+
3+
export default function ConfirmDialogPT() {
4+
return (
5+
<>
6+
<ConfirmDialog />
7+
<div
8+
className="p-dialog-mask p-dialog-open !relative"
9+
data-pc-section="mask"
10+
style={{ position: 'fixed', height: '100%', width: '100%', left: '0px', top: '0px', display: 'flex', justifyContent: 'center', alignItems: 'center', pointerEvents: 'auto' }}
11+
>
12+
<div className="p-dialog p-component p-confirmdialog" data-p-focus-trap="true" style={{ display: 'flex', flexDirection: 'column', pointerEvents: 'auto' }}>
13+
<span className="p-hidden-accessible p-hidden-focusable" tabIndex={0} role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true"></span>
14+
<div id="pr_id_r4m_header" className="p-dialog-header" data-pc-section="root" data-pc-name="header" data-pc-extend="dialogheader">
15+
<div className="p-dialog-title" data-pc-section="root" data-pc-name="title" data-pc-extend="dialogtitle">
16+
Edit Profile
17+
</div>
18+
<div className="p-dialog-header-actions" data-pc-section="root" data-pc-name="dialogheaderactions">
19+
<button id="pr_id_r84" className="p-button p-component p-button-text p-dialog-close-button" type="button" data-pc-section="root" data-pc-name="close" data-pc-extend="button">
20+
<svg
21+
width="14"
22+
height="14"
23+
viewBox="0 0 14 14"
24+
fill="none"
25+
xmlns="http://www.w3.org/2000/svg"
26+
id="pr_id_r88"
27+
className="p-icon"
28+
aria-hidden="true"
29+
data-pc-name="closeicon"
30+
data-pc-extend="timesicon"
31+
data-pc-section="root"
32+
>
33+
<path
34+
d="M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z"
35+
fill="currentColor"
36+
></path>
37+
</svg>
38+
</button>
39+
</div>
40+
</div>
41+
<div className="p-dialog-content" data-pc-section="root" data-pc-name="content" data-pc-extend="dialogcontent">
42+
<span className="p-confirmdialog-icon pi pi-exclamation-triangle" data-pc-section="root" data-pc-name="confirmdialogicon"></span>
43+
<span className="p-confirmdialog-message" data-pc-section="root" data-pc-name="confirmdialogmessage">
44+
Are you sure you want to proceed?
45+
</span>
46+
</div>
47+
<div className="p-dialog-footer" data-pc-section="root" data-pc-name="footer" data-pc-extend="dialogfooter">
48+
<button id="pr_id_r8q" className="p-button p-component p-button-text p-confirmdialog-reject-button" type="button" data-pc-name="cancel" data-pc-section="root" data-pc-extend="button">
49+
Cancel
50+
</button>
51+
<button id="pr_id_r90" className="p-button p-component p-confirmdialog-accept-button" type="button" data-pc-section="root" data-pc-name="action" data-pc-extend="button">
52+
Save
53+
</button>
54+
</div>
55+
<span className="p-hidden-accessible p-hidden-focusable" tabIndex={0} role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true"></span>
56+
</div>
57+
</div>
58+
</>
59+
);
60+
}

‎apps/showcase/demo/confirmdialog/position-demo.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { ConfirmDialogChangeEvent, ConfirmDialogProps } from '@primereact/types/shared/confirmdialog';
2+
import { Button } from 'primereact/button';
3+
import { ConfirmDialog } from 'primereact/confirmdialog';
4+
import * as React from 'react';
5+
6+
export default function PositionDemo() {
7+
const [open, setOpen] = React.useState<boolean>(false);
8+
const [position, setPosition] = React.useState<ConfirmDialogProps['position']>('center');
9+
10+
const openPosition = (position: ConfirmDialogProps['position']) => {
11+
setOpen(true);
12+
setPosition(position);
13+
};
14+
15+
return (
16+
<div className="card">
17+
<div className="flex flex-wrap justify-center gap-2 mb-2">
18+
<Button onClick={() => openPosition('left')} severity="secondary" style={{ minWidth: '10rem' }}>
19+
Left
20+
<i className="pi pi-arrow-right" />
21+
</Button>
22+
<Button onClick={() => openPosition('right')} severity="secondary" style={{ minWidth: '10rem' }}>
23+
Right
24+
<i className="pi pi-arrow-left" />
25+
</Button>
26+
</div>
27+
<div className="flex flex-wrap justify-center gap-2 mb-2">
28+
<Button onClick={() => openPosition('topleft')} severity="secondary" style={{ minWidth: '10rem' }}>
29+
TopLeft
30+
<i className="pi pi-arrow-down-right" />
31+
</Button>
32+
<Button onClick={() => openPosition('top')} severity="secondary" style={{ minWidth: '10rem' }}>
33+
Top
34+
<i className="pi pi-arrow-down" />
35+
</Button>
36+
<Button onClick={() => openPosition('topright')} severity="secondary" style={{ minWidth: '10rem' }}>
37+
TopRight
38+
<i className="pi pi-arrow-down-left" />
39+
</Button>
40+
</div>
41+
<div className="flex flex-wrap justify-center gap-2">
42+
<Button onClick={() => openPosition('bottomleft')} severity="secondary" style={{ minWidth: '10rem' }}>
43+
BottomLeft
44+
<i className="pi pi-arrow-up-right" />
45+
</Button>
46+
<Button onClick={() => openPosition('bottom')} severity="secondary" style={{ minWidth: '10rem' }}>
47+
Bottom
48+
<i className="pi pi-arrow-up" />
49+
</Button>
50+
<Button onClick={() => openPosition('bottomright')} severity="secondary" style={{ minWidth: '10rem' }}>
51+
BottomRight
52+
<i className="pi pi-arrow-up-left" />
53+
</Button>
54+
</div>
55+
<ConfirmDialog open={open} onOpenChange={(e: ConfirmDialogChangeEvent) => setOpen(e.value as boolean)} position={position}>
56+
<ConfirmDialog.Portal>
57+
<ConfirmDialog.Header>
58+
<ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
59+
<ConfirmDialog.Close />
60+
</ConfirmDialog.Header>
61+
<ConfirmDialog.Content>
62+
<ConfirmDialog.Icon className="pi pi-exclamation-triangle" />
63+
<ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
64+
</ConfirmDialog.Content>
65+
<ConfirmDialog.Footer>
66+
<ConfirmDialog.Cancel>Cancel</ConfirmDialog.Cancel>
67+
<ConfirmDialog.Action>Save</ConfirmDialog.Action>
68+
</ConfirmDialog.Footer>
69+
</ConfirmDialog.Portal>
70+
</ConfirmDialog>
71+
</div>
72+
);
73+
}

‎apps/showcase/demo/confirmpopup/basic-demo.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ConfirmPopup } from 'primereact/confirmpopup';
2+
3+
export default function BasicDemo() {
4+
return (
5+
<div className="card flex flex-wrap gap-2 justify-center">
6+
<ConfirmPopup>
7+
<ConfirmPopup.Trigger variant="outlined">Save</ConfirmPopup.Trigger>
8+
<ConfirmPopup.Portal>
9+
<ConfirmPopup.Content>
10+
<ConfirmPopup.Icon className="pi pi-exclamation-triangle" />
11+
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
12+
</ConfirmPopup.Content>
13+
<ConfirmPopup.Footer>
14+
<ConfirmPopup.Reject severity="secondary" variant="outlined">
15+
Cancel
16+
</ConfirmPopup.Reject>
17+
<ConfirmPopup.Accept>Save</ConfirmPopup.Accept>
18+
</ConfirmPopup.Footer>
19+
</ConfirmPopup.Portal>
20+
</ConfirmPopup>
21+
<ConfirmPopup>
22+
<ConfirmPopup.Trigger severity="danger" variant="outlined">
23+
Delete
24+
</ConfirmPopup.Trigger>
25+
<ConfirmPopup.Portal>
26+
<ConfirmPopup.Content>
27+
<ConfirmPopup.Icon className="pi pi-info-circle" />
28+
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
29+
</ConfirmPopup.Content>
30+
<ConfirmPopup.Footer>
31+
<ConfirmPopup.Reject severity="secondary" variant="outlined">
32+
Cancel
33+
</ConfirmPopup.Reject>
34+
<ConfirmPopup.Accept severity="danger">Delete</ConfirmPopup.Accept>
35+
</ConfirmPopup.Footer>
36+
</ConfirmPopup.Portal>
37+
</ConfirmPopup>
38+
</div>
39+
);
40+
}

‎apps/showcase/demo/confirmpopup/confirmpopup-pt.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { ConfirmPopup } from 'primereact/confirmpopup';
2+
3+
export default function ConfirmPopupPT() {
4+
return (
5+
<>
6+
<ConfirmPopup>
7+
<ConfirmPopup.Trigger variant="outlined">Open Popup</ConfirmPopup.Trigger>
8+
<ConfirmPopup.Portal>
9+
<ConfirmPopup.Content>
10+
<ConfirmPopup.Icon className="pi pi-exclamation-triangle" />
11+
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
12+
</ConfirmPopup.Content>
13+
<ConfirmPopup.Footer>
14+
<ConfirmPopup.Reject severity="secondary" variant="outlined">
15+
Cancel
16+
</ConfirmPopup.Reject>
17+
<ConfirmPopup.Accept>Save</ConfirmPopup.Accept>
18+
</ConfirmPopup.Footer>
19+
</ConfirmPopup.Portal>
20+
</ConfirmPopup>
21+
{/* <ConfirmPopup />
22+
<div
23+
id="pr_id_r4a"
24+
role="alertdialog"
25+
aria-modal="true"
26+
data-pc-name="motion"
27+
data-pc-section="root"
28+
className="p-confirmpopup p-component !relative"
29+
style={{
30+
'--pui-motion-height': '82px',
31+
zIndex: 1107,
32+
insetInlineStart: '1648.12px',
33+
top: '874.953px',
34+
transformOrigin: 'center top',
35+
'--p-confirmpopup-arrow-left': '0px'
36+
}}
37+
>
38+
<div className="p-confirmpopup-content" data-pc-section="root" data-pc-name="confirmpopupcontent">
39+
<span className="p-confirmpopup-icon pi pi-exclamation-triangle" data-pc-section="root" data-pc-name="confirmpopupicon"></span>
40+
<span className="p-confirmpopup-message" data-pc-section="root" data-pc-name="confirmpopupmessage">
41+
Are you sure you want to proceed?
42+
</span>
43+
</div>
44+
<div className="p-confirmpopup-footer" data-pc-section="root" data-pc-name="confirmpopupfooter">
45+
<button id="pr_id_r5s" className="p-button p-component p-button-secondary p-button-outlined p-button-sm p-confirmpopup-reject-button" data-pc-name="reject" data-pc-section="root" data-pc-extend="button">
46+
Cancel
47+
</button>
48+
<button id="pr_id_r62" className="p-button p-component p-button-sm p-confirmpopup-accept-button" data-pc-name="accept" data-pc-section="root" data-pc-extend="button">
49+
Save
50+
</button>
51+
</div>
52+
</div> */}
53+
</>
54+
);
55+
}

‎apps/showcase/demo/confirmpopup/template-demo.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ConfirmPopup } from 'primereact/confirmpopup';
2+
3+
export default function TemplateDemo() {
4+
return (
5+
<div className="card flex justify-center">
6+
<ConfirmPopup>
7+
<ConfirmPopup.Trigger>Save</ConfirmPopup.Trigger>
8+
<ConfirmPopup.Portal>
9+
<ConfirmPopup.Content>
10+
<div className="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
11+
<i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
12+
<p>Please confirm to proceed moving forward.</p>
13+
</div>
14+
</ConfirmPopup.Content>
15+
<ConfirmPopup.Footer>
16+
<ConfirmPopup.Reject variant="outlined">
17+
<i className="pi pi-times" />
18+
Cancel
19+
</ConfirmPopup.Reject>
20+
<ConfirmPopup.Accept>
21+
<i className="pi pi-check" />
22+
Confirm
23+
</ConfirmPopup.Accept>
24+
</ConfirmPopup.Footer>
25+
</ConfirmPopup.Portal>
26+
</ConfirmPopup>
27+
</div>
28+
);
29+
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { DialogContentInstance } from '@primereact/types/shared/dialog';
2+
import { Button } from 'primereact/button';
3+
import { Dialog } from 'primereact/dialog';
4+
import { InputText } from 'primereact/inputtext';
5+
import { Label } from 'primereact/label';
6+
7+
export default function BasicDemo() {
8+
return (
9+
<div className="card flex justify-center">
10+
<Dialog modal>
11+
<Dialog.Trigger>Show</Dialog.Trigger>
12+
<Dialog.Portal style={{ width: '25rem' }}>
13+
<Dialog.Header>
14+
<Dialog.Title>Edit Profile</Dialog.Title>
15+
<Dialog.Close />
16+
</Dialog.Header>
17+
<Dialog.Content>
18+
{(instance: DialogContentInstance) => {
19+
const { dialog } = instance;
20+
21+
return (
22+
<>
23+
<span className="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
24+
<div className="flex items-center gap-4 mb-4">
25+
<Label htmlFor="username" className="font-semibold w-24">
26+
Username
27+
</Label>
28+
<InputText id="username" className="flex-auto" autoComplete="off" />
29+
</div>
30+
<div className="flex items-center gap-4 mb-8">
31+
<Label htmlFor="email" className="font-semibold w-24">
32+
Email
33+
</Label>
34+
<InputText id="email" className="flex-auto" autoComplete="off" />
35+
</div>
36+
<div className="flex justify-end gap-2">
37+
<Button onClick={dialog?.close} severity="secondary">
38+
Cancel
39+
</Button>
40+
<Button onClick={dialog?.close}>Sign-In</Button>
41+
</div>
42+
</>
43+
);
44+
}}
45+
</Dialog.Content>
46+
</Dialog.Portal>
47+
</Dialog>
48+
</div>
49+
);
50+
}

0 commit comments

Comments
 (0)