@activecollab/components
Version:
ActiveCollab Components
103 lines • 4.24 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
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 = _ref.children,
className = _ref.className,
_ref$disableVertical = _ref.disableVertical,
disableVertical = _ref$disableVertical === void 0 ? false : _ref$disableVertical,
_ref$disableHorizonta = _ref.disableHorizontal,
disableHorizontal = _ref$disableHorizonta === void 0 ? false : _ref$disableHorizonta,
_ref$invertHorizontal = _ref.invertHorizontal,
invertHorizontal = _ref$invertHorizontal === void 0 ? false : _ref$invertHorizontal,
_ref$invertVertical = _ref.invertVertical,
invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
innerColor = _ref.innerColor,
outerColor = _ref.outerColor,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const _useState = useState({
top: 0,
right: 0,
bottom: 0,
left: 0
}),
opacity = _useState[0],
setOpacity = _useState[1];
const handleScroll = useCallback(event => {
const _ref2 = event.target,
scrollHeight = _ref2.scrollHeight,
clientHeight = _ref2.clientHeight,
scrollWidth = _ref2.scrollWidth,
clientWidth = _ref2.clientWidth;
let _ref3 = event.target,
scrollTop = _ref3.scrollTop,
scrollLeft = _ref3.scrollLeft;
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