2022-05-09 22:20:07 +08:00
|
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2022-06-27 14:25:59 +08:00
|
|
|
|
import type { FullToken, GenerateStyle } from '../../theme';
|
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme';
|
2022-04-02 18:17:14 +08:00
|
|
|
|
|
|
|
|
|
/** Component only token. Which will handle additional calculation of alias token */
|
|
|
|
|
export interface ComponentToken {}
|
|
|
|
|
|
2022-05-17 18:39:13 +08:00
|
|
|
|
interface EmptyToken extends FullToken<'Empty'> {
|
2022-04-02 18:17:14 +08:00
|
|
|
|
emptyImgCls: string;
|
2022-05-18 15:37:27 +08:00
|
|
|
|
emptyImgHeight: number;
|
|
|
|
|
emptyImgHeightSM: number;
|
|
|
|
|
emptyImgHeightMD: number;
|
2022-04-02 18:17:14 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ============================== Shared ==============================
|
|
|
|
|
const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
|
2022-11-01 15:06:38 +08:00
|
|
|
|
const { componentCls, margin, marginXS, marginXL, fontSize, lineHeight } = token;
|
2022-04-02 18:17:14 +08:00
|
|
|
|
|
|
|
|
|
return {
|
2022-05-17 18:39:13 +08:00
|
|
|
|
[componentCls]: {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
marginInline: marginXS,
|
2022-11-01 15:06:38 +08:00
|
|
|
|
fontSize,
|
2022-05-18 15:37:27 +08:00
|
|
|
|
lineHeight,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
|
|
|
|
// 原来 &-image 没有父子结构,现在为了外层承担我们的hashId,改成父子结果
|
2022-05-17 18:39:13 +08:00
|
|
|
|
[`${componentCls}-image`]: {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
height: token.emptyImgHeight,
|
|
|
|
|
marginBottom: marginXS,
|
2022-06-17 18:47:47 +08:00
|
|
|
|
opacity: token.opacityImage,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
|
|
|
|
|
img: {
|
|
|
|
|
height: '100%',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
svg: {
|
|
|
|
|
height: '100%',
|
|
|
|
|
margin: 'auto',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 原来 &-footer 没有父子结构,现在为了外层承担我们的hashId,改成父子结果
|
2022-05-17 18:39:13 +08:00
|
|
|
|
[`${componentCls}-footer`]: {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
marginTop: margin,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
'&-normal': {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
marginBlock: marginXL,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
color: token.colorTextDisabled,
|
|
|
|
|
|
2022-05-17 18:39:13 +08:00
|
|
|
|
[`${componentCls}-image`]: {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
height: token.emptyImgHeightMD,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
'&-small': {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
marginBlock: marginXS,
|
|
|
|
|
color: token.colorTextDisabled,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
|
2022-05-17 18:39:13 +08:00
|
|
|
|
[`${componentCls}-image`]: {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
height: token.emptyImgHeightSM,
|
2022-04-02 18:17:14 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-11-19 13:47:33 +08:00
|
|
|
|
export default genComponentStyleHook('Empty', (token) => {
|
2022-05-18 15:37:27 +08:00
|
|
|
|
const { componentCls, controlHeightLG } = token;
|
|
|
|
|
|
|
|
|
|
const emptyToken: EmptyToken = mergeToken<EmptyToken>(token, {
|
|
|
|
|
emptyImgCls: `${componentCls}-img`,
|
|
|
|
|
emptyImgHeight: controlHeightLG * 2.5,
|
|
|
|
|
emptyImgHeightMD: controlHeightLG,
|
|
|
|
|
emptyImgHeightSM: controlHeightLG * 0.875,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return [genSharedEmptyStyle(emptyToken)];
|
2022-05-17 18:39:13 +08:00
|
|
|
|
});
|