Refactor #4359 - For Sidebar

primefaces · May 9, 2023 · 1f90cc0 · 1f90cc0
1 parent 9c15d22
commit 1f90cc0
Show file tree

Hide file tree

Showing 7 changed files with 370 additions and 17 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -28126,6 +28126,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -28147,6 +28155,101 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SidebarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SidebarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SidebarState": {
+                    "description": "Defines current inline state in Sidebar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current container visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SidebarPassThroughType": {
+                    "values": "PassThroughType<T, SidebarPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "skeleton": {

diff --git a/components/doc/sidebar/pt/ptdoc.js b/components/doc/sidebar/pt/ptdoc.js
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+import { Sidebar } from '../../../lib/sidebar/Sidebar';
+import { Button } from '../../../lib/button/Button';
+
+export function PTDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const code = {
+        basic: `
+<Terminal
+    welcomeMessage="Welcome to PrimeReact"
+    prompt="primereact $"
+    pt={{
+        root: { className: 'surface-900 text-white' },
+        command: { className: 'text-blue-500' },
+        prompt: { className: 'text-yellow-500' },
+        response: { className: 'text-purple-500' }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function PTDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar
+                pt={{
+                    root: { className: 'w-25rem' }
+                }}
+                visible={visible}
+                onHide={() => setVisible(false)}
+            >
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function PTDemo() {
+    const [visible, setVisible] = useState(false);
+    
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar
+                pt={{
+                    root: { className: 'w-25rem' }
+                }}
+                visible={visible}
+                onHide={() => setVisible(false)}
+            >
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <Sidebar
+                    pt={{
+                        root: { className: 'w-25rem' }
+                    }}
+                    visible={visible}
+                    onHide={() => setVisible(false)}
+                >
+                    <h2>Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+                <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/pt/wireframe.js b/components/doc/sidebar/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="/images/pt/wireframe-placeholder.jpg" alt="card" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -4,7 +4,7 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, ObjectUtils, ZIndexUtils, IconUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils, IconUtils, mergeProps } from '../utils/Utils';
 import { SidebarBase } from './SidebarBase';
 import { TimesIcon } from '../icons/times';
 
@@ -13,6 +13,12 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
 
     const [maskVisibleState, setMaskVisibleState] = React.useState(false);
     const [visibleState, setVisibleState] = React.useState(false);
+    const { ptm } = SidebarBase.setMetaData({
+        props,
+        state: {
+            containerVisible: maskVisibleState
+        }
+    });
     const sidebarRef = React.useRef(null);
     const maskRef = React.useRef(null);
     const closeIconRef = React.useRef(null);
@@ -162,13 +168,31 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
 
     const createCloseIcon = () => {
         const iconClassName = 'p-sidebar-close-icon';
-        const icon = props.closeIcon || <TimesIcon className={iconClassName} />;
-        const closeIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+        const closeButtonProps = mergeProps(
+            {
+                type: "button",
+                ref: closeIconRef,
+                className: "p-sidebar-close p-sidebar-icon p-link",
+                onClick: (e) => onClose(e),
+                'aria-label': ariaLabel
+            },
+            ptm('closeButton')
+        );
+
+        const closeIconProps = mergeProps(
+            {
+                className: iconClassName
+            },
+            ptm('closeIcon')
+        );
+
+        const icon = props.closeIcon || <TimesIcon {...closeIconProps} />;
+        const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props });
         const ariaLabel = props.ariaCloseLabel || localeOption('close');
 
         if (props.showCloseIcon) {
             return (
-                <button type="button" ref={closeIconRef} className="p-sidebar-close p-sidebar-icon p-link" onClick={onClose} aria-label={ariaLabel}>
+                <button {...closeButtonProps}>
                     {closeIcon}
                     <Ripple />
                 </button>
@@ -183,7 +207,6 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
     };
 
     const createElement = () => {
-        const otherProps = SidebarBase.getOtherProps(props);
         const className = classNames('p-sidebar p-component', props.className, {
             'p-input-filled': PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': PrimeReact.ripple === false
@@ -208,15 +231,51 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
             exit: props.fullScreen ? 150 : 300
         };
 
+        const maskProps = mergeProps(
+            {
+                ref: maskRef,
+                style: props.maskStyle,
+                className: maskClassName,
+                onMouseDown: (e) => onMaskClick(e)
+            },
+            ptm('mask')
+        );
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: sidebarRef,
+                className,
+                style: props.style,
+                role: "complementary"
+            },
+            SidebarBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const headerProps = mergeProps(
+            {
+                className: "p-sidebar-header"
+            },
+            ptm('header')
+        );
+
+        const contentProps = mergeProps(
+            {
+                className: "p-sidebar-content"
+            },
+            ptm('content')
+        );
+
         return (
-            <div ref={maskRef} style={props.maskStyle} className={maskClassName} onMouseDown={onMaskClick}>
+            <div {...maskProps}>
                 <CSSTransition nodeRef={sidebarRef} classNames="p-sidebar" in={visibleState} timeout={transitionTimeout} options={props.transitionOptions} unmountOnExit onEntered={onEntered} onExiting={onExiting} onExited={onExited}>
-                    <div ref={sidebarRef} id={props.id} className={className} style={props.style} {...otherProps} role="complementary">
-                        <div className="p-sidebar-header">
+                    <div {...rootProps}>
+                        <div {...headerProps}>
                             {icons}
                             {closeIcon}
                         </div>
-                        <div className="p-sidebar-content">{props.children}</div>
+                        <div {...contentProps}>{props.children}</div>
                     </div>
                 </CSSTransition>
             </div>

diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const SidebarBase = {
+export const SidebarBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Sidebar',
         id: null,
@@ -25,7 +25,5 @@ export const SidebarBase = {
         onShow: null,
         onHide: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, SidebarBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, SidebarBase.defaultProps)
-};
+    }
+});