mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: Add GenerateStyle ts def (#34429)

Browse Source 
* chore: Alert with types

* chore: rest component

* chore: more

* chore: fix lint
This commit is contained in:
二货机器人 2022-03-11 14:29:29 +08:00 committed by GitHub
parent 4db1fc1a20
commit 80bf60c717
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 297 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/_util/theme/index.tsx
View File

@ -1,7 +1,13 @@
import React from 'react';
import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import { CSSObject, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
import {
CSSInterpolation,
CSSObject,
Theme,
useCacheToken,
useStyleRegister,
} from '@ant-design/cssinjs';
import defaultDesignToken from './default';
import version from '../../version';
import { resetComponent, resetIcon, clearFix } from './util';
@ -215,6 +221,11 @@ export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToke
export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
token: ComponentToken,
hashId?: string,
) => ReturnType;
// ================================== Util ==================================
export function withPrefix(
style: CSSObject,

64
components/alert/style/index.tsx
View File

@ -11,10 +11,14 @@ import {
useToken,
resetComponent,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
// FIXME: missing token
type AlertToken = DerivativeToken & {
alertCls: string;
iconPrefixCls: string;
alertMessageColor: string;
alertCloseColor: string;
alertCloseHoverColor: string;
@ -55,8 +59,9 @@ const genAlertTypeStyle = (
},
});
export const genBaseStyle = (alertCls: string, token: AlertToken): CSSObject => {
export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const {
alertCls,
duration,
marginXS,
fontSize,
@ -149,8 +154,9 @@ export const genBaseStyle = (alertCls: string, token: AlertToken): CSSObject =>
};
};
export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject => {
export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const {
alertCls,
alertInfoBgColor,
alertInfoIconColor,
alertInfoBorderColor,
@ -208,12 +214,16 @@ export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject =>
};
};
export const genActionStyle = (
alertCls: string,
iconPrefixCls: string,
token: AlertToken,
): CSSObject => {
const { duration, marginXS, fontSizeSM, alertCloseColor, alertCloseHoverColor } = token;
export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const {
alertCls,
iconPrefixCls,
duration,
marginXS,
fontSizeSM,
alertCloseColor,
alertCloseHoverColor,
} = token;
return {
[alertCls]: {
@ -252,8 +262,8 @@ export const genActionStyle = (
};
};
export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => {
const { alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token;
export const genRTLStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const { alertCls, alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token;
return {
[alertCls]: {
@ -271,11 +281,19 @@ export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => {
};
};
export const genAlertStyle = (
export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSInterpolation => [
genBaseStyle(token),
genTypeStyle(token),
genActionStyle(token),
genRTLStyle(token),
];
export default function useStyle(
prefixCls: string,
iconPrefixCls: string,
token: DerivativeToken,
): CSSInterpolation => {
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
const alertCls = `.${prefixCls}`;
const alertMessageColor = token.headingColor;
@ -308,8 +326,10 @@ export const genAlertStyle = (
const alertErrorIconColor = token.errorColor;
const alertErrorBorderColor = errorColors[2];
const alertToken = {
const alertToken: AlertToken = {
...token,
alertCls,
iconPrefixCls,
alertInfoBgColor,
alertInfoIconColor,
alertInfoBorderColor,
@ -331,23 +351,9 @@ export const genAlertStyle = (
alertWithDescriptionPadding,
};
return [
genBaseStyle(alertCls, alertToken),
genTypeStyle(alertCls, alertToken),
genActionStyle(alertCls, iconPrefixCls, alertToken),
genRTLStyle(alertCls, alertToken),
];
};
export default function useStyle(
prefixCls: string,
iconPrefixCls: string,
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
genAlertStyle(prefixCls, iconPrefixCls, token),
genAlertStyle(alertToken),
]),
hashId,
];

6
components/cascader/style/index.tsx
View File

@ -8,12 +8,12 @@
// // deps-lint-skip: form
// deps-lint-skip-all
import { CSSInterpolation } from '@ant-design/cssinjs';
import {
DerivativeToken,
useStyleRegister,
useToken,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
@ -23,7 +23,7 @@ interface CascaderToken extends DerivativeToken {
}
// =============================== Base ===============================
const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation => {
const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
const { prefixCls, cascaderCls } = token;
const cascaderMenuItemCls = `${cascaderCls}-menu-item`;
const iconCls = `
@ -51,7 +51,7 @@ const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation =>
{
[`${cascaderCls}-dropdown`]: [
// ==================== Checkbox ====================
getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId!),
{
[cascaderCls]: {
// ================== Checkbox ==================

22
components/checkbox/style/index.tsx
View File

@ -1,13 +1,18 @@
// deps-lint-skip-all
import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
import {
DerivativeToken,
useStyleRegister,
useToken,
resetComponent,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
interface CheckboxToken extends DerivativeToken {
checkboxCls: string;
}
// ============================== Motion ==============================
const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
'0%': {
@ -22,12 +27,8 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
});
// ============================== Styles ==============================
export const genCheckboxStyle = (
prefixCls: string,
token: DerivativeToken,
hashId: string,
): CSSInterpolation => {
const checkboxCls = `.${prefixCls}`;
export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) => {
const { checkboxCls } = token;
const wrapperCls = `${checkboxCls}-wrapper`;
return [
@ -235,7 +236,12 @@ export const genCheckboxStyle = (
// ============================== Export ==============================
export function getStyle(prefixCls: string, token: DerivativeToken, hashId: string) {
return [genCheckboxStyle(prefixCls, token, hashId), antCheckboxEffect];
const checkboxToken: CheckboxToken = {
...token,
checkboxCls: `.${prefixCls}`,
};
return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect];
}
export default function useStyle(prefixCls: string): UseComponentStyleResult {

25
components/divider/style/index.tsx
View File

@ -6,9 +6,12 @@ import {
useToken,
UseComponentStyleResult,
resetComponent,
GenerateStyle,
} from '../../_util/theme';
interface DividerToken extends DerivativeToken {
dividerCls: string;
dividerBorderColor: string;
dividerBorderWidth: number;
@ -19,15 +22,12 @@ interface DividerToken extends DerivativeToken {
dividerHorizontalGutterMargin: number;
}
// FIXME
interface genStyleProps {
token: DividerToken;
prefixCls: string;
}
// ============================== Shared ==============================
const genSharedDividerStyle = ({ token, prefixCls }: genStyleProps): CSSObject => ({
[`.${prefixCls}`]: {
const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
const { dividerCls } = token;
return {
[dividerCls]: {
...resetComponent(token),
borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
@ -86,7 +86,7 @@ const genSharedDividerStyle = ({ token, prefixCls }: genStyleProps): CSSObject =
},
},
[`.${prefixCls}-inner-text`]: {
[`${dividerCls}-inner-text`]: {
display: 'inline-block',
padding: '0 1em',
},
@ -143,7 +143,8 @@ const genSharedDividerStyle = ({ token, prefixCls }: genStyleProps): CSSObject =
},
},
},
});
};
};
// ============================== Export ==============================
export default function useStyle(prefixCls: string): UseComponentStyleResult {
@ -161,6 +162,8 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
const dividerToken: DividerToken = {
...token,
dividerCls: `.${prefixCls}`,
dividerBorderColor,
dividerBorderWidth,
@ -173,7 +176,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
genSharedDividerStyle({ token: dividerToken, prefixCls }),
genSharedDividerStyle(dividerToken),
]),
hashId,
];

7
components/rate/style/index.tsx
View File

@ -1,11 +1,12 @@
// deps-lint-skip-all
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { CSSObject } from '@ant-design/cssinjs';
import {
DerivativeToken,
resetComponent,
UseComponentStyleResult,
useStyleRegister,
useToken,
GenerateStyle,
} from '../../_util/theme';
interface RateToken extends DerivativeToken {
@ -16,7 +17,7 @@ interface RateToken extends DerivativeToken {
iconPrefixCls: string;
}
const genRateStarStyle = (token: RateToken): CSSObject => {
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
const { rateCls } = token;
return {
@ -84,7 +85,7 @@ const genRateRtlStyle = (token: RateToken): CSSObject => ({
},
});
const genRateStyle = (token: RateToken): CSSInterpolation => {
const genRateStyle: GenerateStyle<RateToken> = token => {
const { rateCls } = token;
return {

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

@ -1,13 +1,17 @@
// deps-lint-skip-all
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { CSSObject } from '@ant-design/cssinjs';
import {
DerivativeToken,
useStyleRegister,
useToken,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
interface ResultToken extends DerivativeToken {
resultCls: string;
dotIconPrefixCls: string;
resultTitleFontSize: number;
resultSubtitleFontSize: number;
resultIconFontSize: number;
@ -21,11 +25,10 @@ interface ResultToken extends DerivativeToken {
}
// ============================== Styles ==============================
const genBaseStyle = (
resultCls: string,
dotIconPrefixCls: string,
token: ResultToken,
): CSSObject => ({
const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
const { resultCls, dotIconPrefixCls } = token;
return {
// Result
[resultCls]: {
padding: `${token.padding * 3}px ${token.padding * 2}px`,
@ -82,34 +85,41 @@ const genBaseStyle = (
},
},
},
});
};
};
const genStatusIconStyle = (
resultCls: string,
iconPrefixCls: string,
token: ResultToken,
): CSSObject => ({
[`${resultCls}-success ${resultCls}-icon > ${iconPrefixCls}`]: {
const genStatusIconStyle: GenerateStyle<ResultToken> = token => {
const { resultCls, dotIconPrefixCls } = token;
return {
[`${resultCls}-success ${resultCls}-icon > ${dotIconPrefixCls}`]: {
color: token.resultSuccessIconColor,
},
[`${resultCls}-error ${resultCls}-icon > ${iconPrefixCls}`]: {
[`${resultCls}-error ${resultCls}-icon > ${dotIconPrefixCls}`]: {
color: token.resultErrorIconColor,
},
[`${resultCls}-info ${resultCls}-icon > ${iconPrefixCls}`]: {
[`${resultCls}-info ${resultCls}-icon > ${dotIconPrefixCls}`]: {
color: token.resultInfoIconColor,
},
[`${resultCls}-warning ${resultCls}-icon > ${iconPrefixCls}`]: {
[`${resultCls}-warning ${resultCls}-icon > ${dotIconPrefixCls}`]: {
color: token.resultWarningIconColor,
},
});
};
};
export const genResultStyle = (
const genResultStyle: GenerateStyle<ResultToken> = token => [
genBaseStyle(token),
genStatusIconStyle(token),
];
// ============================== Export ==============================
const getStyle: GenerateStyle<ResultToken> = token => genResultStyle(token);
export default function useStyle(
prefixCls: string,
iconPrefixCls: string,
token: DerivativeToken,
): CSSInterpolation => {
const resultCls = `.${prefixCls}`;
const dotIconPrefixCls = `.${iconPrefixCls}`;
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
// compact 20
// FIXME: maybe we need a new token for fontSize 12px
@ -125,8 +135,10 @@ export const genResultStyle = (
const resultSuccessIconColor = token.successColor;
const resultWarningIconColor = token.warningColor;
const resultToken = {
const resultToken: ResultToken = {
...token,
resultCls: `.${prefixCls}`,
dotIconPrefixCls: `.${iconPrefixCls}`,
resultTitleFontSize,
resultSubtitleFontSize,
resultIconFontSize,
@ -138,26 +150,7 @@ export const genResultStyle = (
};
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),
),
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => getStyle(resultToken)),
hashId,
];
}

15
components/select/style/dropdown.tsx
View File

@ -1,4 +1,4 @@
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { CSSObject } from '@ant-design/cssinjs';
import {
resetComponent,
initSlideMotion,
@ -6,10 +6,11 @@ import {
slideUpOut,
slideDownIn,
slideDownOut,
GenerateStyle,
} from '../../_util/theme';
import type { SelectToken } from '.';
const genItemStyle = (token: SelectToken): CSSObject => {
const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
const { controlPaddingHorizontal } = token;
return {
@ -26,7 +27,7 @@ const genItemStyle = (token: SelectToken): CSSObject => {
};
};
export default function genSingleStyle(token: SelectToken, hashId: string): CSSInterpolation {
const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
const { rootPrefixCls, antCls, selectCls } = token;
const selectItemCls = `${selectCls}-item`;
@ -152,11 +153,13 @@ export default function genSingleStyle(token: SelectToken, hashId: string): CSSI
},
// Follow code may reuse in other components
initSlideMotion(hashId, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
initSlideMotion(hashId, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
initSlideMotion(hashId!, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
initSlideMotion(hashId!, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
slideUpIn,
slideUpOut,
slideDownIn,
slideDownOut,
];
}
};
export default genSingleStyle;

9
components/select/style/index.tsx
View File

@ -13,6 +13,7 @@ import {
resetComponent,
resetIcon,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
import genSingleStyle from './single';
import genMultipleStyle from './multiple';
@ -27,7 +28,7 @@ export type SelectToken = DerivativeToken & {
};
// ============================= Selector =============================
const genSelectorStyle = (token: SelectToken): CSSObject => {
const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
const { selectCls } = token;
return {
@ -112,7 +113,7 @@ const genStatusStyle = (
// ============================== Styles ==============================
// /* Reset search input style */
const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => {
const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = token => {
const { selectCls } = token;
return {
@ -133,7 +134,7 @@ const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => {
};
// =============================== Base ===============================
const genBaseStyle = (token: SelectToken): CSSObject => {
const genBaseStyle: GenerateStyle<SelectToken> = token => {
const { selectCls, iconPrefixCls, inputPaddingHorizontalBase } = token;
return {
@ -269,7 +270,7 @@ const genBaseStyle = (token: SelectToken): CSSObject => {
};
// ============================== Styles ==============================
export const genSelectStyle = (
const genSelectStyle = (
rootPrefixCls: string,
prefixCls: string,
iconPrefixCls: string,

8
components/tree-select/style/index.tsx
View File

@ -7,12 +7,12 @@
// import '../../empty/style';
// deps-lint-skip-all
import { CSSInterpolation } from '@ant-design/cssinjs';
import {
DerivativeToken,
useStyleRegister,
useToken,
UseComponentStyleResult,
GenerateStyle,
} from '../../_util/theme';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { genTreeStyle } from '../../tree/style';
@ -23,7 +23,7 @@ interface TreeSelectToken extends DerivativeToken {
}
// =============================== Base ===============================
const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation => {
const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
const { selectCls, treePrefixCls } = token;
const treeCls = `.${treePrefixCls}`;
@ -38,7 +38,7 @@ const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation
},
// ====================== Tree ======================
genTreeStyle(treePrefixCls, token, hashId),
genTreeStyle(treePrefixCls, token, hashId!),
{
[treeCls]: {
borderRadius: 0,
@ -55,7 +55,7 @@ const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation
},
// ==================== Checkbox ====================
getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId),
getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId!),
// ====================== RTL =======================
{