From 395671fa986be725cd4722b03b97e2277ef3d9eb Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 5 Jul 2023 12:55:46 +0300
Subject: [PATCH] Refactor #4602 - for ScrollPanel

---
 components/lib/scrollpanel/ScrollPanel.css    | 50 ---------------
 components/lib/scrollpanel/ScrollPanel.js     | 20 +++---
 components/lib/scrollpanel/ScrollPanelBase.js | 63 +++++++++++++++++++
 components/lib/scrollpanel/scrollpanel.d.ts   |  5 ++
 styles/primereact.css                         |  1 -
 5 files changed, 79 insertions(+), 60 deletions(-)
 delete mode 100644 components/lib/scrollpanel/ScrollPanel.css

diff --git a/components/lib/scrollpanel/ScrollPanel.css b/components/lib/scrollpanel/ScrollPanel.css
deleted file mode 100644
index 459609d6d5..0000000000
--- a/components/lib/scrollpanel/ScrollPanel.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.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.js b/components/lib/scrollpanel/ScrollPanel.js
index 005fd026ac..6b9ad0a401 100644
--- 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,7 +173,7 @@ 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')
@@ -179,14 +181,14 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
 
     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
index 8dde37dcbc..329671fb81 100644
--- 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
index ff189b5245..3cc1e0b6b7 100644
--- 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
index fec862e62c..2bcfa5fe7c 100644
--- 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";