@instructure/ui-time-select 11.7.2-snapshot-48 → 11.7.2-snapshot-50
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 -2
- package/es/TimeSelect/v2/index.js +535 -0
- package/es/TimeSelect/v2/props.js +26 -0
- package/es/exports/b.js +24 -0
- package/lib/TimeSelect/v2/index.js +546 -0
- package/lib/TimeSelect/v2/props.js +31 -0
- package/lib/exports/b.js +12 -0
- package/package.json +19 -19
- package/src/TimeSelect/v2/README.md +85 -0
- package/src/TimeSelect/v2/index.tsx +645 -0
- package/src/TimeSelect/v2/props.ts +327 -0
- package/src/exports/b.ts +26 -0
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/TimeSelect/v2/index.d.ts +109 -0
- package/types/TimeSelect/v2/index.d.ts.map +1 -0
- package/types/TimeSelect/v2/props.d.ts +249 -0
- package/types/TimeSelect/v2/props.d.ts.map +1 -0
- package/types/exports/b.d.ts +3 -0
- package/types/exports/b.d.ts.map +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,9 +3,19 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [11.7.2-snapshot-
|
|
6
|
+
## [11.7.2-snapshot-50](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-50) (2026-04-21)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **many:** rework Select, SimpleSelect and TimeSelect ([fb95519](https://github.com/instructure/instructure-ui/commit/fb9551958326bdc8e95d55075c27c7e078c0c69c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### BREAKING CHANGES
|
|
15
|
+
|
|
16
|
+
* **many:** contains breaking changes due to component using the new theming system
|
|
17
|
+
|
|
18
|
+
INSTUI-4807
|
|
9
19
|
|
|
10
20
|
|
|
11
21
|
|
|
@@ -0,0 +1,535 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
const _excluded = ["value", "defaultValue", "placeholder", "renderLabel", "inputRef", "id", "listRef", "renderBeforeInput", "renderAfterInput", "isRequired", "isInline", "width", "format", "step", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "onFocus", "onShowOptions", "onHideOptions", "onInputChange", "onKeyDown", "mountNode"];
|
|
3
|
+
var _dec, _class, _TimeSelect;
|
|
4
|
+
/*
|
|
5
|
+
* The MIT License (MIT)
|
|
6
|
+
*
|
|
7
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
8
|
+
*
|
|
9
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
10
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
11
|
+
* in the Software without restriction, including without limitation the rights
|
|
12
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
13
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
14
|
+
* furnished to do so, subject to the following conditions:
|
|
15
|
+
*
|
|
16
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
17
|
+
* copies or substantial portions of the Software.
|
|
18
|
+
*
|
|
19
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
20
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
21
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
22
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
23
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
24
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
25
|
+
* SOFTWARE.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
import { Component } from 'react';
|
|
29
|
+
import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n';
|
|
30
|
+
import { getInteraction, passthroughProps, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
|
|
31
|
+
import { Select } from '@instructure/ui-select/latest';
|
|
32
|
+
import * as utils from '@instructure/ui-utils';
|
|
33
|
+
import { allowedProps } from "./props.js";
|
|
34
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
35
|
+
/**
|
|
36
|
+
---
|
|
37
|
+
category: components
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
A component used to select a time value.
|
|
41
|
+
**/
|
|
42
|
+
let TimeSelect = (_dec = withDeterministicId(), _dec(_class = (_TimeSelect = class TimeSelect extends Component {
|
|
43
|
+
constructor(props) {
|
|
44
|
+
super(props);
|
|
45
|
+
this.ref = null;
|
|
46
|
+
this._emptyOptionId = this.props.deterministicId('Select-EmptyOption');
|
|
47
|
+
this.getOption = (field, value, options = this.state.options) => {
|
|
48
|
+
return options.find(option => option[field] === value);
|
|
49
|
+
};
|
|
50
|
+
this.handleRef = node => {
|
|
51
|
+
this.ref = node;
|
|
52
|
+
};
|
|
53
|
+
this.handleBlur = event => {
|
|
54
|
+
var _this$props$onBlur, _this$props;
|
|
55
|
+
(_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
|
|
56
|
+
};
|
|
57
|
+
this.handleInputChange = event => {
|
|
58
|
+
var _this$props$onInputCh, _this$props3;
|
|
59
|
+
const value = event.target.value;
|
|
60
|
+
const newOptions = this.filterOptions(value);
|
|
61
|
+
if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.length) == 1) {
|
|
62
|
+
// if there is only 1 option, it will be automatically selected except
|
|
63
|
+
// if in controlled mode (it would commit this change)
|
|
64
|
+
if (!this.isControlled) {
|
|
65
|
+
this.setState({
|
|
66
|
+
selectedOptionId: newOptions[0].id
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
this.setState({
|
|
70
|
+
fireChangeOnBlur: newOptions[0]
|
|
71
|
+
});
|
|
72
|
+
} else {
|
|
73
|
+
this.setState({
|
|
74
|
+
fireChangeOnBlur: void 0,
|
|
75
|
+
isInputCleared: this.props.allowClearingSelection && value === ''
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
this.setState({
|
|
79
|
+
inputValue: value,
|
|
80
|
+
filteredOptions: newOptions,
|
|
81
|
+
highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : void 0,
|
|
82
|
+
isShowingOptions: true
|
|
83
|
+
});
|
|
84
|
+
if (!this.state.isShowingOptions) {
|
|
85
|
+
var _this$props$onShowOpt, _this$props2;
|
|
86
|
+
(_this$props$onShowOpt = (_this$props2 = this.props).onShowOptions) === null || _this$props$onShowOpt === void 0 ? void 0 : _this$props$onShowOpt.call(_this$props2, event);
|
|
87
|
+
}
|
|
88
|
+
const inputAsDate = this.parseInputText(value);
|
|
89
|
+
(_this$props$onInputCh = (_this$props3 = this.props).onInputChange) === null || _this$props$onInputCh === void 0 ? void 0 : _this$props$onInputCh.call(_this$props3, event, value, inputAsDate.isValid() ? inputAsDate.toISOString() : void 0);
|
|
90
|
+
};
|
|
91
|
+
this.onKeyDown = event => {
|
|
92
|
+
var _this$props$onKeyDown, _this$props4;
|
|
93
|
+
const input = this.parseInputText(this.state.inputValue);
|
|
94
|
+
if (event.key === 'Enter' && this.props.allowNonStepInput && input.isValid()) {
|
|
95
|
+
this.setState(() => ({
|
|
96
|
+
isShowingOptions: false,
|
|
97
|
+
highlightedOptionId: void 0
|
|
98
|
+
}));
|
|
99
|
+
// others are set in handleBlurOrEsc
|
|
100
|
+
}
|
|
101
|
+
(_this$props$onKeyDown = (_this$props4 = this.props).onKeyDown) === null || _this$props$onKeyDown === void 0 ? void 0 : _this$props$onKeyDown.call(_this$props4, event);
|
|
102
|
+
};
|
|
103
|
+
this.handleShowOptions = event => {
|
|
104
|
+
var _this$props$onShowOpt2, _this$props5;
|
|
105
|
+
this.setState({
|
|
106
|
+
isShowingOptions: true,
|
|
107
|
+
highlightedOptionId: this.state.selectedOptionId
|
|
108
|
+
});
|
|
109
|
+
(_this$props$onShowOpt2 = (_this$props5 = this.props).onShowOptions) === null || _this$props$onShowOpt2 === void 0 ? void 0 : _this$props$onShowOpt2.call(_this$props5, event);
|
|
110
|
+
if (event.type.startsWith('key')) {
|
|
111
|
+
const keyboardEvent = event;
|
|
112
|
+
const children = this.state.filteredOptions;
|
|
113
|
+
if (!this.state.inputValue && children.length > 0 && !this.props.allowClearingSelection) {
|
|
114
|
+
const optionId = keyboardEvent.key === 'ArrowDown' ? children[0].id : keyboardEvent.key === 'ArrowUp' ? children[children.length - 1].id : void 0;
|
|
115
|
+
optionId && this.setState({
|
|
116
|
+
highlightedOptionId: optionId
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
// Called when the input is blurred (=when clicking outside, tabbing away),
|
|
122
|
+
// when pressing ESC. NOT called when an item is selected via Enter/click,
|
|
123
|
+
// (but in this case it will be called later when the input is blurred.)
|
|
124
|
+
this.handleBlurOrEsc = event => {
|
|
125
|
+
var _this$props$onHideOpt, _this$props8;
|
|
126
|
+
const _this$state = this.state,
|
|
127
|
+
selectedOptionId = _this$state.selectedOptionId,
|
|
128
|
+
inputValue = _this$state.inputValue,
|
|
129
|
+
isInputCleared = _this$state.isInputCleared;
|
|
130
|
+
let defaultValue = '';
|
|
131
|
+
if (this.props.defaultValue) {
|
|
132
|
+
const date = DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
|
|
133
|
+
defaultValue = this.props.format ? date.format(this.props.format) : date.toISOString();
|
|
134
|
+
}
|
|
135
|
+
const selectedOption = this.getOption('id', selectedOptionId);
|
|
136
|
+
let newInputValue = defaultValue;
|
|
137
|
+
// if input was completely cleared, ensure it stays clear
|
|
138
|
+
// e.g. defaultValue defined, but no selection yet made
|
|
139
|
+
if (inputValue === '' && this.props.allowClearingSelection) {
|
|
140
|
+
newInputValue = '';
|
|
141
|
+
} else if (selectedOption) {
|
|
142
|
+
// If there is a selected option use its value in the input field.
|
|
143
|
+
newInputValue = selectedOption.label;
|
|
144
|
+
} else if (this.props.value) {
|
|
145
|
+
// If controlled and input is cleared and blurred after the first render, it should revert to value
|
|
146
|
+
const date = DateTime.parse(this.props.value, this.locale(), this.timezone());
|
|
147
|
+
newInputValue = this.props.format ? date.format(this.props.format) : date.toISOString();
|
|
148
|
+
}
|
|
149
|
+
this.setState(() => ({
|
|
150
|
+
isShowingOptions: false,
|
|
151
|
+
highlightedOptionId: void 0,
|
|
152
|
+
inputValue: newInputValue,
|
|
153
|
+
filteredOptions: this.filterOptions('')
|
|
154
|
+
}));
|
|
155
|
+
if (this.state.fireChangeOnBlur && event.key !== 'Escape') {
|
|
156
|
+
var _this$props$onChange, _this$props6;
|
|
157
|
+
this.setState(() => ({
|
|
158
|
+
fireChangeOnBlur: void 0
|
|
159
|
+
}));
|
|
160
|
+
(_this$props$onChange = (_this$props6 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props6, event, {
|
|
161
|
+
value: this.state.fireChangeOnBlur.value.toISOString(),
|
|
162
|
+
inputText: this.state.fireChangeOnBlur.label
|
|
163
|
+
});
|
|
164
|
+
} else if (isInputCleared && event.key !== 'Escape' && this.props.allowClearingSelection) {
|
|
165
|
+
var _this$props$onChange2, _this$props7;
|
|
166
|
+
this.setState(() => ({
|
|
167
|
+
isInputCleared: false
|
|
168
|
+
}));
|
|
169
|
+
(_this$props$onChange2 = (_this$props7 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props7, event, {
|
|
170
|
+
value: '',
|
|
171
|
+
inputText: ''
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
// TODO only fire this if handleSelectOption was not called before.
|
|
175
|
+
(_this$props$onHideOpt = (_this$props8 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props8, event);
|
|
176
|
+
};
|
|
177
|
+
// Called when an option is selected via mouse click or Enter.
|
|
178
|
+
this.handleSelectOption = (event, data) => {
|
|
179
|
+
var _this$props$onHideOpt2, _this$props0;
|
|
180
|
+
if (data.id === this._emptyOptionId) {
|
|
181
|
+
this.setState({
|
|
182
|
+
isShowingOptions: false
|
|
183
|
+
});
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
const selectedOption = this.getOption('id', data.id);
|
|
187
|
+
let newInputValue;
|
|
188
|
+
const currentSelectedOptionId = this.state.selectedOptionId;
|
|
189
|
+
|
|
190
|
+
// Focus needs to be reapplied to input
|
|
191
|
+
// after selecting an item to make sure VoiceOver behaves correctly on iOS
|
|
192
|
+
if (utils.isAndroidOrIOS()) {
|
|
193
|
+
this.blur();
|
|
194
|
+
this.focus();
|
|
195
|
+
}
|
|
196
|
+
if (this.isControlled) {
|
|
197
|
+
// in controlled mode we leave to the user to set the value of the
|
|
198
|
+
// component e.g. in the onChange event handler.
|
|
199
|
+
// This is accomplished by not setting a selectedOptionId
|
|
200
|
+
const prev = this.getOption('id', this.state.selectedOptionId);
|
|
201
|
+
newInputValue = prev ? prev.label : '';
|
|
202
|
+
this.setState({
|
|
203
|
+
isShowingOptions: false
|
|
204
|
+
});
|
|
205
|
+
} else {
|
|
206
|
+
newInputValue = selectedOption.label;
|
|
207
|
+
this.setState({
|
|
208
|
+
isShowingOptions: false,
|
|
209
|
+
selectedOptionId: data.id,
|
|
210
|
+
inputValue: newInputValue
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
if (data.id !== currentSelectedOptionId) {
|
|
214
|
+
var _this$props$onChange3, _this$props9;
|
|
215
|
+
(_this$props$onChange3 = (_this$props9 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props9, event, {
|
|
216
|
+
value: selectedOption.value.toISOString(),
|
|
217
|
+
inputText: newInputValue
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
(_this$props$onHideOpt2 = (_this$props0 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props0, event);
|
|
221
|
+
};
|
|
222
|
+
this.handleHighlightOption = (_event, data) => {
|
|
223
|
+
if (data.id === this._emptyOptionId) return;
|
|
224
|
+
this.setState(state => ({
|
|
225
|
+
highlightedOptionId: data.id,
|
|
226
|
+
inputValue: state.inputValue
|
|
227
|
+
}));
|
|
228
|
+
};
|
|
229
|
+
this.parseInputText = inputValue => {
|
|
230
|
+
const input = DateTime.parse(inputValue, this.locale(), this.timezone(), [this.props.format], true);
|
|
231
|
+
const baseDate = this.getBaseDate();
|
|
232
|
+
input.year(baseDate.year());
|
|
233
|
+
input.month(baseDate.month());
|
|
234
|
+
input.date(baseDate.date());
|
|
235
|
+
return input;
|
|
236
|
+
};
|
|
237
|
+
this.state = this.getInitialState();
|
|
238
|
+
}
|
|
239
|
+
componentDidMount() {
|
|
240
|
+
// we'll need to recalculate the state because the context value is
|
|
241
|
+
// set at this point (and it might change locale & timezone)
|
|
242
|
+
this.setState(this.getInitialState());
|
|
243
|
+
}
|
|
244
|
+
focus() {
|
|
245
|
+
var _this$ref;
|
|
246
|
+
(_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.focus();
|
|
247
|
+
}
|
|
248
|
+
blur() {
|
|
249
|
+
this.ref && this.ref.blur();
|
|
250
|
+
}
|
|
251
|
+
get _select() {
|
|
252
|
+
return this.ref;
|
|
253
|
+
}
|
|
254
|
+
get isControlled() {
|
|
255
|
+
return typeof this.props.value !== 'undefined';
|
|
256
|
+
}
|
|
257
|
+
get interaction() {
|
|
258
|
+
return getInteraction({
|
|
259
|
+
props: this.props
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
get focused() {
|
|
263
|
+
return this.ref && this.ref.focused;
|
|
264
|
+
}
|
|
265
|
+
get id() {
|
|
266
|
+
return this.ref && this.ref.id;
|
|
267
|
+
}
|
|
268
|
+
locale() {
|
|
269
|
+
if (this.props.locale) {
|
|
270
|
+
return this.props.locale;
|
|
271
|
+
} else if (this.context && this.context.locale) {
|
|
272
|
+
return this.context.locale;
|
|
273
|
+
}
|
|
274
|
+
return Locale.browserLocale();
|
|
275
|
+
}
|
|
276
|
+
timezone() {
|
|
277
|
+
if (this.props.timezone) {
|
|
278
|
+
return this.props.timezone;
|
|
279
|
+
} else if (this.context && this.context.timezone) {
|
|
280
|
+
return this.context.timezone;
|
|
281
|
+
}
|
|
282
|
+
return DateTime.browserTimeZone();
|
|
283
|
+
}
|
|
284
|
+
componentDidUpdate(prevProps) {
|
|
285
|
+
if (this.props.step !== prevProps.step || this.props.format !== prevProps.format || this.props.locale !== prevProps.locale || this.props.timezone !== prevProps.timezone || this.props.allowNonStepInput !== prevProps.allowNonStepInput) {
|
|
286
|
+
// options change, reset everything
|
|
287
|
+
// when controlled, selection will be preserved
|
|
288
|
+
// when uncontrolled, selection will be lost
|
|
289
|
+
this.setState(this.getInitialState());
|
|
290
|
+
}
|
|
291
|
+
if (this.props.value !== prevProps.value) {
|
|
292
|
+
let newValue;
|
|
293
|
+
if (this.props.value) {
|
|
294
|
+
newValue = DateTime.parse(this.props.value, this.locale(), this.timezone());
|
|
295
|
+
}
|
|
296
|
+
// value changed
|
|
297
|
+
const initState = this.getInitialState();
|
|
298
|
+
this.setState(initState);
|
|
299
|
+
// options need to be passed because state is not set immediately
|
|
300
|
+
let option;
|
|
301
|
+
if (!this.isControlled) {
|
|
302
|
+
// preserve current value when changing from controlled to uncontrolled
|
|
303
|
+
if (prevProps.value) {
|
|
304
|
+
option = this.getOption('id', this.getFormattedId(DateTime.parse(prevProps.value, this.locale(), this.timezone())));
|
|
305
|
+
}
|
|
306
|
+
} else if (newValue) {
|
|
307
|
+
option = this.getOption('id', this.getFormattedId(newValue), initState.options);
|
|
308
|
+
}
|
|
309
|
+
const outsideVal = this.props.value ? this.props.value : '';
|
|
310
|
+
// value does not match an existing option
|
|
311
|
+
const date = DateTime.parse(outsideVal, this.locale(), this.timezone());
|
|
312
|
+
let label = '';
|
|
313
|
+
if (date.isValid()) {
|
|
314
|
+
label = this.props.format ? date.format(this.props.format) : date.toISOString();
|
|
315
|
+
}
|
|
316
|
+
this.setState({
|
|
317
|
+
inputValue: option ? option.label : label,
|
|
318
|
+
selectedOptionId: option ? option.id : void 0
|
|
319
|
+
});
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
getFormattedId(date) {
|
|
323
|
+
// ISO8601 strings may contain a space. Remove any spaces before using the
|
|
324
|
+
// date as the id.
|
|
325
|
+
return date.toISOString().replace(/\s/g, '');
|
|
326
|
+
}
|
|
327
|
+
getInitialState() {
|
|
328
|
+
const initialOptions = this.generateOptions();
|
|
329
|
+
const initialSelection = this.getInitialOption(initialOptions);
|
|
330
|
+
return {
|
|
331
|
+
inputValue: initialSelection ? initialSelection.label : '',
|
|
332
|
+
options: initialOptions,
|
|
333
|
+
// 288 = 5 min step
|
|
334
|
+
filteredOptions: initialOptions.length > 288 ? initialOptions.filter(opt => opt.value.minute() % this.props.step === 0) : initialOptions,
|
|
335
|
+
isShowingOptions: false,
|
|
336
|
+
highlightedOptionId: initialSelection ? initialSelection.id : void 0,
|
|
337
|
+
selectedOptionId: initialSelection ? initialSelection.id : void 0,
|
|
338
|
+
isInputCleared: false
|
|
339
|
+
};
|
|
340
|
+
}
|
|
341
|
+
getInitialOption(options) {
|
|
342
|
+
const _this$props1 = this.props,
|
|
343
|
+
value = _this$props1.value,
|
|
344
|
+
defaultValue = _this$props1.defaultValue,
|
|
345
|
+
defaultToFirstOption = _this$props1.defaultToFirstOption,
|
|
346
|
+
format = _this$props1.format;
|
|
347
|
+
const initialValue = value || defaultValue;
|
|
348
|
+
if (typeof initialValue === 'string') {
|
|
349
|
+
const date = DateTime.parse(initialValue, this.locale(), this.timezone());
|
|
350
|
+
// get option based on value or defaultValue, if provided
|
|
351
|
+
const option = this.getOption('value', date, options);
|
|
352
|
+
if (option) {
|
|
353
|
+
// value matches an existing option
|
|
354
|
+
return option;
|
|
355
|
+
}
|
|
356
|
+
// value does not match an existing option
|
|
357
|
+
return {
|
|
358
|
+
id: this.getFormattedId(date),
|
|
359
|
+
label: format ? date.format(format) : date.toISOString(),
|
|
360
|
+
value: date
|
|
361
|
+
};
|
|
362
|
+
}
|
|
363
|
+
// otherwise, return first option, if desired
|
|
364
|
+
if (defaultToFirstOption) {
|
|
365
|
+
return options[0];
|
|
366
|
+
}
|
|
367
|
+
return void 0;
|
|
368
|
+
}
|
|
369
|
+
getBaseDate() {
|
|
370
|
+
let baseDate;
|
|
371
|
+
const baseValue = this.props.value || this.props.defaultValue;
|
|
372
|
+
if (baseValue) {
|
|
373
|
+
baseDate = DateTime.parse(baseValue, this.locale(), this.timezone());
|
|
374
|
+
} else {
|
|
375
|
+
baseDate = DateTime.now(this.locale(), this.timezone());
|
|
376
|
+
}
|
|
377
|
+
return baseDate.set({
|
|
378
|
+
second: 0,
|
|
379
|
+
millisecond: 0
|
|
380
|
+
}).clone();
|
|
381
|
+
}
|
|
382
|
+
generateOptions() {
|
|
383
|
+
const date = this.getBaseDate();
|
|
384
|
+
const options = [];
|
|
385
|
+
const step = this.props.step ? this.props.step : 30;
|
|
386
|
+
const maxMinute = this.props.allowNonStepInput ? 60 : 60 / step;
|
|
387
|
+
const minuteStep = this.props.allowNonStepInput ? 1 : step;
|
|
388
|
+
for (let hour = 0; hour < 24; hour++) {
|
|
389
|
+
for (let minute = 0; minute < maxMinute; minute++) {
|
|
390
|
+
const minutes = minute * minuteStep;
|
|
391
|
+
const newDate = date.set({
|
|
392
|
+
hour: hour,
|
|
393
|
+
minute: minutes
|
|
394
|
+
});
|
|
395
|
+
// store time options
|
|
396
|
+
options.push({
|
|
397
|
+
id: this.getFormattedId(newDate),
|
|
398
|
+
value: newDate.clone(),
|
|
399
|
+
label: this.props.format ? newDate.format(this.props.format) : newDate.toISOString()
|
|
400
|
+
});
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
return options;
|
|
404
|
+
}
|
|
405
|
+
filterOptions(inputValue) {
|
|
406
|
+
var _this$state3;
|
|
407
|
+
let inputNoSeconds = inputValue;
|
|
408
|
+
// if the input contains seconds disregard them (e.g. if format = LTS)
|
|
409
|
+
if (inputValue.length > 5) {
|
|
410
|
+
// e.g. "5:34:"
|
|
411
|
+
const input = this.parseInputText(inputValue);
|
|
412
|
+
if (input.isValid()) {
|
|
413
|
+
input.set({
|
|
414
|
+
second: 0
|
|
415
|
+
});
|
|
416
|
+
inputNoSeconds = input.format(this.props.format);
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
if (this.props.allowNonStepInput && inputNoSeconds.length < 3) {
|
|
420
|
+
var _this$state2;
|
|
421
|
+
// could show too many results, show only step values
|
|
422
|
+
return (_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.options.filter(option => {
|
|
423
|
+
return option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()) && option.value.minute() % this.props.step == 0;
|
|
424
|
+
});
|
|
425
|
+
}
|
|
426
|
+
return (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.options.filter(option => option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()));
|
|
427
|
+
}
|
|
428
|
+
renderOptions() {
|
|
429
|
+
const _this$state4 = this.state,
|
|
430
|
+
filteredOptions = _this$state4.filteredOptions,
|
|
431
|
+
highlightedOptionId = _this$state4.highlightedOptionId,
|
|
432
|
+
selectedOptionId = _this$state4.selectedOptionId;
|
|
433
|
+
if (filteredOptions.length < 1) {
|
|
434
|
+
return this.renderEmptyOption();
|
|
435
|
+
}
|
|
436
|
+
return filteredOptions.map(option => {
|
|
437
|
+
const id = option.id,
|
|
438
|
+
label = option.label;
|
|
439
|
+
return _jsx(Select.Option, {
|
|
440
|
+
id: id,
|
|
441
|
+
isHighlighted: id === highlightedOptionId,
|
|
442
|
+
isSelected: id === selectedOptionId,
|
|
443
|
+
children: label
|
|
444
|
+
}, id);
|
|
445
|
+
});
|
|
446
|
+
}
|
|
447
|
+
renderEmptyOption() {
|
|
448
|
+
return _jsx(Select.Option, {
|
|
449
|
+
id: this._emptyOptionId,
|
|
450
|
+
isHighlighted: false,
|
|
451
|
+
isSelected: false,
|
|
452
|
+
children: callRenderProp(this.props.renderEmptyOption)
|
|
453
|
+
});
|
|
454
|
+
}
|
|
455
|
+
render() {
|
|
456
|
+
const _this$props10 = this.props,
|
|
457
|
+
value = _this$props10.value,
|
|
458
|
+
defaultValue = _this$props10.defaultValue,
|
|
459
|
+
placeholder = _this$props10.placeholder,
|
|
460
|
+
renderLabel = _this$props10.renderLabel,
|
|
461
|
+
inputRef = _this$props10.inputRef,
|
|
462
|
+
id = _this$props10.id,
|
|
463
|
+
listRef = _this$props10.listRef,
|
|
464
|
+
renderBeforeInput = _this$props10.renderBeforeInput,
|
|
465
|
+
renderAfterInput = _this$props10.renderAfterInput,
|
|
466
|
+
isRequired = _this$props10.isRequired,
|
|
467
|
+
isInline = _this$props10.isInline,
|
|
468
|
+
width = _this$props10.width,
|
|
469
|
+
format = _this$props10.format,
|
|
470
|
+
step = _this$props10.step,
|
|
471
|
+
optionsMaxWidth = _this$props10.optionsMaxWidth,
|
|
472
|
+
visibleOptionsCount = _this$props10.visibleOptionsCount,
|
|
473
|
+
messages = _this$props10.messages,
|
|
474
|
+
placement = _this$props10.placement,
|
|
475
|
+
constrain = _this$props10.constrain,
|
|
476
|
+
onFocus = _this$props10.onFocus,
|
|
477
|
+
onShowOptions = _this$props10.onShowOptions,
|
|
478
|
+
onHideOptions = _this$props10.onHideOptions,
|
|
479
|
+
onInputChange = _this$props10.onInputChange,
|
|
480
|
+
onKeyDown = _this$props10.onKeyDown,
|
|
481
|
+
mountNode = _this$props10.mountNode,
|
|
482
|
+
rest = _objectWithoutProperties(_this$props10, _excluded);
|
|
483
|
+
const _this$state5 = this.state,
|
|
484
|
+
inputValue = _this$state5.inputValue,
|
|
485
|
+
isShowingOptions = _this$state5.isShowingOptions;
|
|
486
|
+
return _jsx(Select, {
|
|
487
|
+
mountNode: mountNode,
|
|
488
|
+
renderLabel: renderLabel,
|
|
489
|
+
inputValue: inputValue,
|
|
490
|
+
interaction: this.interaction,
|
|
491
|
+
placeholder: placeholder,
|
|
492
|
+
id: id,
|
|
493
|
+
onFocus: onFocus,
|
|
494
|
+
onBlur: this.handleBlur,
|
|
495
|
+
ref: this.handleRef,
|
|
496
|
+
inputRef: inputRef,
|
|
497
|
+
listRef: listRef,
|
|
498
|
+
isRequired: isRequired,
|
|
499
|
+
isInline: isInline,
|
|
500
|
+
width: width,
|
|
501
|
+
optionsMaxWidth: optionsMaxWidth,
|
|
502
|
+
visibleOptionsCount: visibleOptionsCount,
|
|
503
|
+
messages: messages,
|
|
504
|
+
placement: placement,
|
|
505
|
+
constrain: constrain,
|
|
506
|
+
renderBeforeInput: renderBeforeInput,
|
|
507
|
+
renderAfterInput: renderAfterInput,
|
|
508
|
+
isShowingOptions: isShowingOptions,
|
|
509
|
+
onRequestShowOptions: this.handleShowOptions,
|
|
510
|
+
onRequestHideOptions: this.handleBlurOrEsc,
|
|
511
|
+
onRequestHighlightOption: this.handleHighlightOption,
|
|
512
|
+
onRequestSelectOption: this.handleSelectOption,
|
|
513
|
+
onInputChange: this.handleInputChange,
|
|
514
|
+
onKeyDown: this.onKeyDown,
|
|
515
|
+
...passthroughProps(rest),
|
|
516
|
+
"data-cid": "TimeSelect",
|
|
517
|
+
children: isShowingOptions && this.renderOptions()
|
|
518
|
+
});
|
|
519
|
+
}
|
|
520
|
+
}, _TimeSelect.displayName = "TimeSelect", _TimeSelect.componentId = 'TimeSelect', _TimeSelect.allowedProps = allowedProps, _TimeSelect.defaultProps = {
|
|
521
|
+
defaultToFirstOption: false,
|
|
522
|
+
format: 'LT',
|
|
523
|
+
// see https://momentjs.com/docs/#/displaying/
|
|
524
|
+
step: 30,
|
|
525
|
+
isRequired: false,
|
|
526
|
+
isInline: false,
|
|
527
|
+
visibleOptionsCount: 8,
|
|
528
|
+
placement: 'bottom stretch',
|
|
529
|
+
constrain: 'window',
|
|
530
|
+
renderEmptyOption: '---',
|
|
531
|
+
allowNonStepInput: false,
|
|
532
|
+
allowClearingSelection: false
|
|
533
|
+
}, _TimeSelect.contextType = ApplyLocaleContext, _TimeSelect)) || _class);
|
|
534
|
+
export { TimeSelect };
|
|
535
|
+
export default TimeSelect;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange', 'allowClearingSelection'];
|
|
26
|
+
export { allowedProps };
|
package/es/exports/b.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
export { TimeSelect } from "../TimeSelect/v2/index.js";
|