@instructure/ui-time-select 8.11.2-snapshot.5 → 8.11.2-snapshot.54
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/es/TimeSelect/index.js +116 -92
- package/es/TimeSelect/props.js +2 -1
- package/es/package.json +1 -0
- package/lib/TimeSelect/index.js +116 -96
- package/lib/TimeSelect/props.js +2 -1
- package/package.json +14 -15
- package/src/TimeSelect/index.tsx +108 -120
- package/src/TimeSelect/props.ts +2 -1
- package/types/TimeSelect/index.d.ts +48 -31
- package/types/TimeSelect/index.d.ts.map +1 -1
- package/types/TimeSelect/props.d.ts.map +1 -1
- package/es/TimeSelect/locales.js +0 -58
- package/lib/TimeSelect/locales.js +0 -71
- package/src/TimeSelect/locales.ts +0 -59
- package/types/TimeSelect/locales.d.ts +0 -36
- package/types/TimeSelect/locales.d.ts.map +0 -1
package/src/TimeSelect/index.tsx
CHANGED
|
@@ -22,20 +22,9 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import React, { Component } from 'react'
|
|
26
|
-
|
|
27
|
-
import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
|
|
28
|
-
|
|
29
|
-
import dayjs from 'dayjs'
|
|
30
|
-
import utc from 'dayjs/plugin/utc'
|
|
31
|
-
import timezone from 'dayjs/plugin/timezone'
|
|
32
|
-
import localizedFormat from 'dayjs/plugin/localizedFormat'
|
|
33
|
-
import './locales'
|
|
34
|
-
|
|
35
|
-
dayjs.extend(utc)
|
|
36
|
-
dayjs.extend(timezone)
|
|
37
|
-
dayjs.extend(localizedFormat)
|
|
25
|
+
import React, { BaseSyntheticEvent, Component, SyntheticEvent } from 'react'
|
|
38
26
|
|
|
27
|
+
import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n'
|
|
39
28
|
import {
|
|
40
29
|
getInteraction,
|
|
41
30
|
passthroughProps,
|
|
@@ -47,15 +36,30 @@ import { Select } from '@instructure/ui-select'
|
|
|
47
36
|
import { uid } from '@instructure/uid'
|
|
48
37
|
import type { TimeSelectProps } from './props'
|
|
49
38
|
import { allowedProps, propTypes } from './props'
|
|
39
|
+
import { Moment } from 'moment-timezone'
|
|
40
|
+
|
|
41
|
+
type TimeSelectOptions = {
|
|
42
|
+
id: string
|
|
43
|
+
value: string
|
|
44
|
+
label: string
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
type TimeSelectState = {
|
|
48
|
+
inputValue: string
|
|
49
|
+
options: TimeSelectOptions[]
|
|
50
|
+
filteredOptions: TimeSelectOptions[]
|
|
51
|
+
isShowingOptions: boolean
|
|
52
|
+
highlightedOptionId?: string
|
|
53
|
+
selectedOptionId?: string
|
|
54
|
+
}
|
|
50
55
|
|
|
51
56
|
/**
|
|
52
57
|
---
|
|
53
58
|
category: components
|
|
54
59
|
---
|
|
55
|
-
**/
|
|
56
|
-
|
|
60
|
+
**/
|
|
57
61
|
@testable()
|
|
58
|
-
class TimeSelect extends Component<TimeSelectProps> {
|
|
62
|
+
class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
|
|
59
63
|
static readonly componentId = 'TimeSelect'
|
|
60
64
|
|
|
61
65
|
static allowedProps = allowedProps
|
|
@@ -63,7 +67,8 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
63
67
|
|
|
64
68
|
static defaultProps = {
|
|
65
69
|
defaultToFirstOption: false,
|
|
66
|
-
|
|
70
|
+
id: undefined,
|
|
71
|
+
format: 'LT', // see https://momentjs.com/docs/#/displaying/
|
|
67
72
|
step: 30,
|
|
68
73
|
isRequired: false,
|
|
69
74
|
isInline: false,
|
|
@@ -91,19 +96,32 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
91
96
|
|
|
92
97
|
static contextType = ApplyLocaleContext
|
|
93
98
|
|
|
94
|
-
|
|
95
|
-
constructor(props) {
|
|
99
|
+
constructor(props: TimeSelectProps) {
|
|
96
100
|
super(props)
|
|
97
101
|
this.state = this.getInitialState()
|
|
98
102
|
}
|
|
103
|
+
|
|
104
|
+
componentDidMount() {
|
|
105
|
+
// we'll need to recalculate the state because the context value is
|
|
106
|
+
// set at this point (and it might change locale & timezone)
|
|
107
|
+
this.setState(this.getInitialState())
|
|
108
|
+
}
|
|
109
|
+
|
|
99
110
|
ref: Element | null = null
|
|
100
111
|
_emptyOptionId = uid('Select-EmptyOption')
|
|
101
112
|
|
|
102
113
|
focus() {
|
|
103
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property '
|
|
104
|
-
this.
|
|
114
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'TimeSel... Remove this comment to see the full error message
|
|
115
|
+
this.ref && this.ref.focus()
|
|
105
116
|
}
|
|
106
117
|
|
|
118
|
+
get _select() {
|
|
119
|
+
console.warn(
|
|
120
|
+
'_select property is deprecated and will be removed in v9, please use ref instead'
|
|
121
|
+
)
|
|
122
|
+
|
|
123
|
+
return this.ref
|
|
124
|
+
}
|
|
107
125
|
get isControlled() {
|
|
108
126
|
return typeof this.props.value !== 'undefined'
|
|
109
127
|
}
|
|
@@ -113,13 +131,12 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
113
131
|
}
|
|
114
132
|
|
|
115
133
|
get focused() {
|
|
116
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property '
|
|
117
|
-
return this.
|
|
134
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'TimeSel... Remove this comment to see the full error message
|
|
135
|
+
return this.ref && this.ref.focused
|
|
118
136
|
}
|
|
119
137
|
|
|
120
138
|
get id() {
|
|
121
|
-
|
|
122
|
-
return this._select && this._select.id
|
|
139
|
+
return this.ref && this.ref.id
|
|
123
140
|
}
|
|
124
141
|
|
|
125
142
|
locale() {
|
|
@@ -137,11 +154,10 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
137
154
|
} else if (this.context && this.context.timezone) {
|
|
138
155
|
return this.context.timezone
|
|
139
156
|
}
|
|
140
|
-
return
|
|
157
|
+
return DateTime.browserTimeZone()
|
|
141
158
|
}
|
|
142
159
|
|
|
143
|
-
|
|
144
|
-
componentDidUpdate(prevProps) {
|
|
160
|
+
componentDidUpdate(prevProps: TimeSelectProps) {
|
|
145
161
|
if (
|
|
146
162
|
this.props.step !== prevProps.step ||
|
|
147
163
|
this.props.format !== prevProps.format
|
|
@@ -161,7 +177,7 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
161
177
|
}
|
|
162
178
|
this.setState({
|
|
163
179
|
inputValue: option ? option.label : '',
|
|
164
|
-
selectedOptionId: option ? option.id :
|
|
180
|
+
selectedOptionId: option ? option.id : undefined
|
|
165
181
|
})
|
|
166
182
|
}
|
|
167
183
|
}
|
|
@@ -169,19 +185,21 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
169
185
|
getInitialState() {
|
|
170
186
|
const initialOptions = this.generateOptions()
|
|
171
187
|
const initialSelection = this.getInitialOption(initialOptions)
|
|
172
|
-
|
|
173
188
|
return {
|
|
174
189
|
inputValue: initialSelection ? initialSelection.label : '',
|
|
175
190
|
options: initialOptions,
|
|
176
191
|
filteredOptions: initialOptions,
|
|
177
192
|
isShowingOptions: false,
|
|
178
|
-
highlightedOptionId: initialSelection
|
|
179
|
-
|
|
193
|
+
highlightedOptionId: initialSelection
|
|
194
|
+
? (initialSelection as any).id
|
|
195
|
+
: undefined,
|
|
196
|
+
selectedOptionId: initialSelection
|
|
197
|
+
? (initialSelection as any).id
|
|
198
|
+
: undefined
|
|
180
199
|
}
|
|
181
200
|
}
|
|
182
201
|
|
|
183
|
-
|
|
184
|
-
getInitialOption(options) {
|
|
202
|
+
getInitialOption(options: TimeSelectOptions[]) {
|
|
185
203
|
const { value, defaultValue, defaultToFirstOption, format } = this.props
|
|
186
204
|
const initialValue = value || defaultValue
|
|
187
205
|
|
|
@@ -193,44 +211,36 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
193
211
|
return option
|
|
194
212
|
}
|
|
195
213
|
// value does not match an existing option
|
|
196
|
-
const date =
|
|
197
|
-
|
|
198
|
-
.locale(this.locale())
|
|
199
|
-
return { label: date.format(format) }
|
|
214
|
+
const date = DateTime.parse(initialValue, this.locale(), this.timezone())
|
|
215
|
+
return { label: format ? date.format(format) : date.toISOString() }
|
|
200
216
|
}
|
|
201
217
|
// otherwise return first option, if desired
|
|
202
218
|
if (defaultToFirstOption) {
|
|
203
219
|
return options[0]
|
|
204
220
|
}
|
|
205
|
-
|
|
206
|
-
return null
|
|
221
|
+
return undefined
|
|
207
222
|
}
|
|
208
223
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'option' implicitly has an 'any' type.
|
|
212
|
-
return options.find((option) => option[field] === value)
|
|
224
|
+
getOption(field: string, value: unknown, options = this.state.options) {
|
|
225
|
+
return options.find((option: any) => option[field] === value)
|
|
213
226
|
}
|
|
214
227
|
|
|
215
|
-
|
|
216
|
-
getFormattedId(date) {
|
|
228
|
+
getFormattedId(date: Moment) {
|
|
217
229
|
// ISO8601 strings may contain a space. Remove any spaces before using the
|
|
218
230
|
// date as the id.
|
|
219
231
|
const dateStr = date.toISOString()
|
|
220
|
-
return dateStr
|
|
232
|
+
return dateStr.replace(/\s/g, '')
|
|
221
233
|
}
|
|
222
234
|
|
|
223
235
|
getBaseDate() {
|
|
224
236
|
let baseDate
|
|
225
237
|
const baseValue = this.props.value || this.props.defaultValue
|
|
226
238
|
if (baseValue) {
|
|
227
|
-
baseDate =
|
|
228
|
-
.tz(this.timezone(), true)
|
|
229
|
-
.locale(this.locale())
|
|
239
|
+
baseDate = DateTime.parse(baseValue, this.locale(), this.timezone())
|
|
230
240
|
} else {
|
|
231
|
-
baseDate =
|
|
241
|
+
baseDate = DateTime.now(this.locale(), this.timezone())
|
|
232
242
|
}
|
|
233
|
-
return baseDate.second
|
|
243
|
+
return baseDate.set({ second: 0, millisecond: 0 }).clone()
|
|
234
244
|
}
|
|
235
245
|
|
|
236
246
|
generateOptions() {
|
|
@@ -242,36 +252,31 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
242
252
|
for (let minute = 0; minute < 60 / this.props.step; minute++) {
|
|
243
253
|
// @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
|
|
244
254
|
const minutes = minute * this.props.step
|
|
245
|
-
const newDate = date.
|
|
255
|
+
const newDate = date.set({ hour: hour, minute: minutes })
|
|
246
256
|
// store time options
|
|
247
257
|
options.push({
|
|
248
258
|
id: this.getFormattedId(newDate), // iso no spaces
|
|
249
|
-
value: newDate.toISOString(),
|
|
250
|
-
label:
|
|
259
|
+
value: newDate.toISOString(),
|
|
260
|
+
label: this.props.format
|
|
261
|
+
? newDate.format(this.props.format)
|
|
262
|
+
: newDate.toISOString()
|
|
251
263
|
})
|
|
252
264
|
}
|
|
253
265
|
}
|
|
254
266
|
return options
|
|
255
267
|
}
|
|
256
268
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'options' does not exist on type 'Readonl... Remove this comment to see the full error message
|
|
260
|
-
return this.state.options.filter((option) =>
|
|
269
|
+
filterOptions(inputValue: string) {
|
|
270
|
+
return this.state?.options.filter((option: TimeSelectOptions) =>
|
|
261
271
|
option.label.toLowerCase().startsWith(inputValue.toLowerCase())
|
|
262
272
|
)
|
|
263
273
|
}
|
|
264
274
|
|
|
265
|
-
// @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
|
|
266
275
|
matchValue() {
|
|
267
276
|
const {
|
|
268
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'inputValue' does not exist on type 'Read... Remove this comment to see the full error message
|
|
269
277
|
inputValue,
|
|
270
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'filteredOptions' does not exist on type ... Remove this comment to see the full error message
|
|
271
278
|
filteredOptions,
|
|
272
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'highlightedOptionId' does not exist on t... Remove this comment to see the full error message
|
|
273
279
|
highlightedOptionId,
|
|
274
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedOptionId' does not exist on type... Remove this comment to see the full error message
|
|
275
280
|
selectedOptionId
|
|
276
281
|
} = this.state
|
|
277
282
|
|
|
@@ -294,7 +299,7 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
294
299
|
}
|
|
295
300
|
// input value is from highlighted option, not user input
|
|
296
301
|
if (highlightedOptionId) {
|
|
297
|
-
if (inputValue === this.getOption('id', highlightedOptionId)
|
|
302
|
+
if (inputValue === this.getOption('id', highlightedOptionId)!.label) {
|
|
298
303
|
return {
|
|
299
304
|
inputValue: '',
|
|
300
305
|
filteredOptions: this.filterOptions('')
|
|
@@ -306,130 +311,115 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
306
311
|
if (inputValue === '') {
|
|
307
312
|
return { inputValue: '' }
|
|
308
313
|
}
|
|
314
|
+
return undefined
|
|
309
315
|
}
|
|
310
316
|
|
|
311
|
-
|
|
312
|
-
handleRef = (node) => {
|
|
313
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property '_select' does not exist on type 'TimeSel... Remove this comment to see the full error message
|
|
314
|
-
this._select = node // TODO remove this and keep this.ref
|
|
317
|
+
handleRef = (node: any) => {
|
|
315
318
|
this.ref = node
|
|
316
319
|
}
|
|
317
320
|
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
this.
|
|
321
|
-
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
322
|
-
this.props.onBlur(event)
|
|
321
|
+
handleBlur = (event: SyntheticEvent) => {
|
|
322
|
+
this.setState({ highlightedOptionId: undefined })
|
|
323
|
+
this.props.onBlur?.(event)
|
|
323
324
|
}
|
|
324
325
|
|
|
325
|
-
|
|
326
|
-
handleInputChange = (event) => {
|
|
326
|
+
handleInputChange = (event: BaseSyntheticEvent) => {
|
|
327
327
|
const value = event.target.value
|
|
328
328
|
const newOptions = this.filterOptions(value)
|
|
329
329
|
|
|
330
|
-
|
|
331
|
-
this.setState((state) => ({
|
|
330
|
+
this.setState((_state: TimeSelectState) => ({
|
|
332
331
|
inputValue: value,
|
|
333
332
|
filteredOptions: newOptions,
|
|
334
|
-
highlightedOptionId: newOptions.length > 0 ? newOptions[0].id :
|
|
333
|
+
highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : undefined,
|
|
335
334
|
isShowingOptions: true
|
|
336
335
|
}))
|
|
337
336
|
|
|
338
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isShowingOptions' does not exist on type... Remove this comment to see the full error message
|
|
339
337
|
if (!this.state.isShowingOptions) {
|
|
340
|
-
|
|
341
|
-
this.props.onShowOptions(event)
|
|
338
|
+
this.props.onShowOptions?.(event)
|
|
342
339
|
}
|
|
343
340
|
}
|
|
344
341
|
|
|
345
|
-
|
|
346
|
-
handleShowOptions = (event) => {
|
|
342
|
+
handleShowOptions = (event: SyntheticEvent) => {
|
|
347
343
|
this.setState({ isShowingOptions: true })
|
|
348
|
-
|
|
349
|
-
this.props.onShowOptions(event)
|
|
344
|
+
this.props.onShowOptions?.(event)
|
|
350
345
|
}
|
|
351
346
|
|
|
352
|
-
|
|
353
|
-
handleHideOptions = (event) => {
|
|
354
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedOptionId' does not exist on type... Remove this comment to see the full error message
|
|
347
|
+
handleHideOptions = (event: SyntheticEvent) => {
|
|
355
348
|
const { selectedOptionId } = this.state
|
|
356
349
|
const option = this.getOption('id', selectedOptionId)
|
|
357
350
|
let prevValue = ''
|
|
358
351
|
|
|
359
352
|
if (this.props.defaultValue) {
|
|
360
|
-
const date =
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
353
|
+
const date = DateTime.parse(
|
|
354
|
+
this.props.defaultValue,
|
|
355
|
+
this.locale(),
|
|
356
|
+
this.timezone()
|
|
357
|
+
)
|
|
358
|
+
prevValue = this.props.format
|
|
359
|
+
? date.format(this.props.format)
|
|
360
|
+
: date.toISOString()
|
|
365
361
|
}
|
|
366
362
|
|
|
367
|
-
|
|
368
|
-
this.setState(({ inputValue }) => ({
|
|
363
|
+
this.setState((_state: TimeSelectState) => ({
|
|
369
364
|
isShowingOptions: false,
|
|
370
|
-
highlightedOptionId:
|
|
371
|
-
inputValue: selectedOptionId ? option
|
|
365
|
+
highlightedOptionId: undefined,
|
|
366
|
+
inputValue: selectedOptionId ? option!.label : prevValue,
|
|
372
367
|
filteredOptions: this.filterOptions(''),
|
|
373
368
|
...this.matchValue()
|
|
374
369
|
}))
|
|
375
|
-
|
|
376
|
-
this.props.onHideOptions(event)
|
|
370
|
+
this.props.onHideOptions?.(event)
|
|
377
371
|
}
|
|
378
372
|
|
|
379
|
-
|
|
380
|
-
handleHighlightOption = (event, { id }) => {
|
|
373
|
+
handleHighlightOption = (event: SyntheticEvent, { id }: { id: string }) => {
|
|
381
374
|
if (id === this._emptyOptionId) return
|
|
382
375
|
const { type } = event
|
|
383
|
-
const option = this.getOption('id', id)
|
|
376
|
+
const option = this.getOption('id', id)!.label
|
|
384
377
|
|
|
385
378
|
this.setState((state) => ({
|
|
386
379
|
highlightedOptionId: id,
|
|
387
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'inputValue' does not exist on type 'Read... Remove this comment to see the full error message
|
|
388
380
|
inputValue: type === 'keydown' ? option : state.inputValue
|
|
389
381
|
}))
|
|
390
382
|
}
|
|
391
383
|
|
|
392
|
-
|
|
393
|
-
handleSelectOption = (event, { id }) => {
|
|
384
|
+
handleSelectOption = (event: SyntheticEvent, { id }: { id: string }) => {
|
|
394
385
|
if (id === this._emptyOptionId) {
|
|
395
386
|
this.setState({ isShowingOptions: false })
|
|
396
387
|
return
|
|
397
388
|
}
|
|
398
389
|
const option = this.getOption('id', id)
|
|
399
390
|
|
|
391
|
+
let newInputValue: string
|
|
400
392
|
if (this.isControlled) {
|
|
401
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedOptionId' does not exist on type... Remove this comment to see the full error message
|
|
402
393
|
const prev = this.getOption('id', this.state.selectedOptionId)
|
|
394
|
+
newInputValue = prev ? prev.label : ''
|
|
403
395
|
this.setState({
|
|
404
396
|
isShowingOptions: false,
|
|
405
|
-
inputValue:
|
|
397
|
+
inputValue: newInputValue,
|
|
406
398
|
filteredOptions: this.filterOptions('')
|
|
407
399
|
})
|
|
408
400
|
} else {
|
|
401
|
+
newInputValue = option!.label
|
|
409
402
|
this.setState({
|
|
410
403
|
isShowingOptions: false,
|
|
411
404
|
selectedOptionId: id,
|
|
412
|
-
inputValue:
|
|
405
|
+
inputValue: newInputValue,
|
|
413
406
|
filteredOptions: this.filterOptions('')
|
|
414
407
|
})
|
|
415
408
|
}
|
|
416
409
|
|
|
417
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedOptionId' does not exist on type... Remove this comment to see the full error message
|
|
418
410
|
if (id !== this.state.selectedOptionId) {
|
|
419
|
-
|
|
420
|
-
|
|
411
|
+
this.props.onChange?.(event, {
|
|
412
|
+
value: option!.value,
|
|
413
|
+
inputText: newInputValue
|
|
414
|
+
})
|
|
421
415
|
}
|
|
422
|
-
|
|
423
|
-
this.props.onHideOptions(event)
|
|
416
|
+
this.props.onHideOptions?.(event)
|
|
424
417
|
}
|
|
425
418
|
|
|
426
419
|
renderOptions() {
|
|
427
420
|
const {
|
|
428
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'filteredOptions' does not exist on type ... Remove this comment to see the full error message
|
|
429
421
|
filteredOptions,
|
|
430
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'highlightedOptionId' does not exist on t... Remove this comment to see the full error message
|
|
431
422
|
highlightedOptionId,
|
|
432
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedOptionId' does not exist on type... Remove this comment to see the full error message
|
|
433
423
|
selectedOptionId
|
|
434
424
|
} = this.state
|
|
435
425
|
|
|
@@ -437,8 +427,7 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
437
427
|
return this.renderEmptyOption()
|
|
438
428
|
}
|
|
439
429
|
|
|
440
|
-
|
|
441
|
-
return filteredOptions.map((option) => {
|
|
430
|
+
return filteredOptions.map((option: any) => {
|
|
442
431
|
const { id, label } = option
|
|
443
432
|
return (
|
|
444
433
|
<Select.Option
|
|
@@ -492,7 +481,6 @@ class TimeSelect extends Component<TimeSelectProps> {
|
|
|
492
481
|
...rest
|
|
493
482
|
} = this.props
|
|
494
483
|
|
|
495
|
-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'inputValue' does not exist on type 'Read... Remove this comment to see the full error message
|
|
496
484
|
const { inputValue, isShowingOptions } = this.state
|
|
497
485
|
|
|
498
486
|
return (
|
package/src/TimeSelect/props.ts
CHANGED
|
@@ -107,7 +107,8 @@ const propTypes: PropValidators<PropKeys> = {
|
|
|
107
107
|
/**
|
|
108
108
|
* The format to use when displaying the possible and currently selected options.
|
|
109
109
|
*
|
|
110
|
-
* See [moment
|
|
110
|
+
* See [moment](https://momentjs.com/docs/#/displaying/format/) for the list
|
|
111
|
+
* of available formats.
|
|
111
112
|
*/
|
|
112
113
|
format: PropTypes.string,
|
|
113
114
|
/**
|
|
@@ -1,13 +1,25 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import dayjs from 'dayjs';
|
|
3
|
-
import './locales';
|
|
1
|
+
import React, { BaseSyntheticEvent, Component, SyntheticEvent } from 'react';
|
|
4
2
|
import type { TimeSelectProps } from './props';
|
|
3
|
+
import { Moment } from 'moment-timezone';
|
|
4
|
+
declare type TimeSelectOptions = {
|
|
5
|
+
id: string;
|
|
6
|
+
value: string;
|
|
7
|
+
label: string;
|
|
8
|
+
};
|
|
9
|
+
declare type TimeSelectState = {
|
|
10
|
+
inputValue: string;
|
|
11
|
+
options: TimeSelectOptions[];
|
|
12
|
+
filteredOptions: TimeSelectOptions[];
|
|
13
|
+
isShowingOptions: boolean;
|
|
14
|
+
highlightedOptionId?: string;
|
|
15
|
+
selectedOptionId?: string;
|
|
16
|
+
};
|
|
5
17
|
/**
|
|
6
18
|
---
|
|
7
19
|
category: components
|
|
8
20
|
---
|
|
9
|
-
**/
|
|
10
|
-
declare class TimeSelect extends Component<TimeSelectProps> {
|
|
21
|
+
**/
|
|
22
|
+
declare class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
|
|
11
23
|
static readonly componentId = "TimeSelect";
|
|
12
24
|
static allowedProps: readonly (keyof {
|
|
13
25
|
renderLabel: React.ReactNode | ((...args: any[]) => any);
|
|
@@ -73,6 +85,7 @@ declare class TimeSelect extends Component<TimeSelectProps> {
|
|
|
73
85
|
}>;
|
|
74
86
|
static defaultProps: {
|
|
75
87
|
defaultToFirstOption: boolean;
|
|
88
|
+
id: undefined;
|
|
76
89
|
format: string;
|
|
77
90
|
step: number;
|
|
78
91
|
isRequired: boolean;
|
|
@@ -95,26 +108,28 @@ declare class TimeSelect extends Component<TimeSelectProps> {
|
|
|
95
108
|
locale?: string | undefined;
|
|
96
109
|
timezone?: string | undefined;
|
|
97
110
|
}>;
|
|
98
|
-
constructor(props:
|
|
111
|
+
constructor(props: TimeSelectProps);
|
|
112
|
+
componentDidMount(): void;
|
|
99
113
|
ref: Element | null;
|
|
100
114
|
_emptyOptionId: string;
|
|
101
115
|
focus(): void;
|
|
116
|
+
get _select(): Element | null;
|
|
102
117
|
get isControlled(): boolean;
|
|
103
118
|
get interaction(): import("@instructure/ui-react-utils").InteractionType;
|
|
104
119
|
get focused(): any;
|
|
105
|
-
get id():
|
|
120
|
+
get id(): string | null;
|
|
106
121
|
locale(): any;
|
|
107
122
|
timezone(): any;
|
|
108
|
-
componentDidUpdate(prevProps:
|
|
123
|
+
componentDidUpdate(prevProps: TimeSelectProps): void;
|
|
109
124
|
getInitialState(): {
|
|
110
|
-
inputValue:
|
|
125
|
+
inputValue: string;
|
|
111
126
|
options: {
|
|
112
|
-
id:
|
|
127
|
+
id: string;
|
|
113
128
|
value: string;
|
|
114
129
|
label: string;
|
|
115
130
|
}[];
|
|
116
131
|
filteredOptions: {
|
|
117
|
-
id:
|
|
132
|
+
id: string;
|
|
118
133
|
value: string;
|
|
119
134
|
label: string;
|
|
120
135
|
}[];
|
|
@@ -122,41 +137,43 @@ declare class TimeSelect extends Component<TimeSelectProps> {
|
|
|
122
137
|
highlightedOptionId: any;
|
|
123
138
|
selectedOptionId: any;
|
|
124
139
|
};
|
|
125
|
-
getInitialOption(options:
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
140
|
+
getInitialOption(options: TimeSelectOptions[]): TimeSelectOptions | {
|
|
141
|
+
label: string;
|
|
142
|
+
} | undefined;
|
|
143
|
+
getOption(field: string, value: unknown, options?: TimeSelectOptions[]): TimeSelectOptions | undefined;
|
|
144
|
+
getFormattedId(date: Moment): string;
|
|
145
|
+
getBaseDate(): Moment;
|
|
129
146
|
generateOptions(): {
|
|
130
|
-
id:
|
|
147
|
+
id: string;
|
|
131
148
|
value: string;
|
|
132
149
|
label: string;
|
|
133
150
|
}[];
|
|
134
|
-
filterOptions(inputValue:
|
|
151
|
+
filterOptions(inputValue: string): TimeSelectOptions[];
|
|
135
152
|
matchValue(): {
|
|
136
|
-
inputValue:
|
|
137
|
-
selectedOptionId:
|
|
138
|
-
filteredOptions:
|
|
153
|
+
inputValue: string;
|
|
154
|
+
selectedOptionId: string;
|
|
155
|
+
filteredOptions: TimeSelectOptions[];
|
|
139
156
|
} | {
|
|
140
|
-
inputValue:
|
|
157
|
+
inputValue: string;
|
|
141
158
|
selectedOptionId?: undefined;
|
|
142
159
|
filteredOptions?: undefined;
|
|
143
160
|
} | {
|
|
144
161
|
inputValue: string;
|
|
145
|
-
filteredOptions:
|
|
162
|
+
filteredOptions: TimeSelectOptions[];
|
|
146
163
|
selectedOptionId?: undefined;
|
|
147
164
|
} | undefined;
|
|
148
165
|
handleRef: (node: any) => void;
|
|
149
|
-
handleBlur: (event:
|
|
150
|
-
handleInputChange: (event:
|
|
151
|
-
handleShowOptions: (event:
|
|
152
|
-
handleHideOptions: (event:
|
|
153
|
-
handleHighlightOption: (event:
|
|
154
|
-
id:
|
|
166
|
+
handleBlur: (event: SyntheticEvent) => void;
|
|
167
|
+
handleInputChange: (event: BaseSyntheticEvent) => void;
|
|
168
|
+
handleShowOptions: (event: SyntheticEvent) => void;
|
|
169
|
+
handleHideOptions: (event: SyntheticEvent) => void;
|
|
170
|
+
handleHighlightOption: (event: SyntheticEvent, { id }: {
|
|
171
|
+
id: string;
|
|
155
172
|
}) => void;
|
|
156
|
-
handleSelectOption: (event:
|
|
157
|
-
id:
|
|
173
|
+
handleSelectOption: (event: SyntheticEvent, { id }: {
|
|
174
|
+
id: string;
|
|
158
175
|
}) => void;
|
|
159
|
-
renderOptions():
|
|
176
|
+
renderOptions(): JSX.Element | JSX.Element[];
|
|
160
177
|
renderEmptyOption(): JSX.Element;
|
|
161
178
|
render(): JSX.Element;
|
|
162
179
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSelect/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSelect/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAY5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,aAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,aAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,eAAe,EAAE,iBAAiB,EAAE,CAAA;IACpC,gBAAgB,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED;;;;IAII;AACJ,cACM,UAAW,SAAQ,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAClE,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;MA2BlB;IAED,MAAM,CAAC,WAAW;;;OAAqB;gBAE3B,KAAK,EAAE,eAAe;IAKlC,iBAAiB;IAMjB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAC1B,cAAc,SAA4B;IAE1C,KAAK;IAKL,IAAI,OAAO,mBAMV;IACD,IAAI,YAAY,YAEf;IAED,IAAI,WAAW,0DAEd;IAED,IAAI,OAAO,QAGV;IAED,IAAI,EAAE,kBAEL;IAED,MAAM;IASN,QAAQ;IASR,kBAAkB,CAAC,SAAS,EAAE,eAAe;IAyB7C,eAAe;;;;;;;;;;;;;;;;IAiBf,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,EAAE;;;IAsB7C,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,sBAAqB;IAIrE,cAAc,CAAC,IAAI,EAAE,MAAM;IAO3B,WAAW;IAWX,eAAe;;;;;IAuBf,aAAa,CAAC,UAAU,EAAE,MAAM;IAMhC,UAAU;;;;;;;;;;;;;IA0CV,SAAS,SAAU,GAAG,UAErB;IAED,UAAU,UAAW,cAAc,UAGlC;IAED,iBAAiB,UAAW,kBAAkB,UAc7C;IAED,iBAAiB,UAAW,cAAc,UAGzC;IAED,iBAAiB,UAAW,cAAc,UAwBzC;IAED,qBAAqB,UAAW,cAAc;YAAgB,MAAM;eASnE;IAED,kBAAkB,UAAW,cAAc;YAAgB,MAAM;eAiChE;IAED,aAAa;IA0Bb,iBAAiB;IAYjB,MAAM;CA+DP;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,eAAe,UAAU,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/TimeSelect/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAQlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,0BAA0B,CAAA;AAEjC,aAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;IACjC,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACvC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC/D,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC/D,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GACvC,mBAAmB,CACjB,kBAAkB,EAClB,mBAAmB,CAAC,kBAAkB,CAAC,CACxC,CAAA;AAEH,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/TimeSelect/props.ts"],"names":[],"mappings":"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"}
|