@difizen/libro-common 0.3.4 → 1.0.0

package/src/react/resize/index.tsx

@@ -0,0 +1,769 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import classnames from 'classnames';
+import * as React from 'react';
+
+import { defaultPrefixCls } from '../constant';
+import type { Layout } from '../layout/layout';
+
+export const RESIZE_LOCK = 'resize-lock';
+import './styles/index.less';
+
+/**
+ * 定义在flex模式下，setSize作用于哪一个元素
+ * prev表示前一个元素
+ * next表示后一个元素
+ */
+export enum ResizeFlexMode {
+  Prev = 'prev',
+  Next = 'next',
+}
+
+export interface ResizeHandleProps {
+  prefixCls?: string | undefined;
+  onFinished?: undefined | (() => void);
+  onResize: undefined | ((prevElement: HTMLElement, nextElement: HTMLElement) => void);
+  max?: number | undefined;
+  min?: number | undefined;
+  preserve?: number | undefined;
+  className?: string | undefined;
+  noColor?: boolean | undefined;
+  delegate?: undefined | ((delegate: IResizeHandleDelegate) => void);
+  findPrevElement?: undefined | ((direction?: boolean) => HTMLElement | undefined);
+  findNextElement?: undefined | ((direction?: boolean) => HTMLElement | undefined);
+  /**
+   * 使用直接的size指定目标，不使用百分比
+   * 传入值表示setSize的作用模式
+   */
+  flexMode?: ResizeFlexMode | undefined;
+  direction: Layout.direction | undefined;
+}
+
+export interface IResizeHandleDelegate {
+  setSize: (prev: number, next: number) => void;
+  setRelativeSize: (prev: number, next: number) => void;
+  getRelativeSize: () => number[];
+  setAbsoluteSize: (size: number, isLatter?: boolean, keep?: boolean) => void;
+  getAbsoluteSize: (isLatter?: boolean) => number;
+}
+
+function preventWebviewCatchMouseEvents() {
+  const iframes = document.getElementsByTagName('iframe');
+  const webviews = document.getElementsByTagName('webview');
+  for (const webview of webviews as unknown as HTMLElement[]) {
+    webview.classList.add('none-pointer-event');
+  }
+  for (const iframe of iframes as unknown as HTMLIFrameElement[]) {
+    iframe.classList.add('none-pointer-event');
+  }
+
+  const shadowRootHost = document.getElementsByClassName('shadow-root-host');
+  for (const host of shadowRootHost as unknown as HTMLElement[]) {
+    host?.classList.add('none-pointer-event');
+  }
+}
+
+function allowWebviewCatchMouseEvents() {
+  const iframes = document.getElementsByTagName('iframe');
+  const webviews = document.getElementsByTagName('webview');
+  for (const webview of webviews as any) {
+    webview.classList.remove('none-pointer-event');
+  }
+  for (const iframe of iframes as any) {
+    iframe.classList.remove('none-pointer-event');
+  }
+
+  const shadowRootHost = document.getElementsByClassName('shadow-root-host');
+  for (const host of shadowRootHost as unknown as HTMLElement[]) {
+    host?.classList.remove('none-pointer-event');
+  }
+}
+
+export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
+  const prefixCls = props.prefixCls ?? defaultPrefixCls;
+  const resizePrefix = `${prefixCls}-resize`;
+  const ref = React.useRef<HTMLElement | null>();
+  const resizing = React.useRef<boolean>(false);
+  const startX = React.useRef<number>(0);
+  const startPrevWidth = React.useRef<number>(0);
+  const startNextWidth = React.useRef<number>(0);
+  const prevElement = React.useRef<HTMLElement | null>();
+  const nextElement = React.useRef<HTMLElement | null>();
+  const requestFrame = React.useRef<number>();
+
+  const setSize = (prev: number, next: number) => {
+    const parentWidth = ref.current!.parentElement!.offsetWidth;
+    const prevEle = props.findPrevElement
+      ? props.findPrevElement()
+      : prevElement.current!;
+    const nextEle = props.findNextElement
+      ? props.findNextElement()
+      : nextElement.current!;
+    if (
+      (prevEle && prevEle.classList.contains(RESIZE_LOCK)) ||
+      (nextEle && nextEle.classList.contains(RESIZE_LOCK))
+    ) {
+      return;
+    }
+    const prevMinResize = Number(prevEle!.dataset['minResize'] || 0);
+    const nextMinResize = Number(nextEle!.dataset['minResize'] || 0);
+    if (prevMinResize || nextMinResize) {
+      if (prev * parentWidth <= prevMinResize || next * parentWidth <= nextMinResize) {
+        return;
+      }
+    }
+    if (nextEle) {
+      nextEle.style.width = `${next * 100}%`;
+    }
+    if (prevEle) {
+      prevEle.style.width = `${prev * 100}%`;
+    }
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  const flexModeSetSize = (
+    prevWidth: number,
+    nextWidth: number,
+    ignoreMin?: boolean,
+    direction?: boolean,
+  ) => {
+    const prevEle = props.findPrevElement
+      ? props.findPrevElement(direction)
+      : prevElement.current!;
+    const nextEle = props.findNextElement
+      ? props.findNextElement(direction)
+      : nextElement.current!;
+    let fixedElement: HTMLElement;
+    let flexElement: HTMLElement;
+    let targetFixedWidth = 0;
+    const prevMinResize = parseInt(prevEle!.dataset['minResize'] || '0', 10);
+    const 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 = `${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的情况
+   */
+  const handleZeroSize = (prev: number, next: number) => {
+    // 对于设置为0的情况，一般认为是会需要完全隐藏对应元素，并且当前handle变为不可用
+    const prevEle = prevElement.current!;
+    const nextEle = nextElement.current!;
+    let 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');
+      }
+    }
+  };
+
+  const setRelativeSize = (prev: number, next: number) => {
+    const prevEle = prevElement.current!;
+    const nextEle = nextElement.current!;
+    let currentTotalWidth: number;
+    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 = `${(next / (prev + next)) * currentTotalWidth}%`;
+    }
+    if (prevEle) {
+      prevEle.style.width = `${(prev / (prev + next)) * currentTotalWidth}%`;
+    }
+    handleZeroSize(prev, next);
+
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  const getRelativeSize = () => {
+    const currentPrev = prevElement.current!.clientWidth;
+    const currentNext = nextElement.current!.clientWidth;
+    const totalSize = currentPrev + currentNext;
+    const relativeSizes: number[] = [];
+    relativeSizes.push(currentPrev / totalSize);
+    relativeSizes.push(currentNext / totalSize);
+    return relativeSizes;
+  };
+
+  const setAbsoluteSize = (size: number, isLatter?: boolean) => {
+    const currentPrev = prevElement.current!.clientWidth;
+    const currentNext = nextElement.current!.clientWidth;
+    const totalSize = currentPrev + currentNext;
+    if (props.flexMode) {
+      const prevWidth =
+        props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
+      const nextWidth =
+        props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
+      flexModeSetSize(prevWidth, nextWidth, true);
+    } else {
+      const currentTotalWidth =
+        +nextElement.current!.style.width!.replace('%', '') +
+        +prevElement.current!.style.width!.replace('%', '');
+      if (isLatter) {
+        nextElement.current!.style.width = `${currentTotalWidth * (size / totalSize)}%`;
+        prevElement.current!.style.width = `${
+          currentTotalWidth * (1 - size / totalSize)
+        }%`;
+      } else {
+        prevElement.current!.style.width = `${currentTotalWidth * (size / totalSize)}%`;
+        nextElement.current!.style.width = `${
+          currentTotalWidth * (1 - size / totalSize)
+        }%`;
+      }
+    }
+    if (isLatter) {
+      handleZeroSize(totalSize - size, size);
+    } else {
+      handleZeroSize(size, totalSize - size);
+    }
+    if (props.onResize) {
+      props.onResize(prevElement.current!, nextElement.current!);
+    }
+  };
+
+  const getAbsoluteSize = (isLatter?: boolean) => {
+    if (isLatter) {
+      return nextElement.current!.clientWidth;
+    }
+    return prevElement.current!.clientWidth;
+  };
+
+  const hideScrollBar = (element: HTMLElement) => {
+    const elementClasses = element.classList;
+    const hiddenClass = `${resizePrefix}-overflow-hidden`;
+    if (!elementClasses?.contains(hiddenClass)) {
+      elementClasses.add(hiddenClass);
+    }
+  };
+
+  const restoreScrollBar = (element: HTMLElement) => {
+    const elementClasses = element.classList;
+    const hiddenClass = `${resizePrefix}-overflow-hidden`;
+    if (elementClasses?.contains(hiddenClass)) {
+      elementClasses.remove(hiddenClass);
+    }
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    e.preventDefault();
+    if (ref.current && ref.current.classList.contains('no-resize')) {
+      return;
+    }
+
+    let prevWidth: number;
+    let nextWidth: number;
+    const 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);
+    }
+    const parentWidth = ref.current!.parentElement!.offsetWidth;
+    requestFrame.current = window.requestAnimationFrame(() => {
+      if (props.flexMode) {
+        flexModeSetSize(prevWidth, nextWidth);
+      } else {
+        setSize(prevWidth / parentWidth, nextWidth / parentWidth);
+      }
+    });
+  };
+  const onMouseUp = () => {
+    resizing.current = false;
+    ref.current?.classList.remove(`${resizePrefix}-active`);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+    // 结束拖拽时恢复拖拽区域滚动条
+    restoreScrollBar(prevElement.current!);
+    restoreScrollBar(nextElement.current!);
+    if (props.onFinished) {
+      props.onFinished();
+    }
+    allowWebviewCatchMouseEvents();
+  };
+  const onMouseDown = (e: MouseEvent) => {
+    resizing.current = true;
+    ref.current?.classList.add(`${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(() => {
+    if (ref.current) {
+      ref.current.addEventListener('mousedown', onMouseDown);
+      prevElement.current = ref.current.previousSibling as HTMLElement;
+      nextElement.current = ref.current.nextSibling as HTMLElement;
+    }
+
+    return () => {
+      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,
+      setAbsoluteSize,
+      getAbsoluteSize,
+      setRelativeSize,
+      getRelativeSize,
+    });
+  }
+
+  return (
+    <div
+      ref={(e) => {
+        ref.current = e;
+      }}
+      className={classnames({
+        [`${resizePrefix}-handle-horizontal`]: true,
+        [`${resizePrefix}-with-color`]: !props.noColor,
+        [props.className || '']: true,
+      })}
+    />
+  );
+};
+
+export const ResizeHandleVertical = (props: ResizeHandleProps) => {
+  const prefixCls = props.prefixCls ?? defaultPrefixCls;
+  const resizePrefix = `${prefixCls}-resize`;
+  const ref = React.useRef<HTMLElement>();
+  const resizing = React.useRef<boolean>(false);
+  const startY = React.useRef<number>(0);
+  // const startHeight = React.useRef<number>(0);
+  const startPrevHeight = React.useRef<number>(0);
+  const startNextHeight = React.useRef<number>(0);
+  const prevElement = React.useRef<HTMLElement>();
+  const nextElement = React.useRef<HTMLElement>();
+
+  const cachedPrevElement = React.useRef<HTMLElement>();
+  const cachedNextElement = React.useRef<HTMLElement>();
+
+  const requestFrame = React.useRef<number>();
+  // direction: true为向下，false为向上
+  const setSize = (prev: number, next: number, direction?: boolean) => {
+    const prevEle = props.findPrevElement
+      ? props.findPrevElement(direction)
+      : prevElement.current!;
+    const 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 = `${next * 100}%`;
+    prevEle.style.height = `${prev * 100}%`;
+    if (props.onResize) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  const flexModeSetSize = (
+    prevHeight: number,
+    nextHeight: number,
+    ignoreMin?: boolean,
+    direction?: boolean,
+  ) => {
+    const prevEle = props.findPrevElement
+      ? props.findPrevElement(direction)
+      : prevElement.current!;
+    const nextEle = props.findNextElement
+      ? props.findNextElement(direction)
+      : nextElement.current!;
+    let fixedElement: HTMLElement;
+    let flexElement: HTMLElement;
+    let targetFixedHeight = 0;
+    const prevMinResize = parseFloat(prevEle!.dataset['minResize'] || '0');
+    const 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 = `${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的情况
+   */
+  const handleZeroSize = (prev: number, next: number) => {
+    // 对于设置为0的情况，一般认为是会需要完全隐藏对应元素，并且当前handle变为不可用
+    const prevEle = prevElement.current!;
+    const nextEle = nextElement.current!;
+    let 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');
+      }
+    }
+  };
+
+  const setRelativeSize = (prev: number, next: number) => {
+    const prevEle = prevElement.current!;
+    const nextEle = nextElement.current!;
+    let 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 = `${(next / (prev + next)) * currentTotalHeight}%`;
+    }
+    if (prevEle) {
+      prevEle.style.height = `${(prev / (prev + next)) * currentTotalHeight}%`;
+    }
+
+    handleZeroSize(prev, next);
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  const getRelativeSize = () => {
+    const currentPrev = prevElement.current!.clientHeight;
+    const currentNext = nextElement.current!.clientHeight;
+    const totalSize = currentPrev + currentNext;
+    const relativeSizes: number[] = [];
+    relativeSizes.push(currentPrev / totalSize);
+    relativeSizes.push(currentNext / totalSize);
+    return relativeSizes;
+  };
+
+  const setDomSize = (
+    prev: number,
+    next: number,
+    prevEle: HTMLElement,
+    nextEle: HTMLElement,
+  ) => {
+    if (
+      prevEle.classList.contains(RESIZE_LOCK) ||
+      nextEle.classList.contains(RESIZE_LOCK)
+    ) {
+      return;
+    }
+    // 有固定尺寸时删除flex属性
+    nextEle.style.height = `${next}px`;
+    prevEle.style.height = `${prev}px`;
+    nextEle.style.flex = 'unset';
+    prevEle.style.flex = 'unset';
+    if (props.onResize && nextEle && prevEle) {
+      props.onResize(prevEle, nextEle);
+    }
+  };
+
+  // keep = true 左右侧面板使用，保证相邻节点的总宽度不变
+  const setAbsoluteSize = (size: number, isLatter?: boolean, keep?: boolean) => {
+    const currentPrev = prevElement.current!.clientHeight;
+    const currentNext = nextElement.current!.clientHeight;
+    const totalSize = currentPrev + currentNext;
+    if (props.flexMode) {
+      const prevHeight =
+        props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
+      const nextHeight =
+        props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
+      flexModeSetSize(prevHeight, nextHeight, true);
+    } else {
+      // eslint-disable-next-line no-useless-escape
+      const nextH = +nextElement.current!.style.height!.replace(/\%|px/, '');
+      // eslint-disable-next-line no-useless-escape
+      const prevH = +prevElement.current!.style.height!.replace(/\%|px/, '');
+      const currentTotalHeight = nextH + prevH;
+      if (isLatter) {
+        if (keep) {
+          prevElement.current!.style.height = `${
+            currentTotalHeight * (1 - size / totalSize)
+          }%`;
+        }
+        const targetSize = currentTotalHeight * (size / totalSize);
+        nextElement.current!.style.height =
+          targetSize === 0 ? `${targetSize}px` : `${targetSize}%`;
+      } else {
+        prevElement.current!.style.height = `${
+          currentTotalHeight * (size / totalSize)
+        }%`;
+        if (keep) {
+          nextElement.current!.style.height = `${
+            currentTotalHeight * (1 - size / totalSize)
+          }%`;
+        }
+      }
+    }
+    if (isLatter) {
+      handleZeroSize(totalSize - size, size);
+    } else {
+      handleZeroSize(size, totalSize - size);
+    }
+    if (props.onResize) {
+      props.onResize(prevElement.current!, nextElement.current!);
+    }
+  };
+
+  const getAbsoluteSize = (isLatter?: boolean) => {
+    if (isLatter) {
+      return nextElement.current!.clientHeight;
+    }
+    return prevElement.current!.clientHeight;
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    e.preventDefault();
+    if (ref.current && ref.current.classList.contains('no-resize')) {
+      return;
+    }
+    const direction = e.pageY > startY.current;
+    // 若上层未传入findNextElement，dynamicNext为null，否则找不到符合要求的panel时返回undefined
+    const dynamicNext = props.findNextElement ? props.findNextElement(direction) : null;
+    const 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;
+    }
+
+    let prevHeight: number;
+    let nextHeight: number;
+    const 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(() => {
+      const prevMinResize = parseFloat(
+        cachedPrevElement.current!.dataset['minResize'] || '0',
+      );
+      const 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!,
+        );
+      }
+    });
+  };
+
+  const onMouseUp = () => {
+    resizing.current = false;
+    ref.current?.classList.remove(`${resizePrefix}-active`);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+    if (props.onFinished) {
+      props.onFinished();
+    }
+    allowWebviewCatchMouseEvents();
+  };
+
+  const onMouseDown = (e: MouseEvent) => {
+    resizing.current = true;
+    ref.current?.classList.add(`${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(() => {
+    ref.current!.addEventListener('mousedown', onMouseDown);
+    prevElement.current = ref.current!.previousSibling as HTMLElement;
+    nextElement.current = ref.current!.nextSibling as HTMLElement;
+    return () => {
+      ref.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,
+      setAbsoluteSize,
+      getAbsoluteSize,
+      setRelativeSize,
+      getRelativeSize,
+    });
+  }
+
+  return (
+    <div
+      ref={(e) => e && (ref.current = e)}
+      className={classnames({
+        [`${resizePrefix}-handle-vertical`]: true,
+        [props.className || '']: true,
+        [`${resizePrefix}-with-color`]: !props.noColor,
+      })}
+    />
+  );
+};