test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 19:19:26 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix(Collapse): end motion when set activeKey while hiding (#30555)

Browse Source
This commit is contained in:
JuFeng Zhang 2021-05-18 13:02:17 +08:00 committed by GitHub
parent 0f2ca5d10a
commit 88c4aef1c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_util/motion.tsx
View File

@ -1,11 +1,12 @@
import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
import { MotionEvent } from 'rc-motion/lib/interface';
// ================== Collapse Motion ==================
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
(event as TransitionEvent).propertyName === 'height';
const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
const collapseMotion: CSSMotionProps = {
motionName: 'ant-motion-collapse',

36
components/collapse/__tests__/index.test.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { sleep } from '../../../tests/utils';
import { resetWarned } from '../../_util/devWarning';
@ -101,4 +102,39 @@ describe('Collapse', () => {
wrapper.find('.ant-collapse-header').simulate('click');
expect(wrapper.find('.ant-collapse-item-active').length).toBe(0);
});
it('should end motion when set activeKey while hiding', async () => {
jest.useFakeTimers();
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
setTimeout(cb, 16.66);
});
let setActiveKeyOuter;
const Test = () => {
const [activeKey, setActiveKey] = React.useState();
setActiveKeyOuter = setActiveKey;
return (
<div hidden>
<Collapse activeKey={activeKey}>
<Collapse.Panel header="header" key="1">
content
</Collapse.Panel>
</Collapse>
</div>
);
};
const wrapper = mount(<Test />);
await act(async () => {
setActiveKeyOuter('1');
await Promise.resolve();
jest.runAllTimers();
});
expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0);
window.requestAnimationFrame.mockRestore();
jest.useRealTimers();
});
});