@difizen/mana-react/lib/resize/index.js

"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.ResizeHandleVertical = exports.ResizeHandleHorizontal = exports.ResizeFlexMode = exports.RESIZE_LOCK = void 0;
var _classnames3 = _interopRequireDefault(require("classnames"));
var React = _interopRequireWildcard(require("react"));
var _constant = require("../constant");
require("./styles/index.less");
var _jsxRuntime = require("react/jsx-runtime");
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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 */
var RESIZE_LOCK = exports.RESIZE_LOCK = 'resize-lock';

/**
 * 定义在flex模式下，setSize作用于哪一个元素
 * prev表示前一个元素
 * next表示后一个元素
 */
var ResizeFlexMode = exports.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');
  }
}
var ResizeHandleHorizontal = exports.ResizeHandleHorizontal = function ResizeHandleHorizontal(props) {
  var _props$prefixCls;
  var prefixCls = (_props$prefixCls = props.prefixCls) !== null && _props$prefixCls !== void 0 ? _props$prefixCls : _constant.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__*/(0, _jsxRuntime.jsx)("div", {
    ref: function ref(e) {
      _ref.current = e;
    },
    className: (0, _classnames3.default)(_defineProperty(_defineProperty(_defineProperty({}, "".concat(resizePrefix, "-handle-horizontal"), true), "".concat(resizePrefix, "-with-color"), !props.noColor), props.className || '', true))
  });
};
var ResizeHandleVertical = exports.ResizeHandleVertical = function ResizeHandleVertical(props) {
  var _props$prefixCls2;
  var prefixCls = (_props$prefixCls2 = props.prefixCls) !== null && _props$prefixCls2 !== void 0 ? _props$prefixCls2 : _constant.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__*/(0, _jsxRuntime.jsx)("div", {
    ref: function ref(e) {
      return e && (_ref2.current = e);
    },
    className: (0, _classnames3.default)(_defineProperty(_defineProperty(_defineProperty({}, "".concat(resizePrefix, "-handle-vertical"), true), props.className || '', true), "".concat(resizePrefix, "-with-color"), !props.noColor))
  });
};