ant-design/components/drawer/style/motion.ts

79 lines
1.8 KiB
TypeScript
Raw Normal View History

2022-07-29 16:19:01 +08:00
import type { DrawerToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
2022-07-29 16:19:01 +08:00
type Direction = 'left' | 'right' | 'top' | 'bottom';
const getMoveTranslate = (direction: Direction) => {
const value = '100%';
return {
left: `translateX(-${value})`,
right: `translateX(${value})`,
top: `translateY(-${value})`,
bottom: `translateY(${value})`,
}[direction];
};
2022-07-29 16:19:01 +08:00
const getEnterLeaveStyle = (startStyle: React.CSSProperties, endStyle: React.CSSProperties) => ({
'&-enter, &-appear': {
...startStyle,
'&-active': endStyle,
},
'&-leave': {
...endStyle,
'&-active': startStyle,
},
});
2022-07-29 16:19:01 +08:00
const getFadeStyle = (from: number, duration: string) => ({
'&-enter, &-appear, &-leave': {
'&-start': {
transition: 'none',
2022-07-29 16:19:01 +08:00
},
'&-active': {
transition: `all ${duration}`,
},
},
...getEnterLeaveStyle(
{
opacity: from,
},
{
opacity: 1,
},
),
});
const getPanelMotionStyles = (direction: Direction, duration: string) => [
getFadeStyle(0.7, duration),
getEnterLeaveStyle(
{
transform: getMoveTranslate(direction),
},
{
transform: 'none',
},
),
];
const genMotionStyle: GenerateStyle<DrawerToken> = (token) => {
const { componentCls, motionDurationSlow } = token;
2022-07-29 16:19:01 +08:00
return {
[componentCls]: {
// ======================== Mask ========================
[`${componentCls}-mask-motion`]: getFadeStyle(0, motionDurationSlow),
2022-07-29 16:19:01 +08:00
// ======================= Panel ========================
[`${componentCls}-panel-motion`]: ['left', 'right', 'top', 'bottom'].reduce(
(obj, direction) => ({
...obj,
[`&-${direction}`]: getPanelMotionStyles(direction as Direction, motionDurationSlow),
}),
{},
),
2022-07-29 16:19:01 +08:00
},
};
};
export default genMotionStyle;