2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-07-29 15:56:11 +08:00
|
|
|
import genMotionStyle from './motion';
|
|
|
|
|
|
|
|
export interface ComponentToken {
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 弹窗 z-index
|
|
|
|
* @descEN z-index of drawer
|
|
|
|
*/
|
2022-07-29 15:56:11 +08:00
|
|
|
zIndexPopup: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 底部区域横向内间距
|
|
|
|
* @descEN Horizontal padding of footer
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
footerPaddingBlock: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 底部区域纵向内间距
|
|
|
|
* @descEN Vertical padding of footer
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
footerPaddingInline: number;
|
2022-03-24 23:33:51 +08:00
|
|
|
}
|
|
|
|
|
2023-05-04 15:38:07 +08:00
|
|
|
export interface DrawerToken extends FullToken<'Drawer'> {}
|
|
|
|
|
2022-03-24 23:33:51 +08:00
|
|
|
// =============================== Base ===============================
|
2022-07-29 15:56:11 +08:00
|
|
|
const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
2022-03-24 23:33:51 +08:00
|
|
|
const {
|
2022-04-08 15:43:28 +08:00
|
|
|
componentCls,
|
2022-07-29 15:56:11 +08:00
|
|
|
zIndexPopup,
|
|
|
|
colorBgMask,
|
|
|
|
colorBgElevated,
|
2022-03-24 23:33:51 +08:00
|
|
|
motionDurationSlow,
|
2022-11-17 23:31:41 +08:00
|
|
|
motionDurationMid,
|
2022-07-29 15:56:11 +08:00
|
|
|
padding,
|
2022-03-24 23:33:51 +08:00
|
|
|
paddingLG,
|
2022-07-29 15:56:11 +08:00
|
|
|
fontSizeLG,
|
|
|
|
lineHeightLG,
|
2022-03-24 23:33:51 +08:00
|
|
|
lineWidth,
|
2022-05-17 20:22:26 +08:00
|
|
|
lineType,
|
|
|
|
colorSplit,
|
2022-07-29 15:56:11 +08:00
|
|
|
marginSM,
|
|
|
|
colorIcon,
|
|
|
|
colorIconHover,
|
|
|
|
colorText,
|
|
|
|
fontWeightStrong,
|
2023-05-09 19:24:50 +08:00
|
|
|
footerPaddingBlock,
|
|
|
|
footerPaddingInline,
|
2022-03-24 23:33:51 +08:00
|
|
|
} = token;
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
const wrapperCls = `${componentCls}-content-wrapper`;
|
|
|
|
|
2022-03-24 23:33:51 +08:00
|
|
|
return {
|
2022-07-29 15:56:11 +08:00
|
|
|
[componentCls]: {
|
2022-03-24 23:33:51 +08:00
|
|
|
position: 'fixed',
|
2022-07-29 15:56:11 +08:00
|
|
|
inset: 0,
|
|
|
|
zIndex: zIndexPopup,
|
|
|
|
pointerEvents: 'none',
|
|
|
|
|
2022-09-21 16:35:01 +08:00
|
|
|
'&-pure': {
|
|
|
|
position: 'relative',
|
2022-10-11 20:59:40 +08:00
|
|
|
background: colorBgElevated,
|
|
|
|
|
|
|
|
[`&${componentCls}-left`]: {
|
|
|
|
boxShadow: token.boxShadowDrawerLeft,
|
|
|
|
},
|
|
|
|
[`&${componentCls}-right`]: {
|
|
|
|
boxShadow: token.boxShadowDrawerRight,
|
|
|
|
},
|
|
|
|
[`&${componentCls}-top`]: {
|
|
|
|
boxShadow: token.boxShadowDrawerUp,
|
|
|
|
},
|
|
|
|
[`&${componentCls}-bottom`]: {
|
|
|
|
boxShadow: token.boxShadowDrawerDown,
|
|
|
|
},
|
2022-09-21 16:35:01 +08:00
|
|
|
},
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
'&-inline': {
|
2022-03-24 23:33:51 +08:00
|
|
|
position: 'absolute',
|
|
|
|
},
|
2022-07-29 15:56:11 +08:00
|
|
|
|
|
|
|
// ====================== Mask ======================
|
2022-04-08 15:43:28 +08:00
|
|
|
[`${componentCls}-mask`]: {
|
2022-03-24 23:33:51 +08:00
|
|
|
position: 'absolute',
|
2022-07-29 15:56:11 +08:00
|
|
|
inset: 0,
|
|
|
|
zIndex: zIndexPopup,
|
|
|
|
background: colorBgMask,
|
|
|
|
pointerEvents: 'auto',
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
// ==================== Content =====================
|
|
|
|
[wrapperCls]: {
|
|
|
|
position: 'absolute',
|
|
|
|
zIndex: zIndexPopup,
|
2023-06-09 18:21:55 +08:00
|
|
|
maxWidth: '100vw',
|
2022-07-29 15:56:11 +08:00
|
|
|
transition: `all ${motionDurationSlow}`,
|
2022-03-24 23:33:51 +08:00
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
'&-hidden': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
2022-07-29 15:56:11 +08:00
|
|
|
|
|
|
|
// Placement
|
2022-08-05 15:23:36 +08:00
|
|
|
[`&-left > ${wrapperCls}`]: {
|
2022-07-29 15:56:11 +08:00
|
|
|
top: 0,
|
|
|
|
bottom: 0,
|
|
|
|
left: {
|
|
|
|
_skip_check_: true,
|
|
|
|
value: 0,
|
|
|
|
},
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: token.boxShadowDrawerLeft,
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
2022-08-05 15:23:36 +08:00
|
|
|
[`&-right > ${wrapperCls}`]: {
|
2022-07-29 15:56:11 +08:00
|
|
|
top: 0,
|
|
|
|
right: {
|
|
|
|
_skip_check_: true,
|
|
|
|
value: 0,
|
|
|
|
},
|
|
|
|
bottom: 0,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: token.boxShadowDrawerRight,
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
2022-08-05 15:23:36 +08:00
|
|
|
[`&-top > ${wrapperCls}`]: {
|
2022-07-29 15:56:11 +08:00
|
|
|
top: 0,
|
|
|
|
insetInline: 0,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: token.boxShadowDrawerUp,
|
2022-07-29 15:56:11 +08:00
|
|
|
},
|
2022-08-05 15:23:36 +08:00
|
|
|
[`&-bottom > ${wrapperCls}`]: {
|
2022-07-29 15:56:11 +08:00
|
|
|
bottom: 0,
|
|
|
|
insetInline: 0,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: token.boxShadowDrawerDown,
|
2022-07-29 15:56:11 +08:00
|
|
|
},
|
2022-03-24 23:33:51 +08:00
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
[`${componentCls}-content`]: {
|
2022-03-24 23:33:51 +08:00
|
|
|
width: '100%',
|
2022-07-29 15:56:11 +08:00
|
|
|
height: '100%',
|
|
|
|
overflow: 'auto',
|
|
|
|
background: colorBgElevated,
|
|
|
|
pointerEvents: 'auto',
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
// ===================== Panel ======================
|
|
|
|
[`${componentCls}-wrapper-body`]: {
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
},
|
2022-03-24 23:33:51 +08:00
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
// Header
|
|
|
|
[`${componentCls}-header`]: {
|
|
|
|
display: 'flex',
|
|
|
|
flex: 0,
|
|
|
|
alignItems: 'center',
|
|
|
|
padding: `${padding}px ${paddingLG}px`,
|
|
|
|
fontSize: fontSizeLG,
|
|
|
|
lineHeight: lineHeightLG,
|
|
|
|
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
|
|
|
|
|
|
|
|
'&-title': {
|
|
|
|
display: 'flex',
|
|
|
|
flex: 1,
|
|
|
|
alignItems: 'center',
|
|
|
|
minWidth: 0,
|
|
|
|
minHeight: 0,
|
|
|
|
},
|
|
|
|
},
|
2022-03-24 23:33:51 +08:00
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
[`${componentCls}-extra`]: {
|
2022-11-07 23:32:46 +08:00
|
|
|
flex: 'none',
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
[`${componentCls}-close`]: {
|
|
|
|
display: 'inline-block',
|
|
|
|
marginInlineEnd: marginSM,
|
|
|
|
color: colorIcon,
|
|
|
|
fontWeight: fontWeightStrong,
|
|
|
|
fontSize: fontSizeLG,
|
|
|
|
fontStyle: 'normal',
|
|
|
|
lineHeight: 1,
|
|
|
|
textAlign: 'center',
|
|
|
|
textTransform: 'none',
|
|
|
|
textDecoration: 'none',
|
|
|
|
background: 'transparent',
|
|
|
|
border: 0,
|
|
|
|
outline: 0,
|
|
|
|
cursor: 'pointer',
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `color ${motionDurationMid}`,
|
2022-07-29 15:56:11 +08:00
|
|
|
textRendering: 'auto',
|
|
|
|
|
|
|
|
'&:focus, &:hover': {
|
|
|
|
color: colorIconHover,
|
|
|
|
textDecoration: 'none',
|
|
|
|
},
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
[`${componentCls}-title`]: {
|
|
|
|
flex: 1,
|
|
|
|
margin: 0,
|
|
|
|
color: colorText,
|
|
|
|
fontWeight: token.fontWeightStrong,
|
|
|
|
fontSize: fontSizeLG,
|
|
|
|
lineHeight: lineHeightLG,
|
|
|
|
},
|
|
|
|
|
|
|
|
// Body
|
|
|
|
[`${componentCls}-body`]: {
|
|
|
|
flex: 1,
|
|
|
|
minWidth: 0,
|
|
|
|
minHeight: 0,
|
|
|
|
padding: paddingLG,
|
|
|
|
overflow: 'auto',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Footer
|
|
|
|
[`${componentCls}-footer`]: {
|
|
|
|
flexShrink: 0,
|
2023-05-09 19:24:50 +08:00
|
|
|
padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
|
2022-07-29 15:56:11 +08:00
|
|
|
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
|
|
|
|
2022-07-29 15:56:11 +08:00
|
|
|
// ====================== RTL =======================
|
|
|
|
'&-rtl': {
|
|
|
|
direction: 'rtl',
|
|
|
|
},
|
2022-03-24 23:33:51 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-07-29 15:56:11 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Drawer',
|
2022-11-17 23:31:41 +08:00
|
|
|
(token) => {
|
2023-05-04 15:38:07 +08:00
|
|
|
const drawerToken = mergeToken<DrawerToken>(token, {});
|
2022-07-29 15:56:11 +08:00
|
|
|
|
|
|
|
return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
|
|
|
|
},
|
2022-11-17 23:31:41 +08:00
|
|
|
(token) => ({
|
2022-07-29 15:56:11 +08:00
|
|
|
zIndexPopup: token.zIndexPopupBase,
|
2023-05-09 19:24:50 +08:00
|
|
|
footerPaddingBlock: token.paddingXS,
|
|
|
|
footerPaddingInline: token.padding,
|
2022-07-29 15:56:11 +08:00
|
|
|
}),
|
|
|
|
);
|