@atlaskit/datetime-picker 13.0.9 → 13.0.11
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 -0
- package/dist/cjs/components/date-picker.js +22 -43
- package/dist/cjs/components/date-time-picker.js +7 -7
- package/dist/cjs/components/time-picker.js +6 -6
- package/dist/cjs/internal/parse-date.js +30 -0
- package/dist/es2019/components/date-picker.js +4 -26
- package/dist/es2019/components/date-time-picker.js +2 -2
- package/dist/es2019/components/time-picker.js +2 -2
- package/dist/es2019/internal/parse-date.js +22 -0
- package/dist/esm/components/date-picker.js +16 -37
- package/dist/esm/components/date-time-picker.js +4 -4
- package/dist/esm/components/time-picker.js +5 -5
- package/dist/esm/internal/parse-date.js +22 -0
- package/dist/types/components/date-picker.d.ts +3 -151
- package/dist/types/components/date-time-picker.d.ts +3 -115
- package/dist/types/components/time-picker.d.ts +4 -115
- package/dist/types/index.d.ts +1 -4
- package/dist/types/internal/parse-date.d.ts +11 -0
- package/dist/types/types.d.ts +367 -0
- package/dist/types-ts4.5/components/date-picker.d.ts +3 -151
- package/dist/types-ts4.5/components/date-time-picker.d.ts +3 -115
- package/dist/types-ts4.5/components/time-picker.d.ts +4 -115
- package/dist/types-ts4.5/index.d.ts +1 -4
- package/dist/types-ts4.5/internal/parse-date.d.ts +11 -0
- package/dist/types-ts4.5/types.d.ts +367 -0
- package/package.json +1 -1
- /package/dist/cjs/{components/utils.js → internal/parse-tokens.js} +0 -0
- /package/dist/es2019/{components/utils.js → internal/parse-tokens.js} +0 -0
- /package/dist/esm/{components/utils.js → internal/parse-tokens.js} +0 -0
- /package/dist/types/{components/utils.d.ts → internal/parse-tokens.d.ts} +0 -0
- /package/dist/types-ts4.5/{components/utils.d.ts → internal/parse-tokens.d.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 13.0.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#74787](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74787) [`c19c3790e6f1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c19c3790e6f1) - Cleaning up date picker component by exporting internal utilities.
|
|
8
|
+
|
|
9
|
+
## 13.0.10
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#74796](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74796) [`47a2a39b4033`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/47a2a39b4033) - Move types for all the pickers to the appropriate `types` file.
|
|
14
|
+
|
|
3
15
|
## 13.0.9
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -30,8 +30,9 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
30
30
|
var _constants = require("@atlaskit/theme/constants");
|
|
31
31
|
var _internal = require("../internal");
|
|
32
32
|
var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
|
|
33
|
+
var _parseDate = require("../internal/parse-date");
|
|
34
|
+
var _parseTokens = require("../internal/parse-tokens");
|
|
33
35
|
var _singleValue = require("../internal/single-value");
|
|
34
|
-
var _utils = require("./utils");
|
|
35
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
36
37
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
38
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -39,18 +40,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
39
40
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
40
41
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
41
42
|
var packageName = "@atlaskit/datetime-picker";
|
|
42
|
-
var packageVersion = "13.0.
|
|
43
|
-
function getValidDate(iso) {
|
|
44
|
-
var date = (0, _dateFns.parseISO)(iso);
|
|
45
|
-
return (0, _dateFns.isValid)(date) ? {
|
|
46
|
-
day: date.getDate(),
|
|
47
|
-
month: date.getMonth() + 1,
|
|
48
|
-
year: date.getFullYear()
|
|
49
|
-
} : {};
|
|
50
|
-
}
|
|
51
|
-
function getShortISOString(date) {
|
|
52
|
-
return (0, _dateFns.format)(date, (0, _utils.convertTokens)('YYYY-MM-DD'));
|
|
53
|
-
}
|
|
43
|
+
var packageVersion = "13.0.11";
|
|
54
44
|
var menuStyles = (0, _react2.css)({
|
|
55
45
|
zIndex: _constants.layers.dialog(),
|
|
56
46
|
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
|
|
@@ -68,7 +58,7 @@ var Menu = function Menu(_ref) {
|
|
|
68
58
|
containerRef: selectProps.calendarContainerRef,
|
|
69
59
|
content: (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
70
60
|
css: menuStyles
|
|
71
|
-
}, innerProps), (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
|
|
61
|
+
}, innerProps), (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, (0, _parseDate.getValidDate)(selectProps.calendarValue), (0, _parseDate.getValidDate)(selectProps.calendarView), {
|
|
72
62
|
disabled: selectProps.calendarDisabled,
|
|
73
63
|
disabledDateFilter: selectProps.calendarDisabledDateFilter,
|
|
74
64
|
minDate: selectProps.calendarMinDate,
|
|
@@ -225,7 +215,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
225
215
|
// We format the parsed date to YYYY-MM-DD here because
|
|
226
216
|
// this is the format expected by the @atlaskit/calendar component
|
|
227
217
|
_this.setState({
|
|
228
|
-
calendarValue: getShortISOString(parsed)
|
|
218
|
+
calendarValue: (0, _parseDate.getShortISOString)(parsed)
|
|
229
219
|
});
|
|
230
220
|
}
|
|
231
221
|
}
|
|
@@ -233,15 +223,6 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
233
223
|
isOpen: true
|
|
234
224
|
});
|
|
235
225
|
});
|
|
236
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeCalendarValue", function (calendarValue) {
|
|
237
|
-
// If `calendarValue` has a year that is greater than 9999, default to
|
|
238
|
-
// today's date
|
|
239
|
-
var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
|
|
240
|
-
if (yearIsOverLimit) {
|
|
241
|
-
return getShortISOString(new Date());
|
|
242
|
-
}
|
|
243
|
-
return calendarValue;
|
|
244
|
-
});
|
|
245
226
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
|
|
246
227
|
var _this$containerRef3;
|
|
247
228
|
var _this$getSafeState2 = _this.getSafeState(),
|
|
@@ -284,12 +265,10 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
284
265
|
// for more details.
|
|
285
266
|
event.preventDefault();
|
|
286
267
|
if (!_this.isDateDisabled(calendarValue)) {
|
|
287
|
-
var _this$getSafeState3 = _this.getSafeState(),
|
|
288
|
-
_value2 = _this$getSafeState3.value;
|
|
289
268
|
// Get a safe `calendarValue` in case the value exceeds the maximum
|
|
290
269
|
// allowed by ISO 8601
|
|
291
|
-
var safeCalendarValue =
|
|
292
|
-
var valueChanged = safeCalendarValue !==
|
|
270
|
+
var safeCalendarValue = (0, _parseDate.getSafeCalendarValue)(calendarValue);
|
|
271
|
+
var valueChanged = safeCalendarValue !== value;
|
|
293
272
|
_this.setState({
|
|
294
273
|
selectInputValue: '',
|
|
295
274
|
isOpen: false,
|
|
@@ -308,7 +287,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
308
287
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
|
|
309
288
|
var changedState = {
|
|
310
289
|
value: '',
|
|
311
|
-
calendarValue: _this.props.defaultValue || getShortISOString(new Date())
|
|
290
|
+
calendarValue: _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date())
|
|
312
291
|
};
|
|
313
292
|
if (!_this.props.hideIcon) {
|
|
314
293
|
changedState = _objectSpread(_objectSpread({}, changedState), {}, {
|
|
@@ -359,8 +338,8 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
359
338
|
if (parseInputValue) {
|
|
360
339
|
return parseInputValue(date, dateFormat || _internal.defaultDateFormat);
|
|
361
340
|
}
|
|
362
|
-
var _this$
|
|
363
|
-
l10n = _this$
|
|
341
|
+
var _this$getSafeState3 = _this.getSafeState(),
|
|
342
|
+
l10n = _this$getSafeState3.l10n;
|
|
364
343
|
return l10n.parseDate(date);
|
|
365
344
|
});
|
|
366
345
|
/**
|
|
@@ -374,21 +353,21 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
374
353
|
var _this$props2 = _this.props,
|
|
375
354
|
formatDisplayLabel = _this$props2.formatDisplayLabel,
|
|
376
355
|
dateFormat = _this$props2.dateFormat;
|
|
377
|
-
var _this$
|
|
378
|
-
l10n = _this$
|
|
356
|
+
var _this$getSafeState4 = _this.getSafeState(),
|
|
357
|
+
l10n = _this$getSafeState4.l10n;
|
|
379
358
|
if (formatDisplayLabel) {
|
|
380
359
|
return formatDisplayLabel(value, dateFormat || _internal.defaultDateFormat);
|
|
381
360
|
}
|
|
382
361
|
var date = (0, _dateFns.parseISO)(value);
|
|
383
|
-
return dateFormat ? (0, _dateFns.format)(date, (0,
|
|
362
|
+
return dateFormat ? (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(dateFormat)) : l10n.formatDate(date);
|
|
384
363
|
});
|
|
385
364
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPlaceholder", function () {
|
|
386
365
|
var placeholder = _this.props.placeholder;
|
|
387
366
|
if (placeholder) {
|
|
388
367
|
return placeholder;
|
|
389
368
|
}
|
|
390
|
-
var _this$
|
|
391
|
-
l10n = _this$
|
|
369
|
+
var _this$getSafeState5 = _this.getSafeState(),
|
|
370
|
+
l10n = _this$getSafeState5.l10n;
|
|
392
371
|
return l10n.formatDate(_internal.placeholderDatetime);
|
|
393
372
|
});
|
|
394
373
|
_this.state = {
|
|
@@ -397,7 +376,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
397
376
|
clearingFromIcon: false,
|
|
398
377
|
selectInputValue: _this.props.selectProps.inputValue || '',
|
|
399
378
|
value: _this.props.value || _this.props.defaultValue,
|
|
400
|
-
calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
|
|
379
|
+
calendarValue: _this.props.value || _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date()),
|
|
401
380
|
l10n: (0, _locale.createLocalizationProvider)(_this.props.locale),
|
|
402
381
|
locale: _this.props.locale
|
|
403
382
|
};
|
|
@@ -427,11 +406,11 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
427
406
|
locale = _this$props3.locale,
|
|
428
407
|
testId = _this$props3.testId,
|
|
429
408
|
weekStartDay = _this$props3.weekStartDay;
|
|
430
|
-
var _this$
|
|
431
|
-
value = _this$
|
|
432
|
-
calendarValue = _this$
|
|
433
|
-
isOpen = _this$
|
|
434
|
-
selectInputValue = _this$
|
|
409
|
+
var _this$getSafeState6 = this.getSafeState(),
|
|
410
|
+
value = _this$getSafeState6.value,
|
|
411
|
+
calendarValue = _this$getSafeState6.calendarValue,
|
|
412
|
+
isOpen = _this$getSafeState6.isOpen,
|
|
413
|
+
selectInputValue = _this$getSafeState6.selectInputValue;
|
|
435
414
|
var actualSelectInputValue;
|
|
436
415
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
|
|
437
416
|
actualSelectInputValue = selectInputValue || (value ? this.formatDate(value) : undefined);
|
|
@@ -464,7 +443,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
|
|
|
464
443
|
calendarDisabledDateFilter: disabledDateFilter,
|
|
465
444
|
calendarMaxDate: maxDate,
|
|
466
445
|
calendarMinDate: minDate,
|
|
467
|
-
calendarValue: value && getShortISOString((0, _dateFns.parseISO)(value)),
|
|
446
|
+
calendarValue: value && (0, _parseDate.getShortISOString)((0, _dateFns.parseISO)(value)),
|
|
468
447
|
calendarView: calendarValue,
|
|
469
448
|
onCalendarChange: this.onCalendarChange,
|
|
470
449
|
onCalendarSelect: this.onCalendarSelect,
|
|
@@ -23,15 +23,15 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
23
23
|
var _select = require("@atlaskit/select");
|
|
24
24
|
var _colors = require("@atlaskit/theme/colors");
|
|
25
25
|
var _internal = require("../internal");
|
|
26
|
+
var _parseTokens = require("../internal/parse-tokens");
|
|
26
27
|
var _datePicker = _interopRequireDefault(require("./date-picker"));
|
|
27
28
|
var _timePicker = _interopRequireDefault(require("./time-picker"));
|
|
28
|
-
var _utils = require("./utils");
|
|
29
29
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
30
30
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
31
31
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
32
32
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
|
|
33
33
|
var packageName = "@atlaskit/datetime-picker";
|
|
34
|
-
var packageVersion = "13.0.
|
|
34
|
+
var packageVersion = "13.0.11";
|
|
35
35
|
var isInvalidBorderStyles = (0, _react2.css)({
|
|
36
36
|
borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
|
|
37
37
|
});
|
|
@@ -219,9 +219,9 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
|
|
|
219
219
|
}
|
|
220
220
|
var parsed = (0, _dateFns.parseISO)(value);
|
|
221
221
|
return (0, _dateFns.isValid)(parsed) ? {
|
|
222
|
-
dateValue: (0, _dateFns.format)(parsed, (0,
|
|
223
|
-
timeValue: (0, _dateFns.format)(parsed, (0,
|
|
224
|
-
zoneValue: (0, _dateFns.format)(parsed, (0,
|
|
222
|
+
dateValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('YYYY-MM-DD')),
|
|
223
|
+
timeValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('HH:mm')),
|
|
224
|
+
zoneValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('ZZ'))
|
|
225
225
|
} : {
|
|
226
226
|
dateValue: dateValue,
|
|
227
227
|
timeValue: timeValue,
|
|
@@ -240,8 +240,8 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
|
|
|
240
240
|
zoneValue: zoneValue
|
|
241
241
|
});
|
|
242
242
|
if (dateValue && timeValue) {
|
|
243
|
-
var
|
|
244
|
-
var _this$parseValue = this.parseValue(
|
|
243
|
+
var value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
|
|
244
|
+
var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
|
|
245
245
|
parsedZone = _this$parseValue.zoneValue;
|
|
246
246
|
var valueWithValidZone = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, parsedZone);
|
|
247
247
|
this.setState({
|
|
@@ -25,8 +25,8 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
25
25
|
var _internal = require("../internal");
|
|
26
26
|
var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
|
|
27
27
|
var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
|
|
28
|
+
var _parseTokens = require("../internal/parse-tokens");
|
|
28
29
|
var _singleValue = require("../internal/single-value");
|
|
29
|
-
var _utils = require("./utils");
|
|
30
30
|
var _excluded = ["selectProps"],
|
|
31
31
|
_excluded2 = ["styles"]; // eslint-disable-next-line no-restricted-imports
|
|
32
32
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
@@ -37,7 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
37
37
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
38
38
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
39
39
|
var packageName = "@atlaskit/datetime-picker";
|
|
40
|
-
var packageVersion = "13.0.
|
|
40
|
+
var packageVersion = "13.0.11";
|
|
41
41
|
var menuStyles = {
|
|
42
42
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
43
43
|
position: 'static',
|
|
@@ -130,15 +130,15 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
|
|
|
130
130
|
if (_this.props.timeIsEditable) {
|
|
131
131
|
var _this$props = _this.props,
|
|
132
132
|
parseInputValue = _this$props.parseInputValue,
|
|
133
|
-
|
|
133
|
+
timeFormat = _this$props.timeFormat;
|
|
134
134
|
var sanitizedInput;
|
|
135
135
|
try {
|
|
136
|
-
sanitizedInput = parseInputValue(inputValue,
|
|
136
|
+
sanitizedInput = parseInputValue(inputValue, timeFormat || _internal.defaultTimeFormat);
|
|
137
137
|
} catch (e) {
|
|
138
138
|
return; // do nothing, the main validation should happen in the form
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
var includesSeconds = !!(
|
|
141
|
+
var includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
|
|
142
142
|
var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
143
143
|
var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
|
|
144
144
|
_this.setState({
|
|
@@ -258,7 +258,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
|
|
|
258
258
|
return time;
|
|
259
259
|
}
|
|
260
260
|
if (timeFormat) {
|
|
261
|
-
return (0, _dateFns.format)(date, (0,
|
|
261
|
+
return (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(timeFormat));
|
|
262
262
|
}
|
|
263
263
|
return l10n.formatTime(date);
|
|
264
264
|
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getSafeCalendarValue = getSafeCalendarValue;
|
|
7
|
+
exports.getShortISOString = getShortISOString;
|
|
8
|
+
exports.getValidDate = getValidDate;
|
|
9
|
+
var _dateFns = require("date-fns");
|
|
10
|
+
var _parseTokens = require("./parse-tokens");
|
|
11
|
+
function getValidDate(iso) {
|
|
12
|
+
var date = (0, _dateFns.parseISO)(iso);
|
|
13
|
+
return (0, _dateFns.isValid)(date) ? {
|
|
14
|
+
day: date.getDate(),
|
|
15
|
+
month: date.getMonth() + 1,
|
|
16
|
+
year: date.getFullYear()
|
|
17
|
+
} : {};
|
|
18
|
+
}
|
|
19
|
+
function getShortISOString(date) {
|
|
20
|
+
return (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)('YYYY-MM-DD'));
|
|
21
|
+
}
|
|
22
|
+
function getSafeCalendarValue(calendarValue) {
|
|
23
|
+
// If `calendarValue` has a year that is greater than 9999, default to
|
|
24
|
+
// today's date
|
|
25
|
+
var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
|
|
26
|
+
if (yearIsOverLimit) {
|
|
27
|
+
return getShortISOString(new Date());
|
|
28
|
+
}
|
|
29
|
+
return calendarValue;
|
|
30
|
+
}
|
|
@@ -16,21 +16,11 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
|
16
16
|
import { layers } from '@atlaskit/theme/constants';
|
|
17
17
|
import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
|
|
18
18
|
import FixedLayer from '../internal/fixed-layer';
|
|
19
|
+
import { getSafeCalendarValue, getShortISOString, getValidDate } from '../internal/parse-date';
|
|
20
|
+
import { convertTokens } from '../internal/parse-tokens';
|
|
19
21
|
import { makeSingleValue } from '../internal/single-value';
|
|
20
|
-
import { convertTokens } from './utils';
|
|
21
22
|
const packageName = "@atlaskit/datetime-picker";
|
|
22
|
-
const packageVersion = "13.0.
|
|
23
|
-
function getValidDate(iso) {
|
|
24
|
-
const date = parseISO(iso);
|
|
25
|
-
return isValid(date) ? {
|
|
26
|
-
day: date.getDate(),
|
|
27
|
-
month: date.getMonth() + 1,
|
|
28
|
-
year: date.getFullYear()
|
|
29
|
-
} : {};
|
|
30
|
-
}
|
|
31
|
-
function getShortISOString(date) {
|
|
32
|
-
return format(date, convertTokens('YYYY-MM-DD'));
|
|
33
|
-
}
|
|
23
|
+
const packageVersion = "13.0.11";
|
|
34
24
|
const menuStyles = css({
|
|
35
25
|
zIndex: layers.dialog(),
|
|
36
26
|
backgroundColor: `var(--ds-surface-overlay, ${N0})`,
|
|
@@ -210,15 +200,6 @@ class DatePicker extends Component {
|
|
|
210
200
|
isOpen: true
|
|
211
201
|
});
|
|
212
202
|
});
|
|
213
|
-
_defineProperty(this, "getSafeCalendarValue", calendarValue => {
|
|
214
|
-
// If `calendarValue` has a year that is greater than 9999, default to
|
|
215
|
-
// today's date
|
|
216
|
-
const yearIsOverLimit = calendarValue.match(/^\d{5,}/);
|
|
217
|
-
if (yearIsOverLimit) {
|
|
218
|
-
return getShortISOString(new Date());
|
|
219
|
-
}
|
|
220
|
-
return calendarValue;
|
|
221
|
-
});
|
|
222
203
|
_defineProperty(this, "onInputKeyDown", event => {
|
|
223
204
|
var _this$containerRef3;
|
|
224
205
|
const {
|
|
@@ -262,12 +243,9 @@ class DatePicker extends Component {
|
|
|
262
243
|
// for more details.
|
|
263
244
|
event.preventDefault();
|
|
264
245
|
if (!this.isDateDisabled(calendarValue)) {
|
|
265
|
-
const {
|
|
266
|
-
value
|
|
267
|
-
} = this.getSafeState();
|
|
268
246
|
// Get a safe `calendarValue` in case the value exceeds the maximum
|
|
269
247
|
// allowed by ISO 8601
|
|
270
|
-
const safeCalendarValue =
|
|
248
|
+
const safeCalendarValue = getSafeCalendarValue(calendarValue);
|
|
271
249
|
const valueChanged = safeCalendarValue !== value;
|
|
272
250
|
this.setState({
|
|
273
251
|
selectInputValue: '',
|
|
@@ -11,11 +11,11 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
11
11
|
import { mergeStyles } from '@atlaskit/select';
|
|
12
12
|
import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
|
|
13
13
|
import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
|
|
14
|
+
import { convertTokens } from '../internal/parse-tokens';
|
|
14
15
|
import DatePicker from './date-picker';
|
|
15
16
|
import TimePicker from './time-picker';
|
|
16
|
-
import { convertTokens } from './utils';
|
|
17
17
|
const packageName = "@atlaskit/datetime-picker";
|
|
18
|
-
const packageVersion = "13.0.
|
|
18
|
+
const packageVersion = "13.0.11";
|
|
19
19
|
const isInvalidBorderStyles = css({
|
|
20
20
|
borderColor: `var(--ds-border-danger, ${R400})`
|
|
21
21
|
});
|
|
@@ -13,10 +13,10 @@ import { gridSize } from '@atlaskit/theme/constants';
|
|
|
13
13
|
import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
|
|
14
14
|
import FixedLayer from '../internal/fixed-layer';
|
|
15
15
|
import parseTime from '../internal/parse-time';
|
|
16
|
+
import { convertTokens } from '../internal/parse-tokens';
|
|
16
17
|
import { makeSingleValue } from '../internal/single-value';
|
|
17
|
-
import { convertTokens } from './utils';
|
|
18
18
|
const packageName = "@atlaskit/datetime-picker";
|
|
19
|
-
const packageVersion = "13.0.
|
|
19
|
+
const packageVersion = "13.0.11";
|
|
20
20
|
const menuStyles = {
|
|
21
21
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
22
22
|
position: 'static',
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { format, isValid, parseISO } from 'date-fns';
|
|
2
|
+
import { convertTokens } from './parse-tokens';
|
|
3
|
+
export function getValidDate(iso) {
|
|
4
|
+
const date = parseISO(iso);
|
|
5
|
+
return isValid(date) ? {
|
|
6
|
+
day: date.getDate(),
|
|
7
|
+
month: date.getMonth() + 1,
|
|
8
|
+
year: date.getFullYear()
|
|
9
|
+
} : {};
|
|
10
|
+
}
|
|
11
|
+
export function getShortISOString(date) {
|
|
12
|
+
return format(date, convertTokens('YYYY-MM-DD'));
|
|
13
|
+
}
|
|
14
|
+
export function getSafeCalendarValue(calendarValue) {
|
|
15
|
+
// If `calendarValue` has a year that is greater than 9999, default to
|
|
16
|
+
// today's date
|
|
17
|
+
const yearIsOverLimit = calendarValue.match(/^\d{5,}/);
|
|
18
|
+
if (yearIsOverLimit) {
|
|
19
|
+
return getShortISOString(new Date());
|
|
20
|
+
}
|
|
21
|
+
return calendarValue;
|
|
22
|
+
}
|
|
@@ -27,21 +27,11 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
|
27
27
|
import { layers } from '@atlaskit/theme/constants';
|
|
28
28
|
import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
|
|
29
29
|
import FixedLayer from '../internal/fixed-layer';
|
|
30
|
+
import { getSafeCalendarValue, getShortISOString, getValidDate } from '../internal/parse-date';
|
|
31
|
+
import { convertTokens } from '../internal/parse-tokens';
|
|
30
32
|
import { makeSingleValue } from '../internal/single-value';
|
|
31
|
-
import { convertTokens } from './utils';
|
|
32
33
|
var packageName = "@atlaskit/datetime-picker";
|
|
33
|
-
var packageVersion = "13.0.
|
|
34
|
-
function getValidDate(iso) {
|
|
35
|
-
var date = parseISO(iso);
|
|
36
|
-
return isValid(date) ? {
|
|
37
|
-
day: date.getDate(),
|
|
38
|
-
month: date.getMonth() + 1,
|
|
39
|
-
year: date.getFullYear()
|
|
40
|
-
} : {};
|
|
41
|
-
}
|
|
42
|
-
function getShortISOString(date) {
|
|
43
|
-
return format(date, convertTokens('YYYY-MM-DD'));
|
|
44
|
-
}
|
|
34
|
+
var packageVersion = "13.0.11";
|
|
45
35
|
var menuStyles = css({
|
|
46
36
|
zIndex: layers.dialog(),
|
|
47
37
|
backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
|
|
@@ -224,15 +214,6 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
224
214
|
isOpen: true
|
|
225
215
|
});
|
|
226
216
|
});
|
|
227
|
-
_defineProperty(_assertThisInitialized(_this), "getSafeCalendarValue", function (calendarValue) {
|
|
228
|
-
// If `calendarValue` has a year that is greater than 9999, default to
|
|
229
|
-
// today's date
|
|
230
|
-
var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
|
|
231
|
-
if (yearIsOverLimit) {
|
|
232
|
-
return getShortISOString(new Date());
|
|
233
|
-
}
|
|
234
|
-
return calendarValue;
|
|
235
|
-
});
|
|
236
217
|
_defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
|
|
237
218
|
var _this$containerRef3;
|
|
238
219
|
var _this$getSafeState2 = _this.getSafeState(),
|
|
@@ -275,12 +256,10 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
275
256
|
// for more details.
|
|
276
257
|
event.preventDefault();
|
|
277
258
|
if (!_this.isDateDisabled(calendarValue)) {
|
|
278
|
-
var _this$getSafeState3 = _this.getSafeState(),
|
|
279
|
-
_value2 = _this$getSafeState3.value;
|
|
280
259
|
// Get a safe `calendarValue` in case the value exceeds the maximum
|
|
281
260
|
// allowed by ISO 8601
|
|
282
|
-
var safeCalendarValue =
|
|
283
|
-
var valueChanged = safeCalendarValue !==
|
|
261
|
+
var safeCalendarValue = getSafeCalendarValue(calendarValue);
|
|
262
|
+
var valueChanged = safeCalendarValue !== value;
|
|
284
263
|
_this.setState({
|
|
285
264
|
selectInputValue: '',
|
|
286
265
|
isOpen: false,
|
|
@@ -350,8 +329,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
350
329
|
if (parseInputValue) {
|
|
351
330
|
return parseInputValue(date, dateFormat || defaultDateFormat);
|
|
352
331
|
}
|
|
353
|
-
var _this$
|
|
354
|
-
l10n = _this$
|
|
332
|
+
var _this$getSafeState3 = _this.getSafeState(),
|
|
333
|
+
l10n = _this$getSafeState3.l10n;
|
|
355
334
|
return l10n.parseDate(date);
|
|
356
335
|
});
|
|
357
336
|
/**
|
|
@@ -365,8 +344,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
365
344
|
var _this$props2 = _this.props,
|
|
366
345
|
formatDisplayLabel = _this$props2.formatDisplayLabel,
|
|
367
346
|
dateFormat = _this$props2.dateFormat;
|
|
368
|
-
var _this$
|
|
369
|
-
l10n = _this$
|
|
347
|
+
var _this$getSafeState4 = _this.getSafeState(),
|
|
348
|
+
l10n = _this$getSafeState4.l10n;
|
|
370
349
|
if (formatDisplayLabel) {
|
|
371
350
|
return formatDisplayLabel(value, dateFormat || defaultDateFormat);
|
|
372
351
|
}
|
|
@@ -378,8 +357,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
378
357
|
if (placeholder) {
|
|
379
358
|
return placeholder;
|
|
380
359
|
}
|
|
381
|
-
var _this$
|
|
382
|
-
l10n = _this$
|
|
360
|
+
var _this$getSafeState5 = _this.getSafeState(),
|
|
361
|
+
l10n = _this$getSafeState5.l10n;
|
|
383
362
|
return l10n.formatDate(placeholderDatetime);
|
|
384
363
|
});
|
|
385
364
|
_this.state = {
|
|
@@ -418,11 +397,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
418
397
|
locale = _this$props3.locale,
|
|
419
398
|
testId = _this$props3.testId,
|
|
420
399
|
weekStartDay = _this$props3.weekStartDay;
|
|
421
|
-
var _this$
|
|
422
|
-
value = _this$
|
|
423
|
-
calendarValue = _this$
|
|
424
|
-
isOpen = _this$
|
|
425
|
-
selectInputValue = _this$
|
|
400
|
+
var _this$getSafeState6 = this.getSafeState(),
|
|
401
|
+
value = _this$getSafeState6.value,
|
|
402
|
+
calendarValue = _this$getSafeState6.calendarValue,
|
|
403
|
+
isOpen = _this$getSafeState6.isOpen,
|
|
404
|
+
selectInputValue = _this$getSafeState6.selectInputValue;
|
|
426
405
|
var actualSelectInputValue;
|
|
427
406
|
if (getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
|
|
428
407
|
actualSelectInputValue = selectInputValue || (value ? this.formatDate(value) : undefined);
|
|
@@ -21,11 +21,11 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
21
21
|
import { mergeStyles } from '@atlaskit/select';
|
|
22
22
|
import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
|
|
23
23
|
import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
|
|
24
|
+
import { convertTokens } from '../internal/parse-tokens';
|
|
24
25
|
import DatePicker from './date-picker';
|
|
25
26
|
import TimePicker from './time-picker';
|
|
26
|
-
import { convertTokens } from './utils';
|
|
27
27
|
var packageName = "@atlaskit/datetime-picker";
|
|
28
|
-
var packageVersion = "13.0.
|
|
28
|
+
var packageVersion = "13.0.11";
|
|
29
29
|
var isInvalidBorderStyles = css({
|
|
30
30
|
borderColor: "var(--ds-border-danger, ".concat(R400, ")")
|
|
31
31
|
});
|
|
@@ -234,8 +234,8 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
234
234
|
zoneValue: zoneValue
|
|
235
235
|
});
|
|
236
236
|
if (dateValue && timeValue) {
|
|
237
|
-
var
|
|
238
|
-
var _this$parseValue = this.parseValue(
|
|
237
|
+
var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
|
|
238
|
+
var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
|
|
239
239
|
parsedZone = _this$parseValue.zoneValue;
|
|
240
240
|
var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
|
|
241
241
|
this.setState({
|
|
@@ -26,10 +26,10 @@ import { gridSize } from '@atlaskit/theme/constants';
|
|
|
26
26
|
import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
|
|
27
27
|
import FixedLayer from '../internal/fixed-layer';
|
|
28
28
|
import parseTime from '../internal/parse-time';
|
|
29
|
+
import { convertTokens } from '../internal/parse-tokens';
|
|
29
30
|
import { makeSingleValue } from '../internal/single-value';
|
|
30
|
-
import { convertTokens } from './utils';
|
|
31
31
|
var packageName = "@atlaskit/datetime-picker";
|
|
32
|
-
var packageVersion = "13.0.
|
|
32
|
+
var packageVersion = "13.0.11";
|
|
33
33
|
var menuStyles = {
|
|
34
34
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
35
35
|
position: 'static',
|
|
@@ -122,15 +122,15 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
122
122
|
if (_this.props.timeIsEditable) {
|
|
123
123
|
var _this$props = _this.props,
|
|
124
124
|
parseInputValue = _this$props.parseInputValue,
|
|
125
|
-
|
|
125
|
+
timeFormat = _this$props.timeFormat;
|
|
126
126
|
var sanitizedInput;
|
|
127
127
|
try {
|
|
128
|
-
sanitizedInput = parseInputValue(inputValue,
|
|
128
|
+
sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
|
|
129
129
|
} catch (e) {
|
|
130
130
|
return; // do nothing, the main validation should happen in the form
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
var includesSeconds = !!(
|
|
133
|
+
var includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
|
|
134
134
|
var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
135
135
|
var formattedValue = format(sanitizedInput, formatFormat) || '';
|
|
136
136
|
_this.setState({
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { format, isValid, parseISO } from 'date-fns';
|
|
2
|
+
import { convertTokens } from './parse-tokens';
|
|
3
|
+
export function getValidDate(iso) {
|
|
4
|
+
var date = parseISO(iso);
|
|
5
|
+
return isValid(date) ? {
|
|
6
|
+
day: date.getDate(),
|
|
7
|
+
month: date.getMonth() + 1,
|
|
8
|
+
year: date.getFullYear()
|
|
9
|
+
} : {};
|
|
10
|
+
}
|
|
11
|
+
export function getShortISOString(date) {
|
|
12
|
+
return format(date, convertTokens('YYYY-MM-DD'));
|
|
13
|
+
}
|
|
14
|
+
export function getSafeCalendarValue(calendarValue) {
|
|
15
|
+
// If `calendarValue` has a year that is greater than 9999, default to
|
|
16
|
+
// today's date
|
|
17
|
+
var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
|
|
18
|
+
if (yearIsOverLimit) {
|
|
19
|
+
return getShortISOString(new Date());
|
|
20
|
+
}
|
|
21
|
+
return calendarValue;
|
|
22
|
+
}
|