test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

enhance: Resolve Splitter ssr render view (#51378)

Browse Source 
* chore: ssr fix

* test: add test case

* test: fix test logic

* test: update snapshot
This commit is contained in:
二货爱吃白萝卜 2024-10-25 17:23:12 +08:00 committed by GitHub
parent c19aa4c30c
commit e12a76b3ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 276 additions and 488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/splitter/Panel.tsx
View File

@ -11,13 +11,24 @@ export const InternalPanel = forwardRef<
const panelClassName = classNames( const panelClassName = classNames(
`${prefixCls}-panel`, `${prefixCls}-panel`,
{ {
[`${prefixCls}-panel-hidden`]: !size, [`${prefixCls}-panel-hidden`]: size === 0,
}, },
className, className,
); );
const hasSize = size !== undefined;
return ( return (
<div ref={ref} className={panelClassName} style={{ ...style, flexBasis: size }}> <div
ref={ref}
className={panelClassName}
style={{
...style,
// Use auto when start from ssr
flexBasis: hasSize ? size : 'auto',
flexGrow: hasSize ? 0 : 1,
}}
>
{children} {children}
</div> </div>
); );

10
components/splitter/SplitBar.tsx
View File

@ -22,6 +22,10 @@ export interface SplitBarProps {
ariaMax: number; ariaMax: number;
} }
function getValidNumber(num: number | undefined): number {
return typeof num === 'number' && !Number.isNaN(num) ? Math.round(num) : 0;
}
const SplitBar: React.FC<SplitBarProps> = (props) => { const SplitBar: React.FC<SplitBarProps> = (props) => {
const { const {
prefixCls, prefixCls,
@ -112,9 +116,9 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
<div <div
className={splitBarPrefixCls} className={splitBarPrefixCls}
role="separator" role="separator"
aria-valuenow={Math.round(ariaNow)} aria-valuenow={getValidNumber(ariaNow)}
aria-valuemin={Math.round(ariaMin)} aria-valuemin={getValidNumber(ariaMin)}
aria-valuemax={Math.round(ariaMax)} aria-valuemax={getValidNumber(ariaMax)}
> >
<div <div
className={classNames(`${splitBarPrefixCls}-dragger`, { className={classNames(`${splitBarPrefixCls}-dragger`, {

10
components/splitter/Splitter.tsx
View File

@ -68,7 +68,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
} }
// ====================== Container ======================= // ====================== Container =======================
const [containerSize, setContainerSize] = useState<number>(100); const [containerSize, setContainerSize] = useState<number | undefined>();
const onContainerResize: GetProp<typeof ResizeObserver, 'onResize'> = (size) => { const onContainerResize: GetProp<typeof ResizeObserver, 'onResize'> = (size) => {
const { offsetWidth, offsetHeight } = size; const { offsetWidth, offsetHeight } = size;
@ -82,10 +82,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
}; };
// ========================= Size ========================= // ========================= Size =========================
const [itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = useSizes( const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] =
items, useSizes(items, containerSize);
containerSize,
);
// ====================== Resizable ======================= // ====================== Resizable =======================
const resizableInfos = useResizable(items, itemPxSizes); const resizableInfos = useResizable(items, itemPxSizes);
@ -157,7 +155,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
<div style={mergedStyle} className={containerClassName}> <div style={mergedStyle} className={containerClassName}>
{items.map((item, idx) => { {items.map((item, idx) => {
// Panel // Panel
const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />; const panel = <InternalPanel {...item} prefixCls={prefixCls} size={panelSizes[idx]} />;
// Split Bar // Split Bar
let splitBar: React.ReactElement | null = null; let splitBar: React.ReactElement | null = null;

282
components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -10,7 +10,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -25,67 +25,19 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="20" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="left"
class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
>
<span
aria-label="right"
class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -106,7 +58,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -121,67 +73,19 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="20" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="up"
class="anticon anticon-up ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</div>
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
>
<span
aria-label="down"
class="anticon anticon-down ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -211,7 +115,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: 50%; flex-grow: 0;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -226,7 +130,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -238,7 +142,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: 50%; flex-grow: 0;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -309,7 +213,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -324,7 +228,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="50" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -336,7 +240,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
<div <div
class="ant-splitter-panel ant-splitter-panel-hidden" class="ant-splitter-panel ant-splitter-panel-hidden"
style="flex-basis: 0px;" style="flex-basis: 0px; flex-grow: 0;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -351,9 +255,9 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="50" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="0"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
@ -363,7 +267,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -389,7 +293,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -404,7 +308,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="50" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -416,7 +320,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
<div <div
class="ant-splitter-panel ant-splitter-panel-hidden" class="ant-splitter-panel ant-splitter-panel-hidden"
style="flex-basis: 0px;" style="flex-basis: 0px; flex-grow: 0;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -431,9 +335,9 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="50" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="0"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
@ -443,7 +347,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -469,7 +373,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -484,19 +388,19 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="50" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -522,7 +426,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -537,19 +441,19 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="80" aria-valuemax="0"
aria-valuemin="30" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -576,7 +480,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -591,7 +495,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -600,41 +504,17 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="left"
class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-splitter ant-splitter-vertical" class="ant-splitter ant-splitter-vertical"
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -649,7 +529,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -661,7 +541,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -689,7 +569,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 33.33333333333333px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -704,7 +584,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
</div> </div>
</div> </div>
<div <div
aria-valuemax="67" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="33" aria-valuenow="33"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -713,58 +593,10 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="left"
class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
>
<span
aria-label="right"
class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 33.33333333333333px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -779,8 +611,8 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="33" aria-valuemin="0"
aria-valuenow="67" aria-valuenow="67"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
@ -791,7 +623,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 33.33333333333333px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -943,7 +775,7 @@ exports[`renders components/splitter/demo/size.tsx extend context correctly 1`]
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 40px;" style="flex-basis: 40%; flex-grow: 0;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -958,19 +790,19 @@ exports[`renders components/splitter/demo/size.tsx extend context correctly 1`]
</div> </div>
</div> </div>
<div <div
aria-valuemax="70" aria-valuemax="0"
aria-valuemin="20" aria-valuemin="0"
aria-valuenow="40" aria-valuenow="40"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 60px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -996,7 +828,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -1011,7 +843,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -1023,7 +855,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis: 50px;" style="flex-basis: auto; flex-grow: 1;"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"

282
components/splitter/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -10,7 +10,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -25,67 +25,19 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="20" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="left"
class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
>
<span
aria-label="right"
class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -106,7 +58,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -121,67 +73,19 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="20" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="up"
class="anticon anticon-up ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</div>
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
>
<span
aria-label="down"
class="anticon anticon-down ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -209,7 +113,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:50%;flex-grow:0"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -224,7 +128,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -236,7 +140,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:50%;flex-grow:0"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -305,7 +209,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -322,7 +226,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="50" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -334,7 +238,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel ant-splitter-panel-hidden" class="ant-splitter-panel ant-splitter-panel-hidden"
style="flex-basis:0" style="flex-basis:0;flex-grow:0"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -351,9 +255,9 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="50" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="0"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
@ -363,7 +267,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -391,7 +295,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -408,7 +312,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="50" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -420,7 +324,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel ant-splitter-panel-hidden" class="ant-splitter-panel ant-splitter-panel-hidden"
style="flex-basis:0" style="flex-basis:0;flex-grow:0"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -437,9 +341,9 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="50" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="0"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
@ -449,7 +353,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -477,7 +381,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -494,19 +398,19 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="50" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -534,7 +438,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -551,19 +455,19 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="80" aria-valuemax="0"
aria-valuemin="30" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -590,7 +494,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -605,7 +509,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -614,41 +518,17 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="left"
class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-splitter ant-splitter-vertical" class="ant-splitter ant-splitter-vertical"
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -663,7 +543,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -675,7 +555,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -701,7 +581,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:33.33333333333333px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -718,7 +598,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="67" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="33" aria-valuenow="33"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -727,58 +607,10 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger"
/> />
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
>
<span
aria-label="left"
class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
<div
class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
>
<span
aria-label="right"
class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:33.33333333333333px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -795,8 +627,8 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="33" aria-valuemin="0"
aria-valuenow="67" aria-valuenow="67"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
@ -807,7 +639,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:33.33333333333333px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -934,7 +766,7 @@ exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:40px" style="flex-basis:40%;flex-grow:0"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -949,19 +781,19 @@ exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="70" aria-valuemax="0"
aria-valuemin="20" aria-valuemin="0"
aria-valuenow="40" aria-valuenow="40"
class="ant-splitter-bar" class="ant-splitter-bar"
role="separator" role="separator"
> >
<div <div
class="ant-splitter-bar-dragger" class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
/> />
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:60px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -985,7 +817,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
> >
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"
@ -1000,7 +832,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
aria-valuemax="100" aria-valuemax="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuenow="50" aria-valuenow="50"
class="ant-splitter-bar" class="ant-splitter-bar"
@ -1012,7 +844,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-splitter-panel" class="ant-splitter-panel"
style="flex-basis:50px" style="flex-basis:auto;flex-grow:1"
> >
<div <div
class="ant-flex ant-flex-align-center ant-flex-justify-center" class="ant-flex ant-flex-align-center ant-flex-justify-center"

62
components/splitter/__tests__/index.test.tsx
View File

@ -15,6 +15,11 @@ import {
type PanelProps = GetProps<typeof Splitter.Panel>; type PanelProps = GetProps<typeof Splitter.Panel>;
const resizeSplitter = async () => {
triggerResize(document.body.querySelector('.ant-splitter')!);
await waitFakeTimer();
};
const SplitterDemo = ({ items = [{}, {}], ...props }: { items?: PanelProps[] } & SplitterProps) => ( const SplitterDemo = ({ items = [{}, {}], ...props }: { items?: PanelProps[] } & SplitterProps) => (
<Splitter {...props}> <Splitter {...props}>
{items?.map((item, idx) => { {items?.map((item, idx) => {
@ -61,6 +66,8 @@ describe('Splitter', () => {
it('should correct render panel size', async () => { it('should correct render panel size', async () => {
const { container } = render(<SplitterDemo items={[{ size: 20 }, { size: '45%' }, {}]} />); const { container } = render(<SplitterDemo items={[{ size: 20 }, { size: '45%' }, {}]} />);
await resizeSplitter();
const panels = container.querySelectorAll('.ant-splitter-panel'); const panels = container.querySelectorAll('.ant-splitter-panel');
expect(panels?.[0]).toHaveStyle('flex-basis: 20px'); expect(panels?.[0]).toHaveStyle('flex-basis: 20px');
@ -142,6 +149,8 @@ describe('Splitter', () => {
<SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />, <SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
); );
await resizeSplitter();
// Right // Right
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40); mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
expect(onResize).toHaveBeenCalledWith([90, 10]); expect(onResize).toHaveBeenCalledWith([90, 10]);
@ -161,6 +170,8 @@ describe('Splitter', () => {
<SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />, <SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
); );
await resizeSplitter();
// Right // Right
mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40); mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
expect(onResize).toHaveBeenCalledWith([90, 10]); expect(onResize).toHaveBeenCalledWith([90, 10]);
@ -172,7 +183,7 @@ describe('Splitter', () => {
expect(onResizeEnd).toHaveBeenCalledWith([0, 100]); expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
}); });
it('with min', () => { it('with min', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -180,12 +191,14 @@ describe('Splitter', () => {
<SplitterDemo items={[{ min: 10 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />, <SplitterDemo items={[{ min: 10 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
); );
await resizeSplitter();
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100); mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100);
expect(onResize).toHaveBeenCalledWith([10, 90]); expect(onResize).toHaveBeenCalledWith([10, 90]);
expect(onResizeEnd).toHaveBeenCalledWith([10, 90]); expect(onResizeEnd).toHaveBeenCalledWith([10, 90]);
}); });
it('with max', () => { it('with max', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -193,12 +206,14 @@ describe('Splitter', () => {
<SplitterDemo items={[{ max: 90 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />, <SplitterDemo items={[{ max: 90 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
); );
await resizeSplitter();
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 100); mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 100);
expect(onResize).toHaveBeenCalledWith([90, 10]); expect(onResize).toHaveBeenCalledWith([90, 10]);
expect(onResizeEnd).toHaveBeenCalledWith([90, 10]); expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
}); });
it('both panel has min and max', () => { it('both panel has min and max', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -213,6 +228,8 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100); mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100);
expect(onResize).toHaveBeenCalledWith([20, 80]); expect(onResize).toHaveBeenCalledWith([20, 80]);
expect(onResizeEnd).toHaveBeenCalledWith([20, 80]); expect(onResizeEnd).toHaveBeenCalledWith([20, 80]);
@ -222,7 +239,7 @@ describe('Splitter', () => {
expect(onResizeEnd).toHaveBeenCalledWith([80, 20]); expect(onResizeEnd).toHaveBeenCalledWith([80, 20]);
}); });
it('rtl', () => { it('rtl', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -232,12 +249,14 @@ describe('Splitter', () => {
</ConfigProvider>, </ConfigProvider>,
); );
await resizeSplitter();
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -40); mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -40);
expect(onResize).toHaveBeenCalledWith([90, 10]); expect(onResize).toHaveBeenCalledWith([90, 10]);
expect(onResizeEnd).toHaveBeenCalledWith([90, 10]); expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
}); });
it('[true, 0, true] can be move left', () => { it('[true, 0, true] can be move left', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -249,12 +268,14 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100); mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
expect(onResize).toHaveBeenCalledWith([0, 50, 50]); expect(onResize).toHaveBeenCalledWith([0, 50, 50]);
expect(onResizeEnd).toHaveBeenCalledWith([0, 50, 50]); expect(onResizeEnd).toHaveBeenCalledWith([0, 50, 50]);
}); });
it('[false, 0, true] can not be move left', () => { it('[false, 0, true] can not be move left', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -266,6 +287,8 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100); mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
expect(onResize).toHaveBeenCalledWith([50, 0, 50]); expect(onResize).toHaveBeenCalledWith([50, 0, 50]);
expect(onResizeEnd).toHaveBeenCalledWith([50, 0, 50]); expect(onResizeEnd).toHaveBeenCalledWith([50, 0, 50]);
@ -277,6 +300,9 @@ describe('Splitter', () => {
return <SplitterDemo items={[{}, {}, {}]} />; return <SplitterDemo items={[{}, {}, {}]} />;
}; };
const { container } = render(<App />); const { container } = render(<App />);
await resizeSplitter();
mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100); mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
triggerResize(container.querySelector('.ant-splitter')!); triggerResize(container.querySelector('.ant-splitter')!);
await act(async () => { await act(async () => {
@ -295,11 +321,13 @@ describe('Splitter', () => {
// ============================= Collapsible ============================= // ============================= Collapsible =============================
describe('collapsible', () => { describe('collapsible', () => {
it('Basic', () => { it('Basic', async () => {
const { container, rerender } = render( const { container, rerender } = render(
<SplitterDemo items={[{ size: 20, collapsible: true }, { collapsible: true }]} />, <SplitterDemo items={[{ size: 20, collapsible: true }, { collapsible: true }]} />,
); );
await resizeSplitter();
expect(container.querySelectorAll('.ant-splitter-bar-collapse-icon')).toHaveLength(2); expect(container.querySelectorAll('.ant-splitter-bar-collapse-icon')).toHaveLength(2);
expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeTruthy(); expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeTruthy();
expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeTruthy(); expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeTruthy();
@ -324,7 +352,7 @@ describe('Splitter', () => {
expect(container.querySelectorAll('.ant-splitter-bar-collapse-end')).toHaveLength(1); expect(container.querySelectorAll('.ant-splitter-bar-collapse-end')).toHaveLength(1);
}); });
it('collapsible - true', () => { it('collapsible - true', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -342,12 +370,14 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!); fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
expect(onResize).toHaveBeenCalledWith([0, 100]); expect(onResize).toHaveBeenCalledWith([0, 100]);
expect(onResizeEnd).toHaveBeenCalledWith([0, 100]); expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
}); });
it('collapsible - start:true', () => { it('collapsible - start:true', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -368,6 +398,8 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeFalsy(); expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeFalsy();
expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeTruthy(); expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeTruthy();
@ -376,7 +408,7 @@ describe('Splitter', () => {
expect(onResizeEnd).toHaveBeenCalledWith([60, 0, 40]); expect(onResizeEnd).toHaveBeenCalledWith([60, 0, 40]);
}); });
it('collapsible - end:true', () => { it('collapsible - end:true', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -397,6 +429,8 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeTruthy(); expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeTruthy();
expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeFalsy(); expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeFalsy();
@ -405,7 +439,7 @@ describe('Splitter', () => {
expect(onResizeEnd).toHaveBeenCalledWith([40, 0, 60]); expect(onResizeEnd).toHaveBeenCalledWith([40, 0, 60]);
}); });
it('both collapsible', () => { it('both collapsible', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -424,6 +458,8 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
function expectClick(element: HTMLElement, size: number[]) { function expectClick(element: HTMLElement, size: number[]) {
onResize.mockReset(); onResize.mockReset();
onResizeEnd.mockReset(); onResizeEnd.mockReset();
@ -439,7 +475,7 @@ describe('Splitter', () => {
expectClick(container.querySelector('.ant-splitter-bar-collapse-start')!, [50, 50]); expectClick(container.querySelector('.ant-splitter-bar-collapse-start')!, [50, 50]);
}); });
it('collapsible with min', () => { it('collapsible with min', async () => {
const onResize = jest.fn(); const onResize = jest.fn();
const onResizeEnd = jest.fn(); const onResizeEnd = jest.fn();
@ -461,6 +497,8 @@ describe('Splitter', () => {
/>, />,
); );
await resizeSplitter();
// Collapse left // Collapse left
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!); fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
expect(onResize).toHaveBeenCalledWith([0, 100]); expect(onResize).toHaveBeenCalledWith([0, 100]);

61
components/splitter/__tests__/ssr.test.tsx Normal file
View File

@ -0,0 +1,61 @@
import React from 'react';
import { renderToString } from 'react-dom/server';
import Splitter from '..';
import { resetWarned } from '../../_util/warning';
describe('Splitter.SSR', () => {
beforeEach(() => {
resetWarned();
document.body.innerHTML = '';
});
afterEach(() => {
jest.clearAllTimers();
jest.useRealTimers();
});
it('px value', () => {
const str = renderToString(
<Splitter>
<Splitter.Panel key="1" size={23} />
<Splitter.Panel key="2" />
</Splitter>,
);
const div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div);
expect(div.querySelectorAll('.ant-splitter-panel')[0]).toHaveStyle({
flexBasis: '23px',
flexGrow: '0',
});
expect(div.querySelectorAll('.ant-splitter-panel')[1]).toHaveStyle({
flexBasis: 'auto',
flexGrow: '1',
});
});
it('ptg value', () => {
const str = renderToString(
<Splitter>
<Splitter.Panel key="1" size="33%" />
<Splitter.Panel key="2" />
</Splitter>,
);
const div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div);
expect(div.querySelectorAll('.ant-splitter-panel')[0]).toHaveStyle({
flexBasis: '33%',
flexGrow: '0',
});
expect(div.querySelectorAll('.ant-splitter-panel')[1]).toHaveStyle({
flexBasis: 'auto',
flexGrow: '1',
});
});
});

16
components/splitter/hooks/useResize.ts
View File

@ -4,16 +4,20 @@ import type { ItemType } from './useItems';
import type { ResizableInfo } from './useResizable'; import type { ResizableInfo } from './useResizable';
import { getPtg } from './useSizes'; import { getPtg } from './useSizes';
/**
* Handle user drag resize logic.
*/
export default function useResize( export default function useResize(
items: ItemType[], items: ItemType[],
resizableInfos: ResizableInfo[], resizableInfos: ResizableInfo[],
percentSizes: number[], percentSizes: number[],
containerSize: number, containerSize: number | undefined,
updateSizes: (sizes: number[]) => void, updateSizes: (sizes: number[]) => void,
) { ) {
const limitSizes = items.map((item) => [item.min, item.max]); const limitSizes = items.map((item) => [item.min, item.max]);
const ptg2px = (ptg: number) => ptg * containerSize; const mergedContainerSize = containerSize || 0;
const ptg2px = (ptg: number) => ptg * mergedContainerSize;
// ======================== Resize ======================== // ======================== Resize ========================
function getLimitSize(str: string | number | undefined, defaultLimit: number) { function getLimitSize(str: string | number | undefined, defaultLimit: number) {
@ -79,8 +83,8 @@ export default function useResize(
// Get boundary // Get boundary
const startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0); const startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0);
const endMinSize = getLimitSize(limitSizes[nextIndex][0], 0); const endMinSize = getLimitSize(limitSizes[nextIndex][0], 0);
const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], containerSize); const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], mergedContainerSize);
const endMaxSize = getLimitSize(limitSizes[nextIndex][1], containerSize); const endMaxSize = getLimitSize(limitSizes[nextIndex][1], mergedContainerSize);
let mergedOffset = offset; let mergedOffset = offset;
@ -129,9 +133,9 @@ export default function useResize(
const totalSize = currentSize + targetSize; const totalSize = currentSize + targetSize;
const currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0); const currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0);
const currentSizeMax = getLimitSize(limitSizes[currentIndex][1], containerSize); const currentSizeMax = getLimitSize(limitSizes[currentIndex][1], mergedContainerSize);
const targetSizeMin = getLimitSize(limitSizes[targetIndex][0], 0); const targetSizeMin = getLimitSize(limitSizes[targetIndex][0], 0);
const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], containerSize); const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax); const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin); const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);

26
components/splitter/hooks/useSizes.ts
View File

@ -14,12 +14,13 @@ function isPtg(itemSize: string | number | undefined): itemSize is string {
* Save the size state. * Save the size state.
* Align the size into flex percentage base. * Align the size into flex percentage base.
*/ */
export default function useSizes(items: PanelProps[], containerSize: number) { export default function useSizes(items: PanelProps[], containerSize?: number) {
const propSizes = items.map((item) => item.size); const propSizes = items.map((item) => item.size);
const itemsCount = items.length; const itemsCount = items.length;
const ptg2px = (ptg: number) => ptg * containerSize; const mergedContainerSize = containerSize || 0;
const ptg2px = (ptg: number) => ptg * mergedContainerSize;
// We do not need care the size state match the `items` length in `useState`. // We do not need care the size state match the `items` length in `useState`.
// It will calculate later. // It will calculate later.
@ -53,7 +54,7 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
} else if (itemSize || itemSize === 0) { } else if (itemSize || itemSize === 0) {
const num = Number(itemSize); const num = Number(itemSize);
if (!Number.isNaN(num)) { if (!Number.isNaN(num)) {
ptgList[i] = num / containerSize; ptgList[i] = num / mergedContainerSize;
} }
} else { } else {
emptyCount += 1; emptyCount += 1;
@ -74,11 +75,11 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
} }
return ptgList as number[]; return ptgList as number[];
}, [sizes, containerSize]); }, [sizes, mergedContainerSize]);
const postPxSizes = React.useMemo( const postPxSizes = React.useMemo(
() => postPercentSizes.map(ptg2px), () => postPercentSizes.map(ptg2px),
[postPercentSizes, containerSize], [postPercentSizes, mergedContainerSize],
); );
const postPercentMinSizes = React.useMemo( const postPercentMinSizes = React.useMemo(
@ -87,9 +88,9 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
if (isPtg(item.min)) { if (isPtg(item.min)) {
return getPtg(item.min); return getPtg(item.min);
} }
return (item.min || 0) / containerSize; return (item.min || 0) / mergedContainerSize;
}), }),
[items, containerSize], [items, mergedContainerSize],
); );
const postPercentMaxSizes = React.useMemo( const postPercentMaxSizes = React.useMemo(
@ -98,12 +99,19 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
if (isPtg(item.max)) { if (isPtg(item.max)) {
return getPtg(item.max); return getPtg(item.max);
} }
return (item.max || containerSize) / containerSize; return (item.max || mergedContainerSize) / mergedContainerSize;
}), }),
[items, containerSize], [items, mergedContainerSize],
);
// If ssr, we will use the size from developer config first.
const panelSizes = React.useMemo(
() => (containerSize ? postPxSizes : sizes),
[postPxSizes, containerSize],
); );
return [ return [
panelSizes,
postPxSizes, postPxSizes,
postPercentSizes, postPercentSizes,
postPercentMinSizes, postPercentMinSizes,