Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Drawer motion style #47194

Merged
merged 12 commits into from
Jan 27, 2024
Merged

refactor: Drawer motion style #47194

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e8d443a
refactor: rewrite drawer motion style code
afc163 Jan 9, 2024
77018aa
style: improve Drawer motion
afc163 Jan 9, 2024
48ee0b8
refactor: simpify style code
afc163 Jan 9, 2024
a70131e
test: fix test coverage
afc163 Jan 9, 2024
c95cfca
test: fix test coverage
afc163 Jan 9, 2024
2d56d0d
chore: remove !important
afc163 Jan 9, 2024
1109795
chore: revert refactor code
afc163 Jan 9, 2024
720e506
refactor: simpify style code
afc163 Jan 9, 2024
e01df97
refactor: simpify style code
afc163 Jan 9, 2024
8fd7b4d
refactor: simpify style code
afc163 Jan 9, 2024
79c047f
refactor: simpify style code
afc163 Jan 9, 2024
a22af4a
revert: move distance to 100%
afc163 Jan 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
178 changes: 61 additions & 117 deletions components/drawer/style/motion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,76 @@
import type { DrawerToken } from '.';
import type { GenerateStyle } from '../../theme/internal';

const genMotionStyle: GenerateStyle<DrawerToken> = (token) => {
const { componentCls, motionDurationSlow } = token;
type Direction = 'left' | 'right' | 'top' | 'bottom';

const getMoveTranslate = (direction: Direction) => {
const value = '100%';
afc163 marked this conversation as resolved.
Show resolved Hide resolved
return {
left: `translateX(-${value})`,
right: `translateX(${value})`,
top: `translateY(-${value})`,
bottom: `translateY(${value})`,
}[direction];
};

const sharedPanelMotion = {
'&-enter, &-appear, &-leave': {
'&-start': {
transition: 'none',
},
const getEnterLeaveStyle = (startStyle: React.CSSProperties, endStyle: React.CSSProperties) => ({
'&-enter, &-appear': {
...startStyle,
'&-active': endStyle,
},
'&-leave': {
...endStyle,
'&-active': startStyle,
},
});

'&-active': {
transition: `all ${motionDurationSlow}`,
},
const getFadeStyle = (from: number, duration: string) => ({
'&-enter, &-appear, &-leave': {
'&-start': {
transition: 'none',
},
};
'&-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;

return {
[componentCls]: {
// ======================== Mask ========================
[`${componentCls}-mask-motion`]: {
'&-enter, &-appear, &-leave': {
'&-active': {
transition: `all ${motionDurationSlow}`,
},
},

'&-enter, &-appear': {
opacity: 0,
'&-active': {
opacity: 1,
},
},

'&-leave': {
opacity: 1,
'&-active': {
opacity: 0,
},
},
},
[`${componentCls}-mask-motion`]: getFadeStyle(0, motionDurationSlow),

// ======================= Panel ========================
[`${componentCls}-panel-motion`]: {
// Left
'&-left': [
sharedPanelMotion,
{
'&-enter, &-appear': {
'&-start': {
transform: 'translateX(-100%) !important',
},
'&-active': {
transform: 'translateX(0)',
},
},
'&-leave': {
transform: 'translateX(0)',
'&-active': {
transform: 'translateX(-100%)',
},
},
},
],

// Right
'&-right': [
sharedPanelMotion,
{
'&-enter, &-appear': {
'&-start': {
transform: 'translateX(100%) !important',
},
'&-active': {
transform: 'translateX(0)',
},
},
'&-leave': {
transform: 'translateX(0)',
'&-active': {
transform: 'translateX(100%)',
},
},
},
],

// Top
'&-top': [
sharedPanelMotion,
{
'&-enter, &-appear': {
'&-start': {
transform: 'translateY(-100%) !important',
},
'&-active': {
transform: 'translateY(0)',
},
},
'&-leave': {
transform: 'translateY(0)',
'&-active': {
transform: 'translateY(-100%)',
},
},
},
],

// Bottom
'&-bottom': [
sharedPanelMotion,
{
'&-enter, &-appear': {
'&-start': {
transform: 'translateY(100%) !important',
},
'&-active': {
transform: 'translateY(0)',
},
},
'&-leave': {
transform: 'translateY(0)',
'&-active': {
transform: 'translateY(100%)',
},
},
},
],
},
[`${componentCls}-panel-motion`]: ['left', 'right', 'top', 'bottom'].reduce(
(obj, direction: Direction) => ({
...obj,
[`&-${direction}`]: getPanelMotionStyles(direction, motionDurationSlow),
}),
{},
),
},
};
};
Expand Down