context.d.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. import * as React from 'react';
  2. import type { WarningContextProps } from '../_util/warning';
  3. import type { ShowWaveEffect } from '../_util/wave/interface';
  4. import type { AlertProps } from '../alert';
  5. import type { BadgeProps } from '../badge';
  6. import type { ButtonProps } from '../button';
  7. import type { CardProps } from '../card';
  8. import type { CascaderProps } from '../cascader';
  9. import type { CollapseProps } from '../collapse';
  10. import type { DatePickerProps, RangePickerProps } from '../date-picker';
  11. import type { DescriptionsProps } from '../descriptions';
  12. import type { DrawerProps } from '../drawer';
  13. import type { EmptyProps } from '../empty';
  14. import type { FlexProps } from '../flex/interface';
  15. import type { FloatButtonGroupProps } from '../float-button/interface';
  16. import type { FormProps } from '../form/Form';
  17. import type { InputProps, TextAreaProps } from '../input';
  18. import type { InputNumberProps } from '../input-number';
  19. import type { ListItemProps } from '../list';
  20. import type { Locale } from '../locale';
  21. import type { MentionsProps } from '../mentions';
  22. import type { MenuProps } from '../menu';
  23. import type { ModalProps } from '../modal';
  24. import type { ArgsProps } from '../notification/interface';
  25. import type { PaginationProps } from '../pagination';
  26. import type { PopconfirmProps } from '../popconfirm';
  27. import type { PopoverProps } from '../popover';
  28. import type { SelectProps } from '../select';
  29. import type { SliderProps } from '../slider';
  30. import type { SpaceProps } from '../space';
  31. import type { SpinProps } from '../spin';
  32. import type { TableProps } from '../table';
  33. import type { TabsProps } from '../tabs';
  34. import type { TagProps } from '../tag';
  35. import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
  36. import type { TimePickerProps } from '../time-picker';
  37. import type { TooltipProps } from '../tooltip';
  38. import type { TourProps } from '../tour/interface';
  39. import type { TransferProps } from '../transfer';
  40. import type { TreeSelectProps } from '../tree-select';
  41. import type { RenderEmptyHandler } from './defaultRenderEmpty';
  42. import type { UploadProps } from '../upload';
  43. export declare const defaultPrefixCls = "ant";
  44. export declare const defaultIconPrefixCls = "anticon";
  45. export interface Theme {
  46. primaryColor?: string;
  47. infoColor?: string;
  48. successColor?: string;
  49. processingColor?: string;
  50. errorColor?: string;
  51. warningColor?: string;
  52. }
  53. export interface CSPConfig {
  54. nonce?: string;
  55. }
  56. export type DirectionType = 'ltr' | 'rtl' | undefined;
  57. type ComponentsConfig = {
  58. [key in keyof OverrideToken]?: OverrideToken[key] & {
  59. algorithm?: boolean | MappingAlgorithm | MappingAlgorithm[];
  60. };
  61. };
  62. export interface ThemeConfig {
  63. /**
  64. * @descCN 用于修改 Design Token。
  65. * @descEN Modify Design Token.
  66. */
  67. token?: Partial<AliasToken>;
  68. /**
  69. * @descCN 用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias Token。
  70. * @descEN Modify Component Token and Alias Token applied to components.
  71. */
  72. components?: ComponentsConfig;
  73. /**
  74. * @descCN 用于修改 Seed Token 到 Map Token 的算法。
  75. * @descEN Modify the algorithms of theme.
  76. * @default defaultAlgorithm
  77. */
  78. algorithm?: MappingAlgorithm | MappingAlgorithm[];
  79. /**
  80. * @descCN 是否继承外层 `ConfigProvider` 中配置的主题。
  81. * @descEN Whether to inherit the theme configured in the outer layer `ConfigProvider`.
  82. * @default true
  83. */
  84. inherit?: boolean;
  85. /**
  86. * @descCN 是否开启 `hashed` 属性。如果你的应用中只存在一个版本的 antd,你可以设置为 `false` 来进一步减小样式体积。
  87. * @descEN Whether to enable the `hashed` attribute. If there is only one version of antd in your application, you can set `false` to reduce the bundle size.
  88. * @default true
  89. * @since 5.0.0
  90. */
  91. hashed?: boolean;
  92. /**
  93. * @descCN 通过 `cssVar` 配置来开启 CSS 变量模式,这个配置会被继承。
  94. * @descEN Enable CSS variable mode through `cssVar` configuration, This configuration will be inherited.
  95. * @default false
  96. * @since 5.12.0
  97. */
  98. cssVar?: {
  99. /**
  100. * @descCN css 变量的前缀
  101. * @descEN Prefix for css variable.
  102. * @default ant
  103. */
  104. prefix?: string;
  105. /**
  106. * @descCN 主题的唯一 key,版本低于 react@18 时需要手动设置。
  107. * @descEN Unique key for theme, should be set manually < react@18.
  108. */
  109. key?: string;
  110. } | boolean;
  111. }
  112. export interface ComponentStyleConfig {
  113. className?: string;
  114. style?: React.CSSProperties;
  115. }
  116. export interface TableConfig extends ComponentStyleConfig {
  117. expandable?: {
  118. expandIcon?: NonNullable<TableProps['expandable']>['expandIcon'];
  119. };
  120. }
  121. export interface ImageConfig extends ComponentStyleConfig {
  122. preview?: Partial<Record<'closeIcon', React.ReactNode>>;
  123. }
  124. export type CollapseConfig = ComponentStyleConfig & Pick<CollapseProps, 'expandIcon'>;
  125. export type MenuConfig = ComponentStyleConfig & Pick<MenuProps, 'expandIcon'>;
  126. export type TourConfig = Pick<TourProps, 'closeIcon'>;
  127. export type DescriptionsConfig = ComponentStyleConfig & Pick<DescriptionsProps, 'classNames' | 'styles'>;
  128. export type EmptyConfig = ComponentStyleConfig & Pick<EmptyProps, 'classNames' | 'styles' | 'image'>;
  129. export type ModalConfig = ComponentStyleConfig & Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable' | 'centered'>;
  130. export type TabsConfig = ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize' | 'more' | 'moreIcon' | 'addIcon' | 'removeIcon'>;
  131. export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closable' | 'closeIcon'>;
  132. export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
  133. export type InputConfig = ComponentStyleConfig & Pick<InputProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear' | 'variant'>;
  134. export type TextAreaConfig = ComponentStyleConfig & Pick<TextAreaProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear' | 'variant'>;
  135. export type ButtonConfig = ComponentStyleConfig & Pick<ButtonProps, 'classNames' | 'styles' | 'autoInsertSpace' | 'variant' | 'color' | 'shape'>;
  136. export type NotificationConfig = ComponentStyleConfig & Pick<ArgsProps, 'closeIcon'>;
  137. export type TagConfig = ComponentStyleConfig & Pick<TagProps, 'closeIcon' | 'closable'>;
  138. export type CardConfig = ComponentStyleConfig & Pick<CardProps, 'classNames' | 'styles' | 'variant'>;
  139. export type DrawerConfig = ComponentStyleConfig & Pick<DrawerProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
  140. export type FlexConfig = ComponentStyleConfig & Pick<FlexProps, 'vertical'>;
  141. export type TransferConfig = ComponentStyleConfig & Pick<TransferProps, 'selectionsIcon'>;
  142. export type FormConfig = ComponentStyleConfig & Pick<FormProps, 'requiredMark' | 'colon' | 'scrollToFirstError' | 'validateMessages' | 'variant'>;
  143. export type FloatButtonConfig = {
  144. backTopIcon?: React.ReactNode;
  145. };
  146. export type FloatButtonGroupConfig = Pick<FloatButtonGroupProps, 'closeIcon'>;
  147. export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger'>;
  148. export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch' | 'variant' | 'classNames' | 'styles'>;
  149. export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
  150. export type TooltipConfig = Pick<TooltipProps, 'className' | 'style' | 'styles' | 'classNames'>;
  151. export type PopoverConfig = Pick<PopoverProps, 'className' | 'style' | 'styles' | 'classNames'>;
  152. export type PopconfirmConfig = Pick<PopconfirmProps, 'className' | 'style' | 'styles' | 'classNames'>;
  153. export type SliderConfig = ComponentStyleConfig & Pick<SliderProps, 'styles' | 'classNames'>;
  154. export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
  155. export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
  156. export type CascaderConfig = ComponentStyleConfig & Pick<CascaderProps, 'variant' | 'styles' | 'classNames'>;
  157. export type TreeSelectConfig = ComponentStyleConfig & Pick<TreeSelectProps, 'variant' | 'styles' | 'classNames'>;
  158. export type DatePickerConfig = ComponentStyleConfig & Pick<DatePickerProps, 'variant' | 'styles' | 'classNames'>;
  159. export type RangePickerConfig = ComponentStyleConfig & Pick<RangePickerProps, 'variant'>;
  160. export type TimePickerConfig = ComponentStyleConfig & Pick<TimePickerProps, 'variant' | 'styles' | 'classNames'>;
  161. export type MentionsConfig = ComponentStyleConfig & Pick<MentionsProps, 'variant'>;
  162. export type PopupOverflow = 'viewport' | 'scroll';
  163. export interface ListConfig extends ComponentStyleConfig {
  164. item?: Pick<ListItemProps, 'classNames' | 'styles'>;
  165. }
  166. export type UploadConfig = ComponentStyleConfig & Pick<UploadProps, 'customRequest'>;
  167. export declare const Variants: readonly ["outlined", "borderless", "filled", "underlined"];
  168. export type Variant = (typeof Variants)[number];
  169. export interface WaveConfig {
  170. /**
  171. * @descCN 是否禁用水波纹效果。
  172. * @descEN Whether to disable wave effect.
  173. * @default false
  174. */
  175. disabled?: boolean;
  176. /**
  177. * @descCN 自定义水波纹效果。
  178. * @descEN Customized wave effect.
  179. */
  180. showEffect?: ShowWaveEffect;
  181. }
  182. export interface ConfigComponentProps {
  183. input?: InputConfig;
  184. textArea?: TextAreaConfig;
  185. inputNumber?: InputNumberConfig;
  186. pagination?: PaginationConfig;
  187. space?: SpaceConfig;
  188. splitter?: ComponentStyleConfig;
  189. form?: FormConfig;
  190. select?: SelectConfig;
  191. alert?: AlertConfig;
  192. anchor?: ComponentStyleConfig;
  193. button?: ButtonConfig;
  194. divider?: ComponentStyleConfig;
  195. drawer?: DrawerConfig;
  196. calendar?: ComponentStyleConfig;
  197. carousel?: ComponentStyleConfig;
  198. cascader?: CascaderConfig;
  199. treeSelect?: TreeSelectConfig;
  200. collapse?: CollapseConfig;
  201. floatButton?: FloatButtonConfig;
  202. floatButtonGroup?: FloatButtonGroupConfig;
  203. typography?: ComponentStyleConfig;
  204. skeleton?: ComponentStyleConfig;
  205. spin?: SpinConfig;
  206. segmented?: ComponentStyleConfig;
  207. steps?: ComponentStyleConfig;
  208. statistic?: ComponentStyleConfig;
  209. image?: ImageConfig;
  210. layout?: ComponentStyleConfig;
  211. list?: ListConfig;
  212. mentions?: MentionsConfig;
  213. modal?: ModalConfig;
  214. progress?: ComponentStyleConfig;
  215. result?: ComponentStyleConfig;
  216. slider?: SliderConfig;
  217. breadcrumb?: ComponentStyleConfig;
  218. menu?: MenuConfig;
  219. checkbox?: ComponentStyleConfig;
  220. descriptions?: DescriptionsConfig;
  221. empty?: EmptyConfig;
  222. badge?: BadgeConfig;
  223. radio?: ComponentStyleConfig;
  224. rate?: ComponentStyleConfig;
  225. switch?: ComponentStyleConfig;
  226. transfer?: TransferConfig;
  227. avatar?: ComponentStyleConfig;
  228. message?: ComponentStyleConfig;
  229. tag?: TagConfig;
  230. table?: TableConfig;
  231. card?: CardConfig;
  232. tabs?: TabsConfig;
  233. timeline?: ComponentStyleConfig;
  234. timePicker?: TimePickerConfig;
  235. tour?: TourConfig;
  236. tooltip?: TooltipConfig;
  237. popover?: PopoverConfig;
  238. popconfirm?: PopconfirmConfig;
  239. upload?: UploadConfig;
  240. notification?: NotificationConfig;
  241. tree?: ComponentStyleConfig;
  242. colorPicker?: ComponentStyleConfig;
  243. datePicker?: DatePickerConfig;
  244. rangePicker?: RangePickerConfig;
  245. dropdown?: ComponentStyleConfig;
  246. flex?: FlexConfig;
  247. wave?: WaveConfig;
  248. }
  249. export interface ConfigConsumerProps extends ConfigComponentProps {
  250. getTargetContainer?: () => HTMLElement;
  251. getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
  252. rootPrefixCls?: string;
  253. iconPrefixCls: string;
  254. getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
  255. renderEmpty?: RenderEmptyHandler;
  256. /**
  257. * @descCN 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置。
  258. * @descEN Set the [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config.
  259. */
  260. csp?: CSPConfig;
  261. /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
  262. autoInsertSpaceInButton?: boolean;
  263. variant?: Variant;
  264. virtual?: boolean;
  265. locale?: Locale;
  266. direction?: DirectionType;
  267. popupMatchSelectWidth?: boolean;
  268. popupOverflow?: PopupOverflow;
  269. theme?: ThemeConfig;
  270. warning?: WarningContextProps;
  271. }
  272. export declare const ConfigContext: React.Context<ConfigConsumerProps>;
  273. export declare const ConfigConsumer: React.Consumer<ConfigConsumerProps>;
  274. type GetClassNamesOrEmptyObject<Config extends {
  275. classNames?: any;
  276. }> = Config extends {
  277. classNames?: infer ClassNames;
  278. } ? ClassNames : object;
  279. type GetStylesOrEmptyObject<Config extends {
  280. styles?: any;
  281. }> = Config extends {
  282. styles?: infer Styles;
  283. } ? Styles : object;
  284. type ComponentReturnType<T extends keyof ConfigComponentProps> = Omit<NonNullable<ConfigComponentProps[T]>, 'classNames' | 'styles'> & {
  285. classNames: GetClassNamesOrEmptyObject<NonNullable<ConfigComponentProps[T]>>;
  286. styles: GetStylesOrEmptyObject<NonNullable<ConfigComponentProps[T]>>;
  287. getPrefixCls: ConfigConsumerProps['getPrefixCls'];
  288. direction: ConfigConsumerProps['direction'];
  289. getPopupContainer: ConfigConsumerProps['getPopupContainer'];
  290. };
  291. /**
  292. * Get ConfigProvider configured component props.
  293. * This help to reduce bundle size for saving `?.` operator.
  294. * Do not use as `useMemo` deps since we do not cache the object here.
  295. *
  296. * NOTE: not refactor this with `useMemo` since memo will cost another memory space,
  297. * which will waste both compare calculation & memory.
  298. */
  299. export declare function useComponentConfig<T extends keyof ConfigComponentProps>(propName: T): ComponentReturnType<T>;
  300. export {};