From 1f90cc087d3fc818a97d4568739a0f76252f7640 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Tue, 9 May 2023 20:46:12 +0300 Subject: [PATCH] Refactor #4359 - For Sidebar --- components/doc/common/apidoc/index.json | 103 ++++++++++++++++++++++++ components/doc/sidebar/pt/ptdoc.js | 102 +++++++++++++++++++++++ components/doc/sidebar/pt/wireframe.js | 13 +++ components/lib/sidebar/Sidebar.js | 77 +++++++++++++++--- components/lib/sidebar/SidebarBase.js | 10 +-- components/lib/sidebar/sidebar.d.ts | 59 +++++++++++++- pages/sidebar/index.js | 23 +++++- 7 files changed, 370 insertions(+), 17 deletions(-) create mode 100644 components/doc/sidebar/pt/ptdoc.js create mode 100644 components/doc/sidebar/pt/wireframe.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index a0d682a639..156477460b 100644 --- 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>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "header", + "optional": true, + "readonly": false, + "type": "SidebarPassThroughType>", + "description": "Uses to pass attributes to the header's DOM element." + }, + { + "name": "closeButton", + "optional": true, + "readonly": false, + "type": "SidebarPassThroughType>", + "description": "Uses to pass attributes to the close button's DOM element." + }, + { + "name": "closeIcon", + "optional": true, + "readonly": false, + "type": "SidebarPassThroughType>", + "description": "Uses to pass attributes to the close icon's DOM element." + }, + { + "name": "content", + "optional": true, + "readonly": false, + "type": "SidebarPassThroughType>", + "description": "Uses to pass attributes to the content's DOM element." + }, + { + "name": "mask", + "optional": true, + "readonly": false, + "type": "SidebarPassThroughType>", + "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" + } + } } }, "skeleton": { diff --git a/components/doc/sidebar/pt/ptdoc.js b/components/doc/sidebar/pt/ptdoc.js new file mode 100644 index 0000000000..8e112fd6af --- /dev/null +++ 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: ` + + `, + 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 ( +
+ setVisible(false)} + > +

Sidebar

+

+ 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. +

+ +
+ ); +} + `, + 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 ( +
+ setVisible(false)} + > +

Sidebar

+

+ 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. +

+ +
+ ); +} + ` + }; + + return ( + <> + +
+ setVisible(false)} + > +

Sidebar

+

+ 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. +

+ +
+ + + ); +} diff --git a/components/doc/sidebar/pt/wireframe.js b/components/doc/sidebar/pt/wireframe.js new file mode 100644 index 0000000000..f0f3240ec8 --- /dev/null +++ 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 ( + <> + +
+ card +
+ + ); +}; diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js index 5700e43d08..5a13e33d16 100644 --- 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 || ; - 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 || ; + const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props }); const ariaLabel = props.ariaCloseLabel || localeOption('close'); if (props.showCloseIcon) { return ( - @@ -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 ( -
+
-