From 4459a200bb6d8a1835ff73671b2eac61ef296006 Mon Sep 17 00:00:00 2001 From: vagusX Date: Mon, 7 Mar 2022 14:20:10 +0800 Subject: [PATCH] refactor: cssinjs for Result (#34317) * refactor: cssinjs for Result * chore: add some comments * style: use marign inline to remove rtl styles --- components/_util/theme/default.tsx | 5 + components/_util/theme/index.tsx | 2 + components/result/index.tsx | 23 ++-- components/result/style/index.less | 120 ++++++++++----------- components/result/style/index.tsx | 165 ++++++++++++++++++++++++++++- 5 files changed, 247 insertions(+), 68 deletions(-) diff --git a/components/_util/theme/default.tsx b/components/_util/theme/default.tsx index f1d2dfce88..dd401ab4a5 100644 --- a/components/_util/theme/default.tsx +++ b/components/_util/theme/default.tsx @@ -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(), diff --git a/components/_util/theme/index.tsx b/components/_util/theme/index.tsx index 746660b722..037b1c5408 100644 --- a/components/_util/theme/index.tsx +++ b/components/_util/theme/index.tsx @@ -42,6 +42,8 @@ export interface DesignToken { margin: number; background: string; + backgroundLight: string; + componentBackground: string; componentBackgroundDisabled: string; diff --git a/components/result/index.tsx b/components/result/index.tsx index 1965e3df14..f1a07f3d8b 100644 --- a/components/result/index.tsx +++ b/components/result/index.tsx @@ -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(
{renderIcon(prefixCls, { status, icon })}
{title}
{subTitle &&
{subTitle}
} {renderExtra(prefixCls, { extra })} {children &&
{children}
} -
+ , ); }; diff --git a/components/result/style/index.less b/components/result/style/index.less index 78cb70b827..593f828ed0 100644 --- a/components/result/style/index.less +++ b/components/result/style/index.less @@ -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'; diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index 3a3ab0de59..ecae3015c5 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -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, + ]; +}