Fix primefaces#3638: ConfirmDialog showcase example render correctly (p…

…rimefaces#3639)

* Toolbar and Tabview TS fixes

* ConfirmDialog TS fixes

* Fix TextArea event example

* Fixed Confirm Dialog

components/doc/confirmdialog/basicdoc.js

@@ -1,9 +1,9 @@
 import { 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 { confirmDialog } from '../../lib/confirmdialog/ConfirmDialog';
+import { Toast } from '../../lib/toast/Toast';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function BasicDoc(props) {
     const toast = useRef(null);
@@ -51,7 +51,7 @@ 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 });
 }
@@ -96,14 +96,14 @@ import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
 import { Toast } from 'primereact/toast';
 
 export default function BasicDoc() {
-const toast = useRef(null);
-    
+const toast = useRef<Toast>(null);
+
 const accept = () => {
-    toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    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 });
+    toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
 }
 
     const confirm1 = () => {
@@ -127,7 +127,7 @@ const reject = () => {
         });
     };
 
-    return ( 
+    return (
         <div>
             <Toast ref={toast} />
             <ConfirmDialog />
@@ -144,7 +144,6 @@ const reject = () => {
             <DocSectionText {...props}>ConfirmDialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state.</DocSectionText>
             <div className="card flex justify-content-center">
                 <Toast ref={toast} />
-                <ConfirmDialog />
                 <Button onClick={confirm1} icon="pi pi-check" label="Confirm" className="mr-2"></Button>
                 <Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
             </div>

components/doc/confirmdialog/positiondoc.js

@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react';
-import { ConfirmDialog, confirmDialog } from '../../lib/confirmdialog/ConfirmDialog';
-import { Toast } from '../../lib/toast/Toast';
+import { useRef } from 'react';
 import { Button } from '../../lib/button/Button';
-import { DocSectionText } from '../common/docsectiontext';
+import { confirmDialog } from '../../lib/confirmdialog/ConfirmDialog';
+import { Toast } from '../../lib/toast/Toast';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function PositionDoc(props) {
     const toast = useRef(null);
@@ -91,14 +91,14 @@ import { Toast } from 'primereact/toast';
 import { Button } from 'primereact/button';
 
 export default function PositionDoc() {
-    const toast = useRef(null);
-    
+    const toast = useRef<Toast>(null);
+
     const accept = () => {
-        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        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 });
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
     }
 
     const confirmPosition = (position) => {
@@ -143,7 +143,6 @@ export default function PositionDoc() {
                 There are two ways to display confirm dialog. One of them is to use the confirmDialog method and the other is to use the <i>&lt;ConfirmDialog&gt;</i> tag. These independently create dialog element. It supports the same properties in
                 both.
             </DocSectionText>
-            <ConfirmDialog />
 
             <div className="card ">
                 <div className="col-12">

components/doc/confirmdialog/usingdoc.js

@@ -1,9 +1,9 @@
-import { useState, useRef } from 'react';
-import { ConfirmDialog, confirmDialog } from '../../lib/confirmdialog/ConfirmDialog';
-import { Toast } from '../../lib/toast/Toast';
+import { useRef, useState } from 'react';
 import { Button } from '../../lib/button/Button';
-import { DocSectionText } from '../common/docsectiontext';
+import { ConfirmDialog } from '../../lib/confirmdialog/ConfirmDialog';
+import { Toast } from '../../lib/toast/Toast';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function UsingConfirmDialogDoc(props) {
     const [visible, setVisible] = useState(false);
@@ -62,14 +62,14 @@ import { Button } from '../../lib/button/Button';
 
 export default function UsingConfirmDialogDoc() {
     const [visible, setVisible] = useState(false);
-    const toast = useRef(null);
+    const toast = useRef<Toast>(null);
 
     const accept = () => {
-        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        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 });
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
     }
 
     return (

components/doc/inputtextarea/autoresizedoc.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
-import { DocSectionText } from '../common/docsectiontext';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function AutoResizeDoc(props) {
     const [value, setValue] = useState('');
@@ -40,7 +40,7 @@ export default function AutoResizeDemo() {
         <>
             <DocSectionText {...props}>In auto resize mode, textarea grows instead of displaying a scrollbar.</DocSectionText>
             <div className="card flex justify-content-center">
-                <InputTextarea rows={5} cols={30} value={value} onChange={(e) => setValue(event.target.value)} autoResize />
+                <InputTextarea rows={5} cols={30} value={value} onChange={(e) => setValue(e.target.value)} autoResize />
             </div>
             <DocSectionCode code={code} />
         </>

components/doc/tabview/customheaderdoc.js

@@ -1,6 +1,6 @@
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
 import { Avatar } from '../../lib/avatar/Avatar';
 import { SplitButton } from '../../lib/splitbutton/SplitButton';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
@@ -99,12 +99,12 @@ export default function CustomHeaderDoc() {
 }
         `,
         typescript: `
-import { TabView, TabPanel } from 'primereact/tabview';
+import { TabView, TabPanel, TabPanelHeaderTemplateOptions } from 'primereact/tabview';
 import { SplitButton } from 'primereact/splitbutton';
 import { Avatar } from 'primereact/avatar';
 
 export default function CustomHeaderDoc() {
-    const tabHeaderITemplate = (options) => {
+    const tabHeaderITemplate = (options: TabPanelHeaderTemplateOptions) => {
         return (
             <button type="button" onClick={options.onClick} className={options.className}>
                 <i className="pi pi-prime mr-2" />
@@ -113,7 +113,7 @@ export default function CustomHeaderDoc() {
         );
     };
 
-    const tabHeaderIITemplate = (options) => {
+    const tabHeaderIITemplate = (options: TabPanelHeaderTemplateOptions) => {
         return (
             <div className="flex align-items-center px-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
                 <Avatar image="images/avatar/amyelsner.png" onImageError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} shape="circle" className="mx-2" />
@@ -122,7 +122,7 @@ export default function CustomHeaderDoc() {
         )
     };
 
-    const tabHeaderIIITemplate = (options) => {
+    const tabHeaderIIITemplate = (options: TabPanelHeaderTemplateOptions) => {
         const items = [
             { label: 'Update', icon: 'pi pi-refresh' },
             { label: 'Delete', icon: 'pi pi-times' },

components/doc/toolbar/toolbardoc.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Toolbar } from '../../lib/toolbar/Toolbar';
 import { Button } from '../../lib/button/Button';
 import { SplitButton } from '../../lib/splitbutton/SplitButton';
+import { Toolbar } from '../../lib/toolbar/Toolbar';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
@@ -52,7 +52,7 @@ export function ToolbarDoc(props) {
 <Toolbar left={leftContents} right={rightContents} />
         `,
         javascript: `
-import React from 'react';        
+import React from 'react';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
 import { SplitButton } from 'primereact/splitbutton';
@@ -107,11 +107,12 @@ export default function ToolbarDoc() {
 import React from 'react';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
+import { MenuItem } from 'primereact/menuitem';
 import { SplitButton } from 'primereact/splitbutton';
 
 export default function ToolbarDoc() {
 
-    const items = [
+    const items: MenuItem[] = [
         {
             label: 'Update',
             icon: 'pi pi-refresh'

pages/confirmdialog/index.js

@@ -1,12 +1,13 @@
 import Head from 'next/head';
+import { DocActions } from '../../components/doc/common/docactions';
 import { DocSectionNav } from '../../components/doc/common/docsectionnav';
 import { DocSections } from '../../components/doc/common/docsections';
-import { DocActions } from '../../components/doc/common/docactions';
+import { ApiDoc } from '../../components/doc/confirmdialog/apidoc';
 import { BasicDoc } from '../../components/doc/confirmdialog/basicdoc';
+import { ImportDoc } from '../../components/doc/confirmdialog/importdoc';
 import { PositionDoc } from '../../components/doc/confirmdialog/positiondoc';
 import { UsingConfirmDialogDoc } from '../../components/doc/confirmdialog/usingdoc';
-import { ApiDoc } from '../../components/doc/confirmdialog/apidoc';
-import { ImportDoc } from '../../components/doc/confirmdialog/importdoc';
+import { ConfirmDialog } from '../../components/lib/confirmdialog/ConfirmDialog';
 
 const ConfirmDialogDemo = () => {
     const docs = [
@@ -56,6 +57,7 @@ const ConfirmDialogDemo = () => {
             <div className="content-section doc">
                 <DocSections docs={docs} />
                 <DocSectionNav docs={docs} />
+                <ConfirmDialog />
             </div>
         </div>
     );