diff --git a/src/SplitPane.tsx b/src/SplitPane.tsx index 5e6ca47..2aa5912 100644 --- a/src/SplitPane.tsx +++ b/src/SplitPane.tsx @@ -59,6 +59,10 @@ const SplitPane = ({ const wrapSize: number = wrapperRect[sizeName] ?? 0; + const memoizedChildren = useMemo(() => children, [children]); + const memoizedPropSizes = useMemo(() => [...propSizes], [propSizes]); + const memoizedWrapSize = useMemo(() => wrapSize, [wrapSize]); + // Get limit sizes via children const paneLimitSizes = useMemo(() => children.map(childNode => { const limits = [0, Infinity]; @@ -68,7 +72,7 @@ const SplitPane = ({ limits[1] = assertsSize(maxSize, wrapSize); } return limits; - }), [children, wrapSize]); + }), [memoizedChildren, memoizedWrapSize]); const sizes = useMemo(function () { let count = 0; @@ -95,7 +99,7 @@ const SplitPane = ({ } return res; - }, [...propSizes, children.length, wrapSize]); + }, [memoizedPropSizes, memoizedWrapSize, memoizedChildren]); const sashPosSizes = useMemo(() => ( sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0]) diff --git a/src/sash.tsx b/src/sash.tsx index 6271e87..37f94ea 100644 --- a/src/sash.tsx +++ b/src/sash.tsx @@ -10,7 +10,7 @@ export default function Sash({ onDragEnd, ...others }: ISashProps) { - const timeout = useRef(null); + const timeout = useRef(null); const [active, setActive] = useState(false); const [draging, setDrag] = useState(false); diff --git a/src/types.ts b/src/types.ts index f64a40b..99602fb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -53,7 +53,7 @@ export interface ISplitProps extends HTMLElementProps { export interface ISashProps { className?: string; style: React.CSSProperties; - render: (active: boolean) => void; + render: (active: boolean) => React.ReactNode; onDragStart: React.MouseEventHandler; onDragging: React.MouseEventHandler; onDragEnd: React.MouseEventHandler;