Refactor #4602 - for ScrollTop

primefaces · Jul 6, 2023 · 92f60b8 · 92f60b8
1 parent 5f1f3ea
commit 92f60b8
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 55 deletions.
diff --git a/components/lib/scrolltop/ScrollTop.css b/components/lib/scrolltop/ScrollTop.css
diff --git 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
@@ -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
@@ -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
@@ -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";