@wix/design-system
Version:
@wix/design-system
172 lines (171 loc) • 6.64 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _HorizontalScrollSt = require("./HorizontalScroll.st.css.js");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _IconButton2 = require("../IconButton/IconButton.constants");
var _HorizontalScroll = require("./HorizontalScroll.constants");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/HorizontalScroll/HorizontalScroll.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var DEFAULT_DEBOUNCE_TIMEOUT_MS = 20;
var DEFAULT_SCROLL_DISTANCE_PX = 150;
var HorizontalScroll = _ref => {
var {
children,
scrollDistance = DEFAULT_SCROLL_DISTANCE_PX,
scrollDebounce = DEFAULT_DEBOUNCE_TIMEOUT_MS,
scrollButtonSkin = _IconButton2.SKINS.standard,
scrollButtonSize = _IconButton2.SIZES.tiny,
gradientColor,
gradientWidth,
dataHook
} = _ref;
var scrollContainerRef = (0, _react.useRef)(null);
var [canScrollLeft, setCanScrollLeft] = (0, _react.useState)(false);
var [canScrollRight, setCanScrollRight] = (0, _react.useState)(false);
var handleScrollByStep = (0, _react.useCallback)(scrollValue => {
var container = scrollContainerRef.current;
if (!container) return;
container.scrollLeft += scrollValue;
}, []);
var checkOverflow = (0, _react.useCallback)(() => {
var container = scrollContainerRef.current;
if (!container) return;
var {
scrollLeft,
scrollWidth,
clientWidth
} = container;
setCanScrollLeft(scrollLeft > 0);
setCanScrollRight(Math.round(scrollLeft) < scrollWidth - clientWidth);
}, []);
var debouncedCheckOverflow = (0, _react.useMemo)(() => (0, _debounce.default)(checkOverflow, scrollDebounce), [checkOverflow, scrollDebounce]);
(0, _react.useEffect)(() => {
var container = scrollContainerRef.current;
if (!container) return;
var observer = new ResizeObserver(checkOverflow);
observer.observe(container);
return () => observer.disconnect();
}, [checkOverflow]);
(0, _react.useEffect)(() => {
checkOverflow();
return () => {
debouncedCheckOverflow.cancel();
};
}, [children, checkOverflow, debouncedCheckOverflow]);
return /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalScrollSt.classes.root,
"data-hook": dataHook,
style: {
[_HorizontalScrollSt.vars['wds-horizontal-scroll-gradient-color']]: gradientColor,
[_HorizontalScrollSt.vars['wds-horizontal-scroll-gradient-width']]: gradientWidth
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 5
}
}, canScrollLeft && /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalScrollSt.classes.startScroll,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalScrollSt.classes.startScrollButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
"aria-hidden": true,
size: scrollButtonSize,
priority: "secondary",
skin: scrollButtonSkin,
onClick: () => handleScrollByStep(-scrollDistance),
dataHook: _HorizontalScroll.dataHooks.leftButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 15
}
})))), /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalScrollSt.classes.scrollContainer,
ref: scrollContainerRef,
onScroll: debouncedCheckOverflow,
"data-hook": _HorizontalScroll.dataHooks.scrollContainer,
tabIndex: -1,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 7
}
}, children), canScrollRight && /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalScrollSt.classes.endScroll,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalScrollSt.classes.endScrollButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
"aria-hidden": true,
size: scrollButtonSize,
priority: "secondary",
skin: scrollButtonSkin,
onClick: () => handleScrollByStep(scrollDistance),
dataHook: _HorizontalScroll.dataHooks.rightButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 15
}
})))));
};
HorizontalScroll.displayName = 'HorizontalScroll';
HorizontalScroll.propTypes = {
children: _propTypes.default.any,
scrollDistance: _propTypes.default.any,
scrollDebounce: _propTypes.default.any,
gradientColor: _propTypes.default.any,
gradientWidth: _propTypes.default.any,
scrollButtonSkin: _propTypes.default.any,
dataHook: _propTypes.default.any
};
var _default = exports.default = HorizontalScroll;
//# sourceMappingURL=HorizontalScroll.js.map