mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
refactor: cssinjs for Result (#34317)
* refactor: cssinjs for Result * chore: add some comments * style: use marign inline to remove rtl styles
This commit is contained in:
vagusX
GitHub
parent
8b1e5a2ab5
commit
4459a200bb
@ -37,7 +37,12 @@ const defaultDesignToken: DesignToken = {
|
||||
padding: 16,
|
||||
margin: 16,
|
||||
|
||||
// Default grey background color
|
||||
background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
// background of header and selected item
|
||||
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
|
||||
componentBackground: '#fff',
|
||||
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
|
||||
@ -42,6 +42,8 @@ export interface DesignToken {
|
||||
margin: number;
|
||||
|
||||
background: string;
|
||||
backgroundLight: string;
|
||||
|
||||
componentBackground: string;
|
||||
componentBackgroundDisabled: string;
|
||||
|
||||
|
||||
@ -12,6 +12,8 @@ import noFound from './noFound';
|
||||
import serverError from './serverError';
|
||||
import unauthorized from './unauthorized';
|
||||
|
||||
import useStyle from './style';
|
||||
|
||||
export const IconMap = {
|
||||
success: CheckCircleFilled,
|
||||
error: CloseCircleFilled,
|
||||
@ -92,20 +94,29 @@ const Result: ResultType = ({
|
||||
icon,
|
||||
extra,
|
||||
}) => {
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
|
||||
|
||||
const prefixCls = getPrefixCls('result', customizePrefixCls);
|
||||
const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
|
||||
const className = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-${status}`,
|
||||
customizeClassName,
|
||||
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
|
||||
hashId,
|
||||
);
|
||||
|
||||
return wrapSSR(
|
||||
<div className={className} style={style}>
|
||||
{renderIcon(prefixCls, { status, icon })}
|
||||
<div className={`${prefixCls}-title`}>{title}</div>
|
||||
{subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
|
||||
{renderExtra(prefixCls, { extra })}
|
||||
{children && <div className={`${prefixCls}-content`}>{children}</div>}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,75 +1,75 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@result-prefix-cls: ~'@{ant-prefix}-result';
|
||||
// @result-prefix-cls: ~'@{ant-prefix}-result';
|
||||
|
||||
.@{result-prefix-cls} {
|
||||
padding: 48px 32px;
|
||||
// status color
|
||||
&-success &-icon > .@{iconfont-css-prefix} {
|
||||
color: @success-color;
|
||||
}
|
||||
// .@{result-prefix-cls} {
|
||||
// padding: 48px 32px;
|
||||
// // status color
|
||||
// &-success &-icon > .@{iconfont-css-prefix} {
|
||||
// color: @success-color;
|
||||
// }
|
||||
|
||||
&-error &-icon > .@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
// &-error &-icon > .@{iconfont-css-prefix} {
|
||||
// color: @error-color;
|
||||
// }
|
||||
|
||||
&-info &-icon > .@{iconfont-css-prefix} {
|
||||
color: @info-color;
|
||||
}
|
||||
// &-info &-icon > .@{iconfont-css-prefix} {
|
||||
// color: @info-color;
|
||||
// }
|
||||
|
||||
&-warning &-icon > .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
}
|
||||
// &-warning &-icon > .@{iconfont-css-prefix} {
|
||||
// color: @warning-color;
|
||||
// }
|
||||
|
||||
// Exception Status image
|
||||
&-image {
|
||||
width: 250px;
|
||||
height: 295px;
|
||||
margin: auto;
|
||||
}
|
||||
// // Exception Status image
|
||||
// &-image {
|
||||
// width: 250px;
|
||||
// height: 295px;
|
||||
// margin: auto;
|
||||
// }
|
||||
|
||||
&-icon {
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
// &-icon {
|
||||
// margin-bottom: 24px;
|
||||
// text-align: center;
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: @result-icon-font-size;
|
||||
}
|
||||
}
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// font-size: @result-icon-font-size;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-title {
|
||||
color: @heading-color;
|
||||
font-size: @result-title-font-size;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
}
|
||||
// &-title {
|
||||
// color: @heading-color;
|
||||
// font-size: @result-title-font-size;
|
||||
// line-height: 1.8;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
&-subtitle {
|
||||
color: @text-color-secondary;
|
||||
font-size: @result-subtitle-font-size;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
// &-subtitle {
|
||||
// color: @text-color-secondary;
|
||||
// font-size: @result-subtitle-font-size;
|
||||
// line-height: 1.6;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
&-extra {
|
||||
margin: @result-extra-margin;
|
||||
text-align: center;
|
||||
// &-extra {
|
||||
// margin: @result-extra-margin;
|
||||
// text-align: center;
|
||||
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
// > * {
|
||||
// margin-right: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:last-child {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-content {
|
||||
margin-top: 24px;
|
||||
padding: 24px 40px;
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
}
|
||||
// &-content {
|
||||
// margin-top: 24px;
|
||||
// padding: 24px 40px;
|
||||
// background-color: @background-color-light;
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,2 +1,163 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
DerivativeToken,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
UseComponentStyleResult,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface ResultToken extends DerivativeToken {
|
||||
resultTitleFontSize: number;
|
||||
resultSubtitleFontSize: number;
|
||||
resultIconFontSize: number;
|
||||
|
||||
resultExtraMargin: string;
|
||||
|
||||
resultInfoIconColor: string;
|
||||
resultSuccessIconColor: string;
|
||||
resultWarningIconColor: string;
|
||||
resultErrorIconColor: string;
|
||||
}
|
||||
|
||||
// ============================== Styles ==============================
|
||||
const genBaseStyle = (
|
||||
resultCls: string,
|
||||
dotIconPrefixCls: string,
|
||||
token: ResultToken,
|
||||
): CSSObject => ({
|
||||
// Result
|
||||
[resultCls]: {
|
||||
padding: `${token.padding * 3}px ${token.padding * 2}px`,
|
||||
},
|
||||
|
||||
// Exception Status image
|
||||
[`${resultCls} ${resultCls}-image`]: {
|
||||
// FIXME: hard code
|
||||
width: 250,
|
||||
height: 295,
|
||||
margin: 'auto',
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-icon`]: {
|
||||
marginBottom: token.padding * 1.5,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-icon > ${dotIconPrefixCls}`]: {
|
||||
fontSize: token.resultIconFontSize,
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-title`]: {
|
||||
color: token.headingColor,
|
||||
fontSize: token.resultTitleFontSize,
|
||||
// FIXME: hard code
|
||||
lineHeight: 1.8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-subtitle`]: {
|
||||
color: token.textColorSecondary,
|
||||
fontSize: token.resultSubtitleFontSize,
|
||||
// FIXME: hard code
|
||||
lineHeight: 1.6,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-content`]: {
|
||||
marginTop: token.padding * 1.5,
|
||||
padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
|
||||
backgroundColor: token.backgroundLight,
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-extra`]: {
|
||||
margin: token.resultExtraMargin,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-extra > *`]: {
|
||||
marginInlineEnd: token.paddingXS,
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-extra > *:last-child`]: {
|
||||
marginInlineEnd: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const genStatusIconStyle = (
|
||||
resultCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: ResultToken,
|
||||
): CSSObject => ({
|
||||
[`${resultCls}-success ${resultCls}-icon > ${iconPrefixCls}`]: {
|
||||
color: token.resultSuccessIconColor,
|
||||
},
|
||||
[`${resultCls}-error ${resultCls}-icon > ${iconPrefixCls}`]: {
|
||||
color: token.resultErrorIconColor,
|
||||
},
|
||||
[`${resultCls}-info ${resultCls}-icon > ${iconPrefixCls}`]: {
|
||||
color: token.resultInfoIconColor,
|
||||
},
|
||||
[`${resultCls}-warning ${resultCls}-icon > ${iconPrefixCls}`]: {
|
||||
color: token.resultWarningIconColor,
|
||||
},
|
||||
});
|
||||
|
||||
export const genResultStyle = (
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: DerivativeToken,
|
||||
): CSSInterpolation => {
|
||||
const resultCls = `.${prefixCls}`;
|
||||
const dotIconPrefixCls = `.${iconPrefixCls}`;
|
||||
|
||||
// compact 20
|
||||
// FIXME: maybe we need a new token for fontSize 12px
|
||||
const resultTitleFontSize = 24;
|
||||
const resultSubtitleFontSize = token.fontSize;
|
||||
// compact 64
|
||||
// FIXME: maybe we need a new token for fontSize 12px
|
||||
const resultIconFontSize = 72;
|
||||
const resultExtraMargin = `${token.padding * 1.5}px 0 0 0`;
|
||||
|
||||
const resultInfoIconColor = token.infoColor;
|
||||
const resultErrorIconColor = token.errorColor;
|
||||
const resultSuccessIconColor = token.successColor;
|
||||
const resultWarningIconColor = token.warningColor;
|
||||
|
||||
const resultToken = {
|
||||
...token,
|
||||
resultTitleFontSize,
|
||||
resultSubtitleFontSize,
|
||||
resultIconFontSize,
|
||||
resultExtraMargin,
|
||||
resultInfoIconColor,
|
||||
resultErrorIconColor,
|
||||
resultSuccessIconColor,
|
||||
resultWarningIconColor,
|
||||
};
|
||||
|
||||
return [
|
||||
genBaseStyle(resultCls, dotIconPrefixCls, resultToken),
|
||||
genStatusIconStyle(resultCls, dotIconPrefixCls, resultToken),
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export function getStyle(prefixCls: string, iconPrefixCls: string, token: DerivativeToken) {
|
||||
return [genResultStyle(prefixCls, iconPrefixCls, token)];
|
||||
}
|
||||
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
|
||||
getStyle(prefixCls, iconPrefixCls, token),
|
||||
),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user