diff --git a/components/result/index.tsx b/components/result/index.tsx index 6783ad561..b90a93efc 100644 --- a/components/result/index.tsx +++ b/components/result/index.tsx @@ -11,6 +11,8 @@ import unauthorized from './unauthorized'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; +import useStyle from './style'; + export const IconMap = { success: CheckCircleFilled, error: CloseCircleFilled, @@ -61,12 +63,16 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) => const Result = defineComponent({ compatConfig: { MODE: 3 }, name: 'AResult', + inheritAttrs: false, props: resultProps(), slots: ['title', 'subTitle', 'icon', 'extra'], - setup(props, { slots }) { + setup(props, { slots, attrs }) { const { prefixCls, direction } = useConfigInject('result', props); + + const [wrapSSR, hashId] = useStyle(prefixCls); + const className = computed(() => - classNames(prefixCls.value, `${prefixCls.value}-${props.status}`, { + classNames(prefixCls.value, hashId.value, `${prefixCls.value}-${props.status}`, { [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }), ); @@ -76,14 +82,14 @@ const Result = defineComponent({ const icon = props.icon ?? slots.icon?.(); const extra = props.extra ?? slots.extra?.(); const pre = prefixCls.value; - return ( -
+ return wrapSSR( +
{renderIcon(pre, { status: props.status, icon })}
{title}
{subTitle &&
{subTitle}
} {renderExtra(pre, extra)} {slots.default &&
{slots.default()}
} -
+
, ); }; }, diff --git a/components/result/style/index.less b/components/result/style/index.less deleted file mode 100644 index 78cb70b82..000000000 --- a/components/result/style/index.less +++ /dev/null @@ -1,75 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@result-prefix-cls: ~'@{ant-prefix}-result'; - -.@{result-prefix-cls} { - padding: 48px 32px; - // status color - &-success &-icon > .@{iconfont-css-prefix} { - color: @success-color; - } - - &-error &-icon > .@{iconfont-css-prefix} { - color: @error-color; - } - - &-info &-icon > .@{iconfont-css-prefix} { - color: @info-color; - } - - &-warning &-icon > .@{iconfont-css-prefix} { - color: @warning-color; - } - - // Exception Status image - &-image { - width: 250px; - height: 295px; - margin: auto; - } - - &-icon { - margin-bottom: 24px; - text-align: center; - - > .@{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; - } - - &-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; - - > * { - margin-right: 8px; - - &:last-child { - margin-right: 0; - } - } - } - - &-content { - margin-top: 24px; - padding: 24px 40px; - background-color: @background-color-light; - } -} - -@import './rtl'; diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index 3a3ab0de5..8369a0708 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -1,2 +1,157 @@ -import '../../style/index.less'; -import './index.less'; +import type { CSSObject } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; + +export interface ComponentToken { + imageWidth: number; + imageHeight: number; +} + +interface ResultToken extends FullToken<'Result'> { + resultTitleFontSize: number; + resultSubtitleFontSize: number; + resultIconFontSize: number; + + resultExtraMargin: string; + + resultInfoIconColor: string; + resultSuccessIconColor: string; + resultWarningIconColor: string; + resultErrorIconColor: string; +} + +// ============================== Styles ============================== +const genBaseStyle: GenerateStyle = (token): CSSObject => { + const { + componentCls, + lineHeightHeading3, + iconCls, + padding, + paddingXL, + paddingXS, + paddingLG, + marginXS, + lineHeight, + } = token; + + return { + // Result + [componentCls]: { + padding: `${paddingLG * 2}px ${paddingXL}px`, + + // RTL + '&-rtl': { + direction: 'rtl', + }, + }, + + // Exception Status image + [`${componentCls} ${componentCls}-image`]: { + width: token.imageWidth, + height: token.imageHeight, + margin: 'auto', + }, + + [`${componentCls} ${componentCls}-icon`]: { + marginBottom: paddingLG, + textAlign: 'center', + + [`& > ${iconCls}`]: { + fontSize: token.resultIconFontSize, + }, + }, + + [`${componentCls} ${componentCls}-title`]: { + color: token.colorTextHeading, + fontSize: token.resultTitleFontSize, + lineHeight: lineHeightHeading3, + marginBlock: marginXS, + textAlign: 'center', + }, + + [`${componentCls} ${componentCls}-subtitle`]: { + color: token.colorTextDescription, + fontSize: token.resultSubtitleFontSize, + lineHeight, + textAlign: 'center', + }, + + [`${componentCls} ${componentCls}-content`]: { + marginTop: paddingLG, + padding: `${paddingLG}px ${padding * 2.5}px`, + backgroundColor: token.colorFillAlter, + }, + + [`${componentCls} ${componentCls}-extra`]: { + margin: token.resultExtraMargin, + textAlign: 'center', + + '& > *': { + marginInlineEnd: paddingXS, + + '&:last-child': { + marginInlineEnd: 0, + }, + }, + }, + }; +}; + +const genStatusIconStyle: GenerateStyle = token => { + const { componentCls, iconCls } = token; + + return { + [`${componentCls}-success ${componentCls}-icon > ${iconCls}`]: { + color: token.resultSuccessIconColor, + }, + [`${componentCls}-error ${componentCls}-icon > ${iconCls}`]: { + color: token.resultErrorIconColor, + }, + [`${componentCls}-info ${componentCls}-icon > ${iconCls}`]: { + color: token.resultInfoIconColor, + }, + [`${componentCls}-warning ${componentCls}-icon > ${iconCls}`]: { + color: token.resultWarningIconColor, + }, + }; +}; + +const genResultStyle: GenerateStyle = token => [ + genBaseStyle(token), + genStatusIconStyle(token), +]; + +// ============================== Export ============================== +const getStyle: GenerateStyle = token => genResultStyle(token); + +export default genComponentStyleHook( + 'Result', + token => { + const { paddingLG, fontSizeHeading3 } = token; + + const resultSubtitleFontSize = token.fontSize; + const resultExtraMargin = `${paddingLG}px 0 0 0`; + + const resultInfoIconColor = token.colorInfo; + const resultErrorIconColor = token.colorError; + const resultSuccessIconColor = token.colorSuccess; + const resultWarningIconColor = token.colorWarning; + + const resultToken = mergeToken(token, { + resultTitleFontSize: fontSizeHeading3, + resultSubtitleFontSize, + resultIconFontSize: fontSizeHeading3 * 3, + resultExtraMargin, + resultInfoIconColor, + resultErrorIconColor, + resultSuccessIconColor, + resultWarningIconColor, + }); + + return [getStyle(resultToken)]; + }, + { + imageWidth: 250, + imageHeight: 295, + }, +); diff --git a/components/result/style/rtl.less b/components/result/style/rtl.less deleted file mode 100644 index a2eea06d2..000000000 --- a/components/result/style/rtl.less +++ /dev/null @@ -1,25 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@result-prefix-cls: ~'@{ant-prefix}-result'; - -.@{result-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-extra { - > * { - .@{result-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - - &:last-child { - .@{result-prefix-cls}-rtl & { - margin-left: 0; - } - } - } - } -} diff --git a/components/style.ts b/components/style.ts index 619d6af19..b893022dd 100644 --- a/components/style.ts +++ b/components/style.ts @@ -54,7 +54,7 @@ import './drawer/style'; // import './config-provider/style'; import './empty/style'; // import './statistic/style'; -import './result/style'; +// import './result/style'; // import './descriptions/style'; // import './page-header/style'; import './form/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 689022d5e..77bb3be07 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -29,7 +29,7 @@ import type { ComponentToken as PopoverComponentToken } from '../../popover/styl import type { ComponentToken as ProgressComponentToken } from '../../progress/style'; // import type { ComponentToken as RadioComponentToken } from '../../radio/style'; import type { ComponentToken as RateComponentToken } from '../../rate/style'; -// import type { ComponentToken as ResultComponentToken } from '../../result/style'; +import type { ComponentToken as ResultComponentToken } from '../../result/style'; // import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style'; // import type { ComponentToken as SelectComponentToken } from '../../select/style'; import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style'; @@ -87,7 +87,7 @@ export interface ComponentTokenMap { Popconfirm?: PopconfirmComponentToken; Rate?: RateComponentToken; // Radio?: RadioComponentToken; - // Result?: ResultComponentToken; + Result?: ResultComponentToken; // Segmented?: SegmentedComponentToken; // Select?: SelectComponentToken; Skeleton?: SkeletonComponentToken;