测试脚本_6

Bin

2025-12-17 2b99d77d73ba568beff0a549534017caaad8a6de

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React from "react";
import { cn } from "../../../utils/bem";
import "./Resizer.scss";
 
const calculateWidth = (width, minWidth, maxWidth, initialX, currentX) => {
  const offset = currentX - initialX;
 
  // Limit the width
  return Math.max(minWidth ?? 30, Math.min(width + offset, maxWidth ?? 400));
};
 
export const Resizer = ({
  children,
  style,
  handleStyle,
  initialWidth,
  className,
  type,
  minWidth,
  maxWidth,
  showResizerLine,
  onResize: onResizeCallback,
  onResizeFinished,
  onReset,
}) => {
  const [width, setWidth] = React.useState(initialWidth ?? 150);
  const [isResizing, setIsResizing] = React.useState(false);
  const resizeHandler = React.useRef();
 
  React.useEffect(() => {
    const newWidth = Math.max(minWidth, Math.min(width));
 
    setWidth(newWidth);
    onResizeCallback?.(newWidth);
  }, []);
 
  /** @param {MouseEvent} evt */
  const handleResize = React.useCallback(
    (evt) => {
      evt.stopPropagation();
      const initialX = evt.pageX;
      let newWidth = width;
 
      /** @param {MouseEvent} evt */
      const onResize = (evt) => {
        newWidth = calculateWidth(width, minWidth, maxWidth, initialX, evt.pageX);
 
        setWidth(newWidth);
        onResizeCallback?.(newWidth);
      };
 
      const stopResize = (evt) => {
        document.removeEventListener("mousemove", onResize);
        document.removeEventListener("mouseup", stopResize);
        document.body.style.removeProperty("user-select");
 
        newWidth = calculateWidth(width, minWidth, maxWidth, initialX, evt.pageX);
 
        setIsResizing(false);
 
        if (newWidth !== width) {
          setWidth(newWidth);
          onResizeFinished?.(newWidth);
        }
      };
 
      document.addEventListener("mousemove", onResize);
      document.addEventListener("mouseup", stopResize);
      document.body.style.userSelect = "none";
      setIsResizing(true);
    },
    [maxWidth, minWidth, onResizeCallback, onResizeFinished, width],
  );
 
  return (
    <div className={cn("resizer").mix(className).toClassName()} style={{ width }}>
      <div className={cn("resizer").elem("content").toClassName()} style={style ?? {}}>
        {children}
      </div>
 
      <div
        className={cn("resizer")
          .elem("handle")
          .mod({ resizing: showResizerLine !== false && isResizing, quickview: type === "quickview" })
          .toClassName()}
        ref={resizeHandler}
        style={handleStyle}
        onMouseDown={handleResize}
        onDoubleClick={() => onReset?.()}
      />
    </div>
  );
};