From ddcf21431a45285d716ae05328bcc45532a8089b Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 14 Nov 2022 16:26:16 +0300 Subject: [PATCH] Add new Docs: ConfirmDialog Fix: Toolbar description --- components/doc/confirmdialog/apidoc.js | 266 +++++++ components/doc/confirmdialog/basicdoc.js | 154 +++++ components/doc/confirmdialog/importdoc.js | 18 + components/doc/confirmdialog/index.js | 724 -------------------- components/doc/confirmdialog/positiondoc.js | 167 +++++ components/doc/confirmdialog/usingdoc.js | 99 +++ components/doc/toolbar/toolbardoc.js | 2 +- pages/confirmdialog/index.js | 120 +--- 8 files changed, 743 insertions(+), 807 deletions(-) create mode 100644 components/doc/confirmdialog/apidoc.js create mode 100644 components/doc/confirmdialog/basicdoc.js create mode 100644 components/doc/confirmdialog/importdoc.js delete mode 100644 components/doc/confirmdialog/index.js create mode 100644 components/doc/confirmdialog/positiondoc.js create mode 100644 components/doc/confirmdialog/usingdoc.js diff --git a/components/doc/confirmdialog/apidoc.js b/components/doc/confirmdialog/apidoc.js new file mode 100644 index 0000000000..68e44021ae --- /dev/null +++ b/components/doc/confirmdialog/apidoc.js @@ -0,0 +1,266 @@ +import Link from 'next/link'; +import { CodeHighlight } from '../common/codehighlight'; +import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionText } from '../common/docsectiontext'; + +export function ApiDoc(props) { + return ( + <> + + +

Properties

+

These properties are extended from Dialog properties.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
visiblebooleanfalseSpecifies the visibility of the confirm dialog.
messagestringnullMessage of the confirmation.
iconstringnullIcon to display next to the message.
acceptLabelstringYesLabel of the accept button.
rejectLabelstringNoLabel of the reject button.
acceptIconstringnullIcon of the accept button.
rejectIconstringnullIcon of the reject button.
acceptClassNamestringnullStyle class of the accept button.
rejectClassNamestringnullStyle class of the reject button.
footeranynullFooter content of the confirm dialog.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
+
+ +

Events

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
acceptnullCallback to execute when action is confirmed.
rejectnullCallback to execute when action is rejected.
onHide + result: Indicates with which selection the dialog was closed.
+ Valid values are 'accept', 'reject' and undefined (using close icon). + 		Callback to invoke when confirm dialog is hidden.
+
+ +

Styling

+

+ Following is the list of structural style classes, for theming classes visit theming page. +

+
+ + + + + + + + + + + + + +
NameElement
p-confirm-dialogContainer element.
+
+ +

Accessibility

+ +

Screen Reader

+

+ ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this + default behavior. In addition aria-modal is added since focus is kept within the popup. +

+

+ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. +

+ +

+ When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is + defined. +

+ + + {` +const confirm = (event) => { + confirmDialog({ + trigger: event.currentTarget, + message: 'Are you sure you want to proceed?', + header: 'Confirmation', + icon: 'pi pi-exclamation-triangle', + accept: () => acceptFunc(), + reject: () => rejectFunc() + }); +} + + + + +`} + + +

+ If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly. +

+ + + {` + setVisible(false)} message="Are you sure you want to proceed?" + header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> + + + + `, + javascript: ` +import { useRef } from 'react'; +import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; +import { Toast } from 'primereact/toast'; + +export default function BasicDoc() { +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 confirm1 = () => { + confirmDialog({ + message: 'Are you sure you want to proceed?', + header: 'Confirmation', + icon: 'pi pi-exclamation-triangle', + accept, + reject + }); + }; + + const confirm2 = () => { + confirmDialog({ + message: 'Do you want to delete this record?', + header: 'Delete Confirmation', + icon: 'pi pi-info-circle', + acceptClassName: 'p-button-danger', + accept, + reject + }); + }; + + return ( +
+ + + + +
+ ) +} + `, + typescript: ` +import { useRef } from 'react'; +import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; +import { Toast } from 'primereact/toast'; + +export default function BasicDoc() { +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 confirm1 = () => { + confirmDialog({ + message: 'Are you sure you want to proceed?', + header: 'Confirmation', + icon: 'pi pi-exclamation-triangle', + accept, + reject + }); + }; + + const confirm2 = () => { + confirmDialog({ + message: 'Do you want to delete this record?', + header: 'Delete Confirmation', + icon: 'pi pi-info-circle', + acceptClassName: 'p-button-danger', + accept, + reject + }); + }; + + return ( +
+ + + + +
+ ) +} + ` + }; + + return ( + <> + ConfirmDialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state. +
+ + + + +
+ + + ); +} diff --git a/components/doc/confirmdialog/importdoc.js b/components/doc/confirmdialog/importdoc.js new file mode 100644 index 0000000000..89f2a9e013 --- /dev/null +++ b/components/doc/confirmdialog/importdoc.js @@ -0,0 +1,18 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { ConfirmDialog } from 'primereact/confirmdialog'; // To use tag +import { confirmDialog } from 'primereact/confirmdialog'; // To use confirmDialog method + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/confirmdialog/index.js b/components/doc/confirmdialog/index.js deleted file mode 100644 index 1fc06d99f5..0000000000 --- a/components/doc/confirmdialog/index.js +++ /dev/null @@ -1,724 +0,0 @@ -import React, { memo } from 'react'; -import Link from 'next/link'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { useLiveEditorTabs } from '../common/liveeditor'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; - -const ConfirmDialogDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -export class ConfirmDialogDemo extends Component { - - constructor(props) { - super(props); - - this.state = { - visible: false - }; - - this.accept = this.accept.bind(this); - this.reject = this.reject.bind(this); - this.confirm1 = this.confirm1.bind(this); - this.confirm2 = this.confirm2.bind(this); - this.confirmPosition = this.confirmPosition.bind(this); - } - - accept() { - this.toast.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); - } - - reject() { - this.toast.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); - } - - confirm1() { - confirmDialog({ - message: 'Are you sure you want to proceed?', - header: 'Confirmation', - icon: 'pi pi-exclamation-triangle', - accept: this.accept, - reject: this.reject - }); - } - - confirm2() { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - acceptClassName: 'p-button-danger', - accept: this.accept, - reject: this.reject - }); - } - - confirmPosition(position) { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - position, - accept: this.accept, - reject: this.reject - }); - } - - render() { - return ( -
- this.toast = el} /> - -
- - -
Basic
- - - -
Position
-
-
- - -
-
- - - -
-
- - - -
-
- -
Using ConfirmDialog tag
- this.setState({ visible: false })} message="Are you sure you want to proceed?" - header="Confirmation" icon="pi pi-exclamation-triangle" accept={this.accept} reject={this.reject}/> -
-
- ) - } -} - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useState, useRef } from 'react'; -import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -const ConfirmDialogDemo = () => { - 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 confirm1 = () => { - confirmDialog({ - message: 'Are you sure you want to proceed?', - header: 'Confirmation', - icon: 'pi pi-exclamation-triangle', - accept, - reject - }); - }; - - const confirm2 = () => { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - acceptClassName: 'p-button-danger', - accept, - reject - }); - }; - - const confirmPosition = (position) => { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - position, - accept, - reject - }); - }; - - return ( -
- - -
- - -
Basic
- - - -
Position
-
-
- - -
-
- - - -
-
- - - -
-
- -
Using ConfirmDialog tag
- setVisible(false)} message="Are you sure you want to proceed?" - header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> -
-
- ) -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useState, useRef } from 'react'; -import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -const ConfirmDialogDemo = () => { - 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 confirm1 = () => { - confirmDialog({ - message: 'Are you sure you want to proceed?', - header: 'Confirmation', - icon: 'pi pi-exclamation-triangle', - accept, - reject - }); - }; - - const confirm2 = () => { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - acceptClassName: 'p-button-danger', - accept, - reject - }); - }; - - const confirmPosition = (position: string) => { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - position, - accept, - reject - }); - }; - - return ( -
- - -
- - -
Basic
- - - -
Position
-
-
- - -
-
- - - -
-
- - - -
-
- -
Using ConfirmDialog tag
- setVisible(false)} message="Are you sure you want to proceed?" - header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> -
-
- ) -} - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - `, - content: ` -const { useState, useRef } = React; -const { ConfirmDialog, confirmDialog } = primereact.confirmdialog; -const { Button } = primereact.button; -const { Toast } = primereact.toast; - -const ConfirmDialogDemo = () => { - 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 confirm1 = () => { - confirmDialog({ - message: 'Are you sure you want to proceed?', - header: 'Confirmation', - icon: 'pi pi-exclamation-triangle', - accept, - reject - }); - }; - - const confirm2 = () => { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - acceptClassName: 'p-button-danger', - accept, - reject - }); - }; - - const confirmPosition = (position) => { - confirmDialog({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', - icon: 'pi pi-info-circle', - position, - accept, - reject - }); - }; - - return ( -
- - -
- - -
Basic
- - - -
Position
-
-
- - -
-
- - - -
-
- - - -
-
- -
Using ConfirmDialog tag
- setVisible(false)} message="Are you sure you want to proceed?" - header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> -
-
- ) -} - ` - } - }; - - return ( -
- - -
Import via Module
- - {` -import { ConfirmDialog } from 'primereact/confirmdialog'; // To use tag -import { confirmDialog } from 'primereact/confirmdialog'; // To use confirmDialog method -`} - - -
Import via CDN
- - {` - - -`} - - -
Getting Started
-

