2022-06-11 21:39:58 +08:00
|
|
|
import type React from 'react';
|
2023-03-08 17:20:17 +08:00
|
|
|
import { clearFix, genFocusStyle, resetComponent } from '../../style';
|
2022-06-21 00:34:51 +08:00
|
|
|
import { initFadeMotion, initZoomMotion } from '../../style/motion';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-06-27 14:25:59 +08:00
|
|
|
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
2016-04-27 20:44:36 +08:00
|
|
|
|
2022-04-26 22:45:39 +08:00
|
|
|
/** Component only token. Which will handle additional calculation of alias token */
|
|
|
|
export interface ComponentToken {
|
|
|
|
// Component token here
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 顶部背景色
|
|
|
|
* @descEN Background color of header
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
headerBg: string;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 标题行高
|
|
|
|
* @descEN Line height of title
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
titleLineHeight: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 标题字体大小
|
|
|
|
* @descEN Font size of title
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
titleFontSize: number;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 标题字体颜色
|
|
|
|
* @descEN Font color of title
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
titleColor: string;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 内容区域背景色
|
|
|
|
* @descEN Background color of content
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
contentBg: string;
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 底部区域背景色
|
|
|
|
* @descEN Background color of footer
|
|
|
|
*/
|
2023-05-09 19:24:50 +08:00
|
|
|
footerBg: string;
|
2022-04-26 22:45:39 +08:00
|
|
|
}
|
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
export interface ModalToken extends FullToken<'Modal'> {
|
2022-04-26 22:45:39 +08:00
|
|
|
// Custom token here
|
2023-04-26 21:55:58 +08:00
|
|
|
modalHeaderHeight: number;
|
2022-04-26 22:45:39 +08:00
|
|
|
modalBodyPadding: number;
|
|
|
|
modalHeaderPadding: string;
|
|
|
|
modalHeaderBorderWidth: number;
|
|
|
|
modalHeaderBorderStyle: string;
|
|
|
|
modalHeaderBorderColorSplit: string;
|
|
|
|
modalFooterBorderColorSplit: string;
|
|
|
|
modalFooterBorderStyle: string;
|
|
|
|
modalFooterPaddingVertical: number;
|
|
|
|
modalFooterPaddingHorizontal: number;
|
|
|
|
modalFooterBorderWidth: number;
|
|
|
|
modalIconHoverColor: string;
|
2023-05-09 19:24:50 +08:00
|
|
|
modalCloseIconColor: string;
|
|
|
|
modalCloseBtnSize: number;
|
|
|
|
modalConfirmIconSize: number;
|
2022-04-26 22:45:39 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function box(position: React.CSSProperties['position']): React.CSSProperties {
|
|
|
|
return {
|
|
|
|
position,
|
2022-04-27 21:04:09 +08:00
|
|
|
top: 0,
|
2022-05-02 10:46:36 +08:00
|
|
|
insetInlineEnd: 0,
|
2022-04-27 21:04:09 +08:00
|
|
|
bottom: 0,
|
2022-05-02 10:46:36 +08:00
|
|
|
insetInlineStart: 0,
|
2022-04-26 22:45:39 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2022-11-17 23:31:41 +08:00
|
|
|
export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> = (token) => {
|
2023-03-08 17:20:17 +08:00
|
|
|
const { componentCls, antCls } = token;
|
2022-04-26 22:45:39 +08:00
|
|
|
|
2022-06-21 00:34:51 +08:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
[`${componentCls}-root`]: {
|
2023-03-08 17:20:17 +08:00
|
|
|
[`${componentCls}${antCls}-zoom-enter, ${componentCls}${antCls}-zoom-appear`]: {
|
2022-06-21 00:34:51 +08:00
|
|
|
// reset scale avoid mousePosition bug
|
|
|
|
transform: 'none',
|
|
|
|
opacity: 0,
|
|
|
|
animationDuration: token.motionDurationSlow,
|
|
|
|
// https://github.com/ant-design/ant-design/issues/11777
|
|
|
|
userSelect: 'none',
|
|
|
|
},
|
2022-04-26 22:45:39 +08:00
|
|
|
|
2023-03-08 17:20:17 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/37329
|
|
|
|
// https://github.com/ant-design/ant-design/issues/40272
|
|
|
|
[`${componentCls}${antCls}-zoom-leave ${componentCls}-content`]: {
|
|
|
|
pointerEvents: 'none',
|
|
|
|
},
|
|
|
|
|
2022-06-21 00:34:51 +08:00
|
|
|
[`${componentCls}-mask`]: {
|
|
|
|
...box('fixed'),
|
|
|
|
zIndex: token.zIndexPopupBase,
|
|
|
|
height: '100%',
|
2022-06-29 21:24:29 +08:00
|
|
|
backgroundColor: token.colorBgMask,
|
2022-06-21 00:34:51 +08:00
|
|
|
|
|
|
|
[`${componentCls}-hidden`]: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
2022-04-26 22:45:39 +08:00
|
|
|
|
2022-06-21 00:34:51 +08:00
|
|
|
[`${componentCls}-wrap`]: {
|
|
|
|
...box('fixed'),
|
|
|
|
overflow: 'auto',
|
|
|
|
outline: 0,
|
|
|
|
WebkitOverflowScrolling: 'touch',
|
|
|
|
},
|
|
|
|
},
|
2022-04-26 22:45:39 +08:00
|
|
|
},
|
2022-06-21 00:34:51 +08:00
|
|
|
{ [`${componentCls}-root`]: initFadeMotion(token) },
|
|
|
|
];
|
|
|
|
};
|
2022-04-26 22:45:39 +08:00
|
|
|
|
2022-11-17 23:31:41 +08:00
|
|
|
const genModalStyle: GenerateStyle<ModalToken> = (token) => {
|
2022-04-26 22:45:39 +08:00
|
|
|
const { componentCls } = token;
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
return [
|
|
|
|
// ======================== Root =========================
|
|
|
|
{
|
|
|
|
[`${componentCls}-root`]: {
|
|
|
|
[`${componentCls}-wrap`]: {
|
|
|
|
zIndex: token.zIndexPopupBase,
|
|
|
|
position: 'fixed',
|
|
|
|
inset: 0,
|
|
|
|
overflow: 'auto',
|
|
|
|
outline: 0,
|
|
|
|
WebkitOverflowScrolling: 'touch',
|
|
|
|
},
|
|
|
|
[`${componentCls}-wrap-rtl`]: {
|
|
|
|
direction: 'rtl',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-centered`]: {
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
|
|
'&::before': {
|
|
|
|
display: 'inline-block',
|
|
|
|
width: 0,
|
|
|
|
height: '100%',
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
[componentCls]: {
|
|
|
|
top: 0,
|
|
|
|
display: 'inline-block',
|
|
|
|
paddingBottom: 0,
|
|
|
|
textAlign: 'start',
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
},
|
|
|
|
},
|
2022-04-28 09:45:53 +08:00
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`@media (max-width: ${token.screenSMMax})`]: {
|
|
|
|
[componentCls]: {
|
|
|
|
maxWidth: 'calc(100vw - 16px)',
|
|
|
|
margin: `${token.marginXS} auto`,
|
|
|
|
},
|
|
|
|
[`${componentCls}-centered`]: {
|
|
|
|
[componentCls]: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// ======================== Modal ========================
|
|
|
|
{
|
2022-04-26 22:45:39 +08:00
|
|
|
[componentCls]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
pointerEvents: 'none',
|
|
|
|
position: 'relative',
|
|
|
|
top: 100,
|
|
|
|
width: 'auto',
|
2022-05-13 14:33:50 +08:00
|
|
|
maxWidth: `calc(100vw - ${token.margin * 2}px)`,
|
2022-04-26 22:45:39 +08:00
|
|
|
margin: '0 auto',
|
|
|
|
paddingBottom: token.paddingLG,
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-title`]: {
|
2022-04-26 22:45:39 +08:00
|
|
|
margin: 0,
|
2023-05-09 19:24:50 +08:00
|
|
|
color: token.titleColor,
|
2022-05-13 14:33:50 +08:00
|
|
|
fontWeight: token.fontWeightStrong,
|
2023-05-09 19:24:50 +08:00
|
|
|
fontSize: token.titleFontSize,
|
|
|
|
lineHeight: token.titleLineHeight,
|
2022-04-26 22:45:39 +08:00
|
|
|
wordWrap: 'break-word',
|
|
|
|
},
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-content`]: {
|
2022-04-26 22:45:39 +08:00
|
|
|
position: 'relative',
|
2023-05-09 19:24:50 +08:00
|
|
|
backgroundColor: token.contentBg,
|
2022-04-26 22:45:39 +08:00
|
|
|
backgroundClip: 'padding-box',
|
|
|
|
border: 0,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusLG,
|
2023-02-03 11:20:21 +08:00
|
|
|
boxShadow: token.boxShadow,
|
2022-04-26 22:45:39 +08:00
|
|
|
pointerEvents: 'auto',
|
2022-10-25 17:04:36 +08:00
|
|
|
padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
|
2022-04-26 22:45:39 +08:00
|
|
|
},
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-close`]: {
|
2022-04-26 22:45:39 +08:00
|
|
|
position: 'absolute',
|
2023-04-26 21:55:58 +08:00
|
|
|
top: (token.modalHeaderHeight - token.modalCloseBtnSize) / 2,
|
|
|
|
insetInlineEnd: (token.modalHeaderHeight - token.modalCloseBtnSize) / 2,
|
2022-05-13 14:33:50 +08:00
|
|
|
zIndex: token.zIndexPopupBase + 10,
|
2022-04-26 22:45:39 +08:00
|
|
|
padding: 0,
|
2023-04-26 21:55:58 +08:00
|
|
|
color: token.modalCloseIconColor,
|
2022-05-13 14:33:50 +08:00
|
|
|
fontWeight: token.fontWeightStrong,
|
2022-04-26 22:45:39 +08:00
|
|
|
lineHeight: 1,
|
|
|
|
textDecoration: 'none',
|
|
|
|
background: 'transparent',
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2023-05-09 19:24:50 +08:00
|
|
|
width: token.modalCloseBtnSize,
|
|
|
|
height: token.modalCloseBtnSize,
|
2022-04-26 22:45:39 +08:00
|
|
|
border: 0,
|
|
|
|
outline: 0,
|
|
|
|
cursor: 'pointer',
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
|
2022-04-26 22:45:39 +08:00
|
|
|
|
|
|
|
'&-x': {
|
2023-05-09 19:24:50 +08:00
|
|
|
display: 'flex',
|
2022-04-26 22:45:39 +08:00
|
|
|
fontSize: token.fontSizeLG,
|
|
|
|
fontStyle: 'normal',
|
2022-09-20 21:50:36 +08:00
|
|
|
lineHeight: `${token.modalCloseBtnSize}px`,
|
2023-05-09 19:24:50 +08:00
|
|
|
justifyContent: 'center',
|
2022-04-26 22:45:39 +08:00
|
|
|
textTransform: 'none',
|
|
|
|
textRendering: 'auto',
|
|
|
|
},
|
|
|
|
|
2022-09-20 21:50:36 +08:00
|
|
|
'&:hover': {
|
2022-04-26 22:45:39 +08:00
|
|
|
color: token.modalIconHoverColor,
|
2022-09-20 21:50:36 +08:00
|
|
|
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
|
2022-04-26 22:45:39 +08:00
|
|
|
textDecoration: 'none',
|
|
|
|
},
|
2022-09-20 21:50:36 +08:00
|
|
|
|
|
|
|
'&:active': {
|
|
|
|
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContentHover,
|
|
|
|
},
|
|
|
|
|
|
|
|
...genFocusStyle(token),
|
2022-04-26 22:45:39 +08:00
|
|
|
},
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-header`]: {
|
2022-04-26 22:45:39 +08:00
|
|
|
color: token.colorText,
|
2023-05-09 19:24:50 +08:00
|
|
|
background: token.headerBg,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
2022-08-29 17:09:41 +08:00
|
|
|
marginBottom: token.marginXS,
|
2022-04-26 22:45:39 +08:00
|
|
|
},
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-body`]: {
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize: token.fontSize,
|
2022-04-26 22:45:39 +08:00
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
wordWrap: 'break-word',
|
|
|
|
},
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-footer`]: {
|
2022-04-27 21:04:09 +08:00
|
|
|
textAlign: 'end',
|
2023-05-09 19:24:50 +08:00
|
|
|
background: token.footerBg,
|
2022-08-29 17:09:41 +08:00
|
|
|
marginTop: token.marginSM,
|
2022-04-26 22:45:39 +08:00
|
|
|
|
|
|
|
[`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
|
|
|
|
marginBottom: 0,
|
2022-04-27 21:04:09 +08:00
|
|
|
marginInlineStart: token.marginXS,
|
2022-04-26 22:45:39 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
[`${componentCls}-open`]: {
|
2022-04-26 22:45:39 +08:00
|
|
|
overflow: 'hidden',
|
|
|
|
},
|
|
|
|
},
|
2022-06-11 21:39:58 +08:00
|
|
|
},
|
2022-04-26 22:45:39 +08:00
|
|
|
|
2022-06-11 21:39:58 +08:00
|
|
|
// ======================== Pure =========================
|
|
|
|
{
|
|
|
|
[`${componentCls}-pure-panel`]: {
|
|
|
|
top: 'auto',
|
|
|
|
padding: 0,
|
2022-09-22 15:14:53 +08:00
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
|
|
|
[`${componentCls}-content,
|
|
|
|
${componentCls}-body,
|
|
|
|
${componentCls}-confirm-body-wrapper`]: {
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
flex: 'auto',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-confirm-body`]: {
|
|
|
|
marginBottom: 'auto',
|
|
|
|
},
|
2022-04-26 22:45:39 +08:00
|
|
|
},
|
|
|
|
},
|
2022-06-11 21:39:58 +08:00
|
|
|
];
|
2022-04-26 22:45:39 +08:00
|
|
|
};
|
|
|
|
|
2022-11-17 23:31:41 +08:00
|
|
|
const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
|
2022-04-29 09:21:43 +08:00
|
|
|
const { componentCls } = token;
|
|
|
|
const confirmComponentCls = `${componentCls}-confirm`;
|
|
|
|
|
|
|
|
return {
|
2022-07-15 20:51:07 +08:00
|
|
|
[confirmComponentCls]: {
|
|
|
|
'&-rtl': {
|
|
|
|
direction: 'rtl',
|
|
|
|
},
|
|
|
|
[`${token.antCls}-modal-header`]: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
[`${confirmComponentCls}-body-wrapper`]: {
|
|
|
|
...clearFix(),
|
|
|
|
},
|
|
|
|
[`${confirmComponentCls}-body`]: {
|
|
|
|
display: 'flex',
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
|
|
[`${confirmComponentCls}-title`]: {
|
2022-09-13 18:09:58 +08:00
|
|
|
flex: '0 0 100%',
|
2022-07-15 20:51:07 +08:00
|
|
|
display: 'block',
|
|
|
|
// create BFC to avoid
|
|
|
|
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
|
|
|
overflow: 'hidden',
|
|
|
|
color: token.colorTextHeading,
|
|
|
|
fontWeight: token.fontWeightStrong,
|
2023-05-09 19:24:50 +08:00
|
|
|
fontSize: token.titleFontSize,
|
|
|
|
lineHeight: token.titleLineHeight,
|
2022-09-20 21:50:36 +08:00
|
|
|
|
|
|
|
[`+ ${confirmComponentCls}-content`]: {
|
|
|
|
marginBlockStart: token.marginXS,
|
2022-12-04 23:34:58 +08:00
|
|
|
flexBasis: '100%',
|
|
|
|
maxWidth: `calc(100% - ${token.modalConfirmIconSize + token.marginSM}px)`,
|
2022-09-20 21:50:36 +08:00
|
|
|
},
|
2022-04-29 09:21:43 +08:00
|
|
|
},
|
2022-07-15 20:51:07 +08:00
|
|
|
|
|
|
|
[`${confirmComponentCls}-content`]: {
|
|
|
|
color: token.colorText,
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize: token.fontSize,
|
2022-04-29 09:21:43 +08:00
|
|
|
},
|
2022-05-13 14:33:50 +08:00
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
[`> ${token.iconCls}`]: {
|
|
|
|
flex: 'none',
|
2022-08-29 17:09:41 +08:00
|
|
|
marginInlineEnd: token.marginSM,
|
2022-07-15 20:51:07 +08:00
|
|
|
fontSize: token.modalConfirmIconSize,
|
2022-04-29 09:21:43 +08:00
|
|
|
|
2022-09-13 18:09:58 +08:00
|
|
|
[`+ ${confirmComponentCls}-title`]: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
// `content` after `icon` should set marginLeft
|
|
|
|
[`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
|
2022-08-29 17:09:41 +08:00
|
|
|
marginInlineStart: token.modalConfirmIconSize + token.marginSM,
|
2022-04-29 09:21:43 +08:00
|
|
|
},
|
|
|
|
},
|
2022-07-15 20:51:07 +08:00
|
|
|
},
|
|
|
|
[`${confirmComponentCls}-btns`]: {
|
|
|
|
textAlign: 'end',
|
2022-08-29 17:09:41 +08:00
|
|
|
marginTop: token.marginSM,
|
2022-04-29 09:21:43 +08:00
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
[`${token.antCls}-btn + ${token.antCls}-btn`]: {
|
|
|
|
marginBottom: 0,
|
|
|
|
marginInlineStart: token.marginXS,
|
2022-04-29 09:21:43 +08:00
|
|
|
},
|
|
|
|
},
|
2022-07-15 20:51:07 +08:00
|
|
|
},
|
2022-04-29 09:21:43 +08:00
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
[`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
|
|
|
color: token.colorError,
|
|
|
|
},
|
2022-04-29 09:21:43 +08:00
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
[`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
|
2022-04-29 09:21:43 +08:00
|
|
|
${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
2022-07-15 20:51:07 +08:00
|
|
|
color: token.colorWarning,
|
|
|
|
},
|
2022-04-29 09:21:43 +08:00
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
[`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
|
|
|
color: token.colorInfo,
|
|
|
|
},
|
2022-04-29 09:21:43 +08:00
|
|
|
|
2022-07-15 20:51:07 +08:00
|
|
|
[`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
|
|
|
|
color: token.colorSuccess,
|
2022-04-29 09:21:43 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-11-17 23:31:41 +08:00
|
|
|
const genRTLStyle: GenerateStyle<ModalToken> = (token) => {
|
2022-05-02 10:46:36 +08:00
|
|
|
const { componentCls } = token;
|
|
|
|
return {
|
|
|
|
[`${componentCls}-root`]: {
|
|
|
|
[`${componentCls}-wrap-rtl`]: {
|
|
|
|
direction: 'rtl',
|
|
|
|
|
|
|
|
[`${componentCls}-confirm-body`]: {
|
2022-05-13 14:33:50 +08:00
|
|
|
direction: 'rtl',
|
2022-05-02 10:46:36 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-11-17 23:31:41 +08:00
|
|
|
const genWireframeStyle: GenerateStyle<ModalToken> = (token) => {
|
2022-09-13 11:52:56 +08:00
|
|
|
const { componentCls, antCls } = token;
|
|
|
|
const confirmComponentCls = `${componentCls}-confirm`;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[componentCls]: {
|
|
|
|
[`${componentCls}-content`]: {
|
|
|
|
padding: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-header`]: {
|
|
|
|
padding: token.modalHeaderPadding,
|
|
|
|
borderBottom: `${token.modalHeaderBorderWidth}px ${token.modalHeaderBorderStyle} ${token.modalHeaderBorderColorSplit}`,
|
|
|
|
marginBottom: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-body`]: {
|
|
|
|
padding: token.modalBodyPadding,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-footer`]: {
|
|
|
|
padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
|
|
|
|
borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
|
2022-09-13 11:52:56 +08:00
|
|
|
marginTop: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[confirmComponentCls]: {
|
|
|
|
[`${antCls}-modal-body`]: {
|
|
|
|
padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`,
|
|
|
|
},
|
|
|
|
[`${confirmComponentCls}-body`]: {
|
|
|
|
[`> ${token.iconCls}`]: {
|
|
|
|
marginInlineEnd: token.margin,
|
|
|
|
|
|
|
|
// `content` after `icon` should set marginLeft
|
|
|
|
[`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
|
|
|
|
marginInlineStart: token.modalConfirmIconSize + token.margin,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
[`${confirmComponentCls}-btns`]: {
|
|
|
|
marginTop: token.marginLG,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-04-26 22:45:39 +08:00
|
|
|
// ============================== Export ==============================
|
2023-04-26 21:55:58 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Modal',
|
|
|
|
(token) => {
|
|
|
|
const headerPaddingVertical = token.padding;
|
|
|
|
const headerFontSize = token.fontSizeHeading5;
|
|
|
|
const headerLineHeight = token.lineHeightHeading5;
|
|
|
|
|
|
|
|
const modalToken = mergeToken<ModalToken>(token, {
|
|
|
|
modalBodyPadding: token.paddingLG,
|
|
|
|
modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`,
|
|
|
|
modalHeaderBorderWidth: token.lineWidth,
|
|
|
|
modalHeaderBorderStyle: token.lineType,
|
|
|
|
modalHeaderBorderColorSplit: token.colorSplit,
|
|
|
|
modalHeaderHeight: headerLineHeight * headerFontSize + headerPaddingVertical * 2,
|
|
|
|
modalFooterBorderColorSplit: token.colorSplit,
|
|
|
|
modalFooterBorderStyle: token.lineType,
|
|
|
|
modalFooterPaddingVertical: token.paddingXS,
|
|
|
|
modalFooterPaddingHorizontal: token.padding,
|
|
|
|
modalFooterBorderWidth: token.lineWidth,
|
|
|
|
modalIconHoverColor: token.colorIconHover,
|
2023-05-09 19:24:50 +08:00
|
|
|
modalCloseIconColor: token.colorIcon,
|
|
|
|
modalCloseBtnSize: token.fontSize * token.lineHeight,
|
|
|
|
modalConfirmIconSize: token.fontSize * token.lineHeight,
|
2023-04-26 21:55:58 +08:00
|
|
|
});
|
|
|
|
return [
|
|
|
|
genModalStyle(modalToken),
|
|
|
|
genModalConfirmStyle(modalToken),
|
|
|
|
genRTLStyle(modalToken),
|
|
|
|
genModalMaskStyle(modalToken),
|
|
|
|
token.wireframe && genWireframeStyle(modalToken),
|
|
|
|
initZoomMotion(modalToken, 'zoom'),
|
|
|
|
];
|
|
|
|
},
|
|
|
|
(token) => ({
|
2023-05-09 19:24:50 +08:00
|
|
|
footerBg: 'transparent',
|
|
|
|
headerBg: token.colorBgElevated,
|
|
|
|
titleLineHeight: token.lineHeightHeading5,
|
|
|
|
titleFontSize: token.fontSizeHeading5,
|
|
|
|
contentBg: token.colorBgElevated,
|
|
|
|
titleColor: token.colorTextHeading,
|
2023-04-26 21:55:58 +08:00
|
|
|
}),
|
|
|
|
);
|