ant-design/components/_util/motion.tsx
二货机器人 7a3bf8287f
feat: Form rule support warningOnly that not block form submit (#30829)
* chore: bump rc-field-form

* docs: Demo driven

* refactor: Use event instead

* chore: collection logic update

* chore: clean up

* chore: show warning

* chore: warning no need required mark

* feat: warning example

* docs: mix error

* chore: tmp list

* chore: magic code

* chore: fix motion

* chore: fix style

* chore: clean up useless code

* chore: RM useless import

* chore: RM useless file

* test: Update snapshot

* chore: Should reset

* fix: Memo logic

* fix: Form basic test case

* fix: lint

* chore: back of ref

* test: Update snapshot

* test: RM ueseless test case

* chore: RM useless code
2021-06-04 14:44:41 +08:00

36 lines
1.3 KiB
TypeScript

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 => {
const { scrollHeight } = node;
return { height: scrollHeight, opacity: 1 };
};
const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
const collapseMotion: CSSMotionProps = {
motionName: 'ant-motion-collapse',
onAppearStart: getCollapsedHeight,
onEnterStart: getCollapsedHeight,
onAppearActive: getRealHeight,
onEnterActive: getRealHeight,
onLeaveStart: getCurrentHeight,
onLeaveActive: getCollapsedHeight,
onAppearEnd: skipOpacityTransition,
onEnterEnd: skipOpacityTransition,
onLeaveEnd: skipOpacityTransition,
motionDeadline: 500,
};
const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
if (transitionName !== undefined) {
return transitionName;
}
return `${rootPrefixCls}-${motion}`;
};
export { getTransitionName };
export default collapseMotion;