@difizen/libro-common 0.3.4 → 1.0.0

package/es/react/resize/index.js

@@ -0,0 +1,640 @@
+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); }
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import classnames from 'classnames';
+import * as React from 'react';
+import { defaultPrefixCls } from "../constant";
+export var RESIZE_LOCK = 'resize-lock';
+import "./styles/index.less";
+
+/**
+ * 定义在flex模式下，setSize作用于哪一个元素
+ * prev表示前一个元素
+ * next表示后一个元素
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ResizeFlexMode = /*#__PURE__*/function (ResizeFlexMode) {
+  ResizeFlexMode["Prev"] = "prev";
+  ResizeFlexMode["Next"] = "next";
+  return ResizeFlexMode;
+}({});
+function preventWebviewCatchMouseEvents() {
+  var iframes = document.getElementsByTagName('iframe');
+  var webviews = document.getElementsByTagName('webview');
+  for (var _i = 0, _arr = webviews; _i < _arr.length; _i++) {
+    var webview = _arr[_i];
+    webview.classList.add('none-pointer-event');
+  }
+  for (var _i2 = 0, _arr2 = iframes; _i2 < _arr2.length; _i2++) {
+    var iframe = _arr2[_i2];
+    iframe.classList.add('none-pointer-event');
+  }
+  var shadowRootHost = document.getElementsByClassName('shadow-root-host');
+  for (var _i3 = 0, _arr3 = shadowRootHost; _i3 < _arr3.length; _i3++) {
+    var host = _arr3[_i3];
+    host === null || host === void 0 || host.classList.add('none-pointer-event');
+  }
+}
+function allowWebviewCatchMouseEvents() {
+  var iframes = document.getElementsByTagName('iframe');
+  var webviews = document.getElementsByTagName('webview');
+  var _iterator = _createForOfIteratorHelper(webviews),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var webview = _step.value;
+      webview.classList.remove('none-pointer-event');
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(iframes),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var iframe = _step2.value;
+      iframe.classList.remove('none-pointer-event');
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var shadowRootHost = document.getElementsByClassName('shadow-root-host');
+  for (var _i4 = 0, _arr4 = shadowRootHost; _i4 < _arr4.length; _i4++) {
+    var host = _arr4[_i4];
+    host === null || host === void 0 || host.classList.remove('none-pointer-event');
+  }
+}
+export var ResizeHandleHorizontal = function ResizeHandleHorizontal(props) {
+  var _props$prefixCls;
+  var prefixCls = (_props$prefixCls = props.prefixCls) !== null && _props$prefixCls !== void 0 ? _props$prefixCls : defaultPrefixCls;
+  var resizePrefix = "".concat(prefixCls, "-resize");
+  var _ref = React.useRef();
+  var resizing = React.useRef(false);
+  var startX = React.useRef(0);
+  var startPrevWidth = React.useRef(0);
+  var startNextWidth = React.useRef(0);
+  var prevElement = React.useRef();
+  var nextElement = React.useRef();
+  var requestFrame = React.useRef();
+  var setSize = function setSize(prev, next) {
+    var parentWidth = _ref.current.parentElement.offsetWidth;
+    var prevEle = props.findPrevElement ? props.findPrevElement() : prevElement.current;
+    var nextEle = props.findNextElement ? props.findNextElement() : nextElement.current;
+    if (prevEle && prevEle.classList.contains(RESIZE_LOCK) || nextEle && nextEle.classList.contains(RESIZE_LOCK)) {
+      return;
+    }
+    var prevMinResize = Number(prevEle.dataset['minResize'] || 0);
+    var nextMinResize = Number(nextEle.dataset['minResize'] || 0);
+    if (prevMinResize || nextMinResize) {
+      if (prev * parentWidth <= prevMinResize || next * parentWidth <= nextMinResize) {
+        return;
+      }
+    }
+    if (nextEle) {
+      nextEle.style.width = "".concat(next * 100, "%");
+    }
+    if (prevEle) {
+      prevEle.style.width = "".concat(prev * 100, "%");
+    }
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+  var flexModeSetSize = function flexModeSetSize(prevWidth, nextWidth, ignoreMin, direction) {
+    var prevEle = props.findPrevElement ? props.findPrevElement(direction) : prevElement.current;
+    var nextEle = props.findNextElement ? props.findNextElement(direction) : nextElement.current;
+    var fixedElement;
+    var flexElement;
+    var targetFixedWidth = 0;
+    var prevMinResize = parseInt(prevEle.dataset['minResize'] || '0', 10);
+    var nextMinResize = parseInt(nextEle.dataset['minResize'] || '0', 10);
+    if (props.flexMode === ResizeFlexMode.Prev) {
+      fixedElement = prevEle;
+      flexElement = nextEle;
+      targetFixedWidth = prevWidth;
+      if (!ignoreMin) {
+        if (prevMinResize > prevWidth) {
+          targetFixedWidth = prevMinResize;
+        } else if (nextMinResize > nextWidth) {
+          targetFixedWidth = prevWidth + nextWidth - nextMinResize;
+        }
+      }
+    } else {
+      fixedElement = nextEle;
+      flexElement = prevEle;
+      targetFixedWidth = nextWidth;
+      if (!ignoreMin) {
+        if (nextMinResize > nextWidth) {
+          targetFixedWidth = nextMinResize;
+        } else if (prevMinResize > prevWidth) {
+          targetFixedWidth = prevWidth + nextWidth - prevMinResize;
+        }
+      }
+    }
+    fixedElement.style.width = "".concat(targetFixedWidth, "px");
+    fixedElement.style.flexGrow = '0';
+    fixedElement.style.flexShrink = '1';
+    flexElement.style.width = '0';
+    flexElement.style.flexGrow = '1';
+    flexElement.style.flexShrink = '0';
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  /**
+   * 处理存在置0的情况
+   */
+  var handleZeroSize = function handleZeroSize(prev, next) {
+    // 对于设置为0的情况，一般认为是会需要完全隐藏对应元素，并且当前handle变为不可用
+    var prevEle = prevElement.current;
+    var nextEle = nextElement.current;
+    var hasZero = false;
+    if (prevEle) {
+      if (prev === 0) {
+        prevEle.classList.add('kt_display_none');
+        hasZero = true;
+      } else {
+        prevEle.classList.remove('kt_display_none');
+      }
+    }
+    if (nextEle) {
+      if (next === 0) {
+        nextEle.classList.add('kt_display_none');
+        hasZero = true;
+      } else {
+        nextEle.classList.remove('kt_display_none');
+      }
+    }
+    if (_ref.current) {
+      if (hasZero) {
+        _ref.current.classList.add('none-pointer-event');
+      } else {
+        _ref.current.classList.remove('none-pointer-event');
+      }
+    }
+  };
+  var setRelativeSize = function setRelativeSize(prev, next) {
+    var prevEle = prevElement.current;
+    var nextEle = nextElement.current;
+    var currentTotalWidth;
+    if (props.flexMode) {
+      currentTotalWidth = (prevEle.offsetWidth + nextEle.offsetWidth) / prevEle.parentElement.offsetWidth * 100;
+    } else {
+      currentTotalWidth = +nextElement.current.style.width.replace('%', '') + +prevElement.current.style.width.replace('%', '');
+    }
+    if (nextEle) {
+      nextEle.style.width = "".concat(next / (prev + next) * currentTotalWidth, "%");
+    }
+    if (prevEle) {
+      prevEle.style.width = "".concat(prev / (prev + next) * currentTotalWidth, "%");
+    }
+    handleZeroSize(prev, next);
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+  var getRelativeSize = function getRelativeSize() {
+    var currentPrev = prevElement.current.clientWidth;
+    var currentNext = nextElement.current.clientWidth;
+    var totalSize = currentPrev + currentNext;
+    var relativeSizes = [];
+    relativeSizes.push(currentPrev / totalSize);
+    relativeSizes.push(currentNext / totalSize);
+    return relativeSizes;
+  };
+  var setAbsoluteSize = function setAbsoluteSize(size, isLatter) {
+    var currentPrev = prevElement.current.clientWidth;
+    var currentNext = nextElement.current.clientWidth;
+    var totalSize = currentPrev + currentNext;
+    if (props.flexMode) {
+      var prevWidth = props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
+      var nextWidth = props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
+      flexModeSetSize(prevWidth, nextWidth, true);
+    } else {
+      var currentTotalWidth = +nextElement.current.style.width.replace('%', '') + +prevElement.current.style.width.replace('%', '');
+      if (isLatter) {
+        nextElement.current.style.width = "".concat(currentTotalWidth * (size / totalSize), "%");
+        prevElement.current.style.width = "".concat(currentTotalWidth * (1 - size / totalSize), "%");
+      } else {
+        prevElement.current.style.width = "".concat(currentTotalWidth * (size / totalSize), "%");
+        nextElement.current.style.width = "".concat(currentTotalWidth * (1 - size / totalSize), "%");
+      }
+    }
+    if (isLatter) {
+      handleZeroSize(totalSize - size, size);
+    } else {
+      handleZeroSize(size, totalSize - size);
+    }
+    if (props.onResize) {
+      props.onResize(prevElement.current, nextElement.current);
+    }
+  };
+  var getAbsoluteSize = function getAbsoluteSize(isLatter) {
+    if (isLatter) {
+      return nextElement.current.clientWidth;
+    }
+    return prevElement.current.clientWidth;
+  };
+  var hideScrollBar = function hideScrollBar(element) {
+    var elementClasses = element.classList;
+    var hiddenClass = "".concat(resizePrefix, "-overflow-hidden");
+    if (!(elementClasses !== null && elementClasses !== void 0 && elementClasses.contains(hiddenClass))) {
+      elementClasses.add(hiddenClass);
+    }
+  };
+  var restoreScrollBar = function restoreScrollBar(element) {
+    var elementClasses = element.classList;
+    var hiddenClass = "".concat(resizePrefix, "-overflow-hidden");
+    if (elementClasses !== null && elementClasses !== void 0 && elementClasses.contains(hiddenClass)) {
+      elementClasses.remove(hiddenClass);
+    }
+  };
+  var onMouseMove = function onMouseMove(e) {
+    e.preventDefault();
+    if (_ref.current && _ref.current.classList.contains('no-resize')) {
+      return;
+    }
+    var prevWidth;
+    var nextWidth;
+    var moveDistance = e.pageX - startX.current;
+    if (props.direction === 'right-to-left') {
+      // 反向时位置对调 prev在后 next在前
+      prevWidth = startPrevWidth.current - moveDistance;
+      nextWidth = startNextWidth.current + moveDistance;
+    } else {
+      prevWidth = startPrevWidth.current + moveDistance;
+      nextWidth = startNextWidth.current - moveDistance;
+    }
+    if (requestFrame.current) {
+      window.cancelAnimationFrame(requestFrame.current);
+    }
+    var parentWidth = _ref.current.parentElement.offsetWidth;
+    requestFrame.current = window.requestAnimationFrame(function () {
+      if (props.flexMode) {
+        flexModeSetSize(prevWidth, nextWidth);
+      } else {
+        setSize(prevWidth / parentWidth, nextWidth / parentWidth);
+      }
+    });
+  };
+  var onMouseUp = function onMouseUp() {
+    var _ref$current;
+    resizing.current = false;
+    (_ref$current = _ref.current) === null || _ref$current === void 0 || _ref$current.classList.remove("".concat(resizePrefix, "-active"));
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+    // 结束拖拽时恢复拖拽区域滚动条
+    restoreScrollBar(prevElement.current);
+    restoreScrollBar(nextElement.current);
+    if (props.onFinished) {
+      props.onFinished();
+    }
+    allowWebviewCatchMouseEvents();
+  };
+  var onMouseDown = function onMouseDown(e) {
+    var _ref$current2;
+    resizing.current = true;
+    (_ref$current2 = _ref.current) === null || _ref$current2 === void 0 || _ref$current2.classList.add("".concat(resizePrefix, "-active"));
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    startX.current = e.pageX;
+    startPrevWidth.current = prevElement.current.offsetWidth;
+    startNextWidth.current = nextElement.current.offsetWidth;
+    // 开始拖拽时隐藏拖拽区域滚动条
+    hideScrollBar(prevElement.current);
+    hideScrollBar(nextElement.current);
+    preventWebviewCatchMouseEvents();
+  };
+  React.useEffect(function () {
+    if (_ref.current) {
+      _ref.current.addEventListener('mousedown', onMouseDown);
+      prevElement.current = _ref.current.previousSibling;
+      nextElement.current = _ref.current.nextSibling;
+    }
+    return function () {
+      if (_ref.current) {
+        _ref.current.removeEventListener('mousedown', onMouseDown);
+        _ref.current.removeEventListener('mousemove', onMouseMove);
+        _ref.current.removeEventListener('mouseup', onMouseUp);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (props.delegate) {
+    props.delegate({
+      setSize: setSize,
+      setAbsoluteSize: setAbsoluteSize,
+      getAbsoluteSize: getAbsoluteSize,
+      setRelativeSize: setRelativeSize,
+      getRelativeSize: getRelativeSize
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: function ref(e) {
+      _ref.current = e;
+    },
+    className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(resizePrefix, "-handle-horizontal"), true), "".concat(resizePrefix, "-with-color"), !props.noColor), props.className || '', true))
+  });
+};
+export var ResizeHandleVertical = function ResizeHandleVertical(props) {
+  var _props$prefixCls2;
+  var prefixCls = (_props$prefixCls2 = props.prefixCls) !== null && _props$prefixCls2 !== void 0 ? _props$prefixCls2 : defaultPrefixCls;
+  var resizePrefix = "".concat(prefixCls, "-resize");
+  var _ref2 = React.useRef();
+  var resizing = React.useRef(false);
+  var startY = React.useRef(0);
+  // const startHeight = React.useRef<number>(0);
+  var startPrevHeight = React.useRef(0);
+  var startNextHeight = React.useRef(0);
+  var prevElement = React.useRef();
+  var nextElement = React.useRef();
+  var cachedPrevElement = React.useRef();
+  var cachedNextElement = React.useRef();
+  var requestFrame = React.useRef();
+  // direction: true为向下，false为向上
+  var setSize = function setSize(prev, next, direction) {
+    var prevEle = props.findPrevElement ? props.findPrevElement(direction) : prevElement.current;
+    var nextEle = props.findNextElement ? props.findNextElement(direction) : nextElement.current;
+    if (!nextEle || !prevEle) {
+      return;
+    }
+    if (prevEle.classList.contains(RESIZE_LOCK) || nextEle.classList.contains(RESIZE_LOCK)) {
+      return;
+    }
+    nextEle.style.height = "".concat(next * 100, "%");
+    prevEle.style.height = "".concat(prev * 100, "%");
+    if (props.onResize) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+  var flexModeSetSize = function flexModeSetSize(prevHeight, nextHeight, ignoreMin, direction) {
+    var prevEle = props.findPrevElement ? props.findPrevElement(direction) : prevElement.current;
+    var nextEle = props.findNextElement ? props.findNextElement(direction) : nextElement.current;
+    var fixedElement;
+    var flexElement;
+    var targetFixedHeight = 0;
+    var prevMinResize = parseFloat(prevEle.dataset['minResize'] || '0');
+    var nextMinResize = parseFloat(nextEle.dataset['minResize'] || '0');
+    if (props.flexMode === ResizeFlexMode.Prev) {
+      fixedElement = prevEle;
+      flexElement = nextEle;
+      targetFixedHeight = prevHeight;
+      if (!ignoreMin) {
+        if (prevMinResize > prevHeight) {
+          targetFixedHeight = prevMinResize;
+        } else if (nextMinResize > nextHeight) {
+          targetFixedHeight = prevHeight + nextHeight - nextMinResize;
+        }
+      }
+    } else {
+      fixedElement = nextEle;
+      flexElement = prevEle;
+      targetFixedHeight = nextHeight;
+      if (!ignoreMin) {
+        if (nextMinResize > nextHeight) {
+          targetFixedHeight = nextMinResize;
+        } else if (prevMinResize > prevHeight) {
+          targetFixedHeight = prevHeight + nextHeight - prevMinResize;
+        }
+      }
+    }
+    fixedElement.style.height = "".concat(targetFixedHeight, "px");
+    fixedElement.style.flexGrow = '0';
+    fixedElement.style.flexShrink = '1';
+    flexElement.style.height = '0';
+    flexElement.style.flexGrow = '1';
+    flexElement.style.flexShrink = '0';
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  /**
+   * 处理存在置0的情况
+   */
+  var handleZeroSize = function handleZeroSize(prev, next) {
+    // 对于设置为0的情况，一般认为是会需要完全隐藏对应元素，并且当前handle变为不可用
+    var prevEle = prevElement.current;
+    var nextEle = nextElement.current;
+    var hasZero = false;
+    if (prevEle) {
+      if (prev === 0) {
+        prevEle.classList.add('kt_display_none');
+        hasZero = true;
+      } else {
+        prevEle.classList.remove('kt_display_none');
+      }
+    }
+    if (nextEle) {
+      if (next === 0) {
+        nextEle.classList.add('kt_display_none');
+        hasZero = true;
+      } else {
+        nextEle.classList.remove('kt_display_none');
+      }
+    }
+    if (_ref2.current) {
+      if (hasZero) {
+        _ref2.current.classList.add('none-pointer-event');
+      } else {
+        _ref2.current.classList.remove('none-pointer-event');
+      }
+    }
+  };
+  var setRelativeSize = function setRelativeSize(prev, next) {
+    var prevEle = prevElement.current;
+    var nextEle = nextElement.current;
+    var currentTotalHeight;
+    if (props.flexMode) {
+      currentTotalHeight = (prevEle.offsetHeight + nextEle.offsetHeight) / prevEle.parentElement.offsetHeight * 100;
+      // flexModeSetSize(prev / (prev + next) * totalHeight, next / (prev + next) * totalHeight, true);
+    } else {
+      currentTotalHeight = +nextEle.style.height.replace('%', '') + +prevEle.style.height.replace('%', '');
+    }
+    if (nextEle) {
+      nextEle.style.height = "".concat(next / (prev + next) * currentTotalHeight, "%");
+    }
+    if (prevEle) {
+      prevEle.style.height = "".concat(prev / (prev + next) * currentTotalHeight, "%");
+    }
+    handleZeroSize(prev, next);
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+  var getRelativeSize = function getRelativeSize() {
+    var currentPrev = prevElement.current.clientHeight;
+    var currentNext = nextElement.current.clientHeight;
+    var totalSize = currentPrev + currentNext;
+    var relativeSizes = [];
+    relativeSizes.push(currentPrev / totalSize);
+    relativeSizes.push(currentNext / totalSize);
+    return relativeSizes;
+  };
+  var setDomSize = function setDomSize(prev, next, prevEle, nextEle) {
+    if (prevEle.classList.contains(RESIZE_LOCK) || nextEle.classList.contains(RESIZE_LOCK)) {
+      return;
+    }
+    // 有固定尺寸时删除flex属性
+    nextEle.style.height = "".concat(next, "px");
+    prevEle.style.height = "".concat(prev, "px");
+    nextEle.style.flex = 'unset';
+    prevEle.style.flex = 'unset';
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  // keep = true 左右侧面板使用，保证相邻节点的总宽度不变
+  var setAbsoluteSize = function setAbsoluteSize(size, isLatter, keep) {
+    var currentPrev = prevElement.current.clientHeight;
+    var currentNext = nextElement.current.clientHeight;
+    var totalSize = currentPrev + currentNext;
+    if (props.flexMode) {
+      var prevHeight = props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
+      var nextHeight = props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
+      flexModeSetSize(prevHeight, nextHeight, true);
+    } else {
+      // eslint-disable-next-line no-useless-escape
+      var nextH = +nextElement.current.style.height.replace(/\%|px/, '');
+      // eslint-disable-next-line no-useless-escape
+      var prevH = +prevElement.current.style.height.replace(/\%|px/, '');
+      var currentTotalHeight = nextH + prevH;
+      if (isLatter) {
+        if (keep) {
+          prevElement.current.style.height = "".concat(currentTotalHeight * (1 - size / totalSize), "%");
+        }
+        var targetSize = currentTotalHeight * (size / totalSize);
+        nextElement.current.style.height = targetSize === 0 ? "".concat(targetSize, "px") : "".concat(targetSize, "%");
+      } else {
+        prevElement.current.style.height = "".concat(currentTotalHeight * (size / totalSize), "%");
+        if (keep) {
+          nextElement.current.style.height = "".concat(currentTotalHeight * (1 - size / totalSize), "%");
+        }
+      }
+    }
+    if (isLatter) {
+      handleZeroSize(totalSize - size, size);
+    } else {
+      handleZeroSize(size, totalSize - size);
+    }
+    if (props.onResize) {
+      props.onResize(prevElement.current, nextElement.current);
+    }
+  };
+  var getAbsoluteSize = function getAbsoluteSize(isLatter) {
+    if (isLatter) {
+      return nextElement.current.clientHeight;
+    }
+    return prevElement.current.clientHeight;
+  };
+  var onMouseMove = function onMouseMove(e) {
+    e.preventDefault();
+    if (_ref2.current && _ref2.current.classList.contains('no-resize')) {
+      return;
+    }
+    var direction = e.pageY > startY.current;
+    // 若上层未传入findNextElement，dynamicNext为null，否则找不到符合要求的panel时返回undefined
+    var dynamicNext = props.findNextElement ? props.findNextElement(direction) : null;
+    var dynamicPrev = props.findPrevElement ? props.findPrevElement(direction) : null;
+    // 作用元素变化重新初始化当前位置，传入findNextElement时默认已传入findPrevElement
+    if (dynamicNext !== null && cachedNextElement.current !== dynamicNext || dynamicPrev !== null && cachedPrevElement.current !== dynamicPrev) {
+      if (!dynamicNext || !dynamicPrev) {
+        return;
+      }
+      cachedNextElement.current = dynamicNext;
+      cachedPrevElement.current = dynamicPrev;
+      startY.current = e.pageY;
+      startPrevHeight.current = cachedPrevElement.current.offsetHeight;
+      startNextHeight.current = cachedNextElement.current.offsetHeight;
+    }
+    var prevHeight;
+    var nextHeight;
+    var moveDistance = e.pageY - startY.current;
+    if (props.direction === 'bottom-to-top') {
+      // 反向时位置对调 prev在下 next在上
+      prevHeight = startPrevHeight.current - moveDistance;
+      nextHeight = startNextHeight.current + moveDistance;
+    } else {
+      prevHeight = startPrevHeight.current + moveDistance;
+      nextHeight = startNextHeight.current - moveDistance;
+    }
+    if (requestFrame.current) {
+      window.cancelAnimationFrame(requestFrame.current);
+    }
+    requestFrame.current = window.requestAnimationFrame(function () {
+      var prevMinResize = parseFloat(cachedPrevElement.current.dataset['minResize'] || '0');
+      var nextMinResize = parseFloat(cachedNextElement.current.dataset['minResize'] || '0');
+      if (prevMinResize || nextMinResize) {
+        if (prevHeight <= prevMinResize || nextHeight <= nextMinResize) {
+          return;
+        }
+      }
+      if (props.flexMode) {
+        flexModeSetSize(prevHeight, nextHeight);
+      } else {
+        setDomSize(prevHeight, nextHeight, cachedPrevElement.current, cachedNextElement.current);
+      }
+    });
+  };
+  var onMouseUp = function onMouseUp() {
+    var _ref$current3;
+    resizing.current = false;
+    (_ref$current3 = _ref2.current) === null || _ref$current3 === void 0 || _ref$current3.classList.remove("".concat(resizePrefix, "-active"));
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+    if (props.onFinished) {
+      props.onFinished();
+    }
+    allowWebviewCatchMouseEvents();
+  };
+  var onMouseDown = function onMouseDown(e) {
+    var _ref$current4;
+    resizing.current = true;
+    (_ref$current4 = _ref2.current) === null || _ref$current4 === void 0 || _ref$current4.classList.add("".concat(resizePrefix, "-active"));
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    startY.current = e.pageY;
+    cachedNextElement.current = nextElement.current;
+    cachedPrevElement.current = prevElement.current;
+    startPrevHeight.current = prevElement.current.offsetHeight;
+    startNextHeight.current = nextElement.current.offsetHeight;
+    preventWebviewCatchMouseEvents();
+  };
+  React.useEffect(function () {
+    _ref2.current.addEventListener('mousedown', onMouseDown);
+    prevElement.current = _ref2.current.previousSibling;
+    nextElement.current = _ref2.current.nextSibling;
+    return function () {
+      _ref2.current.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (props.delegate) {
+    props.delegate({
+      setSize: setSize,
+      setAbsoluteSize: setAbsoluteSize,
+      getAbsoluteSize: getAbsoluteSize,
+      setRelativeSize: setRelativeSize,
+      getRelativeSize: getRelativeSize
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: function ref(e) {
+      return e && (_ref2.current = e);
+    },
+    className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(resizePrefix, "-handle-vertical"), true), props.className || '', true), "".concat(resizePrefix, "-with-color"), !props.noColor))
+  });
+};