ant-design/components/theme/util/genComponentStyleHook.ts

111 lines
3.9 KiB
TypeScript
Raw Normal View History

/* eslint-disable no-redeclare */
2022-05-09 22:20:07 +08:00
import type { CSSInterpolation } from '@ant-design/cssinjs';
import { useStyleRegister } from '@ant-design/cssinjs';
import { useContext } from 'react';
import { genLinkStyle } from '../../style';
import { ConfigContext } from '../../config-provider/context';
2022-05-09 22:20:07 +08:00
import type { UseComponentStyleResult } from '../index';
import { mergeToken, statisticToken, useToken } from '../index';
import type { ComponentTokenMap, GlobalToken } from '../interface';
import warning from '../../_util/warning';
export type OverrideTokenWithoutDerivative = ComponentTokenMap;
export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
ComponentTokenMap[ComponentName];
export interface StyleInfo {
hashId: string;
prefixCls: string;
rootPrefixCls: string;
iconPrefixCls: string;
}
2022-04-07 00:19:37 +08:00
export type TokenWithCommonCls<T> = T & {
/** Wrap component class with `.` prefix */
componentCls: string;
/** Origin prefix which do not have `.` prefix */
prefixCls: string;
/** Wrap icon class with `.` prefix */
iconCls: string;
/** Wrap ant prefixCls class with `.` prefix */
2022-04-07 00:19:37 +08:00
antCls: string;
};
2022-04-07 00:19:37 +08:00
export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommonCls<
GlobalTokenWithComponent<ComponentName>
>;
export default function genComponentStyleHook<ComponentName extends OverrideComponent>(
component: ComponentName,
styleFn: (token: FullToken<ComponentName>, info: StyleInfo) => CSSInterpolation,
getDefaultToken?:
| OverrideTokenWithoutDerivative[ComponentName]
| ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
) {
return (prefixCls: string): UseComponentStyleResult => {
const [theme, token, hashId] = useToken();
const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
2022-04-07 00:19:37 +08:00
const rootPrefixCls = getPrefixCls();
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
/* istanbul ignore next */
warning(
false,
'Next',
'\n\nYou are using dev version, ' +
'which is used for validating and may not same as final release version.\n\n' +
'DO NOT USE IN YOUR PRODUCTION!\n\n' +
'Ref:#33862 - What is in experimental?\n' +
'https://github.com/ant-design/ant-design/issues/33862#user-content-alpha-offset',
);
}
// Generate style for all a tags in antd component.
useStyleRegister({ theme, token, hashId, path: ['Link'] }, () => ({
'&': genLinkStyle(token),
}));
return [
2022-04-28 18:32:33 +08:00
useStyleRegister({ theme, token, hashId, path: [component, prefixCls] }, () => {
const { token: proxyToken, flush } = statisticToken(token);
const defaultComponentToken =
typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
const overrideComponentToken = token[component] as any;
// Only merge token specified in interface
const mergedComponentToken = { ...defaultComponentToken } as any;
if (overrideComponentToken) {
Object.keys(mergedComponentToken).forEach(key => {
mergedComponentToken[key] = overrideComponentToken[key] ?? mergedComponentToken[key];
});
}
const componentCls = `.${prefixCls}`;
const mergedToken = mergeToken<
2022-04-07 00:19:37 +08:00
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
>(
proxyToken,
2022-04-07 00:19:37 +08:00
{
componentCls,
2022-04-07 00:19:37 +08:00
prefixCls,
iconCls: `.${iconPrefixCls}`,
antCls: `.${rootPrefixCls}`,
},
mergedComponentToken,
);
const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
hashId,
prefixCls,
2022-04-07 00:19:37 +08:00
rootPrefixCls,
iconPrefixCls,
});
flush(component, mergedComponentToken);
return styleInterpolation;
}),
hashId,
];
};
}