ant-design/components/modal/style/confirmCmp.tsx
二货爱吃白萝卜 d3c2f75ed3
refactor: ConfirmModal layout to fix batch of bug (#44557)
* refactor: Modal confirm style

* test: fix test case

* chore: merge wireframe

* chore: modify limit

* test: update snapshot
2023-08-31 22:21:32 +08:00

116 lines
3.2 KiB
TypeScript

// Style as confirm component
import { prepareComponentToken, prepareToken, type ModalToken } from '.';
import { clearFix } from '../../style';
import { genSubStyleComponent, type GenerateStyle } from '../../theme/internal';
// ============================= Confirm ==============================
const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
const {
componentCls,
titleFontSize,
titleLineHeight,
modalConfirmIconSize,
fontSize,
lineHeight,
} = token;
const confirmComponentCls = `${componentCls}-confirm`;
const titleHeight = Math.round(titleFontSize * titleLineHeight);
const contentHeight = Math.round(fontSize * lineHeight);
return {
[confirmComponentCls]: {
'&-rtl': {
direction: 'rtl',
},
[`${token.antCls}-modal-header`]: {
display: 'none',
},
[`${confirmComponentCls}-body-wrapper`]: {
...clearFix(),
},
// ====================== Body ======================
[`${confirmComponentCls}-body`]: {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'start',
[`> ${token.iconCls}`]: {
flex: 'none',
fontSize: modalConfirmIconSize,
marginInlineEnd: token.marginSM,
marginTop: (contentHeight - modalConfirmIconSize) / 2,
},
[`&-has-title > ${token.iconCls}`]: {
marginTop: (titleHeight - modalConfirmIconSize) / 2,
},
},
[`${confirmComponentCls}-paragraph`]: {
display: 'flex',
flexDirection: 'column',
flex: 'auto',
rowGap: token.marginXS,
},
[`${confirmComponentCls}-title`]: {
color: token.colorTextHeading,
fontWeight: token.fontWeightStrong,
fontSize: titleFontSize,
lineHeight: titleLineHeight,
},
[`${confirmComponentCls}-content`]: {
color: token.colorText,
fontSize,
lineHeight,
},
// ===================== Footer =====================
[`${confirmComponentCls}-btns`]: {
textAlign: 'end',
marginTop: token.marginSM,
[`${token.antCls}-btn + ${token.antCls}-btn`]: {
marginBottom: 0,
marginInlineStart: token.marginXS,
},
},
},
[`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
color: token.colorError,
},
[`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
color: token.colorWarning,
},
[`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
color: token.colorInfo,
},
[`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
color: token.colorSuccess,
},
};
};
// ============================== Export ==============================
export default genSubStyleComponent(
['Modal', 'confirm'],
(token) => {
const modalToken = prepareToken(token);
return [genModalConfirmStyle(modalToken)];
},
prepareComponentToken,
{
// confirm is weak than modal since no conflict here
order: -1000,
},
);