mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
de2992f96f
* chore: base move * chore: all path * chore: fix script
139 lines
3.8 KiB
TypeScript
139 lines
3.8 KiB
TypeScript
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
|
import { Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
|
|
import React from 'react';
|
|
import version from '../version';
|
|
import type { DeepPartial } from '../_util/type';
|
|
import type {
|
|
AliasToken,
|
|
GlobalToken,
|
|
MapToken,
|
|
OverrideToken,
|
|
PresetColorType,
|
|
SeedToken,
|
|
} from './interface';
|
|
import { PresetColors } from './interface';
|
|
import defaultDerivative from './themes/default';
|
|
import defaultSeedToken from './themes/seed';
|
|
import { clearFix, operationUnit, resetComponent, resetIcon, roundedArrow } from './util';
|
|
import formatToken from './util/alias';
|
|
import type { FullToken } from './util/genComponentStyleHook';
|
|
import genComponentStyleHook from './util/genComponentStyleHook';
|
|
import getArrowStyle from './util/placementArrow';
|
|
import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
|
|
|
|
export {
|
|
resetComponent,
|
|
resetIcon,
|
|
clearFix,
|
|
roundedArrow,
|
|
getArrowStyle,
|
|
operationUnit,
|
|
// colors
|
|
PresetColors,
|
|
// Statistic
|
|
statistic,
|
|
statisticToken,
|
|
mergeToken,
|
|
// hooks
|
|
useStyleRegister,
|
|
genComponentStyleHook,
|
|
};
|
|
export type {
|
|
SeedToken,
|
|
AliasToken,
|
|
PresetColorType,
|
|
// FIXME: Remove this type
|
|
AliasToken as DerivativeToken,
|
|
FullToken,
|
|
};
|
|
|
|
// ================================ Context =================================
|
|
export const DesignTokenContext = React.createContext<{
|
|
token: Partial<SeedToken>;
|
|
derivative?: (token: SeedToken) => MapToken;
|
|
override?: DeepPartial<OverrideToken>;
|
|
hashed?: string | boolean;
|
|
}>({
|
|
token: defaultSeedToken,
|
|
});
|
|
|
|
// ================================== Hook ==================================
|
|
// In dev env, we refresh salt per hour to avoid user use this
|
|
// Note: Do not modify this to real time update which will make debug harder
|
|
const saltPrefix =
|
|
process.env.NODE_ENV === 'production' ? version : `${version}-${new Date().getHours()}`;
|
|
|
|
export function useToken(): [Theme<SeedToken, MapToken>, GlobalToken, string] {
|
|
const {
|
|
token: rootDesignToken,
|
|
override,
|
|
derivative = defaultDerivative,
|
|
hashed,
|
|
} = React.useContext(DesignTokenContext);
|
|
|
|
const theme = new Theme(derivative);
|
|
|
|
const salt = `${saltPrefix}-${hashed || ''}`;
|
|
|
|
const [token, hashId] = useCacheToken<GlobalToken, SeedToken>(
|
|
theme,
|
|
[defaultSeedToken, rootDesignToken],
|
|
{
|
|
salt,
|
|
override,
|
|
formatToken,
|
|
},
|
|
);
|
|
|
|
return [theme, token, hashed ? hashId : ''];
|
|
}
|
|
|
|
export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
|
|
|
|
export type GenerateStyle<
|
|
ComponentToken extends object = AliasToken,
|
|
ReturnType = CSSInterpolation,
|
|
> = (token: ComponentToken) => ReturnType;
|
|
|
|
export const emptyTheme = new Theme(token => token);
|
|
|
|
export type CustomTokenOptions<
|
|
CustomSeedToken extends Record<string, any>,
|
|
CustomAliasToken extends Record<string, any> = {},
|
|
> = {
|
|
/** The original tokens, which may affect other tokens. */
|
|
seedToken?: CustomSeedToken;
|
|
/** Generate token based on seedToken. */
|
|
formatToken?: (
|
|
mergedToken: AliasToken & CustomSeedToken,
|
|
) => AliasToken & CustomSeedToken & CustomAliasToken;
|
|
};
|
|
|
|
/**
|
|
* Generate custom tokens with tokens of ant-design.
|
|
*/
|
|
export function useCustomToken<
|
|
CustomSeedToken extends Record<string, any>,
|
|
CustomAliasToken extends Record<string, any> = {},
|
|
>({
|
|
seedToken,
|
|
formatToken: customFormatToken,
|
|
}: CustomTokenOptions<CustomSeedToken, CustomAliasToken>): {
|
|
token: AliasToken & CustomSeedToken & CustomAliasToken;
|
|
hashId: string;
|
|
} {
|
|
const [, antdToken, hashed] = useToken();
|
|
|
|
const salt = `${saltPrefix}-${hashed || ''}`;
|
|
|
|
const [token, hashId] = useCacheToken(emptyTheme, [antdToken, seedToken ?? {}], {
|
|
salt,
|
|
formatToken: customFormatToken,
|
|
});
|
|
|
|
return {
|
|
token,
|
|
hashId: hashed ? hashId : '',
|
|
};
|
|
}
|