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

feat: add new config config.getCommonStyle config.getCompUnitless for genStyleUtils #10

Merged
merged 5 commits into from
Jul 22, 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
5 changes: 4 additions & 1 deletion docs/demos/genStyleUtils.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@ nav:

## 入参介绍

### `genStyleUtils<CompTokenMap>(getConfigProviderContext?, getThemeProviderContext?)`
### `genStyleUtils<CompTokenMap, AliasToken, DesignToken>(config)`
- `config`: 可选,配置
- `useCSP`: 使用 CSP 的钩子函数
- `usePrefix`: 使用样式前缀的钩子函数
- `useToken`: 使用 token 的钩子函数
- `getResetStyles`: 获取重置样式函数
- `getCommonStyle`: 获取通用样式函数
- `getCompUnitless`: 获取组件无单位样式函数
- `CompTokenMap`: 范型参数,表示组件 token 映射
- `AliasToken`: 范型参数,表示别名 token
- `DesignToken`: 范型参数,表示设计 token
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export { default as genCalc } from './util/calc';
export {
default as statisticToken,
merge as mergeToken,
statistic,
} from './util/statistic';

export type {
Expand Down
55 changes: 35 additions & 20 deletions src/util/genStyleUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,13 @@ export type GetResetStyles<
AliasToken extends TokenType,
> = (token: Partial<AliasToken & CompTokenMap>) => CSSInterpolation;

export type GetCompUnitless<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
> = <C extends TokenMapKey<CompTokenMap>>(component: C | [C, string]) => {
[key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
}

export default function genStyleUtils<
CompTokenMap extends TokenMap,
AliasToken extends TokenType,
Expand All @@ -112,6 +119,13 @@ export default function genStyleUtils<
useToken: UseToken<CompTokenMap, AliasToken, DesignToken>;
useCSP?: UseCSP;
getResetStyles?: GetResetStyles<CompTokenMap, AliasToken>,
getCommonStyle?: (
token: OverrideTokenMap<CompTokenMap, AliasToken>,
componentPrefixCls: string,
rootCls?: string,
resetFont?: boolean,
) => CSSObject;
getCompUnitless?: GetCompUnitless<CompTokenMap, AliasToken>,
}
) {
// Dependency inversion for preparing basic config.
Expand All @@ -120,6 +134,8 @@ export default function genStyleUtils<
useToken,
usePrefix,
getResetStyles,
getCommonStyle,
getCompUnitless,
} = config;

function genStyleHooks<C extends TokenMapKey<CompTokenMap>>(
Expand Down Expand Up @@ -165,8 +181,11 @@ export default function genStyleUtils<

// Fill unitless
const originUnitless = options?.unitless || {};

const originCompUnitless = typeof getCompUnitless === 'function' ? getCompUnitless(component) : {};

const compUnitless: any = {
...originUnitless,
...originCompUnitless,
[prefixToken('zIndexPopup')]: true,
};
Object.keys(originUnitless).forEach((key) => {
Expand Down Expand Up @@ -315,12 +334,6 @@ export default function genStyleUtils<
unitless?: {
[key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
};
genCommonStyle?: (
token: OverrideTokenMap<CompTokenMap, AliasToken>,
componentPrefixCls: string,
rootCls?: string,
resetFont?: boolean,
) => CSSObject;
} = {},
) {
const cells = (
Expand Down Expand Up @@ -364,8 +377,7 @@ export default function genStyleUtils<
const { max, min } = genMaxMin(type);

// Shared config
const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> =
{
const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> = {
theme,
token,
hashId,
Expand All @@ -382,7 +394,7 @@ export default function genStyleUtils<
// Generate style for all need reset tags.
useStyleRegister(
{ ...sharedConfig, clientOnly: false, path: ['Shared', rootPrefixCls] },
() => getResetStyles?.(token) ?? [],
() => typeof getResetStyles === 'function' ? getResetStyles(token) : [],
);

const wrapSSR = useStyleRegister(
Expand All @@ -398,7 +410,7 @@ export default function genStyleUtils<
CompTokenMap,
AliasToken,
C
>(component, realToken, getDefaultToken) ?? {};
>(component, realToken, getDefaultToken);

const componentCls = `.${prefixCls}`;
const componentToken = getComponentToken<CompTokenMap, AliasToken, C>(
Expand All @@ -410,7 +422,7 @@ export default function genStyleUtils<
},
);

if (cssVar) {
if (cssVar && typeof defaultComponentToken === 'object') {
Object.keys(defaultComponentToken).forEach((key) => {
defaultComponentToken[key] = `var(${token2CSSVar(
key,
Expand All @@ -423,8 +435,8 @@ export default function genStyleUtils<
{
componentCls,
prefixCls,
iconCls: !!iconPrefixCls.length ? '' : `.${iconPrefixCls}`,
antCls: !!rootPrefixCls.length ? '' : `.${rootPrefixCls}`,
iconCls: `.${iconPrefixCls}`,
antCls: `.${rootPrefixCls}`,
calc,
// @ts-ignore
max,
Expand All @@ -441,15 +453,18 @@ export default function genStyleUtils<
iconPrefixCls,
});
flush(component, componentToken);
const commonStyle = typeof getCommonStyle === 'function'
? getCommonStyle(
mergedToken,
prefixCls,
rootCls,
options.resetFont
)
: null;
return [
options.resetStyle === false
? null
: options?.genCommonStyle?.(
mergedToken,
prefixCls,
rootCls,
options.resetFont,
) ?? {},
: commonStyle,
styleInterpolation,
];
},
Expand Down
2 changes: 2 additions & 0 deletions src/util/statistic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export function merge<CompTokenMap extends TokenMap>(...objs: Partial<CompTokenM
const ret = {} as CompTokenMap;

objs.forEach((obj) => {
if (typeof obj !== 'object') return;

const keys = Object.keys(obj);

keys.forEach((key) => {
Expand Down
Loading