test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

refactor: Result migrate to genComponentStyleHook (#34915)

Browse Source
This commit is contained in:
MadCcc 2022-04-07 22:25:04 +08:00 committed by GitHub
parent 41452045e0
commit 662653952e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/_util/theme/interface.ts
View File

@ -54,6 +54,7 @@ export interface OverrideToken {
Mentions?: MentionsComponentToken; Mentions?: MentionsComponentToken;
Pagination?: {}; Pagination?: {};
Popover?: {}; Popover?: {};
Result?: {};
Select?: SelectComponentToken; Select?: SelectComponentToken;
Slider?: SliderComponentToken; Slider?: SliderComponentToken;
Tag?: {}; Tag?: {};

4
components/result/index.tsx
View File

@ -94,12 +94,12 @@ const Result: ResultType = ({
icon, icon,
extra, extra,
}) => { }) => {
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('result', customizePrefixCls); const prefixCls = getPrefixCls('result', customizePrefixCls);
// Style // Style
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
const className = classNames( const className = classNames(
prefixCls, prefixCls,

57
components/result/style/index.tsx
View File

@ -1,17 +1,8 @@
// deps-lint-skip-all // deps-lint-skip-all
import { CSSObject } from '@ant-design/cssinjs'; import { CSSObject } from '@ant-design/cssinjs';
import { import { GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
DerivativeToken,
useStyleRegister,
useToken,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
interface ResultToken extends DerivativeToken {
resultCls: string;
dotIconPrefixCls: string;
interface ResultToken extends FullToken<'Result'> {
resultTitleFontSize: number; resultTitleFontSize: number;
resultSubtitleFontSize: number; resultSubtitleFontSize: number;
resultIconFontSize: number; resultIconFontSize: number;
@ -26,11 +17,11 @@ interface ResultToken extends DerivativeToken {
// ============================== Styles ============================== // ============================== Styles ==============================
const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => { const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
const { resultCls, dotIconPrefixCls } = token; const { componentCls, iconCls } = token;
return { return {
// Result // Result
[resultCls]: { [componentCls]: {
padding: `${token.padding * 3}px ${token.padding * 2}px`, padding: `${token.padding * 3}px ${token.padding * 2}px`,
// RTL // RTL
@ -40,23 +31,23 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
}, },
// Exception Status image // Exception Status image
[`${resultCls} ${resultCls}-image`]: { [`${componentCls} ${componentCls}-image`]: {
// FIXME: hard code // FIXME: hard code
width: 250, width: 250,
height: 295, height: 295,
margin: 'auto', margin: 'auto',
}, },
[`${resultCls} ${resultCls}-icon`]: { [`${componentCls} ${componentCls}-icon`]: {
marginBottom: token.padding * 1.5, marginBottom: token.padding * 1.5,
textAlign: 'center', textAlign: 'center',
[`& > ${dotIconPrefixCls}`]: { [`& > ${iconCls}`]: {
fontSize: token.resultIconFontSize, fontSize: token.resultIconFontSize,
}, },
}, },
[`${resultCls} ${resultCls}-title`]: { [`${componentCls} ${componentCls}-title`]: {
color: token.colorTextHeading, color: token.colorTextHeading,
fontSize: token.resultTitleFontSize, fontSize: token.resultTitleFontSize,
// FIXME: hard code // FIXME: hard code
@ -64,7 +55,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
textAlign: 'center', textAlign: 'center',
}, },
[`${resultCls} ${resultCls}-subtitle`]: { [`${componentCls} ${componentCls}-subtitle`]: {
color: token.colorTextSecondary, color: token.colorTextSecondary,
fontSize: token.resultSubtitleFontSize, fontSize: token.resultSubtitleFontSize,
// FIXME: hard code // FIXME: hard code
@ -72,13 +63,13 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
textAlign: 'center', textAlign: 'center',
}, },
[`${resultCls} ${resultCls}-content`]: { [`${componentCls} ${componentCls}-content`]: {
marginTop: token.padding * 1.5, marginTop: token.padding * 1.5,
padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`, padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
backgroundColor: token.colorBgComponentSecondary, backgroundColor: token.colorBgComponentSecondary,
}, },
[`${resultCls} ${resultCls}-extra`]: { [`${componentCls} ${componentCls}-extra`]: {
margin: token.resultExtraMargin, margin: token.resultExtraMargin,
textAlign: 'center', textAlign: 'center',
@ -94,19 +85,19 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
}; };
const genStatusIconStyle: GenerateStyle<ResultToken> = token => { const genStatusIconStyle: GenerateStyle<ResultToken> = token => {
const { resultCls, dotIconPrefixCls } = token; const { componentCls, iconCls } = token;
return { return {
[`${resultCls}-success ${resultCls}-icon > ${dotIconPrefixCls}`]: { [`${componentCls}-success ${componentCls}-icon > ${iconCls}`]: {
color: token.resultSuccessIconColor, color: token.resultSuccessIconColor,
}, },
[`${resultCls}-error ${resultCls}-icon > ${dotIconPrefixCls}`]: { [`${componentCls}-error ${componentCls}-icon > ${iconCls}`]: {
color: token.resultErrorIconColor, color: token.resultErrorIconColor,
}, },
[`${resultCls}-info ${resultCls}-icon > ${dotIconPrefixCls}`]: { [`${componentCls}-info ${componentCls}-icon > ${iconCls}`]: {
color: token.resultInfoIconColor, color: token.resultInfoIconColor,
}, },
[`${resultCls}-warning ${resultCls}-icon > ${dotIconPrefixCls}`]: { [`${componentCls}-warning ${componentCls}-icon > ${iconCls}`]: {
color: token.resultWarningIconColor, color: token.resultWarningIconColor,
}, },
}; };
@ -120,12 +111,7 @@ const genResultStyle: GenerateStyle<ResultToken> = token => [
// ============================== Export ============================== // ============================== Export ==============================
const getStyle: GenerateStyle<ResultToken> = token => genResultStyle(token); const getStyle: GenerateStyle<ResultToken> = token => genResultStyle(token);
export default function useStyle( export default genComponentStyleHook('Result', token => {
prefixCls: string,
iconPrefixCls: string,
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
// compact 20 // compact 20
// FIXME: maybe we need a new token for fontSize 12px // FIXME: maybe we need a new token for fontSize 12px
const resultTitleFontSize = 24; const resultTitleFontSize = 24;
@ -142,8 +128,6 @@ export default function useStyle(
const resultToken: ResultToken = { const resultToken: ResultToken = {
...token, ...token,
resultCls: `.${prefixCls}`,
dotIconPrefixCls: `.${iconPrefixCls}`,
resultTitleFontSize, resultTitleFontSize,
resultSubtitleFontSize, resultSubtitleFontSize,
resultIconFontSize, resultIconFontSize,
@ -154,8 +138,5 @@ export default function useStyle(
resultWarningIconColor, resultWarningIconColor,
}; };
return [ return [getStyle(resultToken)];
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => getStyle(resultToken)), });
hashId,
];
}