- There are two ways to display confirm dialog. One of them is to use the confirmDialog method and the other is to use the <ConfirmDialog> tag. These independently create dialog element. It supports the same - properties in both. -

- -
1. confirmDialog method
- - {` -const confirm = () => { - confirmDialog({ - message: 'Are you sure you want to proceed?', - header: 'Confirmation', - icon: 'pi pi-exclamation-triangle', - accept: () => acceptFunc(), - reject: () => rejectFunc() - }); -} - - - -`} - - -
2. <ConfirmDialog> tag
-

- ConfirmDialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state. -

- - - {` - setVisible(false)} message="Are you sure you want to proceed?" - header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> - - - - -`} - - -

- If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly. -

- - - {` - setVisible(false)} message="Are you sure you want to proceed?" - header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> - -
- ); -}); - -export default ConfirmDialogDoc; diff --git a/components/doc/confirmdialog/positiondoc.js b/components/doc/confirmdialog/positiondoc.js new file mode 100644 index 0000000000..7865b1f223 --- /dev/null +++ b/components/doc/confirmdialog/positiondoc.js @@ -0,0 +1,167 @@ +import { useRef, useState } from 'react'; +import { ConfirmDialog, confirmDialog } from '../../lib/confirmdialog/ConfirmDialog'; +import { Toast } from '../../lib/toast/Toast'; +import { Button } from '../../lib/button/Button'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function PositionDoc(props) { + 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 confirmPosition = (position) => { + confirmDialog({ + message: 'Do you want to delete this record?', + header: 'Delete Confirmation', + icon: 'pi pi-info-circle', + position, + accept, + reject + }); + }; + + const code = { + basic: ` + + + + + `, + javascript: ` +import { useRef } from 'react'; +import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; +import { Toast } from 'primereact/toast'; +import { Button } from 'primereact/button'; + +export default function PositionDoc() { + 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 confirmPosition = (position) => { + confirmDialog({ + message: 'Do you want to delete this record?', + header: 'Delete Confirmation', + icon: 'pi pi-info-circle', + position, + accept, + reject + }); + }; + + return ( +
+ + +
+ + +
+
+ + + +
+
+ + + +
+
+ ) +} + `, + typescript: ` +import { useRef } from 'react'; +import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog'; +import { Toast } from 'primereact/toast'; +import { Button } from 'primereact/button'; + +export default function PositionDoc() { + 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 confirmPosition = (position) => { + confirmDialog({ + message: 'Do you want to delete this record?', + header: 'Delete Confirmation', + icon: 'pi pi-info-circle', + position, + accept, + reject + }); + }; + + return ( +
+ + +
+ + +
+
+ + + +
+
+ + + +
+
+ ) +} + ` + }; + + return ( + <> + + + There are two ways to display confirm dialog. One of them is to use the confirmDialog method and the other is to use the <ConfirmDialog> tag. These independently create dialog element. It supports the same properties in + both. + + + +
+
+ + +
+
+ + + +
+
+ + + +
+
+ + + ); +} diff --git a/components/doc/confirmdialog/usingdoc.js b/components/doc/confirmdialog/usingdoc.js new file mode 100644 index 0000000000..0b14555959 --- /dev/null +++ b/components/doc/confirmdialog/usingdoc.js @@ -0,0 +1,99 @@ +import { useState, useRef } from 'react'; +import { ConfirmDialog, confirmDialog } from '../../lib/confirmdialog/ConfirmDialog'; +import { Toast } from '../../lib/toast/Toast'; +import { Button } from '../../lib/button/Button'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function UsingConfirmDialogDoc(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: ` + + + setVisible(false)} message="Are you sure you want to proceed?" + header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> + - - -
Position
-
-
- - -
-
- - - -
-
- - - -
-
- -
Using ConfirmDialog tag
- setVisible(false)} message="Are you sure you want to proceed?" header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} /> -