interface.d.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import type { CSSProperties, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
  2. import type { InputFocusOptions } from './utils/commonUtils';
  3. import type { LiteralUnion } from './utils/types';
  4. export interface CommonInputProps {
  5. prefix?: ReactNode;
  6. suffix?: ReactNode;
  7. addonBefore?: ReactNode;
  8. addonAfter?: ReactNode;
  9. /** @deprecated Use `classNames` instead */
  10. classes?: {
  11. affixWrapper?: string;
  12. group?: string;
  13. wrapper?: string;
  14. };
  15. classNames?: {
  16. affixWrapper?: string;
  17. prefix?: string;
  18. suffix?: string;
  19. groupWrapper?: string;
  20. wrapper?: string;
  21. variant?: string;
  22. };
  23. styles?: {
  24. affixWrapper?: CSSProperties;
  25. prefix?: CSSProperties;
  26. suffix?: CSSProperties;
  27. };
  28. allowClear?: boolean | {
  29. clearIcon?: ReactNode;
  30. };
  31. }
  32. type DataAttr = Record<`data-${string}`, string>;
  33. export type ValueType = InputHTMLAttributes<HTMLInputElement>['value'] | bigint;
  34. export interface BaseInputProps extends CommonInputProps {
  35. value?: ValueType;
  36. /** @deprecated Use `children` instead */
  37. inputElement?: ReactElement;
  38. prefixCls?: string;
  39. className?: string;
  40. style?: CSSProperties;
  41. disabled?: boolean;
  42. focused?: boolean;
  43. triggerFocus?: () => void;
  44. readOnly?: boolean;
  45. handleReset?: MouseEventHandler;
  46. onClear?: () => void;
  47. hidden?: boolean;
  48. dataAttrs?: {
  49. affixWrapper?: DataAttr;
  50. };
  51. components?: {
  52. affixWrapper?: 'span' | 'div';
  53. groupWrapper?: 'span' | 'div';
  54. wrapper?: 'span' | 'div';
  55. groupAddon?: 'span' | 'div';
  56. };
  57. children: ReactElement;
  58. }
  59. export type ShowCountFormatter = (args: {
  60. value: string;
  61. count: number;
  62. maxLength?: number;
  63. }) => ReactNode;
  64. export type ExceedFormatter = (value: string, config: {
  65. max: number;
  66. }) => string;
  67. export interface CountConfig {
  68. max?: number;
  69. strategy?: (value: string) => number;
  70. show?: boolean | ShowCountFormatter;
  71. /** Trigger when content larger than the `max` limitation */
  72. exceedFormatter?: ExceedFormatter;
  73. }
  74. export interface InputProps extends CommonInputProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type' | 'value'> {
  75. value?: ValueType;
  76. prefixCls?: string;
  77. type?: LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
  78. onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
  79. /** It's better to use `count.show` instead */
  80. showCount?: boolean | {
  81. formatter: ShowCountFormatter;
  82. };
  83. autoComplete?: string;
  84. htmlSize?: number;
  85. classNames?: CommonInputProps['classNames'] & {
  86. input?: string;
  87. count?: string;
  88. };
  89. styles?: CommonInputProps['styles'] & {
  90. input?: CSSProperties;
  91. count?: CSSProperties;
  92. };
  93. count?: CountConfig;
  94. onClear?: () => void;
  95. }
  96. export interface InputRef {
  97. focus: (options?: InputFocusOptions) => void;
  98. blur: () => void;
  99. setSelectionRange: (start: number, end: number, direction?: 'forward' | 'backward' | 'none') => void;
  100. select: () => void;
  101. input: HTMLInputElement | null;
  102. nativeElement: HTMLElement | null;
  103. }
  104. export interface ChangeEventInfo {
  105. source: 'compositionEnd' | 'change';
  106. }
  107. export {};