nice-ui
Version:
React design system, components, and utilities
67 lines (66 loc) • 2.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Scrollbox = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const wrapClass = (0, nano_theme_1.rule)({
pos: 'relative',
d: 'flex',
w: '100%',
h: '100%',
});
const blockClass = (0, nano_theme_1.rule)({
w: '100%',
ovy: 'auto',
});
const shadowTopClass = (0, nano_theme_1.rule)({
pointerEvents: 'none',
trs: 'opacity .3s',
pos: 'absolute',
top: 0,
left: 0,
right: 0,
h: '4px',
bg: 'linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.01) 100%)',
});
const shadowBottomClass = (0, nano_theme_1.rule)({
pointerEvents: 'none',
trs: 'opacity .3s',
pos: 'absolute',
bottom: 0,
left: 0,
right: 0,
h: '4px',
bg: 'linear-gradient(0deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.01) 100%)',
});
const Scrollbox = ({ children, ...rest }) => {
const theme = (0, nano_theme_1.useTheme)();
const [shadows, setShadows] = React.useState([false, false]);
const ref = React.useRef(null);
const checkShadows = React.useCallback(() => {
const div = ref.current;
if (!div)
return;
const showTopShadow = div.scrollTop > 4;
const showBottomShadow = div.scrollTop + div.clientHeight < div.scrollHeight - 4;
setShadows([showTopShadow, showBottomShadow]);
}, []);
// Check shadow state on every scroll.
React.useEffect(() => {
const div = ref.current;
if (!div)
return;
div.addEventListener('scroll', checkShadows);
return () => {
div.removeEventListener('scroll', checkShadows);
};
}, [ref.current]);
// Check shadow state on mount.
React.useEffect(checkShadows, []);
const background = theme.isLight ? undefined : 'rgba(255,255,255,.1)';
return (React.createElement("div", { className: wrapClass },
React.createElement("div", { ...rest, ref: ref, className: (rest.className || '') + blockClass }, children),
React.createElement("div", { className: shadowTopClass, style: { opacity: shadows[0] ? 1 : 0, background } }),
React.createElement("div", { className: shadowBottomClass, style: { opacity: shadows[1] ? 1 : 0, background } })));
};
exports.Scrollbox = Scrollbox;