From 020ac20417b12a8f45e3e07445bd0eb5bfbe0d54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Tue, 4 Jul 2023 18:03:34 +0300 Subject: [PATCH] Refactor #4602 - for Panel --- components/lib/panel/Panel.css | 19 -------- components/lib/panel/Panel.js | 39 ++++++++------- components/lib/panel/PanelBase.js | 80 +++++++++++++++++++++++-------- components/lib/panel/panel.d.ts | 5 ++ styles/primereact.css | 1 - 5 files changed, 86 insertions(+), 58 deletions(-) delete mode 100644 components/lib/panel/Panel.css diff --git a/components/lib/panel/Panel.css b/components/lib/panel/Panel.css deleted file mode 100644 index 200e6bf5d5..0000000000 --- a/components/lib/panel/Panel.css +++ /dev/null @@ -1,19 +0,0 @@ -.p-panel-header { - display: flex; - justify-content: space-between; - align-items: center; -} - -.p-panel-title { - line-height: 1; -} - -.p-panel-header-icon { - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - text-decoration: none; - overflow: hidden; - position: relative; -} diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js index 56636d0afc..7c3092739a 100644 --- a/components/lib/panel/Panel.js +++ b/components/lib/panel/Panel.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMountEffect, useStyle } from '../hooks/Hooks'; import { MinusIcon } from '../icons/minus'; import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils'; +import { IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { PanelBase } from './PanelBase'; export const Panel = React.forwardRef((inProps, ref) => { @@ -18,8 +18,17 @@ export const Panel = React.forwardRef((inProps, ref) => { const collapsed = props.toggleable ? (props.onToggle ? props.collapsed : collapsedState) : false; const headerId = idState + '_header'; const contentId = idState + '_content'; + const { load: loadStyle, unload: unloadStyle } = useStyle(PanelBase.css.styles, { name: 'primereact_panel_style', manual: true }); - const { ptm } = PanelBase.setMetaData({ + React.useEffect(() => { + loadStyle(); + + return () => { + unloadStyle(); + }; + }, []); + + const { ptm, cx } = PanelBase.setMetaData({ props, state: { id: idState, @@ -82,7 +91,7 @@ export const Panel = React.forwardRef((inProps, ref) => { const buttonId = idState + '_label'; const togglerProps = mergeProps( { - className: 'p-panel-header-icon p-panel-toggler p-link', + className: cx('toggler'), onClick: toggle, id: buttonId, 'aria-controls': contentId, @@ -115,7 +124,7 @@ export const Panel = React.forwardRef((inProps, ref) => { const titleProps = mergeProps( { id: headerId, - className: 'p-panel-title' + className: cx('title') }, ptm('title') ); @@ -123,7 +132,7 @@ export const Panel = React.forwardRef((inProps, ref) => { const iconsProps = mergeProps( { - className: 'p-panel-icons' + className: cx('icons') }, ptm('icons') ); @@ -136,7 +145,7 @@ export const Panel = React.forwardRef((inProps, ref) => { const headerProps = mergeProps( { - className: 'p-panel-header' + className: cx('header') }, ptm('header') ); @@ -174,7 +183,7 @@ export const Panel = React.forwardRef((inProps, ref) => { const toggleableContentProps = mergeProps( { ref: contentRef, - className: 'p-toggleable-content', + className: cx('toggleableContent'), 'aria-hidden': collapsed, role: 'region', id: contentId, @@ -184,7 +193,7 @@ export const Panel = React.forwardRef((inProps, ref) => { ); const contentProps = mergeProps( { - className: 'p-panel-content' + className: cx('content') }, ptm('content') ); @@ -203,7 +212,7 @@ export const Panel = React.forwardRef((inProps, ref) => { const footerProps = mergeProps( { - className: 'p-panel-footer' + className: cx('footer') }, ptm('footer') ); @@ -212,7 +221,7 @@ export const Panel = React.forwardRef((inProps, ref) => { if (props.footerTemplate) { const defaultContentOptions = { - className: 'p-panel-footer', + className: cx('footer'), element: content, props }; @@ -230,13 +239,7 @@ export const Panel = React.forwardRef((inProps, ref) => { id: idState, ref: elementRef, style: props.style, - className: classNames( - 'p-panel p-component', - { - 'p-panel-toggleable': props.toggleable - }, - props.className - ) + className: cx('root') }, PanelBase.getOtherProps(props), ptm('root') diff --git a/components/lib/panel/PanelBase.js b/components/lib/panel/PanelBase.js index 7dd7e35daf..835b2bf702 100644 --- a/components/lib/panel/PanelBase.js +++ b/components/lib/panel/PanelBase.js @@ -1,24 +1,64 @@ import { ComponentBase } from '../componentbase/ComponentBase'; +import { classNames } from '../utils/Utils'; export const PanelBase = ComponentBase.extend({ - defaultProps: { - __TYPE: 'Panel', - id: null, - header: null, - headerTemplate: null, - footer: null, - footerTemplate: null, - toggleable: null, - style: null, - className: null, - collapsed: null, - expandIcon: null, - collapseIcon: null, - icons: null, - transitionOptions: null, - onExpand: null, - onCollapse: null, - onToggle: null, - children: undefined - } + defaultProps: { + __TYPE: 'Panel', + id: null, + header: null, + headerTemplate: null, + footer: null, + footerTemplate: null, + toggleable: null, + style: null, + className: null, + collapsed: null, + expandIcon: null, + collapseIcon: null, + icons: null, + transitionOptions: null, + onExpand: null, + onCollapse: null, + onToggle: null, + children: undefined + }, + css: { + classes: { + root: ({ props }) => classNames( + 'p-panel p-component', + { + 'p-panel-toggleable': props.toggleable + } + ), + header: 'p-panel-header', + title: 'p-panel-title', + icons: 'p-panel-icons', + toggler: 'p-panel-header-icon p-panel-toggler p-link', + togglerIcon: 'p-panel-header-icon p-panel-toggler p-link', + toggleableContent: 'p-toggleable-content', + content: 'p-panel-content', + footer: 'p-panel-footer' + }, + styles: ` + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + ` + } }); diff --git a/components/lib/panel/panel.d.ts b/components/lib/panel/panel.d.ts index 12b7b3d6d2..7caaff9b7a 100644 --- a/components/lib/panel/panel.d.ts +++ b/components/lib/panel/panel.d.ts @@ -242,6 +242,11 @@ export interface PanelProps extends Omit