-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
fields.ts
208 lines (195 loc) · 7.24 KB
/
fields.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
import * as React from 'react';
import { TextFieldProps } from '@mui/material/TextField';
import { SxProps } from '@mui/material/styles';
import type { BaseFieldProps } from '../internals/models/fields';
import type {
ExportedUseClearableFieldProps,
UseClearableFieldResponse,
UseClearableFieldSlotProps,
UseClearableFieldSlots,
} from '../hooks/useClearableField';
import { ExportedPickersSectionListProps, PickersSectionListRef } from '../PickersSectionList';
import type { UseFieldResponse } from '../internals/hooks/useField';
import type { PickersTextFieldProps } from '../PickersTextField';
import { PickerValidDate } from './pickers';
// Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries
export type FieldSectionType =
| 'year'
| 'month'
| 'day'
| 'weekDay'
| 'hours'
| 'minutes'
| 'seconds'
| 'meridiem'
| 'empty';
export type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
export type FieldValueType = 'date' | 'time' | 'date-time';
export interface FieldSection {
/**
* Value of the section, as rendered inside the input.
* For example, in the date `May 25, 1995`, the value of the month section is "May".
*/
value: string;
/**
* Format token used to parse the value of this section from the date object.
* For example, in the format `MMMM D, YYYY`, the format of the month section is "MMMM".
*/
format: string;
/**
* Maximum length of the value, only defined for "digit" sections.
* Will be used to determine how many leading zeros should be added to the value.
*/
maxLength: number | null;
/**
* Placeholder rendered when the value of this section is empty.
*/
placeholder: string;
/**
* Type of the section.
*/
type: FieldSectionType;
/**
* Type of content of the section.
* Will determine if we should apply a digit-based editing or a letter-based editing.
*/
contentType: FieldSectionContentType;
/**
* If `true`, the value of this section is supposed to have leading zeroes when parsed by the date library.
* For example, the value `1` should be rendered as "01" instead of "1".
*/
hasLeadingZerosInFormat: boolean;
/**
* If `true`, the value of this section is supposed to have leading zeroes when rendered in the input.
* For example, the value `1` should be rendered as "01" instead of "1".
*/
hasLeadingZerosInInput: boolean;
/**
* If `true`, the section value has been modified since the last time the sections were generated from a valid date.
* When we can generate a valid date from the section, we don't directly pass it to `onChange`,
* Otherwise, we would lose all the information contained in the original date, things like:
* - time if the format does not contain it
* - timezone / UTC
*
* To avoid losing that information, we transfer the values of the modified sections from the newly generated date to the original date.
*/
modified: boolean;
/**
* Separator displayed before the value of the section in the input.
* If it contains escaped characters, then it must not have the escaping characters.
* For example, on Day.js, the `year` section of the format `YYYY [year]` has an end separator equal to `year` not `[year]`
*/
startSeparator: string;
/**
* Separator displayed after the value of the section in the input.
* If it contains escaped characters, then it must not have the escaping characters.
* For example, on Day.js, the `year` section of the format `[year] YYYY` has a start separator equal to `[year]`
*/
endSeparator: string;
}
export interface FieldRef<TSection extends FieldSection> {
/**
* Returns the sections of the current value.
* @returns {TSection[]} The sections of the current value.
*/
getSections: () => TSection[];
/**
* Returns the index of the active section (the first focused section).
* If no section is active, returns `null`.
* @returns {number | null} The index of the active section.
*/
getActiveSectionIndex: () => number | null;
/**
* Updates the selected sections.
* @param {FieldSelectedSections} selectedSections The sections to select.
*/
setSelectedSections: (selectedSections: FieldSelectedSections) => void;
/**
* Focuses the field.
* @param {FieldSelectedSections | FieldSectionType} newSelectedSection The section to select once focused.
*/
focusField: (newSelectedSection?: number | FieldSectionType) => void;
/**
* Returns `true` if the focused is on the field input.
* @returns {boolean} `true` if the field is focused.
*/
isFieldFocused: () => boolean;
}
export type FieldSelectedSections = number | FieldSectionType | null | 'all';
interface BaseForwardedCommonSingleInputFieldProps extends ExportedUseClearableFieldProps {
ref?: React.Ref<HTMLDivElement>;
sx?: SxProps<any>;
label?: React.ReactNode;
id?: string;
name?: string;
onKeyDown?: React.KeyboardEventHandler;
onBlur?: React.FocusEventHandler;
focused?: boolean;
InputProps?: {
ref?: React.Ref<any>;
endAdornment?: React.ReactNode;
startAdornment?: React.ReactNode;
};
inputProps?: {
'aria-label'?: string;
};
slots?: UseClearableFieldSlots;
slotProps?: UseClearableFieldSlotProps & {
textField?: {};
};
}
interface BaseForwardedV6SingleInputFieldProps {
inputRef?: React.Ref<HTMLInputElement>;
}
interface BaseForwardedV7SingleInputFieldProps {
sectionListRef?: React.Ref<PickersSectionListRef>;
}
type BaseForwardedSingleInputFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> =
BaseForwardedCommonSingleInputFieldProps &
(TEnableAccessibleFieldDOMStructure extends false
? BaseForwardedV6SingleInputFieldProps
: BaseForwardedV7SingleInputFieldProps);
/**
* Props the single input field can receive when used inside a picker.
* Only contains what the MUI components are passing to the field,
* not what users can pass using the `props.slotProps.field`.
*/
export type BaseSingleInputFieldProps<
TValue,
TDate extends PickerValidDate,
TSection extends FieldSection,
TEnableAccessibleFieldDOMStructure extends boolean,
TError,
> = BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError> &
BaseForwardedSingleInputFieldProps<TEnableAccessibleFieldDOMStructure>;
/**
* Props the text field receives when used with a single input picker.
* Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.field` and `props.slotProps.textField`.
*/
export type BaseSingleInputPickersTextFieldProps<
TEnableAccessibleFieldDOMStructure extends boolean,
> = UseClearableFieldResponse<
UseFieldResponse<
TEnableAccessibleFieldDOMStructure,
BaseForwardedSingleInputFieldProps<TEnableAccessibleFieldDOMStructure>
>
>;
/**
* Props the built-in text field component can receive.
*/
export type BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> =
TEnableAccessibleFieldDOMStructure extends false
? Omit<
TextFieldProps,
| 'autoComplete'
| 'error'
| 'maxRows'
| 'minRows'
| 'multiline'
| 'placeholder'
| 'rows'
| 'select'
| 'SelectProps'
| 'type'
>
: Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;