@qsxy/element-plus-react 1.0.0-next.7 → 1.0.1

package/dist/Scrollbar/Scrollbar.js

@@ -1,166 +1,205 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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); }
+var _templateObject, _templateObject2;
+var _excluded = ["tag", "className", "style", "wrapClass", "wrapStyle", "viewClass", "viewStyle", "native", "height", "maxHeight", "minSize", "always", "onScroll", "showHorizontal", "showVertical"];
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 : String(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from 'classnames';
+import isNumber from 'lodash/isNumber';
+import isObject from 'lodash/isObject';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { mergeDefaultProps } from "../Util";
+import { addResizeListener, removeResizeListener } from "../Util/resize-event";
+import { partitionHTMLProps, useClassNames } from "../hooks";
+import Thumb from "./Thumb";
+var Scrollbar = /*#__PURE__*/forwardRef(function (props, ref) {
+  props = mergeDefaultProps({
+    native: false,
+    tag: 'div',
+    always: false,
+    minSize: 20,
+    height: '100%',
+    showHorizontal: true,
+    showVertical: true
+  }, props);
+  var _props = props,
+    tag = _props.tag,
+    className = _props.className,
+    style = _props.style,
+    wrapClass = _props.wrapClass,
+    wrapStyle = _props.wrapStyle,
+    viewClass = _props.viewClass,
+    viewStyle = _props.viewStyle,
+    native = _props.native,
+    height = _props.height,
+    maxHeight = _props.maxHeight,
+    minSize = _props.minSize,
+    always = _props.always,
+    onScroll = _props.onScroll,
+    showHorizontal = _props.showHorizontal,
+    showVertical = _props.showVertical,
+    rest = _objectWithoutProperties(_props, _excluded);
+  var _useClassNames = useClassNames('scrollbar'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    em = _useClassNames.em;
+  var _partitionHTMLProps = partitionHTMLProps(rest),
+    _partitionHTMLProps2 = _slicedToArray(_partitionHTMLProps, 1),
+    htmlInputProps = _partitionHTMLProps2[0];
+  var containerRef = useRef(null);
+  var wrapRef = useRef(null);
+  var resizeRef = useRef(null);
+  var _useState = useState('0'),
+    _useState2 = _slicedToArray(_useState, 2),
+    sizeWidth = _useState2[0],
+    setSizeWidth = _useState2[1];
+  var _useState3 = useState('0'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sizeHeight = _useState4[0],
+    setSizeHeight = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    moveX = _useState6[0],
+    setMoveX = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    moveY = _useState8[0],
+    setMoveY = _useState8[1];
+  var _useState9 = useState(1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    ratioX = _useState10[0],
+    setRatioX = _useState10[1];
+  var _useState11 = useState(1),
+    _useState12 = _slicedToArray(_useState11, 2),
+    ratioY = _useState12[0],
+    setRatioY = _useState12[1];
+  var GAP = 4; // top 2 + bottom 2 of bar instance
 
-// src/Scrollbar/Scrollbar.tsx
-var Scrollbar_exports = {};
-__export(Scrollbar_exports, {
-  default: () => Scrollbar_default
-});
-module.exports = __toCommonJS(Scrollbar_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_isNumber = __toESM(require("lodash/isNumber"));
-var import_isObject = __toESM(require("lodash/isObject"));
-var import_react = __toESM(require("react"));
-var import_Util = require("../Util");
-var import_resize_event = require("../Util/resize-event");
-var import_hooks = require("../hooks");
-var import_Thumb = __toESM(require("./Thumb"));
-var Scrollbar = (0, import_react.forwardRef)((props, ref) => {
-  props = (0, import_Util.mergeDefaultProps)(
-    {
-      native: false,
-      tag: "div",
-      always: false,
-      minSize: 20,
-      height: "100%",
-      showHorizontal: true,
-      showVertical: true
-    },
-    props
-  );
-  const { tag, className, style, wrapClass, wrapStyle, viewClass, viewStyle, native, height, maxHeight, minSize, always, onScroll, showHorizontal, showVertical, ...rest } = props;
-  const { b, e, em } = (0, import_hooks.useClassNames)("scrollbar");
-  const [htmlInputProps] = (0, import_hooks.partitionHTMLProps)(rest);
-  const containerRef = (0, import_react.useRef)();
-  const wrapRef = (0, import_react.useRef)();
-  const resizeRef = (0, import_react.useRef)();
-  const [sizeWidth, setSizeWidth] = (0, import_react.useState)("0");
-  const [sizeHeight, setSizeHeight] = (0, import_react.useState)("0");
-  const [moveX, setMoveX] = (0, import_react.useState)(0);
-  const [moveY, setMoveY] = (0, import_react.useState)(0);
-  const [ratioX, setRatioX] = (0, import_react.useState)(1);
-  const [ratioY, setRatioY] = (0, import_react.useState)(1);
-  const GAP = 4;
-  const handleScroll = (0, import_react.useCallback)(
-    (event) => {
-      if (wrapRef.current) {
-        const offsetHeight = wrapRef.current.offsetHeight - GAP;
-        const offsetWidth = wrapRef.current.offsetWidth - GAP;
-        setMoveX(wrapRef.current.scrollLeft * 100 / offsetWidth * ratioX);
-        setMoveY(wrapRef.current.scrollTop * 100 / offsetHeight * ratioY);
-        onScroll == null ? void 0 : onScroll({
-          e: event,
-          scrollTop: wrapRef.current.scrollTop,
-          scrollLeft: wrapRef.current.scrollLeft
-        });
-      }
-    },
-    [ratioX, ratioY, onScroll]
-  );
-  const scrollTo = (0, import_react.useCallback)((options, yCoord) => {
+  var handleScroll = useCallback(function (event) {
+    if (wrapRef.current) {
+      var offsetHeight = wrapRef.current.offsetHeight - GAP;
+      var offsetWidth = wrapRef.current.offsetWidth - GAP;
+      setMoveX(wrapRef.current.scrollLeft * 100 / offsetWidth * ratioX);
+      setMoveY(wrapRef.current.scrollTop * 100 / offsetHeight * ratioY);
+      onScroll === null || onScroll === void 0 || onScroll({
+        e: event,
+        scrollTop: wrapRef.current.scrollTop,
+        scrollLeft: wrapRef.current.scrollLeft
+      });
+    }
+  }, [ratioX, ratioY, onScroll]);
+
+  /** 滚动到一组特定坐标 */
+  var scrollTo = useCallback(function (options, yCoord) {
     if (wrapRef.current) {
-      if ((0, import_isObject.default)(options)) {
+      if (isObject(options)) {
         wrapRef.current.scrollTo(options);
-      } else if ((0, import_isNumber.default)(options) && (0, import_isNumber.default)(yCoord)) {
+      } else if (isNumber(options) && isNumber(yCoord)) {
         wrapRef.current.scrollTo(options, yCoord);
       }
     }
   }, []);
-  const setScrollTop = (0, import_react.useCallback)((value) => {
+  var setScrollTop = useCallback(function (value) {
     if (!value) {
       return;
     }
     wrapRef.current.scrollTop = value;
   }, []);
-  const setScrollLeft = (0, import_react.useCallback)((value) => {
+  var setScrollLeft = useCallback(function (value) {
     if (!value) {
       return;
     }
     wrapRef.current.scrollLeft = value;
   }, []);
-  const update = (0, import_react.useCallback)(() => {
+  var update = useCallback(function () {
     if (!wrapRef.current) {
       return;
     }
-    const offsetHeight = wrapRef.current.offsetHeight - GAP;
-    const offsetWidth = wrapRef.current.offsetWidth - GAP;
-    const originalHeight = offsetHeight ** 2 / wrapRef.current.scrollHeight;
-    const originalWidth = offsetWidth ** 2 / wrapRef.current.scrollWidth;
-    const _height = Math.max(originalHeight, minSize);
-    const width = Math.max(originalWidth, minSize);
+    var offsetHeight = wrapRef.current.offsetHeight - GAP;
+    var offsetWidth = wrapRef.current.offsetWidth - GAP;
+    var originalHeight = Math.pow(offsetHeight, 2) / wrapRef.current.scrollHeight;
+    var originalWidth = Math.pow(offsetWidth, 2) / wrapRef.current.scrollWidth;
+    var _height = Math.max(originalHeight, minSize);
+    var width = Math.max(originalWidth, minSize);
     setRatioY(originalHeight / (offsetHeight - originalHeight) / (_height / (offsetHeight - _height)));
     setRatioX(originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width)));
-    setSizeHeight(_height + GAP < offsetHeight ? _height + "px" : "");
-    setSizeWidth(width + GAP < offsetWidth ? width + "px" : "");
+    setSizeHeight(_height + GAP < offsetHeight ? _height + 'px' : '');
+    setSizeWidth(width + GAP < offsetWidth ? width + 'px' : '');
   }, [minSize]);
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    ref: containerRef,
-    scrollTo,
-    setScrollLeft,
-    setScrollTop,
-    update,
-    wrapRef,
-    resizeRef
-  }));
-  (0, import_react.useEffect)(() => {
+  useImperativeHandle(ref, function () {
+    return {
+      ref: containerRef,
+      scrollTo: scrollTo,
+      setScrollLeft: setScrollLeft,
+      setScrollTop: setScrollTop,
+      update: update,
+      wrapRef: wrapRef,
+      resizeRef: resizeRef
+    };
+  });
+  useEffect(function () {
     if (!props.native) {
       update();
     }
     if (!props.noresize) {
-      (0, import_resize_event.addResizeListener)(resizeRef.current, update);
-      addEventListener("resize", update);
+      addResizeListener(resizeRef.current, update);
+      addEventListener('resize', update);
     }
-    return () => {
+    return function () {
       if (!props.noresize) {
-        (0, import_resize_event.removeResizeListener)(resizeRef.current, update);
-        removeEventListener("resize", update);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        removeResizeListener(resizeRef.current, update);
+        removeEventListener('resize', update);
       }
     };
   }, [props.native, props.noresize, update]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: (0, import_classnames.default)(b(), className), style: { ...style, height } }, /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ref: wrapRef,
-      className: (0, import_classnames.default)(wrapClass, e`wrap`, { [em("wrap", "hidden-default")]: !native }),
-      style: { ...wrapStyle, maxHeight },
-      onScroll: (event) => handleScroll(event)
-    },
-    import_react.default.createElement(
-      tag,
-      {
-        ref: resizeRef,
-        className: (0, import_classnames.default)(viewClass, e`view`),
-        style: viewStyle,
-        ...htmlInputProps
-      },
-      props.children
-    )
-  ), !native ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showHorizontal && /* @__PURE__ */ import_react.default.createElement(import_Thumb.default, { move: moveX, ratio: ratioX, size: sizeWidth, vertical: false, always, scrollbar: containerRef, wrapRef }), showVertical && /* @__PURE__ */ import_react.default.createElement(import_Thumb.default, { move: moveY, ratio: ratioY, size: sizeHeight, vertical: true, always, scrollbar: containerRef, wrapRef })) : null);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(b(), className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      height: height
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapRef,
+    className: classNames(wrapClass, e(_templateObject || (_templateObject = _taggedTemplateLiteral(["wrap"]))), _defineProperty({}, em('wrap', 'hidden-default'), !native)),
+    style: _objectSpread(_objectSpread({}, wrapStyle), {}, {
+      maxHeight: maxHeight
+    }),
+    onScroll: function onScroll(event) {
+      return handleScroll(event);
+    }
+  }, /*#__PURE__*/React.createElement(tag, _objectSpread({
+    ref: resizeRef,
+    className: classNames(viewClass, e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["view"])))),
+    style: viewStyle
+  }, htmlInputProps), props.children)), !native ? /*#__PURE__*/React.createElement(React.Fragment, null, showHorizontal && /*#__PURE__*/React.createElement(Thumb, {
+    move: moveX,
+    ratio: ratioX,
+    size: sizeWidth,
+    vertical: false,
+    always: always,
+    scrollbar: containerRef,
+    wrapRef: wrapRef
+  }), showVertical && /*#__PURE__*/React.createElement(Thumb, {
+    move: moveY,
+    ratio: ratioY,
+    size: sizeHeight,
+    vertical: true,
+    always: always,
+    scrollbar: containerRef,
+    wrapRef: wrapRef
+  })) : null);
 });
-Scrollbar.displayName = "Scrollbar";
-var Scrollbar_default = Scrollbar;
+Scrollbar.displayName = 'ElScrollbar';
+export default Scrollbar;

package/dist/Scrollbar/Thumb.js

@@ -1,155 +1,167 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Scrollbar/Thumb.tsx
-var Thumb_exports = {};
-__export(Thumb_exports, {
-  default: () => Thumb_default
-});
-module.exports = __toCommonJS(Thumb_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_dom_lib = require("dom-lib");
-var import_react = __toESM(require("react"));
-var import_Transition = require("../Transition");
-var import_hooks = require("../hooks");
-var import_util = require("./util");
-var Thumb = (props) => {
-  const { always, vertical, scrollbar, wrapRef, size, move } = props;
-  const { b, e, is } = (0, import_hooks.useClassNames)("scrollbar");
-  const instanceRef = (0, import_react.useRef)();
-  const thumbRef = (0, import_react.useRef)();
-  const bar = (0, import_react.useMemo)(() => import_util.BAR_MAP[vertical ? "vertical" : "horizontal"], [vertical]);
-  const barStore = (0, import_react.useRef)({});
-  const cursorDown = (0, import_react.useRef)(null);
-  const cursorLeave = (0, import_react.useRef)(null);
-  const [visible, setVisible] = (0, import_react.useState)(false);
-  let onselectstartStore = null;
-  const offsetRatio = (0, import_react.useRef)(0);
-  const getOffsetRatio = () => {
-    offsetRatio.current = instanceRef.current[bar.offset] ** 2 / wrapRef.current[bar.scrollSize] / props.ratio / thumbRef.current[bar.offset];
+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); }
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 : String(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import { addClass, off, on, removeClass } from 'dom-lib';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import Transition from "../Transition/Transition";
+import { useClassNames } from "../hooks";
+import { BAR_MAP, renderThumbStyle } from "./util";
+var Thumb = function Thumb(props) {
+  var always = props.always,
+    vertical = props.vertical,
+    scrollbar = props.scrollbar,
+    wrapRef = props.wrapRef,
+    size = props.size,
+    move = props.move;
+  var _useClassNames = useClassNames('scrollbar'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    is = _useClassNames.is;
+  var instanceRef = useRef(null);
+  var thumbRef = useRef(null);
+  var bar = useMemo(function () {
+    return BAR_MAP[vertical ? 'vertical' : 'horizontal'];
+  }, [vertical]);
+  var barStore = useRef({});
+  var cursorDown = useRef(null);
+  var cursorLeave = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var onselectstartStore = null;
+  var offsetRatio = useRef(0);
+  var getOffsetRatio = function getOffsetRatio() {
+    offsetRatio.current = Math.pow(instanceRef.current[bar.offset], 2) / wrapRef.current[bar.scrollSize] / props.ratio / thumbRef.current[bar.offset];
   };
-  const onEnter = () => {
+  var onEnter = function onEnter() {
+    // offsetRatioX = original width of thumb / current width of thumb / ratioX
+    // offsetRatioY = original height of thumb / current height of thumb / ratioY
+    // instance height = wrap height - GAP
     if (visible) {
       getOffsetRatio();
     }
   };
-  const clickThumbHandler = (event) => {
+  var clickThumbHandler = function clickThumbHandler(event) {
+    // prevent click event of middle and right button
     event.stopPropagation();
     if (event.ctrlKey || [1, 2].includes(event.button)) {
       return;
     }
     window.getSelection().removeAllRanges();
     startDrag(event);
-    Object.assign(barStore.current, {
-      [bar.axis]: event.currentTarget[bar.offset] - (event[bar.client] - event.currentTarget.getBoundingClientRect()[bar.direction])
-    });
+    Object.assign(barStore.current, _defineProperty({}, bar.axis, event.currentTarget[bar.offset] - (event[bar.client] - event.currentTarget.getBoundingClientRect()[bar.direction])));
   };
-  const clickTrackHandler = (event) => {
-    const offset = Math.abs(event.target.getBoundingClientRect()[bar.direction] - event[bar.client]);
-    const thumbHalf = thumbRef.current[bar.offset] / 2;
+  var clickTrackHandler = function clickTrackHandler(event) {
+    var offset = Math.abs(event.target.getBoundingClientRect()[bar.direction] - event[bar.client]);
+    var thumbHalf = thumbRef.current[bar.offset] / 2;
     if (always) {
       getOffsetRatio();
     }
-    const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.current / instanceRef.current[bar.offset];
+    var thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.current / instanceRef.current[bar.offset];
     wrapRef.current[bar.scroll] = thumbPositionPercentage * wrapRef.current[bar.scrollSize] / 100;
   };
-  const startDrag = (event) => {
+  var startDrag = function startDrag(event) {
     event.stopPropagation();
     cursorDown.current = true;
-    (0, import_dom_lib.addClass)(thumbRef.current, is("hover"));
-    (0, import_dom_lib.on)(document, "mousemove", mouseMoveDocumentHandler);
-    (0, import_dom_lib.on)(document, "mouseup", mouseUpDocumentHandler);
+    addClass(thumbRef.current, is('hover'));
+    on(document, 'mousemove', mouseMoveDocumentHandler);
+    on(document, 'mouseup', mouseUpDocumentHandler);
     onselectstartStore = document.onselectstart;
-    document.onselectstart = () => false;
+    document.onselectstart = function () {
+      return false;
+    };
   };
-  const mouseMoveDocumentHandler = (event) => {
+  var mouseMoveDocumentHandler = function mouseMoveDocumentHandler(event) {
     if (cursorDown.current === false) {
       return;
     }
-    const prevPage = barStore.current[bar.axis];
+    var prevPage = barStore.current[bar.axis];
     if (!prevPage) {
       return;
     }
     if (instanceRef.current && thumbRef.current && wrapRef.current) {
-      const offset = instanceRef.current ? (instanceRef.current.getBoundingClientRect()[bar.direction] - event[bar.client]) * -1 : 0;
-      const thumbClickPosition = thumbRef.current[bar.offset] - prevPage;
+      var offset = instanceRef.current ? (instanceRef.current.getBoundingClientRect()[bar.direction] - event[bar.client]) * -1 : 0;
+      var thumbClickPosition = thumbRef.current[bar.offset] - prevPage;
       if (always) {
         getOffsetRatio();
       }
-      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.current / instanceRef.current[bar.offset];
+      var thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.current / instanceRef.current[bar.offset];
       wrapRef.current[bar.scroll] = thumbPositionPercentage * wrapRef.current[bar.scrollSize] / 100;
     }
   };
-  const mouseUpDocumentHandler = () => {
+  var mouseUpDocumentHandler = function mouseUpDocumentHandler() {
     cursorDown.current = false;
-    (0, import_dom_lib.removeClass)(thumbRef.current, is("hover"));
-    Object.assign(barStore.current, {
-      [bar.axis]: 0
-    });
-    (0, import_dom_lib.off)(document, "mousemove", mouseMoveDocumentHandler);
-    (0, import_dom_lib.off)(document, "mouseup", mouseUpDocumentHandler);
+    removeClass(thumbRef.current, is('hover'));
+    Object.assign(barStore.current, _defineProperty({}, bar.axis, 0));
+    off(document, 'mousemove', mouseMoveDocumentHandler);
+    off(document, 'mouseup', mouseUpDocumentHandler);
     document.onselectstart = onselectstartStore;
     if (cursorLeave.current) {
       setVisible(false);
     }
   };
-  const thumbStyle = (0, import_react.useMemo)(() => {
-    return (0, import_util.renderThumbStyle)({
-      size,
-      move,
-      bar
+  var thumbStyle = useMemo(function () {
+    return renderThumbStyle({
+      size: size,
+      move: move,
+      bar: bar
     });
   }, [size, move, bar]);
-  const mouseMoveScrollbarHandler = () => {
+  var mouseMoveScrollbarHandler = function mouseMoveScrollbarHandler() {
     if (!always) {
       cursorLeave.current = false;
       setVisible(!!props.size);
     }
   };
-  const mouseLeaveScrollbarHandler = () => {
+  var mouseLeaveScrollbarHandler = function mouseLeaveScrollbarHandler() {
     if (!always) {
       cursorLeave.current = true;
       setVisible(cursorDown.current);
     }
   };
-  (0, import_react.useEffect)(() => {
+  useEffect(function () {
     if (scrollbar.current) {
-      (0, import_dom_lib.on)(scrollbar.current, "mousemove", mouseMoveScrollbarHandler);
-      (0, import_dom_lib.on)(scrollbar.current, "mouseleave", mouseLeaveScrollbarHandler);
+      on(scrollbar.current, 'mousemove', mouseMoveScrollbarHandler);
+      on(scrollbar.current, 'mouseleave', mouseLeaveScrollbarHandler);
     }
-    return () => {
-      (0, import_dom_lib.off)(document, "mouseup", mouseUpDocumentHandler);
+    return function () {
+      off(document, 'mouseup', mouseUpDocumentHandler);
       if (scrollbar.current) {
-        (0, import_dom_lib.off)(scrollbar.current, "mousemove", mouseMoveScrollbarHandler);
-        (0, import_dom_lib.off)(scrollbar.current, "mouseleave", mouseLeaveScrollbarHandler);
+        off(scrollbar.current, 'mousemove', mouseMoveScrollbarHandler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        off(scrollbar.current, 'mouseleave', mouseLeaveScrollbarHandler);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: instanceRef, name: b`fade`, visible: always || visible, transitionAppear: true, afterEnter: onEnter }, /* @__PURE__ */ import_react.default.createElement("div", { ref: instanceRef, className: (0, import_classnames.default)(e`bar`, is(bar.key, { always })), onMouseDown: clickTrackHandler }, /* @__PURE__ */ import_react.default.createElement("div", { ref: thumbRef, className: (0, import_classnames.default)(e`thumb`), style: thumbStyle, onMouseDown: clickThumbHandler })));
+  return /*#__PURE__*/React.createElement(Transition, {
+    nodeRef: instanceRef,
+    name: b(_templateObject || (_templateObject = _taggedTemplateLiteral(["fade"]))),
+    visible: always || visible,
+    transitionAppear: true,
+    afterEnter: onEnter
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: instanceRef,
+    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bar"]))), is(bar.key, {
+      always: always
+    })),
+    onMouseDown: clickTrackHandler
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: thumbRef,
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["thumb"])))),
+    style: thumbStyle,
+    onMouseDown: clickThumbHandler
+  })));
 };
-var Thumb_default = (0, import_react.memo)(Thumb);
+export default /*#__PURE__*/memo(Thumb);