@commercetools-uikit/date-time-input 15.15.0 → 16.0.0
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/dist/commercetools-uikit-date-time-input.cjs.d.ts +1 -0
- package/dist/commercetools-uikit-date-time-input.cjs.d.ts.map +1 -0
- package/dist/commercetools-uikit-date-time-input.cjs.dev.js +130 -158
- package/dist/commercetools-uikit-date-time-input.cjs.prod.js +130 -158
- package/dist/commercetools-uikit-date-time-input.esm.js +130 -158
- package/package.json +16 -16
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"commercetools-uikit-date-time-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -52,22 +52,18 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
|
|
|
52
52
|
var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
53
53
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
placeholder: props.placeholder,
|
|
68
|
-
css: getInputStyles()
|
|
69
|
-
});
|
|
70
|
-
};
|
|
55
|
+
const getInputStyles = () => /*#__PURE__*/react.css("width:100%;text-align:center;border:0;border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.designTokens.fontSizeDefault, ";margin-top:", designSystem.designTokens.spacing20, ";color:", designSystem.designTokens.colorSolid, ";:disabled{background-color:", designSystem.designTokens.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbWUtaW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1nQyIsImZpbGUiOiJ0aW1lLWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHR5cGVzPVwiQGVtb3Rpb24vcmVhY3QvdHlwZXMvY3NzLXByb3BcIiAvPlxuaW1wb3J0IHR5cGUgeyBLZXlib2FyZEV2ZW50SGFuZGxlciwgUmVmT2JqZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFREYXRlVGltZUlucHV0UHJvcHMgfSBmcm9tICcuL2RhdGUtdGltZS1pbnB1dCc7XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKCkgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDA7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIHBhZGRpbmc6IDEwcHggMDtcbiAgb3V0bGluZTogMDtcbiAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZURlZmF1bHR9O1xuICBtYXJnaW4tdG9wOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTb2xpZH07XG5cbiAgOmRpc2FibGVkIHtcbiAgICAvKiBGaXhlcyBiYWNrZ3JvdW5kIGNvbG9yIGluIEZpcmVmb3ggKi9cbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICB9XG5gO1xuXG50eXBlIFREYXRlQ2FsZW5kYXJUaW1lSW5wdXRQcm9wcyA9IHtcbiAgdGltZUlucHV0UmVmOiBSZWZPYmplY3Q8SFRNTElucHV0RWxlbWVudD47XG4gIG9uS2V5RG93bjogS2V5Ym9hcmRFdmVudEhhbmRsZXI8SFRNTElucHV0RWxlbWVudD47XG59ICYgUGljazxcbiAgVERhdGVUaW1lSW5wdXRQcm9wcyxcbiAgJ2lzRGlzYWJsZWQnIHwgJ29uQ2hhbmdlJyB8ICd2YWx1ZScgfCAncGxhY2Vob2xkZXInXG4+O1xuXG5jb25zdCBEYXRlQ2FsZW5kYXJUaW1lSW5wdXQgPSAocHJvcHM6IFREYXRlQ2FsZW5kYXJUaW1lSW5wdXRQcm9wcykgPT4gKFxuICA8aW5wdXRcbiAgICBkaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICByZWY9e3Byb3BzLnRpbWVJbnB1dFJlZn1cbiAgICB0eXBlPVwidGV4dFwiXG4gICAgdmFsdWU9e3Byb3BzLnZhbHVlfVxuICAgIG9uQ2hhbmdlPXtwcm9wcy5vbkNoYW5nZX1cbiAgICBvbktleURvd249e3Byb3BzLm9uS2V5RG93bn1cbiAgICBwbGFjZWhvbGRlcj17cHJvcHMucGxhY2Vob2xkZXJ9XG4gICAgY3NzPXtnZXRJbnB1dFN0eWxlcygpfVxuICAvPlxuKTtcblxuRGF0ZUNhbGVuZGFyVGltZUlucHV0LmRpc3BsYXlOYW1lID0gJ0RhdGVDYWxlbmRhclRpbWVJbnB1dCc7XG5cbmV4cG9ydCBkZWZhdWx0IERhdGVDYWxlbmRhclRpbWVJbnB1dDtcbiJdfQ== */");
|
|
56
|
+
|
|
57
|
+
const DateCalendarTimeInput = props => jsxRuntime.jsx("input", {
|
|
58
|
+
disabled: props.isDisabled,
|
|
59
|
+
ref: props.timeInputRef,
|
|
60
|
+
type: "text",
|
|
61
|
+
value: props.value,
|
|
62
|
+
onChange: props.onChange,
|
|
63
|
+
onKeyDown: props.onKeyDown,
|
|
64
|
+
placeholder: props.placeholder,
|
|
65
|
+
css: getInputStyles()
|
|
66
|
+
});
|
|
71
67
|
|
|
72
68
|
DateCalendarTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
73
69
|
timeInputRef: _pt__default["default"].any.isRequired,
|
|
@@ -78,37 +74,33 @@ var TimeInput = DateCalendarTimeInput;
|
|
|
78
74
|
|
|
79
75
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
80
76
|
|
|
81
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
77
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
82
78
|
|
|
83
79
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
84
80
|
|
|
85
81
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
86
|
-
|
|
82
|
+
const activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
|
|
87
83
|
|
|
88
|
-
|
|
84
|
+
const preventDownshiftDefault = event => {
|
|
89
85
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
90
86
|
}; // This keeps the menu open when the user focuses the time input (thereby
|
|
91
87
|
// blurring the regular input/toggle button)
|
|
92
88
|
|
|
93
89
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
event.persist();
|
|
90
|
+
const createBlurHandler = timeInputRef => event => {
|
|
91
|
+
event.persist();
|
|
97
92
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
};
|
|
93
|
+
if (event.relatedTarget === timeInputRef.current) {
|
|
94
|
+
preventDownshiftDefault(event);
|
|
95
|
+
}
|
|
102
96
|
};
|
|
103
97
|
|
|
104
|
-
|
|
98
|
+
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
105
99
|
_inherits(DateTimeInput, _Component);
|
|
106
100
|
|
|
107
101
|
var _super = _createSuper(DateTimeInput);
|
|
108
102
|
|
|
109
103
|
function DateTimeInput() {
|
|
110
|
-
var _context;
|
|
111
|
-
|
|
112
104
|
var _this;
|
|
113
105
|
|
|
114
106
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -117,7 +109,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
117
109
|
args[_key] = arguments[_key];
|
|
118
110
|
}
|
|
119
111
|
|
|
120
|
-
_this = _super.call
|
|
112
|
+
_this = _super.call(this, ...args);
|
|
121
113
|
_this.inputRef = /*#__PURE__*/react$1.createRef();
|
|
122
114
|
_this.timeInputRef = /*#__PURE__*/react$1.createRef();
|
|
123
115
|
_this.state = {
|
|
@@ -128,10 +120,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
128
120
|
};
|
|
129
121
|
|
|
130
122
|
_this.jumpMonths = function (amount) {
|
|
131
|
-
|
|
123
|
+
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
132
124
|
|
|
133
|
-
_this.setState(
|
|
134
|
-
|
|
125
|
+
_this.setState(prevState => {
|
|
126
|
+
const nextDate = calendarTimeUtils.changeMonth(prevState.calendarDate, _this.props.timeZone, amount);
|
|
135
127
|
return {
|
|
136
128
|
calendarDate: nextDate,
|
|
137
129
|
highlightedIndex: dayToHighlight
|
|
@@ -139,22 +131,20 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
139
131
|
});
|
|
140
132
|
};
|
|
141
133
|
|
|
142
|
-
_this.showToday =
|
|
143
|
-
|
|
134
|
+
_this.showToday = () => {
|
|
135
|
+
const today = calendarTimeUtils.getToday(_this.props.timeZone);
|
|
144
136
|
|
|
145
|
-
_this.setState(
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
};
|
|
150
|
-
}, function () {
|
|
137
|
+
_this.setState(prevState => ({
|
|
138
|
+
calendarDate: today,
|
|
139
|
+
highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
140
|
+
}), () => {
|
|
151
141
|
var _this$inputRef$curren;
|
|
152
142
|
|
|
153
143
|
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
154
144
|
});
|
|
155
145
|
};
|
|
156
146
|
|
|
157
|
-
_this.handleBlur =
|
|
147
|
+
_this.handleBlur = () => {
|
|
158
148
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
159
149
|
target: {
|
|
160
150
|
id: _this.props.id,
|
|
@@ -163,8 +153,8 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
163
153
|
});
|
|
164
154
|
};
|
|
165
155
|
|
|
166
|
-
_this.handleTimeChange =
|
|
167
|
-
|
|
156
|
+
_this.handleTimeChange = event => {
|
|
157
|
+
const parsedTime = utils.parseTime(event.target.value);
|
|
168
158
|
|
|
169
159
|
_this.setState({
|
|
170
160
|
timeString: event.target.value
|
|
@@ -172,7 +162,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
172
162
|
|
|
173
163
|
|
|
174
164
|
if (_this.props.value === '') return;
|
|
175
|
-
|
|
165
|
+
let date = calendarTimeUtils.getStartOf(_this.props.value, _this.props.timeZone);
|
|
176
166
|
|
|
177
167
|
if (parsedTime) {
|
|
178
168
|
date = calendarTimeUtils.changeTime(date, _this.props.timeZone, parsedTime);
|
|
@@ -181,7 +171,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
181
171
|
_this.emit(date);
|
|
182
172
|
};
|
|
183
173
|
|
|
184
|
-
_this.emit =
|
|
174
|
+
_this.emit = value => {
|
|
185
175
|
var _this$props$onChange, _this$props;
|
|
186
176
|
|
|
187
177
|
return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
|
|
@@ -201,8 +191,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
201
191
|
_createClass(DateTimeInput, [{
|
|
202
192
|
key: "render",
|
|
203
193
|
value: function render() {
|
|
204
|
-
var
|
|
205
|
-
_this2 = this;
|
|
194
|
+
var _context;
|
|
206
195
|
|
|
207
196
|
if (!this.props.isReadOnly) {
|
|
208
197
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
|
|
@@ -221,7 +210,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
221
210
|
selectedItem: this.props.value === '' ? null : this.props.value,
|
|
222
211
|
highlightedIndex: this.state.highlightedIndex,
|
|
223
212
|
onChange: this.emit,
|
|
224
|
-
stateReducer:
|
|
213
|
+
stateReducer: (_, changes) => {
|
|
225
214
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
226
215
|
return _objectSpread(_objectSpread({}, changes), {}, {
|
|
227
216
|
isOpen: true
|
|
@@ -230,20 +219,20 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
230
219
|
|
|
231
220
|
return changes;
|
|
232
221
|
},
|
|
233
|
-
onStateChange:
|
|
234
|
-
|
|
222
|
+
onStateChange: changes => {
|
|
223
|
+
this.setState(prevState => {
|
|
235
224
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
236
225
|
return {
|
|
237
226
|
startDate: changes.isOpen ? prevState.startDate : null,
|
|
238
227
|
inputValue: changes.inputValue || prevState.inputValue,
|
|
239
|
-
timeString: changes.selectedItem ? calendarTimeUtils.formatTime(changes.selectedItem,
|
|
228
|
+
timeString: changes.selectedItem ? calendarTimeUtils.formatTime(changes.selectedItem, this.props.intl.locale, this.props.timeZone) : prevState.timeString
|
|
240
229
|
};
|
|
241
230
|
}
|
|
242
231
|
|
|
243
232
|
if (changes.hasOwnProperty('inputValue')) {
|
|
244
|
-
|
|
233
|
+
const suggestedItems = calendarTimeUtils.createSuggestedItems(changes.inputValue, this.props.timeZone);
|
|
245
234
|
return {
|
|
246
|
-
suggestedItems
|
|
235
|
+
suggestedItems,
|
|
247
236
|
highlightedIndex: suggestedItems.length > 0 ? 0 : null
|
|
248
237
|
};
|
|
249
238
|
}
|
|
@@ -253,10 +242,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
253
242
|
inputValue: changes.inputValue || prevState.inputValue,
|
|
254
243
|
startDate: changes.isOpen ? prevState.startDate : null,
|
|
255
244
|
// set time input value to time from value when menu is opened
|
|
256
|
-
timeString: changes.isOpen &&
|
|
245
|
+
timeString: changes.isOpen && this.props.value !== '' ? calendarTimeUtils.formatTime(this.props.value, this.props.intl.locale, this.props.timeZone) : '',
|
|
257
246
|
// ensure calendar always opens on selected item, or on
|
|
258
247
|
// current month when there is no selected item
|
|
259
|
-
calendarDate:
|
|
248
|
+
calendarDate: this.props.value === '' ? calendarTimeUtils.getToday(this.props.timeZone) : this.props.value
|
|
260
249
|
};
|
|
261
250
|
}
|
|
262
251
|
|
|
@@ -267,19 +256,19 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
267
256
|
}
|
|
268
257
|
|
|
269
258
|
return null;
|
|
270
|
-
},
|
|
259
|
+
}, () => {
|
|
271
260
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
272
|
-
var
|
|
261
|
+
var _this$timeInputRef$cu, _this$timeInputRef$cu2;
|
|
273
262
|
|
|
274
|
-
(
|
|
275
|
-
(
|
|
263
|
+
(_this$timeInputRef$cu = this.timeInputRef.current) === null || _this$timeInputRef$cu === void 0 ? void 0 : _this$timeInputRef$cu.focus();
|
|
264
|
+
(_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 ? void 0 : _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
|
|
276
265
|
}
|
|
277
266
|
});
|
|
278
267
|
},
|
|
279
|
-
children:
|
|
280
|
-
var
|
|
268
|
+
children: _ref => {
|
|
269
|
+
var _context2;
|
|
281
270
|
|
|
282
|
-
|
|
271
|
+
let getInputProps = _ref.getInputProps,
|
|
283
272
|
getMenuProps = _ref.getMenuProps,
|
|
284
273
|
getItemProps = _ref.getItemProps,
|
|
285
274
|
getToggleButtonProps = _ref.getToggleButtonProps,
|
|
@@ -291,36 +280,36 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
291
280
|
selectedItem = _ref.selectedItem,
|
|
292
281
|
inputValue = _ref.inputValue,
|
|
293
282
|
isOpen = _ref.isOpen;
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
283
|
+
const suggestedItems = this.state.suggestedItems;
|
|
284
|
+
const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
285
|
+
const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
297
286
|
|
|
298
|
-
|
|
287
|
+
const paddingDays = _fillInstanceProperty__default["default"](_context2 = Array(paddingDayCount)).call(_context2, undefined);
|
|
299
288
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
289
|
+
const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
|
|
290
|
+
const today = calendarTimeUtils.getToday(this.props.timeZone);
|
|
291
|
+
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
303
292
|
return jsxRuntime.jsxs("div", {
|
|
304
|
-
onFocus:
|
|
305
|
-
onBlur:
|
|
293
|
+
onFocus: this.props.onFocus,
|
|
294
|
+
onBlur: this.handleBlur,
|
|
306
295
|
children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
|
|
307
|
-
inputRef:
|
|
296
|
+
inputRef: this.inputRef,
|
|
308
297
|
inputProps: getInputProps(_objectSpread({
|
|
309
298
|
/* ARIA */
|
|
310
|
-
'aria-invalid':
|
|
311
|
-
'aria-errormessage':
|
|
299
|
+
'aria-invalid': this.props['aria-invalid'],
|
|
300
|
+
'aria-errormessage': this.props['aria-errormessage'],
|
|
312
301
|
// Unset the aria-labelledby as it interfers with the link
|
|
313
302
|
// between the <label for> and the <input id>.
|
|
314
303
|
'aria-labelledby': undefined,
|
|
315
|
-
name:
|
|
316
|
-
placeholder: typeof
|
|
317
|
-
onMouseEnter:
|
|
304
|
+
name: this.props.name,
|
|
305
|
+
placeholder: typeof this.props.placeholder === 'string' ? this.props.placeholder : calendarTimeUtils.getLocalizedDateTimeFormatPattern(this.props.intl.locale, 'full'),
|
|
306
|
+
onMouseEnter: () => {
|
|
318
307
|
// we remove the highlight so that the user can use the
|
|
319
308
|
// arrow keys to move the cursor when hovering
|
|
320
309
|
if (isOpen) setHighlightedIndex(-1);
|
|
321
310
|
},
|
|
322
|
-
onKeyDown:
|
|
323
|
-
if (
|
|
311
|
+
onKeyDown: event => {
|
|
312
|
+
if (this.props.isReadOnly) {
|
|
324
313
|
preventDownshiftDefault(event);
|
|
325
314
|
return;
|
|
326
315
|
} // parse input when user presses enter on regular input,
|
|
@@ -329,10 +318,8 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
329
318
|
|
|
330
319
|
if (event.key === 'Enter' && highlightedIndex === null) {
|
|
331
320
|
preventDownshiftDefault(event);
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
_this2.emit(parsedDate);
|
|
335
|
-
|
|
321
|
+
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
322
|
+
this.emit(parsedDate);
|
|
336
323
|
closeMenu();
|
|
337
324
|
} // ArrowDown
|
|
338
325
|
|
|
@@ -343,128 +330,113 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
343
330
|
// then bypass normal arrow navigation
|
|
344
331
|
preventDownshiftDefault(event); // then jump to start of next month
|
|
345
332
|
|
|
346
|
-
|
|
333
|
+
this.jumpMonths(1, 0);
|
|
347
334
|
}
|
|
348
335
|
} // ArrowUp
|
|
349
336
|
|
|
350
337
|
|
|
351
338
|
if (event.key === 'ArrowUp') {
|
|
352
|
-
|
|
339
|
+
const previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
353
340
|
|
|
354
341
|
if (Number(highlightedIndex) <= 0) {
|
|
355
342
|
// if it's the start of the month
|
|
356
343
|
// then bypass normal arrow navigation
|
|
357
344
|
preventDownshiftDefault(event);
|
|
358
|
-
|
|
345
|
+
const numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay, this.props.timeZone); // then jump to the last day of the previous month
|
|
359
346
|
|
|
360
|
-
|
|
347
|
+
this.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
|
|
361
348
|
}
|
|
362
349
|
}
|
|
363
350
|
},
|
|
364
|
-
onClick:
|
|
365
|
-
onBlur: createBlurHandler(
|
|
366
|
-
onChange:
|
|
351
|
+
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
352
|
+
onBlur: createBlurHandler(this.timeInputRef),
|
|
353
|
+
onChange: event => {
|
|
367
354
|
var _event$target$value;
|
|
368
355
|
|
|
369
356
|
// keep timeInput and regular input in sync when user
|
|
370
357
|
// types into regular input
|
|
371
358
|
if (!isOpen) return;
|
|
372
|
-
|
|
359
|
+
const time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
|
|
373
360
|
if (!time) return;
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
_this2.setState(function () {
|
|
361
|
+
const parsedTime = utils.parseTime(time);
|
|
362
|
+
this.setState(() => {
|
|
377
363
|
if (!parsedTime) return {
|
|
378
364
|
timeString: ''
|
|
379
365
|
};
|
|
380
|
-
|
|
366
|
+
let date = calendarTimeUtils.getToday(this.props.timeZone);
|
|
381
367
|
|
|
382
368
|
if (parsedTime) {
|
|
383
|
-
date = calendarTimeUtils.changeTime(date,
|
|
369
|
+
date = calendarTimeUtils.changeTime(date, this.props.timeZone, parsedTime);
|
|
384
370
|
}
|
|
385
371
|
|
|
386
372
|
return {
|
|
387
|
-
timeString: calendarTimeUtils.formatTime(date,
|
|
373
|
+
timeString: calendarTimeUtils.formatTime(date, this.props.intl.locale, this.props.timeZone)
|
|
388
374
|
};
|
|
389
375
|
});
|
|
390
376
|
}
|
|
391
|
-
}, utils.filterDataAttributes(
|
|
377
|
+
}, utils.filterDataAttributes(this.props))),
|
|
392
378
|
hasSelection: Boolean(selectedItem),
|
|
393
379
|
onClear: clearSelection,
|
|
394
380
|
isOpen: isOpen,
|
|
395
|
-
isDisabled:
|
|
396
|
-
isReadOnly:
|
|
381
|
+
isDisabled: this.props.isDisabled,
|
|
382
|
+
isReadOnly: this.props.isReadOnly,
|
|
397
383
|
toggleButtonProps: getToggleButtonProps({
|
|
398
|
-
onBlur: createBlurHandler(
|
|
384
|
+
onBlur: createBlurHandler(this.timeInputRef)
|
|
399
385
|
}),
|
|
400
|
-
hasError:
|
|
401
|
-
hasWarning:
|
|
402
|
-
}), isOpen && !
|
|
386
|
+
hasError: this.props.hasError,
|
|
387
|
+
hasWarning: this.props.hasWarning
|
|
388
|
+
}), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
403
389
|
hasFooter: true,
|
|
404
|
-
hasError:
|
|
405
|
-
hasWarning:
|
|
390
|
+
hasError: this.props.hasError,
|
|
391
|
+
hasWarning: this.props.hasWarning,
|
|
406
392
|
children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
|
|
407
|
-
monthLabel: calendarTimeUtils.getMonthCalendarLabel(
|
|
408
|
-
yearLabel: calendarTimeUtils.getYearCalendarLabel(
|
|
409
|
-
onPrevMonthClick:
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
return _this2.jumpMonths(1);
|
|
415
|
-
},
|
|
416
|
-
onPrevYearClick: function onPrevYearClick() {
|
|
417
|
-
return _this2.jumpMonths(-12);
|
|
418
|
-
},
|
|
419
|
-
onNextYearClick: function onNextYearClick() {
|
|
420
|
-
return _this2.jumpMonths(12);
|
|
421
|
-
}
|
|
393
|
+
monthLabel: calendarTimeUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
394
|
+
yearLabel: calendarTimeUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
395
|
+
onPrevMonthClick: () => this.jumpMonths(-1),
|
|
396
|
+
onTodayClick: this.showToday,
|
|
397
|
+
onNextMonthClick: () => this.jumpMonths(1),
|
|
398
|
+
onPrevYearClick: () => this.jumpMonths(-12),
|
|
399
|
+
onNextYearClick: () => this.jumpMonths(12)
|
|
422
400
|
}), jsxRuntime.jsxs(calendarUtils.CalendarContent, {
|
|
423
|
-
children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays,
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
}), _mapInstanceProperty__default["default"](
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
})), {}, {
|
|
442
|
-
isHighlighted: suggestedItems.length + index === highlightedIndex,
|
|
443
|
-
isSelected: calendarTimeUtils.isSameDay(item, _this2.props.value),
|
|
444
|
-
children: calendarTimeUtils.getCalendarDayLabel(item, _this2.props.timeZone)
|
|
445
|
-
}), item);
|
|
446
|
-
})]
|
|
401
|
+
children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, weekday => jsxRuntime.jsx(calendarUtils.CalendarDay, {
|
|
402
|
+
type: "heading",
|
|
403
|
+
children: weekday
|
|
404
|
+
}, weekday)), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, (_, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, {
|
|
405
|
+
type: "spacing"
|
|
406
|
+
}, index)), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, (item, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
|
|
407
|
+
isToday: calendarTimeUtils.isSameDay(today, item)
|
|
408
|
+
}, getItemProps({
|
|
409
|
+
disabled: this.props.isDisabled,
|
|
410
|
+
item,
|
|
411
|
+
onMouseOut: () => {
|
|
412
|
+
setHighlightedIndex(-1);
|
|
413
|
+
}
|
|
414
|
+
})), {}, {
|
|
415
|
+
isHighlighted: suggestedItems.length + index === highlightedIndex,
|
|
416
|
+
isSelected: calendarTimeUtils.isSameDay(item, this.props.value),
|
|
417
|
+
children: calendarTimeUtils.getCalendarDayLabel(item, this.props.timeZone)
|
|
418
|
+
}), item))]
|
|
447
419
|
}), jsxRuntime.jsx(TimeInput, {
|
|
448
420
|
isDisabled: !isTimeInputVisible,
|
|
449
|
-
timeInputRef:
|
|
450
|
-
placeholder: calendarTimeUtils.getLocalizedDateTimeFormatPattern(
|
|
451
|
-
value:
|
|
452
|
-
onChange:
|
|
453
|
-
onKeyDown:
|
|
421
|
+
timeInputRef: this.timeInputRef,
|
|
422
|
+
placeholder: calendarTimeUtils.getLocalizedDateTimeFormatPattern(this.props.intl.locale, 'time'),
|
|
423
|
+
value: this.state.timeString,
|
|
424
|
+
onChange: this.handleTimeChange,
|
|
425
|
+
onKeyDown: event => {
|
|
454
426
|
if (event.key === 'ArrowUp') {
|
|
455
|
-
var
|
|
427
|
+
var _this$inputRef$curren2;
|
|
456
428
|
|
|
457
429
|
setHighlightedIndex(-1);
|
|
458
|
-
(
|
|
430
|
+
(_this$inputRef$curren2 = this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.focus();
|
|
459
431
|
return;
|
|
460
432
|
}
|
|
461
433
|
|
|
462
434
|
if (event.key === 'Enter') {
|
|
463
|
-
var
|
|
435
|
+
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
464
436
|
|
|
465
437
|
setHighlightedIndex(-1);
|
|
466
|
-
(
|
|
467
|
-
(
|
|
438
|
+
(_this$inputRef$curren3 = this.inputRef.current) === null || _this$inputRef$curren3 === void 0 ? void 0 : _this$inputRef$curren3.focus();
|
|
439
|
+
(_this$inputRef$curren4 = this.inputRef.current) === null || _this$inputRef$curren4 === void 0 ? void 0 : _this$inputRef$curren4.setSelectionRange(0, 100);
|
|
468
440
|
closeMenu();
|
|
469
441
|
}
|
|
470
442
|
}
|
|
@@ -472,7 +444,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
472
444
|
}))]
|
|
473
445
|
});
|
|
474
446
|
}
|
|
475
|
-
}, _concatInstanceProperty__default["default"](
|
|
447
|
+
}, _concatInstanceProperty__default["default"](_context = "".concat(this.props.timeZone, ":")).call(_context, this.props.intl.locale))
|
|
476
448
|
});
|
|
477
449
|
}
|
|
478
450
|
}]);
|
|
@@ -501,7 +473,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
501
473
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
502
474
|
|
|
503
475
|
// NOTE: This string will be replaced on build time with the package version.
|
|
504
|
-
var version = "
|
|
476
|
+
var version = "16.0.0";
|
|
505
477
|
|
|
506
478
|
exports["default"] = dateTimeInput;
|
|
507
479
|
exports.version = version;
|