Function SplitPane

src/components/split/SplitPane.tsx:81–327

({
    children,
    sizes: propSizes,
    allowResize: propAllowResize = true,
    showSashes = true,
    split = 'vertical',
    className,
    sashClassName,
    paneClassName,
    resizerSize = 4,
    onChange,
    ...restProps
}: ISplitProps)

};

const SplitPane = ({
    children,
    sizes: propSizes,
    allowResize: propAllowResize = true,
    showSashes = true,
    split = 'vertical',
    className,
    sashClassName,
    paneClassName,
    resizerSize = 4,
    onChange,
    ...restProps
}: ISplitProps) => {
    const axis = useRef<IAxis>({ x: 0, y: 0 });
    const wrapper = useRef<HTMLDivElement>(null);
    const [wrapperRect, setWrapperRect] = useState({});
    const [draging, setDrag] = useState(false);

    useEffect(() => {
        const resizeObserver = new ResizeObserver(() => {
            setWrapperRect(wrapper.current!.getBoundingClientRect());
        });
        resizeObserver.observe(wrapper.current!);
        return () => {
            resizeObserver.disconnect();
        };
    }, []);

    // Get some size infos via split
    const { sizeName, sPos, sAxis } = useMemo(
        function () {
            return {
                sizeName: split === 'vertical' ? 'width' : 'height',
                sPos: split === 'vertical' ? 'left' : 'top',
                sAxis: split === 'vertical' ? 'x' : 'y',
            };
        },
        [split]
    );

    const wrapSize: number = wrapperRect[sizeName] ?? 0;

    // Get limit sizes via children
    const paneLimitSizes = useMemo(
        function () {
            return children.map((childNode) => {
                const limits = [0, Infinity];
                if (childNode.type === Pane) {
                    const { minSize, maxSize } =
                        childNode.props as IPaneConfigs;
                    limits[0] = assertsSize(minSize, wrapSize, 0);
                    limits[1] = assertsSize(maxSize, wrapSize);
                }
                return limits;
            });
        },
        [children, wrapSize]
    );