Refactor #4391 - For TabMenu

Apply prettier

components/doc/common/apidoc/index.json

@@ -30923,6 +30923,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -30977,6 +30985,108 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TabMenuThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "inkbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the inkbar's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabMenuState": {
+                    "description": "Defines current inline state in TabMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current active index state as a number."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabMenuPassThroughType": {
+                    "values": "PassThroughType<T, TabMenuThroughMethodOptions>"
+                }
+            }
         }
     },
     "tabview": {

components/doc/dock/pt/ptdoc.js

@@ -167,7 +167,7 @@ export default function PTDemo() {
                 <div className="dock-window" style={{ backgroundImage: 'url(/images/dock/window.jpg)' }}>
                     <Dock
                         model={items}
-                        position={"bottom"}
+                        position={'bottom'}
                         pt={{
                             container: {
                                 style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }

components/doc/dock/pt/wireframe.js

@@ -1,9 +1,7 @@
-
 import React from 'react';
 import { DocSectionText } from '../../common/docsectiontext';
 
 export const Wireframe = (props) => {
-
     return (
         <>
             <DocSectionText {...props} />

components/doc/steps/pt/ptdoc.js

@@ -48,7 +48,7 @@ export default function PTDemo() {
     ];
 
     return (
-        <div class="card flex justify-content-center">
+        <div className="card flex justify-content-center">
             <Steps
                 model={items}
                 pt={{
@@ -81,7 +81,7 @@ export default function PTDemo() {
     ];
 
     return (
-        <div class="card flex justify-content-center">
+        <div className="card flex justify-content-center">
             <Steps
                 model={items}
                 pt={{
@@ -97,7 +97,7 @@ export default function PTDemo() {
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <div class="card flex justify-content-center">
+            <div className="card flex justify-content-center">
                 <Steps
                     model={items}
                     pt={{

components/doc/tabmenu/pt/ptdoc.js

@@ -0,0 +1,112 @@
+import { DocSectionText } from '../../common/docsectiontext';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { TabMenu } from '../../../lib/tabmenu/TabMenu';
+
+export function PTDoc(props) {
+    const items = [
+        { label: 'Home', icon: 'pi pi-fw pi-home' },
+        { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
+        { label: 'Edit', icon: 'pi pi-fw pi-pencil' },
+        { label: 'Documentation', icon: 'pi pi-fw pi-file' },
+        { label: 'Settings', icon: 'pi pi-fw pi-cog' }
+    ];
+
+    const code = {
+        basic: `
+<TabMenu
+    model={items}
+    pt={{
+        action: {
+            className: 'surface-ground'
+        }
+    }}
+/>
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function PTDemo() {
+    const items = [
+        {
+            label: 'Personal'
+        },
+        {
+            label: 'Seat'
+        },
+        {
+            label: 'Payment'
+        },
+        {
+            label: 'Confirmation'
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <TabMenu
+                model={items}
+                pt={{
+                    action: {
+                        className: 'surface-ground'
+                    }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function PTDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Personal'
+        },
+        {
+            label: 'Seat'
+        },
+        {
+            label: 'Payment'
+        },
+        {
+            label: 'Confirmation'
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <TabMenu
+                model={items}
+                pt={{
+                    action: {
+                        className: 'surface-ground'
+                    }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <TabMenu
+                    model={items}
+                    pt={{
+                        action: {
+                            className: 'surface-ground'
+                        }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/tabmenu/pt/wireframe.js

@@ -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="tabmenu" />
+            </div>
+        </>
+    );
+};

components/lib/dock/Dock.js

@@ -57,7 +57,7 @@ export const Dock = React.memo(
             const actionProps = mergeProps(
                 {
                     href: url || '#',
-                    role: "menuitem",
+                    role: 'menuitem',
                     className: contentClassName,
                     target,
                     'data-pr-tooltip': label,
@@ -90,17 +90,13 @@ export const Dock = React.memo(
                 {
                     key: index,
                     className,
-                    role: "none",
+                    role: 'none',
                     onMouseEnter: () => onItemMouseEnter(index)
                 },
                 ptm('menuitem')
-            )
-
-            return (
-                <li {...menuitemProps}>
-                    {content}
-                </li>
             );
+
+            return <li {...menuitemProps}>{content}</li>;
         };
 
         const createItems = () => {
@@ -112,7 +108,7 @@ export const Dock = React.memo(
                 const header = ObjectUtils.getJSXElement(props.header, { props });
                 const headerProps = mergeProps(
                     {
-                        className: "p-dock-header"
+                        className: 'p-dock-header'
                     },
                     ptm('header')
                 );
@@ -127,29 +123,25 @@ export const Dock = React.memo(
             const items = createItems();
             const menuProps = mergeProps(
                 {
-                    className: "p-dock-list",
-                    role: "menu",
+                    className: 'p-dock-list',
+                    role: 'menu',
                     onMouseLeave: onListMouseLeave
                 },
                 ptm('menu')
-            )
-
-            return (
-                <ul {...menuProps}>
-                    {items}
-                </ul>
             );
+
+            return <ul {...menuProps}>{items}</ul>;
         };
 
         const createFooter = () => {
             if (props.footer) {
                 const footer = ObjectUtils.getJSXElement(props.footer, { props });
                 const footerProps = mergeProps(
                     {
-                        className: "p-dock-footer"
+                        className: 'p-dock-footer'
                     },
                     ptm('footer')
-                )
+                );
 
                 return <div {...footerProps}>{footer}</div>;
             }
@@ -185,7 +177,7 @@ export const Dock = React.memo(
 
         const containerProps = mergeProps(
             {
-                className: "p-dock-container"
+                className: 'p-dock-container'
             },
             ptm('container')
         );