From 92f60b8c092542c40fb02648816a0011c68d0dd5 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 6 Jul 2023 11:06:36 +0300
Subject: [PATCH] Refactor #4602 - for ScrollTop

---
 components/lib/scrolltop/ScrollTop.css    | 38 ----------------
 components/lib/scrolltop/ScrollTop.js     | 25 ++++-------
 components/lib/scrolltop/ScrollTopBase.js | 54 +++++++++++++++++++++++
 components/lib/scrolltop/scrolltop.d.ts   |  5 +++
 styles/primereact.css                     |  1 -
 5 files changed, 68 insertions(+), 55 deletions(-)
 delete mode 100644 components/lib/scrolltop/ScrollTop.css

diff --git a/components/lib/scrolltop/ScrollTop.css b/components/lib/scrolltop/ScrollTop.css
deleted file mode 100644
index 0b13bd4e56..0000000000
--- a/components/lib/scrolltop/ScrollTop.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.p-scrolltop {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-scrolltop-sticky {
-    position: sticky;
-}
-
-.p-scrolltop-sticky.p-link {
-    margin-left: auto;
-}
-
-.p-scrolltop-helper {
-    display: none !important;
-}
-
-.p-scrolltop-enter {
-    opacity: 0;
-}
-
-.p-scrolltop-enter-active {
-    opacity: 1;
-    transition: opacity .15s;
-}
-
-.p-scrolltop-exit {
-    opacity: 1;
-}
-
-.p-scrolltop-exit-active {
-    opacity: 0;
-    transition: opacity .15s;
-}
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index ef1d2133e5..2b088fa5b3 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -1,19 +1,21 @@
 import * as React from 'react';
-import { PrimeReactContext } from '../api/Api';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useEventListener, useUnmountEffect } from '../hooks/Hooks';
+import { useEventListener, useStyle, useUnmountEffect } from '../hooks/Hooks';
 import { ChevronUpIcon } from '../icons/chevronup';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { ScrollTopBase } from './ScrollTopBase';
-import PrimeReact from '../api/Api';
 
 export const ScrollTop = React.memo(
     React.forwardRef((inProps, ref) => {
         const [visibleState, setVisibleState] = React.useState(false);
         const context = React.useContext(PrimeReactContext);
+
+        useStyle(ScrollTopBase.css.styles, { name: 'primereact_scrolltop_style' });
+
         const props = ScrollTopBase.getProps(inProps, context);
-        const { ptm } = ScrollTopBase.setMetaData({
+        const { ptm, cx } = ScrollTopBase.setMetaData({
             props,
             state: {
                 visible: visibleState
@@ -81,18 +83,9 @@ export const ScrollTop = React.memo(
             ZIndexUtils.clear(scrollElementRef.current);
         });
 
-        const className = classNames(
-            'p-scrolltop p-link p-component',
-            {
-                'p-scrolltop-sticky': props.target !== 'window'
-            },
-            props.className
-        );
-
-        const iconClassName = 'p-scrolltop-icon';
         const iconProps = mergeProps(
             {
-                className: iconClassName
+                className: cx('icon')
             },
             ptm('icon')
         );
@@ -102,7 +95,7 @@ export const ScrollTop = React.memo(
             {
                 ref: scrollElementRef,
                 type: 'button',
-                className,
+                className: cx('root'),
                 style: props.style,
                 onClick
             },
diff --git a/components/lib/scrolltop/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js
index fcba94cf7d..86ef5219eb 100644
--- a/components/lib/scrolltop/ScrollTopBase.js
+++ b/components/lib/scrolltop/ScrollTopBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const ScrollTopBase = ComponentBase.extend({
     defaultProps: {
@@ -13,5 +14,58 @@ export const ScrollTopBase = ComponentBase.extend({
         onShow: null,
         onHide: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames(
+                    'p-scrolltop p-link p-component',
+                    {
+                        'p-scrolltop-sticky': props.target !== 'window'
+                    },
+                    props.className
+                ),
+            icon: 'p-scrolltop-icon'
+        },
+        styles: `
+        .p-scrolltop {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .p-scrolltop-sticky {
+            position: sticky;
+        }
+        
+        .p-scrolltop-sticky.p-link {
+            margin-left: auto;
+        }
+        
+        .p-scrolltop-helper {
+            display: none !important;
+        }
+        
+        .p-scrolltop-enter {
+            opacity: 0;
+        }
+        
+        .p-scrolltop-enter-active {
+            opacity: 1;
+            transition: opacity .15s;
+        }
+        
+        .p-scrolltop-exit {
+            opacity: 1;
+        }
+        
+        .p-scrolltop-exit-active {
+            opacity: 0;
+            transition: opacity .15s;
+        }
+        `
     }
 });
diff --git a/components/lib/scrolltop/scrolltop.d.ts b/components/lib/scrolltop/scrolltop.d.ts
index 6934f8dbcb..7c2a68d7ff 100644
--- a/components/lib/scrolltop/scrolltop.d.ts
+++ b/components/lib/scrolltop/scrolltop.d.ts
@@ -102,6 +102,11 @@ export interface ScrollTopProps {
      * @type {ScrollTopPassThroughOptions}
      */
     pt?: ScrollTopPassThroughOptions;
+    /**
+     * 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 f9cdabf456..6eded1eab9 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -66,7 +66,6 @@
 @import "../components/lib/knob/Knob.css";
 @import "../components/lib/splitter/Splitter.css";
 @import "../components/lib/confirmpopup/ConfirmPopup.css";
-@import "../components/lib/scrolltop/ScrollTop.css";
 @import "../components/lib/cascadeselect/CascadeSelect.css";
 @import "../components/lib/treeselect/TreeSelect.css";
 @import "../components/lib/virtualscroller/VirtualScroller.css";