Skip to content

Commit 0869311

Browse files
authored
fix(SplitterElement): allow passing number for size prop (#7499)
1 parent 49d9b3b commit 0869311

File tree

3 files changed

+9
-7
lines changed

3 files changed

+9
-7
lines changed

packages/main/src/components/SplitterElement/index.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
4747
const [componentRef, splitterElementRef] = useSyncRef(ref);
4848
const { vertical, reset } = useContext(SplitterLayoutContext);
4949
const safariStyles = Device.isSafari() ? { width: 'min-content', flex: '1 1 auto' } : {};
50-
const defaultFlexStyles = size !== 'auto' ? { flex: `0 1 ${size}` } : { flex: '1 0 min-content', ...safariStyles };
50+
const _size = typeof size === 'number' ? `${size}px` : size;
51+
const defaultFlexStyles = _size !== 'auto' ? { flex: `0 1 ${_size}` } : { flex: '1 0 min-content', ...safariStyles };
5152
const [flexStyles, setFlexStyles] = useState(defaultFlexStyles);
5253
const [flexBasisApplied, setFlexBasisApplied] = useState(false);
5354

@@ -65,23 +66,23 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
6566
}
6667
});
6768

68-
if (size === 'auto' && splitterElementRef.current) {
69+
if (_size === 'auto' && splitterElementRef.current) {
6970
elementObserver.observe(splitterElementRef.current);
7071
} else {
71-
setFlexStyles({ flex: `0 1 ${size}` });
72+
setFlexStyles({ flex: `0 1 ${_size}` });
7273
}
7374

7475
return () => {
7576
elementObserver.disconnect();
7677
};
77-
}, [size, flexBasisApplied, vertical]);
78+
}, [_size, flexBasisApplied, vertical]);
7879

7980
useIsomorphicLayoutEffect(() => {
8081
if (reset) {
8182
setFlexStyles(undefined);
8283
setFlexBasisApplied(false);
8384
}
84-
}, [reset, size]);
85+
}, [reset, _size]);
8586

8687
useIsomorphicLayoutEffect(() => {
8788
if (flexStyles === undefined) {

packages/main/src/components/SplitterLayout/SplitterLayout.cy.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ describe('SplitterLayout', () => {
9797
Button 1
9898
</Button>
9999
</SplitterElement>
100-
<SplitterElement minSize={300} size={'400px'} data-testid={'se2'}>
100+
<SplitterElement minSize={300} size={400} data-testid={'se2'}>
101101
<Button>Button 2</Button>
102102
</SplitterElement>
103103
<SplitterElement resizable={false} data-testid={'se3'}>

packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,10 @@ export const useConcatSplitterElements = (concatSplitterElements: ConcatSplitter
5959

6060
indicesWithSplitter.forEach((index) => {
6161
const size = childrenArray[index]?.props?.size;
62+
const _size = typeof size === 'number' ? `${size}px` : size;
6263
if (size && size !== 'auto') {
6364
childrenArray[index] = cloneElement(childrenArray[index], {
64-
size: `calc(${size} - var(--_ui5wcr-SplitterSize))`,
65+
size: `calc(${_size} - var(--_ui5wcr-SplitterSize))`,
6566
});
6667
}
6768
});

0 commit comments

Comments
 (0)