diff --git a/examples/StyledExample.tsx b/examples/StyledExample.tsx index 4cda958f..fb47cb87 100644 --- a/examples/StyledExample.tsx +++ b/examples/StyledExample.tsx @@ -35,7 +35,11 @@ export function StyledExample() {

Use a custom divider component for different styles.

- +

Panel 1

diff --git a/examples/styles.css b/examples/styles.css index a5bcce54..a2fa5a3a 100644 --- a/examples/styles.css +++ b/examples/styles.css @@ -210,6 +210,7 @@ body { /* Styled example */ .styled-pane { color: #fff; + border-radius: 40px; } .styled-pane h3 { diff --git a/src/components/SplitPane.tsx b/src/components/SplitPane.tsx index 5452e997..84005726 100644 --- a/src/components/SplitPane.tsx +++ b/src/components/SplitPane.tsx @@ -57,6 +57,7 @@ export function SplitPane(props: SplitPaneProps) { className, style, divider: CustomDivider, + dividerSize, dividerStyle, dividerClassName, children, @@ -117,6 +118,16 @@ export function SplitPane(props: SplitPaneProps) { return { minSizes: mins, maxSizes: maxs }; }, [containerSize, paneCount, paneConfigs]); + // Caluclate space for dividers + const calculateDividersTotalSize = useCallback( + (containerSz: number) => { + return ( + (paneCount - 1) * convertToPixels(dividerSize ?? '0px', containerSz) + ); + }, + [paneCount, dividerSize] + ); + // Calculate initial sizes from pane configs const calculateInitialSizes = useCallback( (containerSz: number): number[] => { @@ -124,6 +135,9 @@ export function SplitPane(props: SplitPaneProps) { return new Array(paneCount).fill(0); } + // Subtract space for dividers + containerSz -= calculateDividersTotalSize(containerSz); + // First pass: calculate sizes for panes with explicit sizes const sizes: (number | null)[] = paneConfigs.map((config) => { const paneSize = config.size ?? config.defaultSize; @@ -145,7 +159,7 @@ export function SplitPane(props: SplitPaneProps) { // Second pass: fill in auto-sized panes return sizes.map((size) => (size === null ? autoSize : size)); }, - [paneCount, paneConfigs] + [paneCount, paneConfigs, dividerSize] ); const [paneSizes, setPaneSizes] = useState(() => @@ -207,7 +221,11 @@ export function SplitPane(props: SplitPaneProps) { return calculateInitialSizes(newContainerSize); } // For uncontrolled panes, distribute proportionally - return distributeSizes(currentSizes, newContainerSize); + return distributeSizes( + currentSizes, + newContainerSize, + calculateDividersTotalSize(newContainerSize) + ); } // First measurement - use initial sizes diff --git a/src/types/index.ts b/src/types/index.ts index bfd9f0ca..4219c614 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -44,6 +44,9 @@ export interface SplitPaneProps { /** Custom divider component */ divider?: React.ComponentType; + /** Custom divider size */ + dividerSize?: Size; + /** Custom divider styles */ dividerStyle?: CSSProperties; diff --git a/src/utils/calculations.ts b/src/utils/calculations.ts index 7761b77a..2f1e2230 100644 --- a/src/utils/calculations.ts +++ b/src/utils/calculations.ts @@ -53,8 +53,12 @@ export function snapToPoint( */ export function distributeSizes( currentSizes: number[], - newContainerSize: number + newContainerSize: number, + dividersTotalSize: number = 0 ): number[] { + // Subtract space for dividers + newContainerSize -= dividersTotalSize; + const totalCurrentSize = currentSizes.reduce((sum, size) => sum + size, 0); if (totalCurrentSize === 0) {