Improve custom ScrollTop icon implementation Related - #4220

Improve custom ScrollTop icon implementation Related - #4226
primefaces · Apr 10, 2023 · 1d2abab · 1d2abab
1 parent bd482f0
commit 1d2abab
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
@@ -5,6 +5,7 @@ import { useEventListener, useMountEffect, useUnmountEffect } from '../hooks/Hoo
 import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, IconUtils, ZIndexUtils } from '../utils/Utils';
 import { ScrollTopBase } from './ScrollTopBase';
+import { ChevronUpIcon } from '../icon/chevronup';
 
 export const ScrollTop = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -81,11 +82,15 @@ export const ScrollTop = React.memo(
             props.className
         );
 
+        const iconClassName = 'p-scrolltop-icon';
+        const icon = props.icon || <ChevronUpIcon className={iconClassName} />;
+        const scrollIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+
         return (
             <>
                 <CSSTransition nodeRef={scrollElementRef} classNames="p-scrolltop" in={visibleState} timeout={{ enter: 150, exit: 150 }} options={props.transitionOptions} unmountOnExit onEnter={onEnter} onEntered={onEntered} onExited={onExited}>
                     <button ref={scrollElementRef} type="button" className={className} style={props.style} {...otherProps} onClick={onClick}>
-                        {IconUtils.getJSXIcon(props.icon, { className: 'p-scrolltop-icon' }, { props })}
+                        {scrollIcon}
                         <Ripple />
                     </button>
                 </CSSTransition>

diff --git a/components/lib/scrolltop/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js
@@ -5,7 +5,7 @@ export const ScrollTopBase = {
         __TYPE: 'ScrollTop',
         target: 'window',
         threshold: 400,
-        icon: 'pi pi-chevron-up',
+        icon: null,
         behavior: 'smooth',
         className: null,
         style: null,

diff --git a/components/lib/scrolltop/scrolltop.d.ts b/components/lib/scrolltop/scrolltop.d.ts
@@ -27,8 +27,7 @@ export interface ScrollTopProps {
      */
     threshold?: number;
     /**
-     * Icon to display.
-     * @defaultValue pi pi-chevron-up
+     * Name of the icon or JSX.Element for icon.
      */
     icon?: IconType<ScrollTopProps>;
     /**