@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
29 lines • 1.97 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef } from 'react';
import clsx from 'clsx';
import { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
import { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';
import { useStickyScrollbar } from './use-sticky-scrollbar';
import styles from './styles.css.js';
export default forwardRef(StickyScrollbar);
function StickyScrollbar({ wrapperRef, tableRef, onScroll, hasStickyColumns }, ref) {
const isVisualRefresh = useVisualRefresh();
const scrollbarRef = React.useRef(null);
const scrollbarContentRef = React.useRef(null);
const mergedRef = useMergeRefs(ref, scrollbarRef);
/**
* If the height of the scrollbar is 0, we're likely on a platform that uses
* overlay scrollbars (e.g. Mac).
*/
const offsetScrollbar = hasStickyColumns || browserScrollbarSize().height === 0;
useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, offsetScrollbar);
const { ref: stickyDetectionRef, isIntersecting: isStickyDetectionVisible } = useIntersectionObserver();
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: mergedRef, className: clsx(styles['sticky-scrollbar'], offsetScrollbar && styles['sticky-scrollbar-offset'], isVisualRefresh && styles['is-visual-refresh']), onScroll: onScroll, "data-stuck": !isStickyDetectionVisible },
React.createElement("div", { ref: scrollbarContentRef, className: styles['sticky-scrollbar-content'] })),
React.createElement("div", { ref: stickyDetectionRef, style: { position: 'absolute', right: 0, bottom: 0, left: 0, height: 1 } })));
}
//# sourceMappingURL=sticky-scrollbar.js.map