@commercetools-uikit/date-time-input 18.2.0 → 18.3.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/README.md +18 -17
- package/dist/commercetools-uikit-date-time-input.cjs.dev.js +6 -4
- package/dist/commercetools-uikit-date-time-input.cjs.prod.js +4 -3
- package/dist/commercetools-uikit-date-time-input.esm.js +7 -5
- package/dist/declarations/src/date-time-input.d.ts +1 -0
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -48,23 +48,24 @@ export default Example;
|
|
|
48
48
|
|
|
49
49
|
## Properties
|
|
50
50
|
|
|
51
|
-
| Props
|
|
52
|
-
|
|
|
53
|
-
| `aria-invalid`
|
|
54
|
-
| `aria-errormessage`
|
|
55
|
-
| `horizontalConstraint`
|
|
56
|
-
| `value`
|
|
57
|
-
| `onChange`
|
|
58
|
-
| `onFocus`
|
|
59
|
-
| `onBlur`
|
|
60
|
-
| `timeZone`
|
|
61
|
-
| `id`
|
|
62
|
-
| `name`
|
|
63
|
-
| `placeholder`
|
|
64
|
-
| `isDisabled`
|
|
65
|
-
| `isReadOnly`
|
|
66
|
-
| `hasError`
|
|
67
|
-
| `hasWarning`
|
|
51
|
+
| Props | Type | Required | Default | Description |
|
|
52
|
+
| ------------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
53
|
+
| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
|
|
54
|
+
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
|
|
55
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input field. |
|
|
56
|
+
| `value` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted in ISO 8601 (e.g. "2018-10-04T09:00:00.000Z"). |
|
|
57
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD". |
|
|
58
|
+
| `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. |
|
|
59
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
|
|
60
|
+
| `timeZone` | `string` | ✅ | | Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
Get list of timezone with `moment.tz.names()` [See moment docs](https://momentjs.com/timezone/docs/#/data-loading/getting-zone-names/) |
|
|
61
|
+
| `id` | `string` | | | Used as the HTML `id` attribute. |
|
|
62
|
+
| `name` | `string` | | | Used as the HTML `name` attribute. |
|
|
63
|
+
| `placeholder` | `string` | | | Placeholder value to show in the input field |
|
|
64
|
+
| `isDisabled` | `boolean` | | | Disables the date picker |
|
|
65
|
+
| `isReadOnly` | `boolean` | | | Disables the date picker menu and sets the input field as read-only |
|
|
66
|
+
| `hasError` | `boolean` | | | Indicates the input field has an error |
|
|
67
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
68
|
+
| `defaultDaySelectionTime` | `string` | | | The time that will be used by default when a user selects a calendar day. It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59) |
|
|
68
69
|
|
|
69
70
|
## Signatures
|
|
70
71
|
|
|
@@ -102,7 +102,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
102
102
|
calendarDate: calendarTimeUtils.getToday(_this.props.timeZone),
|
|
103
103
|
suggestedItems: [],
|
|
104
104
|
highlightedIndex: _this.props.value === '' ? null : calendarTimeUtils.getDateInMonth(_this.props.value, _this.props.timeZone) - 1,
|
|
105
|
-
timeString: ''
|
|
105
|
+
timeString: _this.props.defaultDaySelectionTime ? calendarTimeUtils.formatDefaultTime(_this.props.defaultDaySelectionTime, _this.props.intl.locale) : ''
|
|
106
106
|
};
|
|
107
107
|
_this.jumpMonths = function (amount) {
|
|
108
108
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
@@ -210,7 +210,8 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
210
210
|
inputValue: changes.inputValue || prevState.inputValue,
|
|
211
211
|
startDate: changes.isOpen ? prevState.startDate : null,
|
|
212
212
|
// set time input value to time from value when menu is opened
|
|
213
|
-
|
|
213
|
+
// or to the current timeString which equals to defaultDaySelectionTime prop
|
|
214
|
+
timeString: changes.isOpen && this.props.value !== '' ? calendarTimeUtils.formatTime(this.props.value, this.props.intl.locale, this.props.timeZone) : this.state.timeString,
|
|
214
215
|
// ensure calendar always opens on selected item, or on
|
|
215
216
|
// current month when there is no selected item
|
|
216
217
|
calendarDate: this.props.value === '' ? calendarTimeUtils.getToday(this.props.timeZone) : this.props.value
|
|
@@ -418,12 +419,13 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
418
419
|
isDisabled: _pt__default["default"].bool,
|
|
419
420
|
isReadOnly: _pt__default["default"].bool,
|
|
420
421
|
hasError: _pt__default["default"].bool,
|
|
421
|
-
hasWarning: _pt__default["default"].bool
|
|
422
|
+
hasWarning: _pt__default["default"].bool,
|
|
423
|
+
defaultDaySelectionTime: _pt__default["default"].string
|
|
422
424
|
} : {};
|
|
423
425
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
424
426
|
|
|
425
427
|
// NOTE: This string will be replaced on build time with the package version.
|
|
426
|
-
var version = "18.
|
|
428
|
+
var version = "18.3.0";
|
|
427
429
|
|
|
428
430
|
exports["default"] = dateTimeInput;
|
|
429
431
|
exports.version = version;
|
|
@@ -98,7 +98,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
98
98
|
calendarDate: calendarTimeUtils.getToday(_this.props.timeZone),
|
|
99
99
|
suggestedItems: [],
|
|
100
100
|
highlightedIndex: _this.props.value === '' ? null : calendarTimeUtils.getDateInMonth(_this.props.value, _this.props.timeZone) - 1,
|
|
101
|
-
timeString: ''
|
|
101
|
+
timeString: _this.props.defaultDaySelectionTime ? calendarTimeUtils.formatDefaultTime(_this.props.defaultDaySelectionTime, _this.props.intl.locale) : ''
|
|
102
102
|
};
|
|
103
103
|
_this.jumpMonths = function (amount) {
|
|
104
104
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
@@ -204,7 +204,8 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
204
204
|
inputValue: changes.inputValue || prevState.inputValue,
|
|
205
205
|
startDate: changes.isOpen ? prevState.startDate : null,
|
|
206
206
|
// set time input value to time from value when menu is opened
|
|
207
|
-
|
|
207
|
+
// or to the current timeString which equals to defaultDaySelectionTime prop
|
|
208
|
+
timeString: changes.isOpen && this.props.value !== '' ? calendarTimeUtils.formatTime(this.props.value, this.props.intl.locale, this.props.timeZone) : this.state.timeString,
|
|
208
209
|
// ensure calendar always opens on selected item, or on
|
|
209
210
|
// current month when there is no selected item
|
|
210
211
|
calendarDate: this.props.value === '' ? calendarTimeUtils.getToday(this.props.timeZone) : this.props.value
|
|
@@ -401,7 +402,7 @@ DateTimeInput.propTypes = {};
|
|
|
401
402
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
402
403
|
|
|
403
404
|
// NOTE: This string will be replaced on build time with the package version.
|
|
404
|
-
var version = "18.
|
|
405
|
+
var version = "18.3.0";
|
|
405
406
|
|
|
406
407
|
exports["default"] = dateTimeInput;
|
|
407
408
|
exports.version = version;
|
|
@@ -23,7 +23,7 @@ import Downshift from 'downshift';
|
|
|
23
23
|
import { injectIntl } from 'react-intl';
|
|
24
24
|
import Constraints from '@commercetools-uikit/constraints';
|
|
25
25
|
import { parseTime, warning, filterDataAttributes } from '@commercetools-uikit/utils';
|
|
26
|
-
import { getToday, getDateInMonth, changeMonth, getStartOf, changeTime, createItemDateTimeToString, formatTime, createSuggestedItems, createCalendarItems, getPaddingDayCount, getWeekdayNames, getLocalizedDateTimeFormatPattern, parseInputText, getPreviousDay, getDaysInMonth, getMonthCalendarLabel, getYearCalendarLabel, isSameDay, getCalendarDayLabel } from '@commercetools-uikit/calendar-time-utils';
|
|
26
|
+
import { getToday, getDateInMonth, formatDefaultTime, changeMonth, getStartOf, changeTime, createItemDateTimeToString, formatTime, createSuggestedItems, createCalendarItems, getPaddingDayCount, getWeekdayNames, getLocalizedDateTimeFormatPattern, parseInputText, getPreviousDay, getDaysInMonth, getMonthCalendarLabel, getYearCalendarLabel, isSameDay, getCalendarDayLabel } from '@commercetools-uikit/calendar-time-utils';
|
|
27
27
|
import { CalendarBody, CalendarMenu, CalendarHeader, CalendarContent, CalendarDay } from '@commercetools-uikit/calendar-utils';
|
|
28
28
|
import { css } from '@emotion/react';
|
|
29
29
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
@@ -79,7 +79,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
79
79
|
calendarDate: getToday(_this.props.timeZone),
|
|
80
80
|
suggestedItems: [],
|
|
81
81
|
highlightedIndex: _this.props.value === '' ? null : getDateInMonth(_this.props.value, _this.props.timeZone) - 1,
|
|
82
|
-
timeString: ''
|
|
82
|
+
timeString: _this.props.defaultDaySelectionTime ? formatDefaultTime(_this.props.defaultDaySelectionTime, _this.props.intl.locale) : ''
|
|
83
83
|
};
|
|
84
84
|
_this.jumpMonths = function (amount) {
|
|
85
85
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
@@ -187,7 +187,8 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
187
187
|
inputValue: changes.inputValue || prevState.inputValue,
|
|
188
188
|
startDate: changes.isOpen ? prevState.startDate : null,
|
|
189
189
|
// set time input value to time from value when menu is opened
|
|
190
|
-
|
|
190
|
+
// or to the current timeString which equals to defaultDaySelectionTime prop
|
|
191
|
+
timeString: changes.isOpen && this.props.value !== '' ? formatTime(this.props.value, this.props.intl.locale, this.props.timeZone) : this.state.timeString,
|
|
191
192
|
// ensure calendar always opens on selected item, or on
|
|
192
193
|
// current month when there is no selected item
|
|
193
194
|
calendarDate: this.props.value === '' ? getToday(this.props.timeZone) : this.props.value
|
|
@@ -395,11 +396,12 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
395
396
|
isDisabled: _pt.bool,
|
|
396
397
|
isReadOnly: _pt.bool,
|
|
397
398
|
hasError: _pt.bool,
|
|
398
|
-
hasWarning: _pt.bool
|
|
399
|
+
hasWarning: _pt.bool,
|
|
400
|
+
defaultDaySelectionTime: _pt.string
|
|
399
401
|
} : {};
|
|
400
402
|
var dateTimeInput = injectIntl(DateTimeInput);
|
|
401
403
|
|
|
402
404
|
// NOTE: This string will be replaced on build time with the package version.
|
|
403
|
-
var version = "18.
|
|
405
|
+
var version = "18.3.0";
|
|
404
406
|
|
|
405
407
|
export { dateTimeInput as default, version };
|
|
@@ -23,6 +23,7 @@ export type TDateTimeInputProps = {
|
|
|
23
23
|
isReadOnly?: boolean;
|
|
24
24
|
hasError?: boolean;
|
|
25
25
|
hasWarning?: boolean;
|
|
26
|
+
defaultDaySelectionTime?: string;
|
|
26
27
|
} & WrappedComponentProps;
|
|
27
28
|
declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateTimeInputProps>> & {
|
|
28
29
|
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": "18.
|
|
4
|
+
"version": "18.3.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,19 +21,19 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "18.
|
|
25
|
-
"@commercetools-uikit/calendar-time-utils": "18.
|
|
26
|
-
"@commercetools-uikit/calendar-utils": "18.
|
|
27
|
-
"@commercetools-uikit/constraints": "18.
|
|
28
|
-
"@commercetools-uikit/design-system": "18.
|
|
29
|
-
"@commercetools-uikit/hooks": "18.
|
|
30
|
-
"@commercetools-uikit/icons": "18.
|
|
31
|
-
"@commercetools-uikit/secondary-icon-button": "18.
|
|
32
|
-
"@commercetools-uikit/select-utils": "18.
|
|
33
|
-
"@commercetools-uikit/spacings-inline": "18.
|
|
34
|
-
"@commercetools-uikit/text": "18.
|
|
35
|
-
"@commercetools-uikit/tooltip": "18.
|
|
36
|
-
"@commercetools-uikit/utils": "18.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "18.3.0",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "18.3.0",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "18.3.0",
|
|
27
|
+
"@commercetools-uikit/constraints": "18.3.0",
|
|
28
|
+
"@commercetools-uikit/design-system": "18.3.0",
|
|
29
|
+
"@commercetools-uikit/hooks": "18.3.0",
|
|
30
|
+
"@commercetools-uikit/icons": "18.3.0",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "18.3.0",
|
|
32
|
+
"@commercetools-uikit/select-utils": "18.3.0",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "18.3.0",
|
|
34
|
+
"@commercetools-uikit/text": "18.3.0",
|
|
35
|
+
"@commercetools-uikit/tooltip": "18.3.0",
|
|
36
|
+
"@commercetools-uikit/utils": "18.3.0",
|
|
37
37
|
"@emotion/react": "^11.10.5",
|
|
38
38
|
"@emotion/styled": "^11.10.5",
|
|
39
39
|
"downshift": "6.1.12",
|