mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
enhance: Resolve Splitter ssr render view (#51378)
* chore: ssr fix * test: add test case * test: fix test logic * test: update snapshot
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
c19aa4c30c
commit
e12a76b3ab
@ -11,13 +11,24 @@ export const InternalPanel = forwardRef<
|
||||
const panelClassName = classNames(
|
||||
`${prefixCls}-panel`,
|
||||
{
|
||||
[`${prefixCls}-panel-hidden`]: !size,
|
||||
[`${prefixCls}-panel-hidden`]: size === 0,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
const hasSize = size !== undefined;
|
||||
|
||||
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}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -22,6 +22,10 @@ export interface SplitBarProps {
|
||||
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 {
|
||||
prefixCls,
|
||||
@ -112,9 +116,9 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
|
||||
<div
|
||||
className={splitBarPrefixCls}
|
||||
role="separator"
|
||||
aria-valuenow={Math.round(ariaNow)}
|
||||
aria-valuemin={Math.round(ariaMin)}
|
||||
aria-valuemax={Math.round(ariaMax)}
|
||||
aria-valuenow={getValidNumber(ariaNow)}
|
||||
aria-valuemin={getValidNumber(ariaMin)}
|
||||
aria-valuemax={getValidNumber(ariaMax)}
|
||||
>
|
||||
<div
|
||||
className={classNames(`${splitBarPrefixCls}-dragger`, {
|
||||
|
||||
@ -68,7 +68,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
|
||||
}
|
||||
|
||||
// ====================== Container =======================
|
||||
const [containerSize, setContainerSize] = useState<number>(100);
|
||||
const [containerSize, setContainerSize] = useState<number | undefined>();
|
||||
|
||||
const onContainerResize: GetProp<typeof ResizeObserver, 'onResize'> = (size) => {
|
||||
const { offsetWidth, offsetHeight } = size;
|
||||
@ -82,10 +82,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
|
||||
};
|
||||
|
||||
// ========================= Size =========================
|
||||
const [itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = useSizes(
|
||||
items,
|
||||
containerSize,
|
||||
);
|
||||
const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] =
|
||||
useSizes(items, containerSize);
|
||||
|
||||
// ====================== Resizable =======================
|
||||
const resizableInfos = useResizable(items, itemPxSizes);
|
||||
@ -157,7 +155,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
|
||||
<div style={mergedStyle} className={containerClassName}>
|
||||
{items.map((item, idx) => {
|
||||
// Panel
|
||||
const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
|
||||
const panel = <InternalPanel {...item} prefixCls={prefixCls} size={panelSizes[idx]} />;
|
||||
|
||||
// Split Bar
|
||||
let splitBar: React.ReactElement | null = null;
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="20"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="20"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: 50%; flex-grow: 0;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -238,7 +142,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: 50%; flex-grow: 0;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -336,7 +240,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel ant-splitter-panel-hidden"
|
||||
style="flex-basis: 0px;"
|
||||
style="flex-basis: 0px; flex-grow: 0;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="50"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
@ -363,7 +267,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -416,7 +320,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel ant-splitter-panel-hidden"
|
||||
style="flex-basis: 0px;"
|
||||
style="flex-basis: 0px; flex-grow: 0;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="50"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
@ -443,7 +347,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-bar-dragger"
|
||||
class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="80"
|
||||
aria-valuemin="30"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-bar-dragger"
|
||||
class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -600,41 +504,17 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter ant-splitter-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -661,7 +541,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 33.33333333333333px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="67"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="33"
|
||||
class="ant-splitter-bar"
|
||||
@ -713,58 +593,10 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 33.33333333333333px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="33"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="67"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
@ -791,7 +623,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 33.33333333333333px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 40px;"
|
||||
style="flex-basis: 40%; flex-grow: 0;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="70"
|
||||
aria-valuemin="20"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="40"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-bar-dragger"
|
||||
class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 60px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -1023,7 +855,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis: 50px;"
|
||||
style="flex-basis: auto; flex-grow: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="20"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="20"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:50%;flex-grow:0"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -236,7 +140,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:50%;flex-grow:0"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -334,7 +238,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel ant-splitter-panel-hidden"
|
||||
style="flex-basis:0"
|
||||
style="flex-basis:0;flex-grow:0"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="50"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
@ -363,7 +267,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -420,7 +324,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel ant-splitter-panel-hidden"
|
||||
style="flex-basis:0"
|
||||
style="flex-basis:0;flex-grow:0"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="50"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
@ -449,7 +353,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="50"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-bar-dragger"
|
||||
class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="80"
|
||||
aria-valuemin="30"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-bar-dragger"
|
||||
class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -614,41 +518,17 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter ant-splitter-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -675,7 +555,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:33.33333333333333px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="67"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="33"
|
||||
class="ant-splitter-bar"
|
||||
@ -727,58 +607,10 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:33.33333333333333px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="33"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="67"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
@ -807,7 +639,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:33.33333333333333px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:40px"
|
||||
style="flex-basis:40%;flex-grow:0"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="70"
|
||||
aria-valuemin="20"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="40"
|
||||
class="ant-splitter-bar"
|
||||
role="separator"
|
||||
>
|
||||
<div
|
||||
class="ant-splitter-bar-dragger"
|
||||
class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:60px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
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
|
||||
aria-valuemax="100"
|
||||
aria-valuemax="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
class="ant-splitter-bar"
|
||||
@ -1012,7 +844,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-splitter-panel"
|
||||
style="flex-basis:50px"
|
||||
style="flex-basis:auto;flex-grow:1"
|
||||
>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
|
||||
@ -15,6 +15,11 @@ import {
|
||||
|
||||
type PanelProps = GetProps<typeof Splitter.Panel>;
|
||||
|
||||
const resizeSplitter = async () => {
|
||||
triggerResize(document.body.querySelector('.ant-splitter')!);
|
||||
await waitFakeTimer();
|
||||
};
|
||||
|
||||
const SplitterDemo = ({ items = [{}, {}], ...props }: { items?: PanelProps[] } & SplitterProps) => (
|
||||
<Splitter {...props}>
|
||||
{items?.map((item, idx) => {
|
||||
@ -61,6 +66,8 @@ describe('Splitter', () => {
|
||||
it('should correct render panel size', async () => {
|
||||
const { container } = render(<SplitterDemo items={[{ size: 20 }, { size: '45%' }, {}]} />);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
const panels = container.querySelectorAll('.ant-splitter-panel');
|
||||
|
||||
expect(panels?.[0]).toHaveStyle('flex-basis: 20px');
|
||||
@ -142,6 +149,8 @@ describe('Splitter', () => {
|
||||
<SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
// Right
|
||||
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
|
||||
expect(onResize).toHaveBeenCalledWith([90, 10]);
|
||||
@ -161,6 +170,8 @@ describe('Splitter', () => {
|
||||
<SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
// Right
|
||||
mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
|
||||
expect(onResize).toHaveBeenCalledWith([90, 10]);
|
||||
@ -172,7 +183,7 @@ describe('Splitter', () => {
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
|
||||
});
|
||||
|
||||
it('with min', () => {
|
||||
it('with min', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -180,12 +191,14 @@ describe('Splitter', () => {
|
||||
<SplitterDemo items={[{ min: 10 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100);
|
||||
expect(onResize).toHaveBeenCalledWith([10, 90]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([10, 90]);
|
||||
});
|
||||
|
||||
it('with max', () => {
|
||||
it('with max', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -193,12 +206,14 @@ describe('Splitter', () => {
|
||||
<SplitterDemo items={[{ max: 90 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 100);
|
||||
expect(onResize).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 onResizeEnd = jest.fn();
|
||||
|
||||
@ -213,6 +228,8 @@ describe('Splitter', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100);
|
||||
expect(onResize).toHaveBeenCalledWith([20, 80]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([20, 80]);
|
||||
@ -222,7 +239,7 @@ describe('Splitter', () => {
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([80, 20]);
|
||||
});
|
||||
|
||||
it('rtl', () => {
|
||||
it('rtl', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -232,12 +249,14 @@ describe('Splitter', () => {
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -40);
|
||||
expect(onResize).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 onResizeEnd = jest.fn();
|
||||
|
||||
@ -249,12 +268,14 @@ describe('Splitter', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
|
||||
expect(onResize).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 onResizeEnd = jest.fn();
|
||||
|
||||
@ -266,6 +287,8 @@ describe('Splitter', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
|
||||
expect(onResize).toHaveBeenCalledWith([50, 0, 50]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([50, 0, 50]);
|
||||
@ -277,6 +300,9 @@ describe('Splitter', () => {
|
||||
return <SplitterDemo items={[{}, {}, {}]} />;
|
||||
};
|
||||
const { container } = render(<App />);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
|
||||
triggerResize(container.querySelector('.ant-splitter')!);
|
||||
await act(async () => {
|
||||
@ -295,11 +321,13 @@ describe('Splitter', () => {
|
||||
|
||||
// ============================= Collapsible =============================
|
||||
describe('collapsible', () => {
|
||||
it('Basic', () => {
|
||||
it('Basic', async () => {
|
||||
const { container, rerender } = render(
|
||||
<SplitterDemo items={[{ size: 20, collapsible: true }, { collapsible: true }]} />,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
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-end')).toBeTruthy();
|
||||
@ -324,7 +352,7 @@ describe('Splitter', () => {
|
||||
expect(container.querySelectorAll('.ant-splitter-bar-collapse-end')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('collapsible - true', () => {
|
||||
it('collapsible - true', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -342,12 +370,14 @@ describe('Splitter', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
|
||||
expect(onResize).toHaveBeenCalledWith([0, 100]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
|
||||
});
|
||||
|
||||
it('collapsible - start:true', () => {
|
||||
it('collapsible - start:true', async () => {
|
||||
const onResize = 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-end')).toBeTruthy();
|
||||
|
||||
@ -376,7 +408,7 @@ describe('Splitter', () => {
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([60, 0, 40]);
|
||||
});
|
||||
|
||||
it('collapsible - end:true', () => {
|
||||
it('collapsible - end:true', async () => {
|
||||
const onResize = 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-end')).toBeFalsy();
|
||||
|
||||
@ -405,7 +439,7 @@ describe('Splitter', () => {
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([40, 0, 60]);
|
||||
});
|
||||
|
||||
it('both collapsible', () => {
|
||||
it('both collapsible', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -424,6 +458,8 @@ describe('Splitter', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
function expectClick(element: HTMLElement, size: number[]) {
|
||||
onResize.mockReset();
|
||||
onResizeEnd.mockReset();
|
||||
@ -439,7 +475,7 @@ describe('Splitter', () => {
|
||||
expectClick(container.querySelector('.ant-splitter-bar-collapse-start')!, [50, 50]);
|
||||
});
|
||||
|
||||
it('collapsible with min', () => {
|
||||
it('collapsible with min', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -461,6 +497,8 @@ describe('Splitter', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
// Collapse left
|
||||
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
|
||||
expect(onResize).toHaveBeenCalledWith([0, 100]);
|
||||
|
||||
61
components/splitter/__tests__/ssr.test.tsx
Normal file
61
components/splitter/__tests__/ssr.test.tsx
Normal 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',
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -4,16 +4,20 @@ import type { ItemType } from './useItems';
|
||||
import type { ResizableInfo } from './useResizable';
|
||||
import { getPtg } from './useSizes';
|
||||
|
||||
/**
|
||||
* Handle user drag resize logic.
|
||||
*/
|
||||
export default function useResize(
|
||||
items: ItemType[],
|
||||
resizableInfos: ResizableInfo[],
|
||||
percentSizes: number[],
|
||||
containerSize: number,
|
||||
containerSize: number | undefined,
|
||||
updateSizes: (sizes: number[]) => void,
|
||||
) {
|
||||
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 ========================
|
||||
function getLimitSize(str: string | number | undefined, defaultLimit: number) {
|
||||
@ -79,8 +83,8 @@ export default function useResize(
|
||||
// Get boundary
|
||||
const startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0);
|
||||
const endMinSize = getLimitSize(limitSizes[nextIndex][0], 0);
|
||||
const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], containerSize);
|
||||
const endMaxSize = getLimitSize(limitSizes[nextIndex][1], containerSize);
|
||||
const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], mergedContainerSize);
|
||||
const endMaxSize = getLimitSize(limitSizes[nextIndex][1], mergedContainerSize);
|
||||
|
||||
let mergedOffset = offset;
|
||||
|
||||
@ -129,9 +133,9 @@ export default function useResize(
|
||||
const totalSize = currentSize + targetSize;
|
||||
|
||||
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 targetSizeMax = getLimitSize(limitSizes[targetIndex][1], containerSize);
|
||||
const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
|
||||
|
||||
const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
|
||||
const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
|
||||
|
||||
@ -14,12 +14,13 @@ function isPtg(itemSize: string | number | undefined): itemSize is string {
|
||||
* Save the size state.
|
||||
* 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 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`.
|
||||
// It will calculate later.
|
||||
@ -53,7 +54,7 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
|
||||
} else if (itemSize || itemSize === 0) {
|
||||
const num = Number(itemSize);
|
||||
if (!Number.isNaN(num)) {
|
||||
ptgList[i] = num / containerSize;
|
||||
ptgList[i] = num / mergedContainerSize;
|
||||
}
|
||||
} else {
|
||||
emptyCount += 1;
|
||||
@ -74,11 +75,11 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
|
||||
}
|
||||
|
||||
return ptgList as number[];
|
||||
}, [sizes, containerSize]);
|
||||
}, [sizes, mergedContainerSize]);
|
||||
|
||||
const postPxSizes = React.useMemo(
|
||||
() => postPercentSizes.map(ptg2px),
|
||||
[postPercentSizes, containerSize],
|
||||
[postPercentSizes, mergedContainerSize],
|
||||
);
|
||||
|
||||
const postPercentMinSizes = React.useMemo(
|
||||
@ -87,9 +88,9 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
|
||||
if (isPtg(item.min)) {
|
||||
return getPtg(item.min);
|
||||
}
|
||||
return (item.min || 0) / containerSize;
|
||||
return (item.min || 0) / mergedContainerSize;
|
||||
}),
|
||||
[items, containerSize],
|
||||
[items, mergedContainerSize],
|
||||
);
|
||||
|
||||
const postPercentMaxSizes = React.useMemo(
|
||||
@ -98,12 +99,19 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
|
||||
if (isPtg(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 [
|
||||
panelSizes,
|
||||
postPxSizes,
|
||||
postPercentSizes,
|
||||
postPercentMinSizes,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user