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) {