tntd/lib/scroll-bar/ScrollBar.js

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

"use strict";

function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _Bar = _interopRequireDefault(require("./Bar"));
var _Context = _interopRequireDefault(require("./Context"));
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;
}
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : {
    "default": e
  };
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var _default = exports["default"] = (0, _react.forwardRef)(function (_a, ref) {
  var children = _a.children,
    _a$minSize = _a.minSize,
    minSize = _a$minSize === void 0 ? 20 : _a$minSize,
    props = __rest(_a, ["children", "minSize"]);
  var scrollbarElement = (0, _react.useRef)();
  var wrapElement = (0, _react.useRef)();
  wrapElement = ref || wrapElement;
  var resizeRef = (0, _react.useRef)();
  var barRef = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    var wrapDom = wrapElement.current;
    var resizeDom = resizeRef.current;
    // 监听容器尺寸变化，因为尺寸可以设置类似height:100vh之类样式，高度并不是固定的
    var observer = new ResizeObserver(function () {
      var _a;
      update();
      (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.handleScroll();
    });
    observer.observe(wrapDom);
    observer.observe(resizeDom);
    return function () {
      observer.unobserve(wrapDom);
      observer.unobserve(resizeDom);
    };
  }, []);
  (0, _react.useEffect)(function () {
    var _a;
    if (!props["native"]) {
      update();
      (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.handleScroll();
    }
  }, [props["native"]]);
  function update() {
    var _a;
    (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.update();
  }
  function handleScroll(e) {
    var _a, _b;
    (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.handleScroll();
    (_b = props.onScroll) === null || _b === void 0 ? void 0 : _b.call(props, e);
  }
  var wrapStyle = {
    height: props.height,
    maxHeight: props.maxHeight
  };
  var wrapClassName = (0, _classnames["default"])('tntd-scroll-bar-wrap', {
    'tntd-scroll-bar-wrap-hidden-default': !props["native"]
  });
  return _react["default"].createElement(_Context["default"].Provider, {
    value: {
      scrollbarElement: scrollbarElement,
      wrapElement: wrapElement
    }
  }, _react["default"].createElement("div", {
    style: props.style,
    className: (0, _classnames["default"])('tntd-scroll-bar', props.className),
    ref: scrollbarElement
  }, _react["default"].createElement("div", {
    style: wrapStyle,
    className: wrapClassName,
    ref: wrapElement,
    onScroll: handleScroll
  }, _react["default"].createElement("div", {
    className: "tntd-scroll-bar-view",
    ref: resizeRef
  }, children)), !props["native"] && _react["default"].createElement(_Bar["default"], {
    ref: barRef,
    always: props.always,
    minSize: minSize
  })));
});