Refactor #4602 - for Panel

primefaces · Jul 4, 2023 · 020ac20 · 020ac20
1 parent 7d7be62
commit 020ac20
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 58 deletions.
diff --git a/components/lib/panel/Panel.css b/components/lib/panel/Panel.css
diff --git 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,15 +124,15 @@ export const Panel = React.forwardRef((inProps, ref) => {
         const titleProps = mergeProps(
             {
                 id: headerId,
-                className: 'p-panel-title'
+                className: cx('title')
             },
             ptm('title')
         );
         const titleElement = <span {...titleProps}>{header}</span>;
 
         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
@@ -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
@@ -242,6 +242,11 @@ export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * @type {PanelPassThroughOptions}
      */
     pt?: PanelPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -39,7 +39,6 @@
 @import "../components/lib/organizationchart/OrganizationChart.css";
 @import "../components/lib/overlaypanel/OverlayPanel.css";
 @import "../components/lib/paginator/Paginator.css";
-@import "../components/lib/panel/Panel.css";
 @import "../components/lib/panelmenu/PanelMenu.css";
 @import "../components/lib/password/Password.css";
 @import "../components/lib/picklist/PickList.css";