archive/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-15 13:38:29 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Mask not hiding correctly (#53767)

Browse source
This commit is contained in:
Wanpan 2025-05-08 15:57:30 +08:00 • committed by GitHub
parent 026c4d03de
commit ece2591bf1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
BUG_VERSIONS.json
View file

@ -76,5 +76,6 @@
"https://github.com/ant-design/ant-design/issues/51430"
],
"5.22.6": ["https://github.com/ant-design/ant-design/issues/52124"],
"5.24.8": ["https://github.com/ant-design/ant-design/issues/53652"]
"5.24.8": ["https://github.com/ant-design/ant-design/issues/53652"],
"5.25.0": ["https://github.com/ant-design/ant-design/issues/53764"]
}

7
components/splitter/Splitter.tsx
View file

@ -120,11 +120,11 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
});
const onInternalResizeEnd = useEvent((lazyEnd?: boolean) => {
if (lazyEnd) {
onOffsetEnd();
return;
}
if (!lazyEnd) {
onResizeEnd?.(itemPxSizes);
}
});
const onInternalCollapse = useEvent((index: number, type: 'start' | 'end') => {
@ -218,6 +218,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
</React.Fragment>
);
})}
{/* Fake mask for cursor */}
{typeof movingIndex === 'number' && (
<div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />

12
components/splitter/__tests__/index.test.tsx
View file

@ -103,7 +103,7 @@ describe('Splitter', () => {
// ============================== Resizable ==============================
describe('drag', () => {
function mockDrag(draggerEle: HTMLElement, offset: number) {
function mockDrag(draggerEle: HTMLElement, offset: number, container?: HTMLElement) {
// Down
const downEvent = createEvent.mouseDown(draggerEle);
(downEvent as any).pageX = 0;
@ -117,6 +117,11 @@ describe('Splitter', () => {
(moveEvent as any).pageY = offset;
fireEvent(draggerEle, moveEvent);
// mask should exist
if (container) {
expect(container.querySelector('.ant-splitter-mask')).toBeTruthy();
}
// Up
fireEvent.mouseUp(draggerEle);
}
@ -153,7 +158,7 @@ describe('Splitter', () => {
await resizeSplitter();
// Right
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40, container);
expect(onResize).toHaveBeenCalledWith([90, 10]);
expect(onResizeEnd).toHaveBeenCalledTimes(1);
expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
@ -162,6 +167,9 @@ describe('Splitter', () => {
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -200);
expect(onResize).toHaveBeenCalledWith([0, 100]);
expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
// mask should hide
expect(container.querySelector('.ant-splitter-mask')).toBeFalsy();
});
it('The touchMove should work fine', async () => {

14
components/splitter/__tests__/lazy.test.tsx
View file

@ -49,7 +49,12 @@ describe('Splitter lazy', () => {
jest.useRealTimers();
});
const mockDrag = (draggerEle: HTMLElement, onResize: jest.Mock, offset: number) => {
const mockDrag = (
draggerEle: HTMLElement,
onResize: jest.Mock,
offset: number,
container?: HTMLElement,
) => {
// Down
const downEvent = createEvent.mouseDown(draggerEle);
(downEvent as any).pageX = 0;
@ -63,6 +68,11 @@ describe('Splitter lazy', () => {
(moveEvent as any).pageY = offset;
fireEvent(window, moveEvent);
// mask should exist
if (container) {
expect(container.querySelector('.ant-splitter-mask')).toBeTruthy();
}
expect(onResize).not.toHaveBeenCalled();
// Up
@ -115,7 +125,7 @@ describe('Splitter lazy', () => {
await resizeSplitter();
// Right
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000, container);
expect(onResizeEnd).toHaveBeenCalledTimes(1);
expect(onResizeEnd).toHaveBeenCalledWith([70, 30]);