@commercetools-uikit/date-time-input 19.26.0 → 20.1.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.
|
@@ -17,7 +17,6 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
18
18
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
19
19
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
20
|
-
var _pt = require('prop-types');
|
|
21
20
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
22
21
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
23
22
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -43,14 +42,14 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
43
42
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
44
43
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
45
44
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
46
|
-
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
47
45
|
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
48
46
|
var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
|
|
49
47
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
50
48
|
var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
51
49
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
52
50
|
|
|
53
|
-
|
|
51
|
+
/// <reference types="@emotion/react/types/css-prop" />
|
|
52
|
+
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.fontSize30, ";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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbWUtaW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1nQyIsImZpbGUiOiJ0aW1lLWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHR5cGVzPVwiQGVtb3Rpb24vcmVhY3QvdHlwZXMvY3NzLXByb3BcIiAvPlxuaW1wb3J0IHR5cGUgeyBLZXlib2FyZEV2ZW50SGFuZGxlciwgUmVmT2JqZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFREYXRlVGltZUlucHV0UHJvcHMgfSBmcm9tICcuL2RhdGUtdGltZS1pbnB1dCc7XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKCkgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDA7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIHBhZGRpbmc6IDEwcHggMDtcbiAgb3V0bGluZTogMDtcbiAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZTMwfTtcbiAgbWFyZ2luLXRvcDogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU29saWR9O1xuXG4gIDpkaXNhYmxlZCB7XG4gICAgLyogRml4ZXMgYmFja2dyb3VuZCBjb2xvciBpbiBGaXJlZm94ICovXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgfVxuYDtcblxudHlwZSBURGF0ZUNhbGVuZGFyVGltZUlucHV0UHJvcHMgPSB7XG4gIHRpbWVJbnB1dFJlZjogUmVmT2JqZWN0PEhUTUxJbnB1dEVsZW1lbnQgfCBudWxsPjtcbiAgb25LZXlEb3duOiBLZXlib2FyZEV2ZW50SGFuZGxlcjxIVE1MSW5wdXRFbGVtZW50Pjtcbn0gJiBQaWNrPFxuICBURGF0ZVRpbWVJbnB1dFByb3BzLFxuICAnaXNEaXNhYmxlZCcgfCAnb25DaGFuZ2UnIHwgJ3ZhbHVlJyB8ICdwbGFjZWhvbGRlcidcbj47XG5cbmNvbnN0IERhdGVDYWxlbmRhclRpbWVJbnB1dCA9IChwcm9wczogVERhdGVDYWxlbmRhclRpbWVJbnB1dFByb3BzKSA9PiAoXG4gIDxpbnB1dFxuICAgIGRpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgIHJlZj17cHJvcHMudGltZUlucHV0UmVmfVxuICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICB2YWx1ZT17cHJvcHMudmFsdWV9XG4gICAgb25DaGFuZ2U9e3Byb3BzLm9uQ2hhbmdlfVxuICAgIG9uS2V5RG93bj17cHJvcHMub25LZXlEb3dufVxuICAgIHBsYWNlaG9sZGVyPXtwcm9wcy5wbGFjZWhvbGRlcn1cbiAgICBjc3M9e2dldElucHV0U3R5bGVzKCl9XG4gIC8+XG4pO1xuXG5EYXRlQ2FsZW5kYXJUaW1lSW5wdXQuZGlzcGxheU5hbWUgPSAnRGF0ZUNhbGVuZGFyVGltZUlucHV0JztcblxuZXhwb3J0IGRlZmF1bHQgRGF0ZUNhbGVuZGFyVGltZUlucHV0O1xuIl19 */");
|
|
54
53
|
const DateCalendarTimeInput = props => jsxRuntime.jsx("input", {
|
|
55
54
|
disabled: props.isDisabled,
|
|
56
55
|
ref: props.timeInputRef,
|
|
@@ -61,10 +60,6 @@ const DateCalendarTimeInput = props => jsxRuntime.jsx("input", {
|
|
|
61
60
|
placeholder: props.placeholder,
|
|
62
61
|
css: getInputStyles()
|
|
63
62
|
});
|
|
64
|
-
DateCalendarTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
65
|
-
timeInputRef: _pt__default["default"].any.isRequired,
|
|
66
|
-
onKeyDown: _pt__default["default"].func.isRequired
|
|
67
|
-
} : {};
|
|
68
63
|
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
69
64
|
var TimeInput = DateCalendarTimeInput;
|
|
70
65
|
|
|
@@ -162,6 +157,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
162
157
|
if (!this.props.isReadOnly) {
|
|
163
158
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
|
|
164
159
|
}
|
|
160
|
+
const appearance = this.props.appearance || 'default';
|
|
165
161
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
166
162
|
max: this.props.horizontalConstraint,
|
|
167
163
|
children: jsxRuntime.jsx(Downshift__default["default"]
|
|
@@ -251,6 +247,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
251
247
|
onBlur: this.handleBlur,
|
|
252
248
|
children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
|
|
253
249
|
inputRef: this.inputRef,
|
|
250
|
+
appearance: appearance,
|
|
254
251
|
inputProps: getInputProps(_objectSpread({
|
|
255
252
|
/* ARIA */
|
|
256
253
|
'aria-invalid': this.props['aria-invalid'],
|
|
@@ -307,12 +304,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
307
304
|
},
|
|
308
305
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
309
306
|
// validate the input on blur, and emit the value if it's valid
|
|
310
|
-
onBlur:
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
307
|
+
onBlur: event => {
|
|
308
|
+
createBlurHandler(this.timeInputRef, () => {
|
|
309
|
+
const inputValue = this.inputRef.current?.value || '';
|
|
310
|
+
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
311
|
+
if (inputValue.length > 0 && !parsedDate) return;
|
|
312
|
+
this.emit(parsedDate);
|
|
313
|
+
})(event);
|
|
314
|
+
},
|
|
316
315
|
onChange: event => {
|
|
317
316
|
// keep timeInput and regular input in sync when user
|
|
318
317
|
// types into regular input
|
|
@@ -341,14 +340,15 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
341
340
|
isDisabled: this.props.isDisabled,
|
|
342
341
|
isReadOnly: this.props.isReadOnly,
|
|
343
342
|
toggleButtonProps: getToggleButtonProps({
|
|
344
|
-
onBlur: createBlurHandler(this.timeInputRef)
|
|
343
|
+
onBlur: event => createBlurHandler(this.timeInputRef)(event)
|
|
345
344
|
}),
|
|
346
345
|
hasError: this.props.hasError,
|
|
347
346
|
hasWarning: this.props.hasWarning
|
|
348
|
-
}), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
347
|
+
}), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
349
348
|
hasFooter: true,
|
|
350
349
|
hasError: this.props.hasError,
|
|
351
350
|
hasWarning: this.props.hasWarning,
|
|
351
|
+
appearance: appearance,
|
|
352
352
|
children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
|
|
353
353
|
monthLabel: calendarTimeUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
354
354
|
yearLabel: calendarTimeUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
@@ -405,29 +405,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
405
405
|
}]);
|
|
406
406
|
}(react$1.Component);
|
|
407
407
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
408
|
-
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
409
|
-
'aria-invalid': _pt__default["default"].bool,
|
|
410
|
-
'aria-errormessage': _pt__default["default"].string,
|
|
411
|
-
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
412
|
-
value: _pt__default["default"].string.isRequired,
|
|
413
|
-
onChange: _pt__default["default"].func,
|
|
414
|
-
onFocus: _pt__default["default"].func,
|
|
415
|
-
onBlur: _pt__default["default"].func,
|
|
416
|
-
timeZone: _pt__default["default"].string.isRequired,
|
|
417
|
-
id: _pt__default["default"].string,
|
|
418
|
-
name: _pt__default["default"].string,
|
|
419
|
-
placeholder: _pt__default["default"].string,
|
|
420
|
-
isCondensed: _pt__default["default"].bool,
|
|
421
|
-
isDisabled: _pt__default["default"].bool,
|
|
422
|
-
isReadOnly: _pt__default["default"].bool,
|
|
423
|
-
hasError: _pt__default["default"].bool,
|
|
424
|
-
hasWarning: _pt__default["default"].bool,
|
|
425
|
-
defaultDaySelectionTime: _pt__default["default"].string
|
|
426
|
-
} : {};
|
|
427
408
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
428
409
|
|
|
429
410
|
// NOTE: This string will be replaced on build time with the package version.
|
|
430
|
-
var version = "
|
|
411
|
+
var version = "20.1.0";
|
|
431
412
|
|
|
432
413
|
exports["default"] = dateTimeInput;
|
|
433
414
|
exports.version = version;
|
|
@@ -17,7 +17,6 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
18
18
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
19
19
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
20
|
-
require('prop-types');
|
|
21
20
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
22
21
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
23
22
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -49,6 +48,7 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
|
|
|
49
48
|
var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
50
49
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
51
50
|
|
|
51
|
+
/// <reference types="@emotion/react/types/css-prop" />
|
|
52
52
|
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.fontSize30, ";margin-top:", designSystem.designTokens.spacing20, ";color:", designSystem.designTokens.colorSolid, ";:disabled{background-color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" );
|
|
53
53
|
const DateCalendarTimeInput = props => jsxRuntime.jsx("input", {
|
|
54
54
|
disabled: props.isDisabled,
|
|
@@ -60,7 +60,6 @@ const DateCalendarTimeInput = props => jsxRuntime.jsx("input", {
|
|
|
60
60
|
placeholder: props.placeholder,
|
|
61
61
|
css: getInputStyles()
|
|
62
62
|
});
|
|
63
|
-
DateCalendarTimeInput.propTypes = {};
|
|
64
63
|
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
65
64
|
var TimeInput = DateCalendarTimeInput;
|
|
66
65
|
|
|
@@ -156,6 +155,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
156
155
|
key: "render",
|
|
157
156
|
value: function render() {
|
|
158
157
|
if (!this.props.isReadOnly) ;
|
|
158
|
+
const appearance = this.props.appearance || 'default';
|
|
159
159
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
160
160
|
max: this.props.horizontalConstraint,
|
|
161
161
|
children: jsxRuntime.jsx(Downshift__default["default"]
|
|
@@ -245,6 +245,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
245
245
|
onBlur: this.handleBlur,
|
|
246
246
|
children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
|
|
247
247
|
inputRef: this.inputRef,
|
|
248
|
+
appearance: appearance,
|
|
248
249
|
inputProps: getInputProps(_objectSpread({
|
|
249
250
|
/* ARIA */
|
|
250
251
|
'aria-invalid': this.props['aria-invalid'],
|
|
@@ -301,12 +302,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
301
302
|
},
|
|
302
303
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
303
304
|
// validate the input on blur, and emit the value if it's valid
|
|
304
|
-
onBlur:
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
305
|
+
onBlur: event => {
|
|
306
|
+
createBlurHandler(this.timeInputRef, () => {
|
|
307
|
+
const inputValue = this.inputRef.current?.value || '';
|
|
308
|
+
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
309
|
+
if (inputValue.length > 0 && !parsedDate) return;
|
|
310
|
+
this.emit(parsedDate);
|
|
311
|
+
})(event);
|
|
312
|
+
},
|
|
310
313
|
onChange: event => {
|
|
311
314
|
// keep timeInput and regular input in sync when user
|
|
312
315
|
// types into regular input
|
|
@@ -335,14 +338,15 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
335
338
|
isDisabled: this.props.isDisabled,
|
|
336
339
|
isReadOnly: this.props.isReadOnly,
|
|
337
340
|
toggleButtonProps: getToggleButtonProps({
|
|
338
|
-
onBlur: createBlurHandler(this.timeInputRef)
|
|
341
|
+
onBlur: event => createBlurHandler(this.timeInputRef)(event)
|
|
339
342
|
}),
|
|
340
343
|
hasError: this.props.hasError,
|
|
341
344
|
hasWarning: this.props.hasWarning
|
|
342
|
-
}), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
345
|
+
}), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
343
346
|
hasFooter: true,
|
|
344
347
|
hasError: this.props.hasError,
|
|
345
348
|
hasWarning: this.props.hasWarning,
|
|
349
|
+
appearance: appearance,
|
|
346
350
|
children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
|
|
347
351
|
monthLabel: calendarTimeUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
348
352
|
yearLabel: calendarTimeUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
@@ -399,11 +403,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
399
403
|
}]);
|
|
400
404
|
}(react$1.Component);
|
|
401
405
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
402
|
-
DateTimeInput.propTypes = {};
|
|
403
406
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
404
407
|
|
|
405
408
|
// NOTE: This string will be replaced on build time with the package version.
|
|
406
|
-
var version = "
|
|
409
|
+
var version = "20.1.0";
|
|
407
410
|
|
|
408
411
|
exports["default"] = dateTimeInput;
|
|
409
412
|
exports.version = version;
|
|
@@ -13,7 +13,6 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
|
|
|
13
13
|
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
|
|
14
14
|
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
15
15
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
16
|
-
import _pt from 'prop-types';
|
|
17
16
|
import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
|
|
18
17
|
import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
|
|
19
18
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
@@ -28,7 +27,8 @@ import { css } from '@emotion/react';
|
|
|
28
27
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
29
28
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
30
29
|
|
|
31
|
-
|
|
30
|
+
/// <reference types="@emotion/react/types/css-prop" />
|
|
31
|
+
const getInputStyles = () => /*#__PURE__*/css("width:100%;text-align:center;border:0;border-top:1px solid ", designTokens.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designTokens.fontSize30, ";margin-top:", designTokens.spacing20, ";color:", designTokens.colorSolid, ";:disabled{background-color:", designTokens.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbWUtaW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1nQyIsImZpbGUiOiJ0aW1lLWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHR5cGVzPVwiQGVtb3Rpb24vcmVhY3QvdHlwZXMvY3NzLXByb3BcIiAvPlxuaW1wb3J0IHR5cGUgeyBLZXlib2FyZEV2ZW50SGFuZGxlciwgUmVmT2JqZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFREYXRlVGltZUlucHV0UHJvcHMgfSBmcm9tICcuL2RhdGUtdGltZS1pbnB1dCc7XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKCkgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDA7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIHBhZGRpbmc6IDEwcHggMDtcbiAgb3V0bGluZTogMDtcbiAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZTMwfTtcbiAgbWFyZ2luLXRvcDogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU29saWR9O1xuXG4gIDpkaXNhYmxlZCB7XG4gICAgLyogRml4ZXMgYmFja2dyb3VuZCBjb2xvciBpbiBGaXJlZm94ICovXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgfVxuYDtcblxudHlwZSBURGF0ZUNhbGVuZGFyVGltZUlucHV0UHJvcHMgPSB7XG4gIHRpbWVJbnB1dFJlZjogUmVmT2JqZWN0PEhUTUxJbnB1dEVsZW1lbnQgfCBudWxsPjtcbiAgb25LZXlEb3duOiBLZXlib2FyZEV2ZW50SGFuZGxlcjxIVE1MSW5wdXRFbGVtZW50Pjtcbn0gJiBQaWNrPFxuICBURGF0ZVRpbWVJbnB1dFByb3BzLFxuICAnaXNEaXNhYmxlZCcgfCAnb25DaGFuZ2UnIHwgJ3ZhbHVlJyB8ICdwbGFjZWhvbGRlcidcbj47XG5cbmNvbnN0IERhdGVDYWxlbmRhclRpbWVJbnB1dCA9IChwcm9wczogVERhdGVDYWxlbmRhclRpbWVJbnB1dFByb3BzKSA9PiAoXG4gIDxpbnB1dFxuICAgIGRpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgIHJlZj17cHJvcHMudGltZUlucHV0UmVmfVxuICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICB2YWx1ZT17cHJvcHMudmFsdWV9XG4gICAgb25DaGFuZ2U9e3Byb3BzLm9uQ2hhbmdlfVxuICAgIG9uS2V5RG93bj17cHJvcHMub25LZXlEb3dufVxuICAgIHBsYWNlaG9sZGVyPXtwcm9wcy5wbGFjZWhvbGRlcn1cbiAgICBjc3M9e2dldElucHV0U3R5bGVzKCl9XG4gIC8+XG4pO1xuXG5EYXRlQ2FsZW5kYXJUaW1lSW5wdXQuZGlzcGxheU5hbWUgPSAnRGF0ZUNhbGVuZGFyVGltZUlucHV0JztcblxuZXhwb3J0IGRlZmF1bHQgRGF0ZUNhbGVuZGFyVGltZUlucHV0O1xuIl19 */");
|
|
32
32
|
const DateCalendarTimeInput = props => jsx("input", {
|
|
33
33
|
disabled: props.isDisabled,
|
|
34
34
|
ref: props.timeInputRef,
|
|
@@ -39,10 +39,6 @@ const DateCalendarTimeInput = props => jsx("input", {
|
|
|
39
39
|
placeholder: props.placeholder,
|
|
40
40
|
css: getInputStyles()
|
|
41
41
|
});
|
|
42
|
-
DateCalendarTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
43
|
-
timeInputRef: _pt.any.isRequired,
|
|
44
|
-
onKeyDown: _pt.func.isRequired
|
|
45
|
-
} : {};
|
|
46
42
|
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
47
43
|
var TimeInput = DateCalendarTimeInput;
|
|
48
44
|
|
|
@@ -140,6 +136,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
140
136
|
if (!this.props.isReadOnly) {
|
|
141
137
|
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
|
|
142
138
|
}
|
|
139
|
+
const appearance = this.props.appearance || 'default';
|
|
143
140
|
return jsx(Constraints.Horizontal, {
|
|
144
141
|
max: this.props.horizontalConstraint,
|
|
145
142
|
children: jsx(Downshift
|
|
@@ -229,6 +226,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
229
226
|
onBlur: this.handleBlur,
|
|
230
227
|
children: [jsx(CalendarBody, {
|
|
231
228
|
inputRef: this.inputRef,
|
|
229
|
+
appearance: appearance,
|
|
232
230
|
inputProps: getInputProps(_objectSpread({
|
|
233
231
|
/* ARIA */
|
|
234
232
|
'aria-invalid': this.props['aria-invalid'],
|
|
@@ -285,12 +283,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
285
283
|
},
|
|
286
284
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
287
285
|
// validate the input on blur, and emit the value if it's valid
|
|
288
|
-
onBlur:
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
286
|
+
onBlur: event => {
|
|
287
|
+
createBlurHandler(this.timeInputRef, () => {
|
|
288
|
+
const inputValue = this.inputRef.current?.value || '';
|
|
289
|
+
const parsedDate = parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
290
|
+
if (inputValue.length > 0 && !parsedDate) return;
|
|
291
|
+
this.emit(parsedDate);
|
|
292
|
+
})(event);
|
|
293
|
+
},
|
|
294
294
|
onChange: event => {
|
|
295
295
|
// keep timeInput and regular input in sync when user
|
|
296
296
|
// types into regular input
|
|
@@ -319,14 +319,15 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
319
319
|
isDisabled: this.props.isDisabled,
|
|
320
320
|
isReadOnly: this.props.isReadOnly,
|
|
321
321
|
toggleButtonProps: getToggleButtonProps({
|
|
322
|
-
onBlur: createBlurHandler(this.timeInputRef)
|
|
322
|
+
onBlur: event => createBlurHandler(this.timeInputRef)(event)
|
|
323
323
|
}),
|
|
324
324
|
hasError: this.props.hasError,
|
|
325
325
|
hasWarning: this.props.hasWarning
|
|
326
|
-
}), isOpen && !this.props.isDisabled && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
326
|
+
}), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled) && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
327
327
|
hasFooter: true,
|
|
328
328
|
hasError: this.props.hasError,
|
|
329
329
|
hasWarning: this.props.hasWarning,
|
|
330
|
+
appearance: appearance,
|
|
330
331
|
children: [jsx(CalendarHeader, {
|
|
331
332
|
monthLabel: getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
332
333
|
yearLabel: getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
|
|
@@ -383,28 +384,9 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
383
384
|
}]);
|
|
384
385
|
}(Component);
|
|
385
386
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
386
|
-
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
387
|
-
'aria-invalid': _pt.bool,
|
|
388
|
-
'aria-errormessage': _pt.string,
|
|
389
|
-
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
390
|
-
value: _pt.string.isRequired,
|
|
391
|
-
onChange: _pt.func,
|
|
392
|
-
onFocus: _pt.func,
|
|
393
|
-
onBlur: _pt.func,
|
|
394
|
-
timeZone: _pt.string.isRequired,
|
|
395
|
-
id: _pt.string,
|
|
396
|
-
name: _pt.string,
|
|
397
|
-
placeholder: _pt.string,
|
|
398
|
-
isCondensed: _pt.bool,
|
|
399
|
-
isDisabled: _pt.bool,
|
|
400
|
-
isReadOnly: _pt.bool,
|
|
401
|
-
hasError: _pt.bool,
|
|
402
|
-
hasWarning: _pt.bool,
|
|
403
|
-
defaultDaySelectionTime: _pt.string
|
|
404
|
-
} : {};
|
|
405
387
|
var dateTimeInput = injectIntl(DateTimeInput);
|
|
406
388
|
|
|
407
389
|
// NOTE: This string will be replaced on build time with the package version.
|
|
408
|
-
var version = "
|
|
390
|
+
var version = "20.1.0";
|
|
409
391
|
|
|
410
392
|
export { dateTimeInput as default, version };
|
|
@@ -75,9 +75,14 @@ export type TDateTimeInputProps = {
|
|
|
75
75
|
hasWarning?: boolean;
|
|
76
76
|
/**
|
|
77
77
|
* The time that will be used by default when a user selects a calendar day.
|
|
78
|
-
* It must follow the
|
|
78
|
+
* It must follow the "HH:mm" pattern (eg: 04:30, 13:25, 23:59)
|
|
79
79
|
*/
|
|
80
80
|
defaultDaySelectionTime?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Indicates the appearance of the input.
|
|
83
|
+
* Filter appearance removes borders and box shadows, and calendar is always open.
|
|
84
|
+
*/
|
|
85
|
+
appearance?: 'default' | 'filter';
|
|
81
86
|
} & WrappedComponentProps;
|
|
82
87
|
declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateTimeInputProps>> & {
|
|
83
88
|
WrappedComponent: import("react").ComponentType<TDateTimeInputProps>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/date-time-input",
|
|
3
3
|
"description": "The `DateTimeInput` component allows the user to select a date. This component also supports multiple date selection.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "20.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,34 +21,33 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "
|
|
25
|
-
"@commercetools-uikit/calendar-time-utils": "
|
|
26
|
-
"@commercetools-uikit/calendar-utils": "
|
|
27
|
-
"@commercetools-uikit/constraints": "
|
|
28
|
-
"@commercetools-uikit/design-system": "
|
|
29
|
-
"@commercetools-uikit/hooks": "
|
|
30
|
-
"@commercetools-uikit/icons": "
|
|
31
|
-
"@commercetools-uikit/secondary-icon-button": "
|
|
32
|
-
"@commercetools-uikit/select-utils": "
|
|
33
|
-
"@commercetools-uikit/spacings-inline": "
|
|
34
|
-
"@commercetools-uikit/text": "
|
|
35
|
-
"@commercetools-uikit/tooltip": "
|
|
36
|
-
"@commercetools-uikit/utils": "
|
|
24
|
+
"@commercetools-uikit/accessible-button": "20.1.0",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "20.1.0",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "20.1.0",
|
|
27
|
+
"@commercetools-uikit/constraints": "20.1.0",
|
|
28
|
+
"@commercetools-uikit/design-system": "20.1.0",
|
|
29
|
+
"@commercetools-uikit/hooks": "20.1.0",
|
|
30
|
+
"@commercetools-uikit/icons": "20.1.0",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "20.1.0",
|
|
32
|
+
"@commercetools-uikit/select-utils": "20.1.0",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "20.1.0",
|
|
34
|
+
"@commercetools-uikit/text": "20.1.0",
|
|
35
|
+
"@commercetools-uikit/tooltip": "20.1.0",
|
|
36
|
+
"@commercetools-uikit/utils": "20.1.0",
|
|
37
37
|
"@emotion/react": "^11.10.5",
|
|
38
38
|
"@emotion/styled": "^11.10.5",
|
|
39
|
-
"downshift": "
|
|
40
|
-
"
|
|
41
|
-
"react-is": "17.0.2",
|
|
39
|
+
"downshift": "9.0.9",
|
|
40
|
+
"react-is": "19.1.0",
|
|
42
41
|
"warning": "4.0.3"
|
|
43
42
|
},
|
|
44
43
|
"devDependencies": {
|
|
45
44
|
"moment": "2.30.1",
|
|
46
|
-
"react": "
|
|
47
|
-
"react-intl": "^
|
|
45
|
+
"react": "19.1.0",
|
|
46
|
+
"react-intl": "^7.1.4"
|
|
48
47
|
},
|
|
49
48
|
"peerDependencies": {
|
|
50
49
|
"moment": "2.x",
|
|
51
|
-
"react": "
|
|
52
|
-
"react-intl": "
|
|
50
|
+
"react": "19.x",
|
|
51
|
+
"react-intl": "7.x"
|
|
53
52
|
}
|
|
54
53
|
}
|