mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix(Splitter): fix the issue about Splitter had unexpected gaps in Flex (#51096)

Browse Source
This commit is contained in:
kiner-tang 2024-10-02 17:46:22 +08:00 committed by GitHub
parent d5ef5f3f2c
commit e8b0fc4925
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 50 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
components/splitter/Splitter.tsx
View File

@ -146,65 +146,62 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
const mergedStyle: React.CSSProperties = { ...splitter?.style, ...style };
return wrapCSSVar(
<>
<ResizeObserver onResize={onContainerResize}>
<div style={mergedStyle} className={containerClassName}>
{items.map((item, idx) => {
// Panel
const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
<ResizeObserver onResize={onContainerResize}>
<div style={mergedStyle} className={containerClassName}>
{items.map((item, idx) => {
// Panel
const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
// Split Bar
let splitBar: React.ReactElement | null = null;
// Split Bar
let splitBar: React.ReactElement | null = null;
const resizableInfo = resizableInfos[idx];
if (resizableInfo) {
const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
const resizableInfo = resizableInfos[idx];
if (resizableInfo) {
const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
splitBar = (
<SplitBar
index={idx}
active={movingIndex === idx}
prefixCls={prefixCls}
vertical={isVertical}
resizable={resizableInfo.resizable}
ariaNow={stackSizes[idx] * 100}
ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
startCollapsible={resizableInfo.startCollapsible}
endCollapsible={resizableInfo.endCollapsible}
onOffsetStart={onInternalResizeStart}
onOffsetUpdate={(index, offsetX, offsetY) => {
let offset = isVertical ? offsetY : offsetX;
if (reverse) {
offset = -offset;
}
onInternalResizeUpdate(index, offset);
}}
onOffsetEnd={onInternalResizeEnd}
onCollapse={onInternalCollapse}
/>
);
}
return (
<React.Fragment key={`split-panel-${idx}`}>
{panel}
{splitBar}
</React.Fragment>
splitBar = (
<SplitBar
index={idx}
active={movingIndex === idx}
prefixCls={prefixCls}
vertical={isVertical}
resizable={resizableInfo.resizable}
ariaNow={stackSizes[idx] * 100}
ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
startCollapsible={resizableInfo.startCollapsible}
endCollapsible={resizableInfo.endCollapsible}
onOffsetStart={onInternalResizeStart}
onOffsetUpdate={(index, offsetX, offsetY) => {
let offset = isVertical ? offsetY : offsetX;
if (reverse) {
offset = -offset;
}
onInternalResizeUpdate(index, offset);
}}
onOffsetEnd={onInternalResizeEnd}
onCollapse={onInternalCollapse}
/>
);
})}
</div>
</ResizeObserver>
}
{/* Fake mask for cursor */}
{typeof movingIndex === 'number' && (
<div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
)}
</>,
return (
<React.Fragment key={`split-panel-${idx}`}>
{panel}
{splitBar}
</React.Fragment>
);
})}
{/* Fake mask for cursor */}
{typeof movingIndex === 'number' && (
<div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
)}
</div>
</ResizeObserver>,
);
};