2019-10-21 12:01:33 +08:00
|
|
|
import * as React from 'react';
|
2022-08-16 21:06:25 +08:00
|
|
|
import type { DerivativeFunc } from '@ant-design/cssinjs';
|
2022-05-26 17:14:05 +08:00
|
|
|
import type { RequiredMark } from '../form/Form';
|
2022-12-09 15:04:08 +08:00
|
|
|
import type { Locale } from '../locale';
|
2022-09-15 21:26:04 +08:00
|
|
|
import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface';
|
2022-05-26 17:14:05 +08:00
|
|
|
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { SizeType } from './SizeContext';
|
2019-10-21 12:01:33 +08:00
|
|
|
|
2022-02-18 14:17:32 +08:00
|
|
|
export const defaultIconPrefixCls = 'anticon';
|
|
|
|
|
2021-09-01 10:56:50 +08:00
|
|
|
export interface Theme {
|
|
|
|
primaryColor?: string;
|
|
|
|
infoColor?: string;
|
|
|
|
successColor?: string;
|
|
|
|
processingColor?: string;
|
|
|
|
errorColor?: string;
|
|
|
|
warningColor?: string;
|
|
|
|
}
|
|
|
|
|
2019-10-21 12:01:33 +08:00
|
|
|
export interface CSPConfig {
|
|
|
|
nonce?: string;
|
|
|
|
}
|
|
|
|
|
2020-11-03 16:22:18 +08:00
|
|
|
export type DirectionType = 'ltr' | 'rtl' | undefined;
|
|
|
|
|
2022-08-16 21:06:25 +08:00
|
|
|
export type MappingAlgorithm = DerivativeFunc<SeedToken, MapToken>;
|
|
|
|
|
2022-03-24 18:44:42 +08:00
|
|
|
export interface ThemeConfig {
|
2022-09-15 21:26:04 +08:00
|
|
|
token?: Partial<AliasToken>;
|
|
|
|
components?: OverrideToken;
|
2022-08-16 21:06:25 +08:00
|
|
|
algorithm?: MappingAlgorithm | MappingAlgorithm[];
|
2022-03-24 18:44:42 +08:00
|
|
|
hashed?: boolean;
|
2022-11-17 01:06:33 +08:00
|
|
|
inherit?: boolean;
|
2022-03-24 18:44:42 +08:00
|
|
|
}
|
|
|
|
|
2019-10-21 12:01:33 +08:00
|
|
|
export interface ConfigConsumerProps {
|
2020-04-29 20:22:16 +08:00
|
|
|
getTargetContainer?: () => HTMLElement;
|
2021-10-09 10:24:41 +08:00
|
|
|
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
|
2019-10-21 12:01:33 +08:00
|
|
|
rootPrefixCls?: string;
|
2022-02-27 22:17:17 +08:00
|
|
|
iconPrefixCls: string;
|
2020-08-03 11:41:08 +08:00
|
|
|
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
|
2022-05-16 16:34:42 +08:00
|
|
|
renderEmpty?: RenderEmptyHandler;
|
2019-10-21 12:01:33 +08:00
|
|
|
csp?: CSPConfig;
|
|
|
|
autoInsertSpaceInButton?: boolean;
|
2020-04-22 10:38:43 +08:00
|
|
|
input?: {
|
|
|
|
autoComplete?: string;
|
|
|
|
};
|
2022-05-26 17:14:05 +08:00
|
|
|
pagination?: {
|
|
|
|
showSizeChanger?: boolean;
|
|
|
|
};
|
2019-10-21 12:01:33 +08:00
|
|
|
locale?: Locale;
|
|
|
|
pageHeader?: {
|
|
|
|
ghost: boolean;
|
|
|
|
};
|
2020-11-03 16:22:18 +08:00
|
|
|
direction?: DirectionType;
|
2020-03-22 11:38:02 +08:00
|
|
|
space?: {
|
|
|
|
size?: SizeType | number;
|
|
|
|
};
|
2020-05-05 15:00:43 +08:00
|
|
|
virtual?: boolean;
|
|
|
|
dropdownMatchSelectWidth?: boolean;
|
2020-10-24 14:27:49 +08:00
|
|
|
form?: {
|
|
|
|
requiredMark?: RequiredMark;
|
2021-11-11 17:51:33 +08:00
|
|
|
colon?: boolean;
|
2020-10-24 14:27:49 +08:00
|
|
|
};
|
2022-03-24 18:44:42 +08:00
|
|
|
theme?: ThemeConfig;
|
2019-10-21 12:01:33 +08:00
|
|
|
}
|
|
|
|
|
2021-01-09 15:22:08 +08:00
|
|
|
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
|
|
|
|
|
|
return suffixCls ? `ant-${suffixCls}` : 'ant';
|
|
|
|
};
|
|
|
|
|
2022-11-29 19:48:53 +08:00
|
|
|
// zombieJ: 🚨 Do not pass `defaultRenderEmpty` here since it will cause circular dependency.
|
2019-10-30 16:28:28 +08:00
|
|
|
export const ConfigContext = React.createContext<ConfigConsumerProps>({
|
2019-10-21 12:01:33 +08:00
|
|
|
// We provide a default function for Context without provider
|
2021-01-09 15:22:08 +08:00
|
|
|
getPrefixCls: defaultGetPrefixCls,
|
2022-02-18 14:17:32 +08:00
|
|
|
iconPrefixCls: defaultIconPrefixCls,
|
2019-10-21 12:01:33 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
export const ConfigConsumer = ConfigContext.Consumer;
|
|
|
|
|
|
|
|
// =========================== withConfigConsumer ===========================
|
|
|
|
interface BasicExportProps {
|
|
|
|
prefixCls?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ConsumerConfig {
|
|
|
|
prefixCls: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ConstructorProps {
|
|
|
|
displayName?: string;
|
|
|
|
}
|
2020-10-24 14:47:44 +08:00
|
|
|
|
|
|
|
/** @deprecated Use hooks instead. This is a legacy function */
|
2019-10-21 12:01:33 +08:00
|
|
|
export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
|
|
|
|
return function withConfigConsumerFunc<ComponentDef>(
|
2022-10-06 18:53:06 +08:00
|
|
|
Component: React.ComponentType<ExportProps>,
|
2020-03-28 11:56:57 +08:00
|
|
|
): React.FC<ExportProps> & ComponentDef {
|
2022-11-29 19:48:53 +08:00
|
|
|
// Wrap with ConfigConsumer. Since we need compatible with react 15, be careful when using ref methods
|
2019-10-21 12:01:33 +08:00
|
|
|
const SFC = ((props: ExportProps) => (
|
|
|
|
<ConfigConsumer>
|
|
|
|
{(configProps: ConfigConsumerProps) => {
|
|
|
|
const { prefixCls: basicPrefixCls } = config;
|
|
|
|
const { getPrefixCls } = configProps;
|
|
|
|
const { prefixCls: customizePrefixCls } = props;
|
|
|
|
const prefixCls = getPrefixCls(basicPrefixCls, customizePrefixCls);
|
|
|
|
return <Component {...configProps} {...props} prefixCls={prefixCls} />;
|
|
|
|
}}
|
|
|
|
</ConfigConsumer>
|
2020-03-28 11:56:57 +08:00
|
|
|
)) as React.FC<ExportProps> & ComponentDef;
|
2019-10-21 12:01:33 +08:00
|
|
|
|
|
|
|
const cons: ConstructorProps = Component.constructor as ConstructorProps;
|
|
|
|
const name = (cons && cons.displayName) || Component.name || 'Component';
|
|
|
|
|
2022-06-21 10:24:52 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
SFC.displayName = `withConfigConsumer(${name})`;
|
|
|
|
}
|
2019-10-21 12:01:33 +08:00
|
|
|
return SFC;
|
|
|
|
};
|
|
|
|
}
|