Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: fixed some typescript error #8

Merged
merged 5 commits into from
Jul 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DesignTokenn => DesignToken

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好眼力😂

> 使用建议:为了更好的获得 TS 类型支持,建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap` `DesignTokenn` `AliasToken`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DesignTokenn


## 如何使用
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
Loading