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";