Skip to content

Commit

Permalink
Merge pull request #8 from ant-design/fix/refactor-antd-theme
Browse files Browse the repository at this point in the history
Fix: fixed some typescript error
  • Loading branch information
YumoImer authored Jul 17, 2024
2 parents 4944227 + 5e52f71 commit 87d2f50
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 61 deletions.
2 changes: 1 addition & 1 deletion docs/demos/genStyleUtils.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ nav:
- `usePrefix`: 使用样式前缀的钩子函数
- `useToken`: 使用 token 的钩子函数
- `CompTokenMap`: 范型参数,表示组件 token 映射
- `DesignTokenn`: 范型参数,表示设计 token
- `AliasToken`: 范型参数,表示别名 token
- `DesignTokenn`: 范型参数,表示设计 token
> 使用建议:为了更好的获得 TS 类型支持,建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap` `DesignTokenn` `AliasToken`
## 如何使用
Expand Down
14 changes: 6 additions & 8 deletions src/hooks/useToken.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
import type { Theme, TokenType } from '@ant-design/cssinjs';

import type { OverrideTokenMap, TokenMap } from '../interface';
import type { OverrideTokenMap, TokenMap, GlobalToken } from '../interface';

export type TokenMapWithTheme<
CompTokenMap extends TokenMap,
DesignToken extends TokenType,
AliasToken extends TokenType,
DesignToken extends TokenType,
> = {
[key in keyof OverrideTokenMap<CompTokenMap>]?: OverrideTokenMap<CompTokenMap>[key] & {
[key in keyof OverrideTokenMap<CompTokenMap, AliasToken>]?: OverrideTokenMap<CompTokenMap, AliasToken>[key] & {
theme?: Theme<DesignToken, AliasToken>;
};
};

export interface UseTokenReturn<
CompTokenMap extends TokenMap,
DesignToken extends TokenType,
AliasToken extends TokenType,
DesignToken extends TokenType,
> {
token: OverrideTokenMap<CompTokenMap>;
realToken?: OverrideTokenMap<CompTokenMap>;
/** Just merge `token` & `override` at top to save perf */
override: { override: OverrideTokenMap<CompTokenMap> };
token: GlobalToken<CompTokenMap, AliasToken>;
realToken?: GlobalToken<CompTokenMap, AliasToken>;
theme?: Theme<DesignToken, AliasToken>;
components?: TokenMapWithTheme<CompTokenMap, DesignToken, AliasToken>;
hashId?: string;
Expand Down
25 changes: 23 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,25 @@
export { default as genStyleUtils } from './util/genStyleUtils';

export { default as genCalc } from './util/calc';
export type { default as AbstractCalculator } from './util/calc/calculator';
export {
default as statisticToken,
merge as mergeToken,
} from './util/statistic';

export type {
OverrideTokenMap,
TokenMap,
TokenMapKey,
GlobalTokenWithComponent,
ComponentToken,
ComponentTokenKey,
GlobalToken,
} from './interface';
export type { default as AbstractCalculator } from './util/calc/calculator';
export type {
FullToken,
GetDefaultToken,
GetDefaultTokenFn,
GenStyleFn,
TokenWithCommonCls,
CSSUtil,
} from './util/genStyleUtils';
33 changes: 27 additions & 6 deletions src/interface/components.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,35 @@
import type { TokenType } from '@ant-design/cssinjs';

export type TokenMap = Record<string, TokenType>;
export type TokenMap = object;

export type TokenMapKey<CompTokenMap extends TokenMap> = Extract<keyof CompTokenMap, string>;

export type OverrideTokenMap<CompTokenMap extends TokenMap> = Partial<CompTokenMap>;
export type GlobalToken<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
> = AliasToken & CompTokenMap;

export type GlobalTokenWithComponent<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = CompTokenMap &
CompTokenMap[C];
export type OverrideTokenMap<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
> = {
[key in keyof CompTokenMap]: Partial<CompTokenMap[key]> & Partial<AliasToken>;
};

export type ComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = Exclude<OverrideTokenMap<CompTokenMap>[C], undefined>;
export type GlobalTokenWithComponent<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>
> = GlobalToken<CompTokenMap, AliasToken> & CompTokenMap[C];

export type ComponentTokenKey<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = keyof ComponentToken<CompTokenMap, C>;
export type ComponentToken<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>
> = Exclude<OverrideTokenMap<CompTokenMap, AliasToken>[C], undefined>;

export type ComponentTokenKey<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>,
> = keyof ComponentToken<CompTokenMap, AliasToken, C>;
1 change: 1 addition & 0 deletions src/interface/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export type {
GlobalTokenWithComponent,
ComponentToken,
ComponentTokenKey,
GlobalToken,
} from './components';

export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
74 changes: 41 additions & 33 deletions src/util/genStyleUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,23 +61,27 @@ export type TokenWithCommonCls<T> = T & {

export type FullToken<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>,
> = TokenWithCommonCls<GlobalTokenWithComponent<CompTokenMap, C>>;
> = TokenWithCommonCls<GlobalTokenWithComponent<CompTokenMap, AliasToken, C>>;

export type GenStyleFn<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>,
> = (token: FullToken<CompTokenMap, C>, info: StyleInfo) => CSSInterpolation;
> = (token: FullToken<CompTokenMap, AliasToken, C>, info: StyleInfo) => CSSInterpolation;

export type GetDefaultTokenFn<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>,
> = (token: Partial<CompTokenMap[C]>) => CompTokenMap[C];
> = (token: AliasToken & Partial<CompTokenMap[C]>) => CompTokenMap[C];

export type GetDefaultToken<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>,
> = null | CompTokenMap[C] | GetDefaultTokenFn<CompTokenMap, C>;
> = null | CompTokenMap[C] | GetDefaultTokenFn<CompTokenMap, AliasToken, C>;

export interface SubStyleComponentProps {
prefixCls: string;
Expand All @@ -93,18 +97,21 @@ export type CSSVarRegisterProps = {
};
};

export type GetResetStyles<CompTokenMap extends TokenMap> = (token: OverrideTokenMap<CompTokenMap>) => CSSInterpolation;
export type GetResetStyles<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
> = (token: Partial<AliasToken & CompTokenMap>) => CSSInterpolation;

export default function genStyleUtils<
CompTokenMap extends TokenMap,
DesignToken extends TokenType,
AliasToken extends TokenType,
DesignToken extends TokenType,
>(
config: {
usePrefix: UsePrefix;
useToken: UseToken<CompTokenMap, DesignToken, AliasToken>;
useToken: UseToken<CompTokenMap, AliasToken, DesignToken>;
useCSP?: UseCSP;
getResetStyles?: GetResetStyles<CompTokenMap>,
getResetStyles?: GetResetStyles<CompTokenMap, AliasToken>,
}
) {
// Dependency inversion for preparing basic config.
Expand All @@ -117,20 +124,20 @@ export default function genStyleUtils<

function genStyleHooks<C extends TokenMapKey<CompTokenMap>>(
component: C | [C, string],
styleFn: GenStyleFn<CompTokenMap, C>,
getDefaultToken?: GetDefaultToken<CompTokenMap, C>,
styleFn: GenStyleFn<CompTokenMap, AliasToken, C>,
getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>,
options?: {
resetStyle?: boolean;
resetFont?: boolean;
deprecatedTokens?: [
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
][];
/**
* Component tokens that do not need unit.
*/
unitless?: {
[key in ComponentTokenKey<CompTokenMap, C>]: boolean;
[key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
};
/**
* Only use component style in client side. Ignore in SSR.
Expand Down Expand Up @@ -164,7 +171,7 @@ export default function genStyleUtils<
};
Object.keys(originUnitless).forEach((key) => {
compUnitless[prefixToken(key)] =
originUnitless[key as keyof ComponentTokenKey<CompTokenMap, C>];
originUnitless[key as keyof ComponentTokenKey<CompTokenMap, AliasToken, C>];
});

// Options
Expand Down Expand Up @@ -198,17 +205,17 @@ export default function genStyleUtils<

function genCSSVarRegister<C extends TokenMapKey<CompTokenMap>>(
component: C,
getDefaultToken: GetDefaultToken<CompTokenMap, C> | undefined,
getDefaultToken: GetDefaultToken<CompTokenMap, AliasToken, C> | undefined,
options: {
unitless?: {
[key in ComponentTokenKey<CompTokenMap, C>]: boolean;
[key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
};
ignore?: {
[key in keyof AliasToken]?: boolean;
};
deprecatedTokens?: [
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
][];
injectStyle?: boolean;
prefixToken: (key: string) => string;
Expand Down Expand Up @@ -237,12 +244,12 @@ export default function genStyleUtils<
scope: rootCls,
},
() => {
const defaultToken = getDefaultComponentToken<CompTokenMap, C>(
const defaultToken = getDefaultComponentToken<CompTokenMap, AliasToken, C>(
component,
realToken,
getDefaultToken,
);
const componentToken = getComponentToken<CompTokenMap, C>(
const componentToken = getComponentToken<CompTokenMap, AliasToken, C>(
component,
realToken,
defaultToken,
Expand Down Expand Up @@ -286,15 +293,15 @@ export default function genStyleUtils<

function genComponentStyleHook<C extends TokenMapKey<CompTokenMap>>(
componentName: C | [C, string],
styleFn: GenStyleFn<CompTokenMap, C>,
getDefaultToken?: GetDefaultToken<CompTokenMap, C>,
styleFn: GenStyleFn<CompTokenMap, AliasToken, C>,
getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>,
options: {
resetStyle?: boolean;
resetFont?: boolean;
// Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
deprecatedTokens?: [
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
][];
/**
* Only use component style in client side. Ignore in SSR.
Expand All @@ -306,10 +313,10 @@ export default function genStyleUtils<
order?: number;
injectStyle?: boolean;
unitless?: {
[key in ComponentTokenKey<CompTokenMap, C>]: boolean;
[key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
};
genCommonStyle?: (
token: OverrideTokenMap<CompTokenMap>,
token: OverrideTokenMap<CompTokenMap, AliasToken>,
componentPrefixCls: string,
rootCls?: string,
resetFont?: boolean,
Expand Down Expand Up @@ -389,11 +396,12 @@ export default function genStyleUtils<

const defaultComponentToken = getDefaultComponentToken<
CompTokenMap,
AliasToken,
C
>(component, realToken, getDefaultToken) ?? {};

const componentCls = `.${prefixCls}`;
const componentToken = getComponentToken<CompTokenMap, C>(
const componentToken = getComponentToken<CompTokenMap, AliasToken, C>(
component,
realToken,
defaultComponentToken,
Expand Down Expand Up @@ -424,7 +432,7 @@ export default function genStyleUtils<
min,
},
cssVar ? defaultComponentToken : componentToken,
) as FullToken<CompTokenMap, C>;
);

const styleInterpolation = styleFn(mergedToken, {
hashId,
Expand Down Expand Up @@ -453,15 +461,15 @@ export default function genStyleUtils<

function genSubStyleComponent<C extends TokenMapKey<CompTokenMap>>(
componentName: C | [C, string],
styleFn: GenStyleFn<CompTokenMap, C>,
getDefaultToken?: GetDefaultToken<CompTokenMap, C>,
styleFn: GenStyleFn<CompTokenMap, AliasToken, C>,
getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>,
options: {
resetStyle?: boolean;
resetFont?: boolean;
// Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
deprecatedTokens?: [
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
ComponentTokenKey<CompTokenMap, AliasToken, C>,
][];
/**
* Only use component style in client side. Ignore in SSR.
Expand All @@ -473,7 +481,7 @@ export default function genStyleUtils<
order?: number;
injectStyle?: boolean;
unitless?: {
[key in ComponentTokenKey<CompTokenMap, C>]: boolean;
[key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
};
} = {},
) {
Expand Down
15 changes: 10 additions & 5 deletions src/util/getComponentToken.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,23 @@ import type {
TokenMapKey,
ComponentTokenKey,
ComponentToken,
OverrideTokenMap,
GlobalToken,
} from '../interface';
import type { TokenType } from '@ant-design/cssinjs';

export default function getComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>>(
export default function getComponentToken<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>,
>(
component: C,
token: OverrideTokenMap<CompTokenMap>,
token: GlobalToken<CompTokenMap, AliasToken>,
defaultToken: CompTokenMap[C],
options?: {
deprecatedTokens?: [ComponentTokenKey<CompTokenMap, C>, ComponentTokenKey<CompTokenMap, C>][];
deprecatedTokens?: [ComponentTokenKey<CompTokenMap, AliasToken, C>, ComponentTokenKey<CompTokenMap, AliasToken, C>][];
},
) {
const customToken = { ...(token[component] as ComponentToken<CompTokenMap, C>) };
const customToken = { ...(token[component] as ComponentToken<CompTokenMap, AliasToken, C>) };
if (options?.deprecatedTokens) {
const { deprecatedTokens } = options;
deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
Expand Down
15 changes: 10 additions & 5 deletions src/util/getDefaultComponentToken.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import type { TokenType } from '@ant-design/cssinjs';
import { merge as mergeToken } from './statistic';
import type { GetDefaultToken, GetDefaultTokenFn } from './genStyleUtils';
import type { OverrideTokenMap, TokenMap, TokenMapKey } from '../interface';
import type { GlobalToken, TokenMap, TokenMapKey } from '../interface';

export default function getDefaultComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>>(
export default function getDefaultComponentToken<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
C extends TokenMapKey<CompTokenMap>
>(
component: C,
token: OverrideTokenMap<CompTokenMap>,
getDefaultToken: GetDefaultToken<CompTokenMap, C>,
token: GlobalToken<CompTokenMap, AliasToken>,
getDefaultToken: GetDefaultToken<CompTokenMap, AliasToken, C>,
): any {
if (typeof getDefaultToken === 'function') {
return (getDefaultToken as GetDefaultTokenFn<CompTokenMap, C>)(mergeToken<any>(token, token[component] ?? {}));
return (getDefaultToken as GetDefaultTokenFn<CompTokenMap, AliasToken, C>)(mergeToken<any>(token, token[component] ?? {}));
}
return getDefaultToken ?? {};
};
Loading

0 comments on commit 87d2f50

Please sign in to comment.