@prefect9/ui/components/Scroll/index.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function Scroll(_ref) {
  let {
    children,
    className
  } = _ref;
  const containerRef = (0, _react.useRef)(null);
  const contentRef = (0, _react.useRef)(null);
  const verticalBarRef = (0, _react.useRef)(null);
  const [verticalScroll, setVerticalScroll] = (0, _react.useState)({
    showed: false,
    barTop: 0,
    barHeight: 0
  });
  (0, _react.useEffect)(() => {
    if (!containerRef || !containerRef.current) return;
    if (!contentRef || !contentRef.current) return;
    if (!verticalBarRef || !verticalBarRef.current) return;
    let showed = false,
      containerHeight = 0,
      contentHeight = 0,
      verticalScrollBarHeight = 0,
      verticalBarHeight = 0,
      verticalBarTop = 0;
    const resize = () => {
      if (!containerRef.current) return;
      containerHeight = containerRef.current.getBoundingClientRect().height;
      contentHeight = contentRef.current.getBoundingClientRect().height;
      showed = contentHeight > containerHeight;
      verticalBarRef.current.style.display = 'block';
      const verticalScrollBarSize = verticalBarRef.current.getBoundingClientRect();
      verticalScrollBarHeight = verticalScrollBarSize.height;
      verticalBarRef.current.style.display = showed ? 'block' : 'none';
      if (containerHeight) verticalBarHeight = verticalScrollBarHeight * containerHeight / contentHeight;else verticalBarHeight = 0;
      if (verticalBarHeight < verticalScrollBarSize.width) verticalBarHeight = verticalScrollBarSize.width;
      setVerticalScroll(nowVerticalScroll => _objectSpread(_objectSpread({}, nowVerticalScroll), {}, {
        showed,
        barHeight: verticalBarHeight
      }));
      scroll();
    };
    const scroll = () => {
      const scrollTop = containerRef.current.scrollTop;
      if (contentHeight > 0) verticalBarTop = scrollTop * (verticalScrollBarHeight - verticalBarHeight) / (contentHeight - containerHeight);else verticalBarTop = 0;
      setVerticalScroll(nowVerticalScroll => _objectSpread(_objectSpread({}, nowVerticalScroll), {}, {
        barTop: verticalBarTop
      }));
    };
    const contentElement = contentRef.current;
    const observer = new ResizeObserver(entries => {
      resize();
    });
    observer.observe(contentElement);
    resize();
    window.addEventListener('resize', resize, {
      passive: true
    });
    containerRef.current.addEventListener('scroll', scroll, {
      passive: true
    });
    return () => {
      observer.disconnect();
      window.removeEventListener('resize', resize, {
        passive: true
      });
    };
  }, [containerRef, contentRef, verticalBarRef]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "prefect9-scroll ".concat(verticalScroll.showed ? 'prefect9-scroll__show-vertical' : ''),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      ref: containerRef,
      className: "prefect9-scroll__container ".concat(className),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: contentRef,
        className: "prefect9-scroll__content",
        children: children
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: verticalBarRef,
        className: "prefect9-scroll__vertical-bar",
        style: {
          display: verticalScroll.showed ? 'block' : 'none'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          style: {
            height: "".concat(verticalScroll.barHeight, "px"),
            top: "".concat(verticalScroll.barTop, "px")
          }
        })
      })]
    })
  });
}
var _default = exports.default = Scroll;