test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 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 }; const mergedStyle: React.CSSProperties = { ...splitter?.style, ...style };
return wrapCSSVar( return wrapCSSVar(
<> <ResizeObserver onResize={onContainerResize}>
<ResizeObserver onResize={onContainerResize}> <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={itemPxSizes[idx]} />;
// Split Bar // Split Bar
let splitBar: React.ReactElement | null = null; let splitBar: React.ReactElement | null = null;
const resizableInfo = resizableInfos[idx]; const resizableInfo = resizableInfos[idx];
if (resizableInfo) { if (resizableInfo) {
const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx]; const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1]; const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx]; const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1]; const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
splitBar = ( splitBar = (
<SplitBar <SplitBar
index={idx} index={idx}
active={movingIndex === idx} active={movingIndex === idx}
prefixCls={prefixCls} prefixCls={prefixCls}
vertical={isVertical} vertical={isVertical}
resizable={resizableInfo.resizable} resizable={resizableInfo.resizable}
ariaNow={stackSizes[idx] * 100} ariaNow={stackSizes[idx] * 100}
ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100} ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100} ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
startCollapsible={resizableInfo.startCollapsible} startCollapsible={resizableInfo.startCollapsible}
endCollapsible={resizableInfo.endCollapsible} endCollapsible={resizableInfo.endCollapsible}
onOffsetStart={onInternalResizeStart} onOffsetStart={onInternalResizeStart}
onOffsetUpdate={(index, offsetX, offsetY) => { onOffsetUpdate={(index, offsetX, offsetY) => {
let offset = isVertical ? offsetY : offsetX; let offset = isVertical ? offsetY : offsetX;
if (reverse) { if (reverse) {
offset = -offset; offset = -offset;
} }
onInternalResizeUpdate(index, offset); onInternalResizeUpdate(index, offset);
}} }}
onOffsetEnd={onInternalResizeEnd} onOffsetEnd={onInternalResizeEnd}
onCollapse={onInternalCollapse} onCollapse={onInternalCollapse}
/> />
);
}
return (
<React.Fragment key={`split-panel-${idx}`}>
{panel}
{splitBar}
</React.Fragment>
); );
})} }
</div>
</ResizeObserver>
{/* Fake mask for cursor */} return (
{typeof movingIndex === 'number' && ( <React.Fragment key={`split-panel-${idx}`}>
<div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} /> {panel}
)} {splitBar}
</>, </React.Fragment>
);
})}
{/* Fake mask for cursor */}
{typeof movingIndex === 'number' && (
<div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
)}
</div>
</ResizeObserver>,
); );
}; };