Skip to content

Commit

Permalink
Refactor #4359 - for ConfirmDialog
Browse files Browse the repository at this point in the history
  • Loading branch information
habubey committed May 10, 2023
1 parent 02cd280 commit 2fec2c9
Show file tree
Hide file tree
Showing 7 changed files with 443 additions and 16 deletions.
139 changes: 139 additions & 0 deletions components/doc/common/apidoc/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -9220,6 +9220,137 @@
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"values": {
"ConfirmDialogThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "ConfirmDialogProps"
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "ConfirmDialogState"
}
],
"callbacks": []
},
"ConfirmDialogPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "ConfirmDialogProps.pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "header",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the header's DOM element."
},
{
"name": "headerTitle",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the header title's DOM element."
},
{
"name": "headerIcons",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the header icons' DOM element."
},
{
"name": "closeButton",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the close button's component."
},
{
"name": "closeButtonIcon",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the close button icon's component."
},
{
"name": "content",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the content's DOM element."
},
{
"name": "icon",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the icon's DOM element."
},
{
"name": "message",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the message's DOM element."
},
{
"name": "footer",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the footer's DOM element."
},
{
"name": "rejectButton",
"optional": true,
"readonly": false,
"type": "ButtonPassThroughOptions",
"description": "Uses to pass attributes to the Button component."
},
{
"name": "acceptButton",
"optional": true,
"readonly": false,
"type": "ButtonPassThroughOptions",
"description": "Uses to pass attributes to the Button component."
}
],
"callbacks": []
},
"ConfirmDialogState": {
"description": "Defines current inline state in ConfirmDialog component.",
"relatedProp": "",
"props": [
{
"name": "visible",
"optional": false,
"readonly": false,
"type": "boolean",
"description": "Current visible state as a boolean."
},
{
"name": "confirmation",
"optional": false,
"readonly": false,
"type": "any",
"description": "Current confirmation message."
}
],
"callbacks": []
},
"ConfirmDialogOptions": {
"description": "Custom confirm dialog options",
"relatedProp": "",
Expand Down Expand Up @@ -9308,6 +9439,14 @@
]
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"ConfirmDialogPassThroughType": {
"values": "PassThroughType<T, ConfirmDialogThroughMethodOptions>"
}
}
}
},
"confirmpopup": {
Expand Down
112 changes: 112 additions & 0 deletions components/doc/confirmdialog/pt/ptdoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React, { useState, useRef } from 'react';
import { DocSectionText } from '../../common/docsectiontext';
import { DocSectionCode } from '../../common/docsectioncode';
import { Toast } from '../../../lib/toast/Toast';
import { ConfirmDialog } from '../../../lib/confirmdialog/ConfirmDialog';
import { Button } from '../../../lib/button/Button';

export function PTDoc(props) {
const [visible, setVisible] = useState(false);
const toast = useRef(null);

const accept = () => {
toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
};

const reject = () => {
toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
};

const code = {
basic: `
<ConfirmDialog
pt={{ headerTitle: { className: 'text-primary' } }}
visible={visible}
onHide={() => setVisible(false)}
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
accept={accept}
reject={reject}
/>
<div className="card flex justify-content-center">
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
</div>
`,
javascript: `
import React, { useRef, useState } from 'react';
import { Toast } from 'primereact/toast';
import { Button } from 'primereact/button';
import { ConfirmDialog } from 'primereact/confirmdialog';
export default function PTDemo() {
return (
<>
<Toast ref={toast} />
<ConfirmDialog
pt={{ headerTitle: { className: 'text-primary' } }}
visible={visible}
onHide={() => setVisible(false)}
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
accept={accept}
reject={reject}
/>
<div className="card flex justify-content-center">
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
</div>
</>
)
}
`,
typescript: `
import React, { useRef, useState } from 'react';
import { Toast } from 'primereact/toast';
import { Button } from 'primereact/button';
import { ConfirmDialog } from 'primereact/confirmdialog';
export default function PTDemo() {
return (
<>
<Toast ref={toast} />
<ConfirmDialog
pt={{ headerTitle: { className: 'text-primary' } }}
visible={visible}
onHide={() => setVisible(false)}
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
accept={accept}
reject={reject}
/>
<div className="card flex justify-content-center">
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
</div>
</>
)
}
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<Toast ref={toast} />
<ConfirmDialog
pt={{ headerTitle: { className: 'text-primary' } }}
visible={visible}
onHide={() => setVisible(false)}
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
accept={accept}
reject={reject}
/>
<div className="card flex justify-content-center">
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
</div>
<DocSectionCode code={code} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/confirmdialog/pt/wireframe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {
return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="confirmdialog" />
</div>
</>
);
};
68 changes: 61 additions & 7 deletions components/lib/confirmdialog/ConfirmDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Dialog } from '../dialog/Dialog';
import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { OverlayService } from '../overlayservice/OverlayService';
import { Portal } from '../portal/Portal';
import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
import { ConfirmDialogBase } from './ConfirmDialogBase';

export const confirmDialog = (props = {}) => {
Expand Down Expand Up @@ -38,6 +38,13 @@ export const ConfirmDialog = React.memo(
const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');

const { ptm } = ConfirmDialogBase.setMetaData({
props,
state: {
visible: visibleState
}
});

const accept = () => {
if (!isCallbackExecuting.current) {
isCallbackExecuting.current = true;
Expand Down Expand Up @@ -118,10 +125,31 @@ export const ConfirmDialog = React.memo(
},
getPropValue('rejectClassName')
);

const rejectButtonProps = mergeProps(
{
label: rejectLabel,
icon: getPropValue('rejectIcon'),
className: rejectClassName,
onClick: reject
},
ptm('rejectButton')
);

const acceptButtonProps = mergeProps(
{
label: acceptLabel,
icon: getPropValue('acceptIcon'),
className: acceptClassName,
onClick: accept
},
ptm('acceptButton')
);

const content = (
<>
<Button label={rejectLabel} icon={getPropValue('rejectIcon')} className={rejectClassName} onClick={reject} />
<Button label={acceptLabel} icon={getPropValue('acceptIcon')} className={acceptClassName} onClick={accept} autoFocus />
<Button {...rejectButtonProps} />
<Button {...acceptButtonProps} autoFocus />
</>
);

Expand All @@ -146,15 +174,41 @@ export const ConfirmDialog = React.memo(
const createElement = () => {
const currentProps = getCurrentProps();
const className = classNames('p-confirm-dialog', getPropValue('className'));
const otherProps = ConfirmDialogBase.getOtherProps(currentProps);
const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
const icon = IconUtils.getJSXIcon(getPropValue('icon'), { className: 'p-confirm-dialog-icon' }, { props: currentProps });

const iconProps = mergeProps(
{
className: 'p-confirm-dialog-icon'
},
ptm('icon')
);

const icon = IconUtils.getJSXIcon(getPropValue('icon'), { ...iconProps }, { props: currentProps });
const footer = createFooter();

const messageProps = mergeProps(
{
className: 'p-confirm-dialog-message'
},
ptm('message')
);

const rootProps = mergeProps(
{
visible: visibleState,
className,
footer,
onHide: hide,
breakpoints: getPropValue('breakpoints'),
pt: props.pt
},
ConfirmDialogBase.getOtherProps(props)
);

return (
<Dialog visible={visibleState} {...otherProps} className={className} footer={footer} onHide={hide} breakpoints={getPropValue('breakpoints')}>
<Dialog {...rootProps}>
{icon}
<span className="p-confirm-dialog-message">{message}</span>
<span {...messageProps}>{message}</span>
</Dialog>
);
};
Expand Down
Loading

0 comments on commit 2fec2c9

Please sign in to comment.