2022-04-02 22:55:02 +08:00
|
|
|
/* 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';
|
2022-04-02 22:55:02 +08:00
|
|
|
import { useContext } from 'react';
|
2022-07-11 15:35:58 +08:00
|
|
|
import { genLinkStyle } from '../../style';
|
2022-06-27 14:25:59 +08:00
|
|
|
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';
|
2022-06-27 11:54:31 +08:00
|
|
|
import type { ComponentTokenMap, GlobalToken } from '../interface';
|
2022-07-08 15:18:01 +08:00
|
|
|
import warning from '../../_util/warning';
|
2022-04-02 22:55:02 +08:00
|
|
|
|
2022-06-27 11:54:31 +08:00
|
|
|
export type OverrideTokenWithoutDerivative = ComponentTokenMap;
|
2022-04-02 22:55:02 +08:00
|
|
|
export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
|
|
|
|
export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
|
2022-06-27 11:54:31 +08:00
|
|
|
ComponentTokenMap[ComponentName];
|
2022-04-25 10:54:00 +08:00
|
|
|
|
|
|
|
export interface StyleInfo {
|
2022-04-02 22:55:02 +08:00
|
|
|
hashId: string;
|
|
|
|
prefixCls: string;
|
|
|
|
rootPrefixCls: string;
|
|
|
|
iconPrefixCls: string;
|
2022-04-25 10:54:00 +08:00
|
|
|
}
|
|
|
|
|
2022-04-07 00:19:37 +08:00
|
|
|
export type TokenWithCommonCls<T> = T & {
|
2022-04-25 10:54:00 +08:00
|
|
|
/** Wrap component class with `.` prefix */
|
2022-04-06 12:20:52 +08:00
|
|
|
componentCls: string;
|
2022-04-25 10:54:00 +08:00
|
|
|
/** Origin prefix which do not have `.` prefix */
|
2022-04-06 12:20:52 +08:00
|
|
|
prefixCls: string;
|
2022-04-25 10:54:00 +08:00
|
|
|
/** Wrap icon class with `.` prefix */
|
2022-04-06 12:20:52 +08:00
|
|
|
iconCls: string;
|
2022-04-25 10:54:00 +08:00
|
|
|
/** Wrap ant prefixCls class with `.` prefix */
|
2022-04-07 00:19:37 +08:00
|
|
|
antCls: string;
|
2022-04-06 12:20:52 +08:00
|
|
|
};
|
2022-04-07 00:19:37 +08:00
|
|
|
export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommonCls<
|
2022-04-02 22:55:02 +08:00
|
|
|
GlobalTokenWithComponent<ComponentName>
|
|
|
|
>;
|
|
|
|
|
2022-05-17 18:39:13 +08:00
|
|
|
export default function genComponentStyleHook<ComponentName extends OverrideComponent>(
|
2022-04-02 22:55:02 +08:00
|
|
|
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();
|
2022-04-02 22:55:02 +08:00
|
|
|
|
2022-07-08 15:18:01 +08:00
|
|
|
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',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-07-13 18:08:03 +08:00
|
|
|
// Generate style for all a tags in antd component.
|
|
|
|
useStyleRegister({ theme, token, hashId, path: ['Link'] }, () => ({
|
|
|
|
'&': genLinkStyle(token),
|
|
|
|
}));
|
|
|
|
|
2022-04-02 22:55:02 +08:00
|
|
|
return [
|
2022-04-28 18:32:33 +08:00
|
|
|
useStyleRegister({ theme, token, hashId, path: [component, prefixCls] }, () => {
|
2022-04-02 22:55:02 +08:00
|
|
|
const { token: proxyToken, flush } = statisticToken(token);
|
|
|
|
|
|
|
|
const defaultComponentToken =
|
2022-04-11 16:04:00 +08:00
|
|
|
typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
|
2022-04-02 22:55:02 +08:00
|
|
|
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];
|
|
|
|
});
|
|
|
|
}
|
2022-07-11 15:35:58 +08:00
|
|
|
|
|
|
|
const componentCls = `.${prefixCls}`;
|
2022-04-02 22:55:02 +08:00
|
|
|
const mergedToken = mergeToken<
|
2022-04-07 00:19:37 +08:00
|
|
|
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
|
2022-04-06 12:20:52 +08:00
|
|
|
>(
|
|
|
|
proxyToken,
|
2022-04-07 00:19:37 +08:00
|
|
|
{
|
2022-07-11 15:35:58 +08:00
|
|
|
componentCls,
|
2022-04-07 00:19:37 +08:00
|
|
|
prefixCls,
|
|
|
|
iconCls: `.${iconPrefixCls}`,
|
|
|
|
antCls: `.${rootPrefixCls}`,
|
|
|
|
},
|
2022-04-06 12:20:52 +08:00
|
|
|
mergedComponentToken,
|
|
|
|
);
|
2022-04-02 22:55:02 +08:00
|
|
|
|
|
|
|
const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
|
|
|
|
hashId,
|
|
|
|
prefixCls,
|
2022-04-07 00:19:37 +08:00
|
|
|
rootPrefixCls,
|
2022-04-02 22:55:02 +08:00
|
|
|
iconPrefixCls,
|
|
|
|
});
|
2022-05-24 19:48:44 +08:00
|
|
|
flush(component, mergedComponentToken);
|
2022-07-13 18:08:03 +08:00
|
|
|
return styleInterpolation;
|
2022-04-02 22:55:02 +08:00
|
|
|
}),
|
|
|
|
hashId,
|
|
|
|
];
|
|
|
|
};
|
|
|
|
}
|