@atlaskit/datetime-picker 13.0.8 → 13.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/components/date-picker.js +1 -1
- package/dist/cjs/components/date-time-picker.js +4 -4
- package/dist/cjs/components/time-picker.js +4 -4
- package/dist/es2019/components/date-picker.js +1 -1
- package/dist/es2019/components/date-time-picker.js +2 -2
- package/dist/es2019/components/time-picker.js +1 -1
- package/dist/esm/components/date-picker.js +1 -1
- package/dist/esm/components/date-time-picker.js +4 -4
- package/dist/esm/components/time-picker.js +4 -4
- package/dist/types/components/date-picker.d.ts +3 -150
- package/dist/types/components/date-time-picker.d.ts +3 -115
- package/dist/types/components/time-picker.d.ts +4 -115
- package/dist/types/index.d.ts +1 -4
- package/dist/types/types.d.ts +367 -0
- package/dist/types-ts4.5/components/date-picker.d.ts +3 -150
- package/dist/types-ts4.5/components/date-time-picker.d.ts +3 -115
- package/dist/types-ts4.5/components/time-picker.d.ts +4 -115
- package/dist/types-ts4.5/index.d.ts +1 -4
- package/dist/types-ts4.5/types.d.ts +367 -0
- package/package.json +7 -4
package/dist/types/types.d.ts
CHANGED
|
@@ -1,2 +1,369 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
+
import { DropdownIndicatorProps, OptionType, SelectProps } from '@atlaskit/select';
|
|
1
4
|
export type Appearance = 'default' | 'subtle' | 'none';
|
|
2
5
|
export type Spacing = 'compact' | 'default';
|
|
6
|
+
export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
|
|
7
|
+
/**
|
|
8
|
+
* Set the appearance of the picker.
|
|
9
|
+
*
|
|
10
|
+
* `subtle` will remove the borders, background, and icon.
|
|
11
|
+
*
|
|
12
|
+
*NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
|
|
13
|
+
*/
|
|
14
|
+
appearance?: Appearance;
|
|
15
|
+
/**
|
|
16
|
+
* Set the picker to autofocus on mount.
|
|
17
|
+
*/
|
|
18
|
+
autoFocus?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The default for `isOpen`. Will be `false` if not provided.
|
|
21
|
+
*/
|
|
22
|
+
defaultIsOpen?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* The default for `value`.
|
|
25
|
+
*/
|
|
26
|
+
defaultValue?: string;
|
|
27
|
+
/**
|
|
28
|
+
* An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker.
|
|
29
|
+
*/
|
|
30
|
+
disabled?: string[];
|
|
31
|
+
/**
|
|
32
|
+
* A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
|
|
33
|
+
*
|
|
34
|
+
* The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
|
|
35
|
+
*/
|
|
36
|
+
disabledDateFilter?: (date: string) => boolean;
|
|
37
|
+
/**
|
|
38
|
+
* The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.
|
|
39
|
+
*/
|
|
40
|
+
maxDate?: string;
|
|
41
|
+
/**
|
|
42
|
+
* The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker.
|
|
43
|
+
*/
|
|
44
|
+
minDate?: string;
|
|
45
|
+
/**
|
|
46
|
+
* The icon shown in the picker.
|
|
47
|
+
*/
|
|
48
|
+
icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
|
|
49
|
+
/**
|
|
50
|
+
* Set the id of the field.
|
|
51
|
+
* Associates a `<label></label>` with the field.
|
|
52
|
+
*/
|
|
53
|
+
id?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Props to apply to the container.
|
|
56
|
+
*/
|
|
57
|
+
innerProps?: React.AllHTMLAttributes<HTMLElement>;
|
|
58
|
+
/**
|
|
59
|
+
* Set if the picker is disabled.
|
|
60
|
+
*/
|
|
61
|
+
isDisabled?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Set if the picker is open.
|
|
64
|
+
*/
|
|
65
|
+
isOpen?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* The name of the field.
|
|
68
|
+
*/
|
|
69
|
+
name?: string;
|
|
70
|
+
/**
|
|
71
|
+
* The aria-label attribute associated with the next-month arrow.
|
|
72
|
+
*/
|
|
73
|
+
nextMonthLabel?: string;
|
|
74
|
+
/**
|
|
75
|
+
* Called when the field is blurred.
|
|
76
|
+
*/
|
|
77
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
78
|
+
/**
|
|
79
|
+
* Called when the value changes. The only argument is an ISO time or empty string.
|
|
80
|
+
*/
|
|
81
|
+
onChange?: (value: string) => void;
|
|
82
|
+
/**
|
|
83
|
+
* Called when the field is focused.
|
|
84
|
+
*/
|
|
85
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
86
|
+
/**
|
|
87
|
+
* A function for parsing input characters and transforming them into a Date object.
|
|
88
|
+
* By default parses the date string based off the locale.
|
|
89
|
+
*/
|
|
90
|
+
parseInputValue?: (date: string, dateFormat: string) => Date;
|
|
91
|
+
/**
|
|
92
|
+
* A function for formatting the date displayed in the input. By default composes together [date-fn's parse method](https://date-fns.org/v1.29.0/docs/parse) and [date-fn's format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string.
|
|
93
|
+
*/
|
|
94
|
+
formatDisplayLabel?: (value: string, dateFormat: string) => string;
|
|
95
|
+
/**
|
|
96
|
+
* The aria-label attribute associated with the previous-month arrow.
|
|
97
|
+
*/
|
|
98
|
+
previousMonthLabel?: string;
|
|
99
|
+
/**
|
|
100
|
+
* Props to apply to the select. This can be used to set options such as placeholder text.
|
|
101
|
+
* See [the `Select` documentation for further information](/components/select).
|
|
102
|
+
*/
|
|
103
|
+
selectProps?: SelectProps<any>;
|
|
104
|
+
/**
|
|
105
|
+
* The spacing for the select control.
|
|
106
|
+
*
|
|
107
|
+
* Compact is `gridSize() * 4`, default is `gridSize * 5`.
|
|
108
|
+
*/
|
|
109
|
+
spacing?: Spacing;
|
|
110
|
+
/**
|
|
111
|
+
* The ISO time used as the input value.
|
|
112
|
+
*/
|
|
113
|
+
value?: string;
|
|
114
|
+
/**
|
|
115
|
+
* Set if the picker has an invalid value.
|
|
116
|
+
*/
|
|
117
|
+
isInvalid?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Hides icon for dropdown indicator.
|
|
120
|
+
*/
|
|
121
|
+
hideIcon?: boolean;
|
|
122
|
+
/**
|
|
123
|
+
* Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
124
|
+
*/
|
|
125
|
+
dateFormat?: string;
|
|
126
|
+
/**
|
|
127
|
+
* Placeholder text displayed in input.
|
|
128
|
+
*/
|
|
129
|
+
placeholder?: string;
|
|
130
|
+
/**
|
|
131
|
+
* Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
|
|
132
|
+
*/
|
|
133
|
+
locale?: string;
|
|
134
|
+
/**
|
|
135
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
136
|
+
* - `{testId}--container` wrapping element of date-picker
|
|
137
|
+
* - `{testId}--calendar--container` nested calendar component
|
|
138
|
+
*/
|
|
139
|
+
testId?: string;
|
|
140
|
+
/**
|
|
141
|
+
* Start day of the week for the calendar.
|
|
142
|
+
* - `0` sunday (default value)
|
|
143
|
+
* - `1` monday
|
|
144
|
+
* - `2` tuesday
|
|
145
|
+
* - `3` wednesday
|
|
146
|
+
* - `4` thursday
|
|
147
|
+
* - `5` friday
|
|
148
|
+
* - `6` saturday
|
|
149
|
+
*/
|
|
150
|
+
weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
151
|
+
}
|
|
152
|
+
export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
|
|
153
|
+
/**
|
|
154
|
+
* Set the appearance of the picker.
|
|
155
|
+
* `subtle` will remove the borders, background, and icon.
|
|
156
|
+
*
|
|
157
|
+
* __NOTE:__ Appearance values will be ignored if styles are parsed through `selectProps`.
|
|
158
|
+
*/
|
|
159
|
+
appearance?: Appearance;
|
|
160
|
+
/**
|
|
161
|
+
* Set the picker to autofocus on mount.
|
|
162
|
+
*/
|
|
163
|
+
autoFocus?: boolean;
|
|
164
|
+
/**
|
|
165
|
+
* The default for `isOpen`.
|
|
166
|
+
*/
|
|
167
|
+
defaultIsOpen?: boolean;
|
|
168
|
+
/**
|
|
169
|
+
* The default for `value`.
|
|
170
|
+
*/
|
|
171
|
+
defaultValue?: string;
|
|
172
|
+
/**
|
|
173
|
+
* A function for formatting the displayed time value in the input. By default parses with an internal time parser, and formats using the [date-fns format function]((https://date-fns.org/v1.29.0/docs/format))
|
|
174
|
+
*/
|
|
175
|
+
formatDisplayLabel?: (time: string, timeFormat: string) => string;
|
|
176
|
+
/**
|
|
177
|
+
* Set the id of the field.
|
|
178
|
+
* Associates a `<label></label>` with the field.
|
|
179
|
+
*/
|
|
180
|
+
id?: string;
|
|
181
|
+
/**
|
|
182
|
+
* Props to apply to the container. *
|
|
183
|
+
*/
|
|
184
|
+
innerProps?: React.AllHTMLAttributes<HTMLElement>;
|
|
185
|
+
/**
|
|
186
|
+
* Set if the field is disabled.
|
|
187
|
+
*/
|
|
188
|
+
isDisabled?: boolean;
|
|
189
|
+
/**
|
|
190
|
+
* Set if the dropdown is open. Will be `false` if not provided.
|
|
191
|
+
*/
|
|
192
|
+
isOpen?: boolean;
|
|
193
|
+
/**
|
|
194
|
+
* The name of the field.
|
|
195
|
+
*/
|
|
196
|
+
name?: string;
|
|
197
|
+
/**
|
|
198
|
+
* Called when the field is blurred.
|
|
199
|
+
*/
|
|
200
|
+
onBlur?: React.FocusEventHandler<HTMLElement>;
|
|
201
|
+
/**
|
|
202
|
+
* Called when the value changes. The only argument is an ISO time or empty string.
|
|
203
|
+
*/
|
|
204
|
+
onChange?: (value: string) => void;
|
|
205
|
+
/**
|
|
206
|
+
* Called when the field is focused.
|
|
207
|
+
*/
|
|
208
|
+
onFocus?: React.FocusEventHandler<HTMLElement>;
|
|
209
|
+
/**
|
|
210
|
+
* A function for parsing input characters and transforming them into either a string or a Date object.
|
|
211
|
+
* By default parses the string based off the locale.
|
|
212
|
+
*/
|
|
213
|
+
parseInputValue?: (time: string, timeFormat: string) => string | Date;
|
|
214
|
+
/**
|
|
215
|
+
* Props to apply to the select.
|
|
216
|
+
*/
|
|
217
|
+
selectProps?: SelectProps<any>;
|
|
218
|
+
/**
|
|
219
|
+
* The spacing for the select control.
|
|
220
|
+
*
|
|
221
|
+
* Compact is `gridSize() * 4`, default is `gridSize * 5`.
|
|
222
|
+
*/
|
|
223
|
+
spacing?: Spacing;
|
|
224
|
+
/**
|
|
225
|
+
* The times shown in the dropdown.
|
|
226
|
+
*/
|
|
227
|
+
times?: string[];
|
|
228
|
+
/**
|
|
229
|
+
* Set if users can edit the input, allowing them to add custom times.
|
|
230
|
+
*/
|
|
231
|
+
timeIsEditable?: boolean;
|
|
232
|
+
/**
|
|
233
|
+
* The ISO time that should be used as the input value.
|
|
234
|
+
*/
|
|
235
|
+
value?: string;
|
|
236
|
+
/**
|
|
237
|
+
* Set if the picker has an invalid value.
|
|
238
|
+
*/
|
|
239
|
+
isInvalid?: boolean;
|
|
240
|
+
/**
|
|
241
|
+
* Hides icon for dropdown indicator.
|
|
242
|
+
*/
|
|
243
|
+
hideIcon?: boolean;
|
|
244
|
+
/**
|
|
245
|
+
* Time format that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
246
|
+
*/
|
|
247
|
+
timeFormat?: string;
|
|
248
|
+
/**
|
|
249
|
+
* Placeholder text displayed in input.
|
|
250
|
+
*/
|
|
251
|
+
placeholder?: string;
|
|
252
|
+
/**
|
|
253
|
+
* Locale used to format the time. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
|
|
254
|
+
*/
|
|
255
|
+
locale?: string;
|
|
256
|
+
/**
|
|
257
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests:
|
|
258
|
+
* - `{testId}--container` wrapping element of time-picker
|
|
259
|
+
*/
|
|
260
|
+
testId?: string;
|
|
261
|
+
}
|
|
262
|
+
export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
|
|
263
|
+
/**
|
|
264
|
+
* Set the appearance of the picker.
|
|
265
|
+
*
|
|
266
|
+
* `subtle` will remove the borders and background.
|
|
267
|
+
*/
|
|
268
|
+
appearance?: Appearance;
|
|
269
|
+
/**
|
|
270
|
+
* Set the picker to autofocus on mount.
|
|
271
|
+
*/
|
|
272
|
+
autoFocus?: boolean;
|
|
273
|
+
/**
|
|
274
|
+
* The default for `value`.
|
|
275
|
+
*/
|
|
276
|
+
defaultValue?: string;
|
|
277
|
+
/**
|
|
278
|
+
* Set the id of the field.
|
|
279
|
+
*/
|
|
280
|
+
id?: string;
|
|
281
|
+
/**
|
|
282
|
+
* Props to apply to the container. *
|
|
283
|
+
*/
|
|
284
|
+
innerProps?: React.AllHTMLAttributes<HTMLElement>;
|
|
285
|
+
/**
|
|
286
|
+
* Set if the field is disabled.
|
|
287
|
+
*/
|
|
288
|
+
isDisabled?: boolean;
|
|
289
|
+
/**
|
|
290
|
+
* The name of the field.
|
|
291
|
+
*/
|
|
292
|
+
name?: string;
|
|
293
|
+
/**
|
|
294
|
+
* Called when the field is blurred.
|
|
295
|
+
*/
|
|
296
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
297
|
+
/**
|
|
298
|
+
* Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.
|
|
299
|
+
*/
|
|
300
|
+
onChange?: (value: string) => void;
|
|
301
|
+
/**
|
|
302
|
+
* Called when the field is focused.
|
|
303
|
+
*/
|
|
304
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
305
|
+
/**
|
|
306
|
+
* The ISO time that should be used as the input value.
|
|
307
|
+
*/
|
|
308
|
+
value?: string;
|
|
309
|
+
/**
|
|
310
|
+
* Set if users can edit the input, allowing them to add custom times.
|
|
311
|
+
*/
|
|
312
|
+
timeIsEditable?: boolean;
|
|
313
|
+
/**
|
|
314
|
+
* Set if the picker has an invalid value.
|
|
315
|
+
*/
|
|
316
|
+
isInvalid?: boolean;
|
|
317
|
+
/**
|
|
318
|
+
* Format the date with a string that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
319
|
+
*/
|
|
320
|
+
dateFormat?: string;
|
|
321
|
+
/**
|
|
322
|
+
* Props applied to the `DatePicker`.
|
|
323
|
+
*/
|
|
324
|
+
datePickerProps?: DatePickerBaseProps;
|
|
325
|
+
/**
|
|
326
|
+
* Props applied to the `TimePicker`.
|
|
327
|
+
*/
|
|
328
|
+
timePickerProps?: TimePickerBaseProps;
|
|
329
|
+
/**
|
|
330
|
+
* Function used to parse datetime values into their date, time and timezone sub-values. *
|
|
331
|
+
*/
|
|
332
|
+
parseValue?: (dateTimeValue: string, date: string, time: string, timezone: string) => {
|
|
333
|
+
dateValue: string;
|
|
334
|
+
timeValue: string;
|
|
335
|
+
zoneValue: string;
|
|
336
|
+
};
|
|
337
|
+
/**
|
|
338
|
+
* [Select props](/components/select) to pass onto the `DatePicker` component's `Select`. This can be used to set options such as placeholder text.
|
|
339
|
+
*/
|
|
340
|
+
datePickerSelectProps?: SelectProps<any>;
|
|
341
|
+
/**
|
|
342
|
+
* [Select props](/components/select) to pass onto the `TimePicker` component's `Select`. This can be used to set options such as placeholder text.
|
|
343
|
+
*/
|
|
344
|
+
timePickerSelectProps?: SelectProps<any>;
|
|
345
|
+
/**
|
|
346
|
+
* The times shown by the `TimePicker`.
|
|
347
|
+
*/
|
|
348
|
+
times?: Array<string>;
|
|
349
|
+
/**
|
|
350
|
+
* The format that times are displayed in. Values should be those accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
351
|
+
*/
|
|
352
|
+
timeFormat?: string;
|
|
353
|
+
/**
|
|
354
|
+
* The spacing for the select control.
|
|
355
|
+
*
|
|
356
|
+
* Compact is `gridSize() * 4`, default is `gridSize() * 5`.
|
|
357
|
+
*/
|
|
358
|
+
spacing?: Spacing;
|
|
359
|
+
/**
|
|
360
|
+
* Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
|
|
361
|
+
*/
|
|
362
|
+
locale?: string;
|
|
363
|
+
/**
|
|
364
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
365
|
+
* - `{testId}--datepicker--container` wrapping element of date-picker
|
|
366
|
+
* - `{testId}--timepicker--container` wrapping element of time-picker
|
|
367
|
+
*/
|
|
368
|
+
testId?: string;
|
|
369
|
+
}
|
|
@@ -1,157 +1,10 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Component } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
|
-
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
5
4
|
import { CalendarRef } from '@atlaskit/calendar';
|
|
6
5
|
import { LocalizationProvider } from '@atlaskit/locale';
|
|
7
|
-
import { ActionMeta, DropdownIndicatorProps, InputActionMeta, OptionType,
|
|
8
|
-
import { Appearance, Spacing } from '../types';
|
|
9
|
-
export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
|
|
10
|
-
/**
|
|
11
|
-
* Set the appearance of the picker.
|
|
12
|
-
*
|
|
13
|
-
* `subtle` will remove the borders, background, and icon.
|
|
14
|
-
*
|
|
15
|
-
*NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
|
|
16
|
-
*/
|
|
17
|
-
appearance?: Appearance;
|
|
18
|
-
/**
|
|
19
|
-
* Set the picker to autofocus on mount.
|
|
20
|
-
*/
|
|
21
|
-
autoFocus?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* The default for `isOpen`. Will be `false` if not provided.
|
|
24
|
-
*/
|
|
25
|
-
defaultIsOpen?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* The default for `value`.
|
|
28
|
-
*/
|
|
29
|
-
defaultValue?: string;
|
|
30
|
-
/**
|
|
31
|
-
* An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker.
|
|
32
|
-
*/
|
|
33
|
-
disabled?: string[];
|
|
34
|
-
/**
|
|
35
|
-
* A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
|
|
36
|
-
*
|
|
37
|
-
* The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
|
|
38
|
-
*/
|
|
39
|
-
disabledDateFilter?: (date: string) => boolean;
|
|
40
|
-
/**
|
|
41
|
-
* The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.
|
|
42
|
-
*/
|
|
43
|
-
maxDate?: string;
|
|
44
|
-
/**
|
|
45
|
-
* The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker.
|
|
46
|
-
*/
|
|
47
|
-
minDate?: string;
|
|
48
|
-
/**
|
|
49
|
-
* The icon shown in the picker.
|
|
50
|
-
*/
|
|
51
|
-
icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
|
|
52
|
-
/**
|
|
53
|
-
* Set the id of the field.
|
|
54
|
-
* Associates a `<label></label>` with the field.
|
|
55
|
-
*/
|
|
56
|
-
id?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Props to apply to the container.
|
|
59
|
-
*/
|
|
60
|
-
innerProps?: React.AllHTMLAttributes<HTMLElement>;
|
|
61
|
-
/**
|
|
62
|
-
* Set if the picker is disabled.
|
|
63
|
-
*/
|
|
64
|
-
isDisabled?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Set if the picker is open.
|
|
67
|
-
*/
|
|
68
|
-
isOpen?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* The name of the field.
|
|
71
|
-
*/
|
|
72
|
-
name?: string;
|
|
73
|
-
/**
|
|
74
|
-
* The aria-label attribute associated with the next-month arrow.
|
|
75
|
-
*/
|
|
76
|
-
nextMonthLabel?: string;
|
|
77
|
-
/**
|
|
78
|
-
* Called when the field is blurred.
|
|
79
|
-
*/
|
|
80
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
81
|
-
/**
|
|
82
|
-
* Called when the value changes. The only argument is an ISO time or empty string.
|
|
83
|
-
*/
|
|
84
|
-
onChange?: (value: string) => void;
|
|
85
|
-
/**
|
|
86
|
-
* Called when the field is focused.
|
|
87
|
-
*/
|
|
88
|
-
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
89
|
-
/**
|
|
90
|
-
* A function for parsing input characters and transforming them into a Date object.
|
|
91
|
-
* By default parses the date string based off the locale.
|
|
92
|
-
*/
|
|
93
|
-
parseInputValue?: (date: string, dateFormat: string) => Date;
|
|
94
|
-
/**
|
|
95
|
-
* A function for formatting the date displayed in the input. By default composes together [date-fn's parse method](https://date-fns.org/v1.29.0/docs/parse) and [date-fn's format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string.
|
|
96
|
-
*/
|
|
97
|
-
formatDisplayLabel?: (value: string, dateFormat: string) => string;
|
|
98
|
-
/**
|
|
99
|
-
* The aria-label attribute associated with the previous-month arrow.
|
|
100
|
-
*/
|
|
101
|
-
previousMonthLabel?: string;
|
|
102
|
-
/**
|
|
103
|
-
* Props to apply to the select. This can be used to set options such as placeholder text.
|
|
104
|
-
* See [the `Select` documentation for further information](/components/select).
|
|
105
|
-
*/
|
|
106
|
-
selectProps?: SelectProps<any>;
|
|
107
|
-
/**
|
|
108
|
-
* The spacing for the select control.
|
|
109
|
-
*
|
|
110
|
-
* Compact is `gridSize() * 4`, default is `gridSize * 5`.
|
|
111
|
-
*/
|
|
112
|
-
spacing?: Spacing;
|
|
113
|
-
/**
|
|
114
|
-
* The ISO time used as the input value.
|
|
115
|
-
*/
|
|
116
|
-
value?: string;
|
|
117
|
-
/**
|
|
118
|
-
* Set if the picker has an invalid value.
|
|
119
|
-
*/
|
|
120
|
-
isInvalid?: boolean;
|
|
121
|
-
/**
|
|
122
|
-
* Hides icon for dropdown indicator.
|
|
123
|
-
*/
|
|
124
|
-
hideIcon?: boolean;
|
|
125
|
-
/**
|
|
126
|
-
* Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
127
|
-
*/
|
|
128
|
-
dateFormat?: string;
|
|
129
|
-
/**
|
|
130
|
-
* Placeholder text displayed in input.
|
|
131
|
-
*/
|
|
132
|
-
placeholder?: string;
|
|
133
|
-
/**
|
|
134
|
-
* Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
|
|
135
|
-
*/
|
|
136
|
-
locale?: string;
|
|
137
|
-
/**
|
|
138
|
-
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
139
|
-
* - `{testId}--container` wrapping element of date-picker
|
|
140
|
-
* - `{testId}--calendar--container` nested calendar component
|
|
141
|
-
*/
|
|
142
|
-
testId?: string;
|
|
143
|
-
/**
|
|
144
|
-
* Start day of the week for the calendar.
|
|
145
|
-
* - `0` sunday (default value)
|
|
146
|
-
* - `1` monday
|
|
147
|
-
* - `2` tuesday
|
|
148
|
-
* - `3` wednesday
|
|
149
|
-
* - `4` thursday
|
|
150
|
-
* - `5` friday
|
|
151
|
-
* - `6` saturday
|
|
152
|
-
*/
|
|
153
|
-
weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
154
|
-
}
|
|
6
|
+
import { ActionMeta, DropdownIndicatorProps, InputActionMeta, OptionType, ValueType } from '@atlaskit/select';
|
|
7
|
+
import { Appearance, DatePickerBaseProps, Spacing } from '../types';
|
|
155
8
|
type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
|
|
156
9
|
interface State {
|
|
157
10
|
isOpen: boolean;
|
|
@@ -267,7 +120,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
267
120
|
render(): jsx.JSX.Element;
|
|
268
121
|
}
|
|
269
122
|
export { DatePicker as DatePickerWithoutAnalytics };
|
|
270
|
-
declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
|
|
123
|
+
declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
|
|
271
124
|
appearance: Appearance;
|
|
272
125
|
autoFocus: boolean;
|
|
273
126
|
defaultIsOpen: boolean;
|
|
@@ -1,119 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
|
-
import {
|
|
5
|
-
import { SelectProps } from '@atlaskit/select';
|
|
6
|
-
import { Appearance, Spacing } from '../types';
|
|
7
|
-
import { DatePickerBaseProps as DatePickerProps } from './date-picker';
|
|
8
|
-
import { TimePickerBaseProps as TimePickerProps } from './time-picker';
|
|
9
|
-
export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
|
|
10
|
-
/**
|
|
11
|
-
* Set the appearance of the picker.
|
|
12
|
-
*
|
|
13
|
-
* `subtle` will remove the borders and background.
|
|
14
|
-
*/
|
|
15
|
-
appearance?: Appearance;
|
|
16
|
-
/**
|
|
17
|
-
* Set the picker to autofocus on mount.
|
|
18
|
-
*/
|
|
19
|
-
autoFocus?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* The default for `value`.
|
|
22
|
-
*/
|
|
23
|
-
defaultValue?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Set the id of the field.
|
|
26
|
-
*/
|
|
27
|
-
id?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Props to apply to the container. *
|
|
30
|
-
*/
|
|
31
|
-
innerProps?: React.AllHTMLAttributes<HTMLElement>;
|
|
32
|
-
/**
|
|
33
|
-
* Set if the field is disabled.
|
|
34
|
-
*/
|
|
35
|
-
isDisabled?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* The name of the field.
|
|
38
|
-
*/
|
|
39
|
-
name?: string;
|
|
40
|
-
/**
|
|
41
|
-
* Called when the field is blurred.
|
|
42
|
-
*/
|
|
43
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
44
|
-
/**
|
|
45
|
-
* Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.
|
|
46
|
-
*/
|
|
47
|
-
onChange?: (value: string) => void;
|
|
48
|
-
/**
|
|
49
|
-
* Called when the field is focused.
|
|
50
|
-
*/
|
|
51
|
-
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
52
|
-
/**
|
|
53
|
-
* The ISO time that should be used as the input value.
|
|
54
|
-
*/
|
|
55
|
-
value?: string;
|
|
56
|
-
/**
|
|
57
|
-
* Set if users can edit the input, allowing them to add custom times.
|
|
58
|
-
*/
|
|
59
|
-
timeIsEditable?: boolean;
|
|
60
|
-
/**
|
|
61
|
-
* Set if the picker has an invalid value.
|
|
62
|
-
*/
|
|
63
|
-
isInvalid?: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* Format the date with a string that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
66
|
-
*/
|
|
67
|
-
dateFormat?: string;
|
|
68
|
-
/**
|
|
69
|
-
* Props applied to the `DatePicker`.
|
|
70
|
-
*/
|
|
71
|
-
datePickerProps?: DatePickerProps;
|
|
72
|
-
/**
|
|
73
|
-
* Props applied to the `TimePicker`.
|
|
74
|
-
*/
|
|
75
|
-
timePickerProps?: TimePickerProps;
|
|
76
|
-
/**
|
|
77
|
-
* Function used to parse datetime values into their date, time and timezone sub-values. *
|
|
78
|
-
*/
|
|
79
|
-
parseValue?: (dateTimeValue: string, date: string, time: string, timezone: string) => {
|
|
80
|
-
dateValue: string;
|
|
81
|
-
timeValue: string;
|
|
82
|
-
zoneValue: string;
|
|
83
|
-
};
|
|
84
|
-
/**
|
|
85
|
-
* [Select props](/components/select) to pass onto the `DatePicker` component's `Select`. This can be used to set options such as placeholder text.
|
|
86
|
-
*/
|
|
87
|
-
datePickerSelectProps?: SelectProps<any>;
|
|
88
|
-
/**
|
|
89
|
-
* [Select props](/components/select) to pass onto the `TimePicker` component's `Select`. This can be used to set options such as placeholder text.
|
|
90
|
-
*/
|
|
91
|
-
timePickerSelectProps?: SelectProps<any>;
|
|
92
|
-
/**
|
|
93
|
-
* The times shown by the `TimePicker`.
|
|
94
|
-
*/
|
|
95
|
-
times?: Array<string>;
|
|
96
|
-
/**
|
|
97
|
-
* The format that times are displayed in. Values should be those accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
98
|
-
*/
|
|
99
|
-
timeFormat?: string;
|
|
100
|
-
/**
|
|
101
|
-
* The spacing for the select control.
|
|
102
|
-
*
|
|
103
|
-
* Compact is `gridSize() * 4`, default is `gridSize() * 5`.
|
|
104
|
-
*/
|
|
105
|
-
spacing?: Spacing;
|
|
106
|
-
/**
|
|
107
|
-
* Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
|
|
108
|
-
*/
|
|
109
|
-
locale?: string;
|
|
110
|
-
/**
|
|
111
|
-
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
112
|
-
* - `{testId}--datepicker--container` wrapping element of date-picker
|
|
113
|
-
* - `{testId}--timepicker--container` wrapping element of time-picker
|
|
114
|
-
*/
|
|
115
|
-
testId?: string;
|
|
116
|
-
}
|
|
4
|
+
import { DateTimePickerBaseProps } from '../types';
|
|
117
5
|
type DateTimePickerProps = typeof dateTimePickerDefaultProps & DateTimePickerBaseProps;
|
|
118
6
|
interface State {
|
|
119
7
|
dateValue: string;
|
|
@@ -193,7 +81,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
|
|
|
193
81
|
render(): jsx.JSX.Element;
|
|
194
82
|
}
|
|
195
83
|
export { DateTimePicker as DateTimePickerWithoutAnalytics };
|
|
196
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
|
|
84
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
|
|
197
85
|
appearance: string;
|
|
198
86
|
autoFocus: boolean;
|
|
199
87
|
isDisabled: boolean;
|
|
@@ -213,5 +101,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
|
|
|
213
101
|
times: string[];
|
|
214
102
|
spacing: string;
|
|
215
103
|
locale: string;
|
|
216
|
-
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "
|
|
104
|
+
}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps" | "analyticsContext"> & React.RefAttributes<any>>;
|
|
217
105
|
export default _default;
|