@elastic/eui
Version:
Elastic UI Component Library
146 lines (142 loc) • 6.63 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EuiTableStickyScrollbar = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _services = require("../../../services");
var _sticky_scrollbar = require("./sticky_scrollbar.styles");
var _react2 = require("@emotion/react");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
var EuiTableStickyScrollbar = exports.EuiTableStickyScrollbar = function EuiTableStickyScrollbar(_ref) {
var tableWrapperRef = _ref.tableWrapperRef;
var styles = (0, _services.useEuiMemoizedStyles)(_sticky_scrollbar.euiTableStickyScrollbarStyles);
var trackElementRef = (0, _react.useRef)(null);
var dragStartRef = (0, _react.useRef)(null);
var requestAnimationFramePendingRef = (0, _react.useRef)(false);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isActive = _useState2[0],
setIsActive = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isHidden = _useState4[0],
setIsHidden = _useState4[1];
var updateTrack = (0, _react.useCallback)(function (element) {
var clientWidth = element.clientWidth,
scrollWidth = element.scrollWidth,
scrollLeft = element.scrollLeft;
if (!requestAnimationFramePendingRef.current) {
requestAnimationFramePendingRef.current = true;
requestAnimationFrame(function () {
var el = trackElementRef.current;
if (el) {
el.style.inlineSize = "".concat(clientWidth / scrollWidth * 100, "%");
el.style.marginInlineStart = "".concat(scrollLeft / scrollWidth * 100, "%");
}
requestAnimationFramePendingRef.current = false;
});
}
}, []);
var handleScroll = (0, _react.useCallback)(function (event) {
if (event.target) {
updateTrack(event.target);
}
}, [updateTrack]);
var handleResize = (0, _react.useCallback)(function (entries) {
var element = entries[0].target;
if (!element) {
return;
}
updateTrack(element);
setIsActive(element.clientWidth < element.scrollWidth);
}, [updateTrack]);
var handleBottomCornerIntersection = (0, _react.useCallback)(function (entries) {
var entry = entries[0];
var element = entry.target;
if (!element) {
return;
}
setIsHidden(!entry.isIntersecting);
}, []);
var handlePointerDown = (0, _react.useCallback)(function (event) {
var _el$scrollLeft;
var el = tableWrapperRef.current;
dragStartRef.current = {
x: event.clientX,
scrollLeft: (_el$scrollLeft = el === null || el === void 0 ? void 0 : el.scrollLeft) !== null && _el$scrollLeft !== void 0 ? _el$scrollLeft : 0
};
event.currentTarget.setPointerCapture(event.pointerId);
}, [tableWrapperRef]);
var handlePointerUp = (0, _react.useCallback)(function () {
dragStartRef.current = null;
}, [dragStartRef]);
var handlePointerMove = (0, _react.useCallback)(function (event) {
var el = tableWrapperRef.current;
if (!dragStartRef.current || !el) {
return;
}
var diff = event.clientX - dragStartRef.current.x;
var ratio = el.scrollWidth / el.clientWidth;
el.scrollLeft = dragStartRef.current.scrollLeft + diff * ratio;
}, [tableWrapperRef]);
(0, _react.useEffect)(function () {
var element = tableWrapperRef.current;
if (!element) {
return;
}
updateTrack(element);
element.addEventListener('scroll', handleScroll, {
passive: true
});
// ResizeObserver is available in all supported browsers,
// but jsdom and jest don't provide a polyfill for it.
var resizeObserver;
if (typeof window.ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver(handleResize);
resizeObserver.observe(element);
}
// IntersectionOserver is available in all supported browsers,
// but jsdom and jest don't provide a polyfill for it.
var intersectionObserver;
if (typeof window.IntersectionObserver !== 'undefined') {
intersectionObserver = new IntersectionObserver(handleBottomCornerIntersection, {
threshold: 0,
rootMargin: '-100% 0px 0px 0px'
});
intersectionObserver.observe(element);
}
return function () {
var _resizeObserver, _intersectionObserver;
element.removeEventListener('scroll', handleScroll);
(_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
(_intersectionObserver = intersectionObserver) === null || _intersectionObserver === void 0 || _intersectionObserver.disconnect();
};
}, [tableWrapperRef, updateTrack, handleResize, handleScroll, handleBottomCornerIntersection]);
if (!isActive) {
return null;
}
return (0, _react2.jsx)("div", {
css: [styles.wrapper, isHidden && styles.wrapperHidden, ";label:EuiTableStickyScrollbar;"],
"data-test-subj": "euiTableStickyScrollbar",
"aria-hidden": true
}, (0, _react2.jsx)("div", {
css: styles.track,
ref: trackElementRef,
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: handlePointerUp,
"data-test-subj": "euiTableStickyScrollbarTrack"
}));
};