interface.d.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. /// <reference types="react" />
  2. import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
  3. import type { GenerateConfig } from './generate';
  4. export type NullableDateType<DateType> = DateType | null | undefined;
  5. export type Locale = {
  6. locale: string;
  7. /** @deprecated Please use `fieldDateFormat` instead */
  8. dateFormat?: string;
  9. /** @deprecated Please use `fieldDateTimeFormat` instead */
  10. dateTimeFormat?: string;
  11. /** Input field formatter like YYYY-MM-DD HH:mm:ss */
  12. fieldDateTimeFormat?: string;
  13. /** Input field formatter like YYYY-MM-DD */
  14. fieldDateFormat?: string;
  15. /** Input field formatter like HH:mm:ss */
  16. fieldTimeFormat?: string;
  17. /** Input field formatter like YYYY-MM */
  18. fieldMonthFormat?: string;
  19. /** Input field formatter like YYYY */
  20. fieldYearFormat?: string;
  21. /** Input field formatter like wwww-go */
  22. fieldWeekFormat?: string;
  23. /** Input field formatter like YYYY-Q */
  24. fieldQuarterFormat?: string;
  25. /** Display month before year in date panel header */
  26. monthBeforeYear?: boolean;
  27. /** year format in header panel */
  28. yearFormat?: string;
  29. /** month format in header panel */
  30. monthFormat?: string;
  31. /** year format in body panel */
  32. cellYearFormat?: string;
  33. /** quarter format in body panel */
  34. cellQuarterFormat?: string;
  35. /** @deprecated Please use `cellDateFormat` instead */
  36. dayFormat?: string;
  37. /** day format in body panel */
  38. cellDateFormat?: string;
  39. /** meridiem format in body panel */
  40. cellMeridiemFormat?: string;
  41. today: string;
  42. now: string;
  43. backToToday: string;
  44. ok: string;
  45. timeSelect: string;
  46. dateSelect: string;
  47. weekSelect?: string;
  48. clear: string;
  49. week: string;
  50. month: string;
  51. year: string;
  52. previousMonth: string;
  53. nextMonth: string;
  54. monthSelect: string;
  55. yearSelect: string;
  56. decadeSelect: string;
  57. previousYear: string;
  58. nextYear: string;
  59. previousDecade: string;
  60. nextDecade: string;
  61. previousCentury: string;
  62. nextCentury: string;
  63. shortWeekDays?: string[];
  64. shortMonths?: string[];
  65. };
  66. export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade';
  67. export type InternalMode = PanelMode | 'datetime';
  68. export type PickerMode = Exclude<PanelMode, 'datetime' | 'decade'>;
  69. export type DisabledDate<DateType = any> = (date: DateType, info: {
  70. type: PanelMode;
  71. /**
  72. * Only work in RangePicker.
  73. * Tell the first date user selected on this range selection.
  74. * This is not care about what field user click.
  75. */
  76. from?: DateType;
  77. }) => boolean;
  78. export interface BaseInfo {
  79. range?: 'start' | 'end';
  80. }
  81. export interface CellRenderInfo<DateType> extends BaseInfo {
  82. prefixCls: string;
  83. originNode: React.ReactElement;
  84. today: DateType;
  85. type: PanelMode;
  86. locale?: Locale;
  87. subType?: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';
  88. }
  89. export type CellRender<DateType, CurrentType = DateType | number | string> = (current: CurrentType, info: CellRenderInfo<DateType>) => React.ReactNode;
  90. export interface ValueDate<DateType = any> {
  91. label: React.ReactNode;
  92. value: DateType | (() => DateType);
  93. }
  94. export interface DisabledTimes {
  95. disabledHours?: () => number[];
  96. disabledMinutes?: (hour: number) => number[];
  97. disabledSeconds?: (hour: number, minute: number) => number[];
  98. disabledMilliseconds?: (hour: number, minute: number, second: number) => number[];
  99. }
  100. export interface SharedTimeProps<DateType extends object = any> {
  101. /** Only work in picker is `time` */
  102. format?: string;
  103. /** Only work in picker is `time` */
  104. showNow?: boolean;
  105. /** Only work in picker is `time` */
  106. showHour?: boolean;
  107. /** Only work in picker is `time` */
  108. showMinute?: boolean;
  109. /** Only work in picker is `time` */
  110. showSecond?: boolean;
  111. /** Only work in picker is `time` */
  112. showMillisecond?: boolean;
  113. /** Only work in picker is `time` */
  114. use12Hours?: boolean;
  115. /** Only work in picker is `time` */
  116. hourStep?: IntRange<1, 23>;
  117. /** Only work in picker is `time` */
  118. minuteStep?: IntRange<1, 59>;
  119. /** Only work in picker is `time` */
  120. secondStep?: IntRange<1, 59>;
  121. /**
  122. * Only work in picker is `time`.
  123. * Note that too small step will cause performance issue.
  124. */
  125. millisecondStep?: IntRange<1, 999>;
  126. /** Only work in picker is `time` */
  127. hideDisabledOptions?: boolean;
  128. /** @deprecated Use `defaultOpenValue` instead */
  129. defaultValue?: DateType;
  130. /** Set default value template when empty selection */
  131. defaultOpenValue?: DateType;
  132. /** @deprecated Please use `disabledTime` instead. */
  133. disabledHours?: DisabledTimes['disabledHours'];
  134. /** @deprecated Please use `disabledTime` instead. */
  135. disabledMinutes?: DisabledTimes['disabledMinutes'];
  136. /** @deprecated Please use `disabledTime` instead. */
  137. disabledSeconds?: DisabledTimes['disabledSeconds'];
  138. /** Only work in picker is `time` */
  139. disabledTime?: (date: DateType) => DisabledTimes;
  140. /** Only work in picker is `time` */
  141. changeOnScroll?: boolean;
  142. }
  143. export type RangeTimeProps<DateType extends object = any> = Omit<SharedTimeProps<DateType>, 'defaultValue' | 'defaultOpenValue' | 'disabledTime'> & {
  144. /** @deprecated Use `defaultOpenValue` instead. */
  145. defaultValue?: DateType[];
  146. defaultOpenValue?: DateType[];
  147. disabledTime?: (date: DateType, range: 'start' | 'end', info: {
  148. from?: DateType;
  149. }) => DisabledTimes;
  150. };
  151. export type OnPanelChange<DateType> = (value: DateType, mode: PanelMode) => void;
  152. export type LimitDate<DateType extends object = any> = DateType | ((info: {
  153. /**
  154. * Tell the first date user selected on this range selection.
  155. * This is not care about what field user click.
  156. */
  157. from?: DateType;
  158. }) => DateType | null | undefined);
  159. export interface SharedPanelProps<DateType extends object = any> {
  160. prefixCls: string;
  161. locale: Locale;
  162. generateConfig: GenerateConfig<DateType>;
  163. pickerValue: DateType;
  164. onPickerValueChange: (date: DateType) => void;
  165. value?: DateType;
  166. /**
  167. * Should trigger when user select the cell.
  168. * PickerPanel will mark as `value` in single mode,
  169. * Or toggle `values` in multiple mode.
  170. */
  171. onSelect: (date: DateType) => void;
  172. /**
  173. * Used for `multiple` mode.
  174. * When not `multiple`, it will be `[value]`.
  175. */
  176. values?: DateType[];
  177. onModeChange: (mode: PanelMode, date?: DateType) => void;
  178. disabledDate?: DisabledDate<DateType>;
  179. minDate?: DateType;
  180. maxDate?: DateType;
  181. cellRender?: CellRender<DateType>;
  182. /** @private Only used for RangePicker passing. */
  183. hoverRangeValue: [start: DateType, end: DateType] | null;
  184. /** @private Only used for SinglePicker passing. */
  185. hoverValue: DateType[] | null;
  186. onHover?: (value: DateType | null) => void;
  187. /**
  188. * Only used for `date` mode.
  189. */
  190. showTime?: SharedTimeProps<DateType>;
  191. /**
  192. * Only used for `date` mode.
  193. */
  194. showWeek?: boolean;
  195. prevIcon?: React.ReactNode;
  196. nextIcon?: React.ReactNode;
  197. superPrevIcon?: React.ReactNode;
  198. superNextIcon?: React.ReactNode;
  199. }
  200. export type Components<DateType extends object = any> = Partial<Record<InternalMode, React.ComponentType<SharedPanelProps<DateType>>> & {
  201. button?: React.ComponentType<any> | string;
  202. input?: React.ComponentType<any> | string;
  203. }>;
  204. export type SemanticStructure = 'popup';
  205. export type CustomFormat<DateType> = (value: DateType) => string;
  206. export type FormatType<DateType = any> = string | CustomFormat<DateType>;
  207. export type SharedHTMLAttrs = Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'placeholder' | 'id' | 'onInvalid' | 'disabled' | 'onFocus' | 'onBlur' | 'onSelect' | 'min' | 'max' | 'onKeyDown' | 'size' | 'prefix'>;
  208. export type PickerFocusEventHandler = (e: React.FocusEvent<HTMLElement>, info: BaseInfo) => void;
  209. export type LegacyOnKeyDown = (event: React.KeyboardEvent<HTMLElement>, preventDefault: VoidFunction) => void;
  210. export interface SharedPickerProps<DateType extends object = any> extends SharedHTMLAttrs, Pick<SharedPanelProps<DateType>, 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
  211. direction?: 'ltr' | 'rtl';
  212. prefixCls?: string;
  213. className?: string;
  214. style?: React.CSSProperties;
  215. styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
  216. classNames?: Partial<Record<SemanticStructure, string>>;
  217. locale: Locale;
  218. generateConfig: GenerateConfig<DateType>;
  219. picker?: PickerMode;
  220. /** Only work when picker is `date` or `time` */
  221. showTime?: boolean | SharedTimeProps<DateType>;
  222. /** Only work when picker is `date` */
  223. showWeek?: boolean;
  224. /**
  225. * Config the input field parse and format.
  226. * When set `format.type`, it will force user input type with your input,
  227. * it's only support basic format mask: YYYY, MM, DD, HH, mm, ss, SSS.
  228. * Once use config mode, it must be fill with format your config.
  229. */
  230. format?: FormatType<DateType> | FormatType<DateType>[] | {
  231. format: string;
  232. type?: 'mask';
  233. };
  234. prefix?: React.ReactNode;
  235. suffixIcon?: React.ReactNode;
  236. allowClear?: boolean | {
  237. clearIcon?: React.ReactNode;
  238. };
  239. /** @deprecated Please use `allowClear.clearIcon` instead */
  240. clearIcon?: React.ReactNode;
  241. onFocus?: PickerFocusEventHandler;
  242. onBlur?: PickerFocusEventHandler;
  243. /** `preventDefault` is deprecated which will remove from future version. */
  244. onKeyDown?: LegacyOnKeyDown;
  245. inputReadOnly?: boolean;
  246. /** Default will always order of selection after submit */
  247. order?: boolean;
  248. disabledDate?: DisabledDate<DateType>;
  249. /** Limit the selectable range. This will limit picker navigation also */
  250. minDate?: DateType;
  251. /** Limit the selectable range. This will limit picker navigation also */
  252. maxDate?: DateType;
  253. defaultOpenValue?: DateType;
  254. defaultOpen?: boolean;
  255. open?: boolean;
  256. onOpenChange?: (open: boolean) => void;
  257. popupAlign?: AlignType;
  258. getPopupContainer?: (node: HTMLElement) => HTMLElement;
  259. placement?: string;
  260. builtinPlacements?: BuildInPlacements;
  261. /**
  262. * By default. Only `time` or `datetime` show the confirm button in panel.
  263. * `true` to make every picker need confirm.
  264. * `false` to trigger change on every time panel closed by the mode = picker.
  265. */
  266. needConfirm?: boolean;
  267. /**
  268. * @deprecated. This is removed and not work anymore.
  269. * Value will always be update if user type correct date type.
  270. * You can use `needConfirm` for confirm requirement.
  271. */
  272. changeOnBlur?: boolean;
  273. /**
  274. * When user input invalidate date, keep it in the input field.
  275. * This is only used for strong a11y requirement which do not want modify after blur.
  276. */
  277. preserveInvalidOnBlur?: boolean;
  278. transitionName?: string;
  279. components?: Components<DateType>;
  280. /** @deprecated Please use `components.input` instead. */
  281. inputRender?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
  282. cellRender?: CellRender<DateType>;
  283. /** @deprecated use cellRender instead of dateRender */
  284. dateRender?: (currentDate: DateType, today: DateType) => React.ReactNode;
  285. /** @deprecated use cellRender instead of monthCellRender */
  286. monthCellRender?: (currentDate: DateType, locale: Locale) => React.ReactNode;
  287. /**
  288. * When use `date` picker,
  289. * Show the button to set current datetime.
  290. */
  291. showNow?: boolean;
  292. /** @deprecated Please use `showNow` instead */
  293. showToday?: boolean;
  294. panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
  295. renderExtraFooter?: (mode: PanelMode) => React.ReactNode;
  296. }
  297. export interface PickerRef {
  298. nativeElement: HTMLDivElement;
  299. focus: (options?: FocusOptions) => void;
  300. blur: VoidFunction;
  301. }
  302. export interface RangePickerRef extends Omit<PickerRef, 'focus'> {
  303. focus: (index?: number | (FocusOptions & {
  304. index?: number;
  305. })) => void;
  306. }
  307. export interface OpenConfig {
  308. index?: number;
  309. /**
  310. * Keep open if prev state is open but set close within the same frame.
  311. * This is used for RangePicker input switch to another one.
  312. */
  313. inherit?: boolean;
  314. /**
  315. * By default. Close popup will delay for one frame. `force` will trigger immediately.
  316. */
  317. force?: boolean;
  318. }
  319. export type OnOpenChange = (open: boolean, config?: OpenConfig) => void;
  320. export interface SelectorProps<DateType = any> extends SharedHTMLAttrs {
  321. picker: PickerMode;
  322. prefix?: React.ReactNode;
  323. clearIcon?: React.ReactNode;
  324. suffixIcon?: React.ReactNode;
  325. className?: string;
  326. style?: React.CSSProperties;
  327. /** Add `-placeholder` className as a help info */
  328. activeHelp?: boolean;
  329. focused: boolean;
  330. onFocus: (event: React.FocusEvent<HTMLInputElement>, index?: number) => void;
  331. onBlur: (event: React.FocusEvent<HTMLInputElement>, index?: number) => void;
  332. /** Trigger by `enter` key */
  333. onSubmit: VoidFunction;
  334. /** `preventDefault` is deprecated which will remove from future version. */
  335. onKeyDown?: LegacyOnKeyDown;
  336. locale: Locale;
  337. generateConfig: GenerateConfig<DateType>;
  338. direction?: 'ltr' | 'rtl';
  339. onClick: React.MouseEventHandler<HTMLDivElement>;
  340. onClear: VoidFunction;
  341. format: FormatType<DateType>[];
  342. /**
  343. * Convert with user typing for the format template.
  344. * This will force align the input with template mask.
  345. */
  346. maskFormat?: string;
  347. onInputChange: VoidFunction;
  348. onInvalid: (valid: boolean, index?: number) => void;
  349. /** When user input invalidate date, keep it in the input field */
  350. /**
  351. * By default value in input field will be reset with previous valid value when blur.
  352. * Set to `false` will keep invalid text in input field when blur.
  353. */
  354. preserveInvalidOnBlur?: boolean;
  355. open: boolean;
  356. /** Trigger when need open by selector */
  357. onOpenChange: OnOpenChange;
  358. inputReadOnly?: boolean;
  359. }
  360. type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
  361. export type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
  362. export type ReplaceListType<List, Type> = {
  363. [P in keyof List]: Type;
  364. };
  365. export {};