Refactor #4602 - for ScrollPanel

primefaces · Jul 5, 2023 · 395671f · 395671f
1 parent 92d7730
commit 395671f
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 60 deletions.
diff --git a/components/lib/scrollpanel/ScrollPanel.css b/components/lib/scrollpanel/ScrollPanel.css
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
-import { classNames, DomHandler, mergeProps } from '../utils/Utils';
-import { ScrollPanelBase } from './ScrollPanelBase';
 import { PrimeReactContext } from '../api/Api';
+import { useMountEffect, useStyle, useUnmountEffect } from '../hooks/Hooks';
+import { DomHandler, mergeProps } from '../utils/Utils';
+import { ScrollPanelBase } from './ScrollPanelBase';
 
 export const ScrollPanel = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
     const props = ScrollPanelBase.getProps(inProps, context);
 
-    const { ptm } = ScrollPanelBase.setMetaData({
+    useStyle(ScrollPanelBase.css.styles, { name: 'primereact_scrollpanel_style' });
+
+    const { ptm, cx } = ScrollPanelBase.setMetaData({
         props
     });
 
@@ -171,22 +173,22 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: containerRef,
             style: props.style,
-            className: classNames('p-scrollpanel p-component', props.className)
+            className: cx('root')
         },
         ScrollPanelBase.getOtherProps(props),
         ptm('root')
     );
 
     const wrapperProps = mergeProps(
         {
-            className: 'p-scrollpanel-wrapper'
+            className: cx('wrapper')
         },
         ptm('wrapper')
     );
 
     const contentProps = mergeProps(
         {
-            className: 'p-scrollpanel-content',
+            className: cx('content'),
             ref: contentRef,
             onScroll: moveBar,
             onMouseEnter: moveBar
@@ -197,7 +199,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
     const barXProps = mergeProps(
         {
             ref: xBarRef,
-            className: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+            className: cx('barx'),
             onMouseDown: onXBarMouseDown
         },
         ptm('barx')
@@ -206,7 +208,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
     const barYProps = mergeProps(
         {
             ref: yBarRef,
-            className: 'p-scrollpanel-bar p-scrollpanel-bar-y',
+            className: cx('bary'),
             onMouseDown: onYBarMouseDown
         },
         ptm('bary')

diff --git a/components/lib/scrollpanel/ScrollPanelBase.js b/components/lib/scrollpanel/ScrollPanelBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const ScrollPanelBase = ComponentBase.extend({
     defaultProps: {
@@ -7,5 +8,67 @@ export const ScrollPanelBase = ComponentBase.extend({
         style: null,
         className: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) => classNames('p-scrollpanel p-component', props.className),
+            wrapper: 'p-scrollpanel-wrapper',
+            content: 'p-scrollpanel-content',
+            barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+            bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+        },
+        styles: `
+        .p-scrollpanel-wrapper {
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            position: relative;
+            z-index: 1;
+            float: left;
+        }
+        
+        .p-scrollpanel-content {
+            height: calc(100% + 18px);
+            width: calc(100% + 18px);
+            padding: 0 18px 18px 0;
+            position: relative;
+            overflow: scroll;
+            box-sizing: border-box;
+        }
+        
+        .p-scrollpanel-bar {
+            position: relative;
+            background: #c1c1c1;
+            border-radius: 3px;
+            z-index: 2;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.25s linear;
+        }
+        
+        .p-scrollpanel-bar-y {
+            width: 9px;
+            top: 0;
+        }
+        
+        .p-scrollpanel-bar-x {
+            height: 9px;
+            bottom: 0;
+        }
+        
+        .p-scrollpanel-hidden {
+            visibility: hidden;
+        }
+        
+        .p-scrollpanel:hover .p-scrollpanel-bar,
+        .p-scrollpanel:active .p-scrollpanel-bar {
+            opacity: 1;
+        }
+        
+        .p-scrollpanel-grabbed {
+            user-select: none;
+        }
+        
+        `
     }
 });
diff --git a/components/lib/scrollpanel/scrollpanel.d.ts b/components/lib/scrollpanel/scrollpanel.d.ts
@@ -61,6 +61,11 @@ export interface ScrollPanelProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @type {ScrollPanelPassThroughOptions}
      */
     pt?: ScrollPanelPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -46,7 +46,6 @@
 @import "../components/lib/progressspinner/ProgressSpinner.css";
 @import "../components/lib/radiobutton/RadioButton.css";
 @import "../components/lib/rating/Rating.css";
-@import "../components/lib/scrollpanel/ScrollPanel.css";
 @import "../components/lib/sidebar/Sidebar.css";
 @import "../components/lib/slidemenu/SlideMenu.css";
 @import "../components/lib/slider/Slider.css";