@activecollab/components
Version:
ActiveCollab Components
99 lines • 3.28 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useState, useCallback } from "react";
import classnames from "classnames";
import { StyledScrollShadow, StyledScrollShadowBottom, StyledScrollShadowLeft, StyledScrollShadowRight, StyledScrollShadowTop } from "./Styles";
export const ScrollShadow = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
children,
className,
disableVertical = false,
disableHorizontal = false,
invertHorizontal = false,
invertVertical = false,
innerColor,
outerColor,
...rest
} = _ref;
const [opacity, setOpacity] = useState({
top: 0,
right: 0,
bottom: 0,
left: 0
});
const handleScroll = useCallback(event => {
const {
scrollHeight,
clientHeight,
scrollWidth,
clientWidth
} = event.target;
let {
scrollTop,
scrollLeft
} = event.target;
if (scrollLeft < 0) {
scrollLeft *= -1;
}
if (scrollTop < 0) {
scrollTop *= -1;
}
setOpacity(prevState => {
const top = 1 / 20 * Math.min(scrollTop, 20);
const bottomScrollTop = scrollHeight - clientHeight;
const bottom = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
const left = 1 / 20 * Math.min(scrollLeft, 20);
const offset = scrollWidth - clientWidth;
const right = 1 / 20 * (offset - Math.max(scrollLeft, offset - 20));
const newState = {
top: 0,
bottom: 0,
left: 0,
right: 0
};
if (!disableVertical) {
newState.top = invertVertical ? bottom : top;
newState.bottom = invertVertical ? top : bottom;
}
if (!disableHorizontal) {
newState.left = invertHorizontal ? right : left;
newState.right = invertHorizontal ? left : right;
}
if (newState.top !== prevState.top || newState.bottom !== prevState.bottom || newState.left !== prevState.left || newState.right !== prevState.right) {
return newState;
}
return prevState;
});
}, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
return /*#__PURE__*/React.createElement(StyledScrollShadow, _extends({}, rest, {
ref: ref,
className: classnames("c-scroll-shadow", className)
}), children({
onScroll: handleScroll
}), !disableVertical ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollShadowTop, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.top
}
}), /*#__PURE__*/React.createElement(StyledScrollShadowBottom, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.bottom
}
})) : null, !disableHorizontal ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollShadowLeft, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.left
}
}), /*#__PURE__*/React.createElement(StyledScrollShadowRight, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.right
}
})) : null);
});
ScrollShadow.displayName = "ScrollShadow";
//# sourceMappingURL=ScrollShadow.js.map