@atlaskit/datetime-picker 14.1.2 → 15.0.1
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 +17 -0
- package/dist/cjs/components/date-picker.js +1 -1
- package/dist/cjs/components/date-time-picker.js +18 -3
- package/dist/cjs/components/time-picker.js +6 -8
- package/dist/es2019/components/date-picker.js +1 -1
- package/dist/es2019/components/date-time-picker.js +18 -3
- package/dist/es2019/components/time-picker.js +6 -8
- package/dist/esm/components/date-picker.js +1 -1
- package/dist/esm/components/date-time-picker.js +18 -3
- package/dist/esm/components/time-picker.js +7 -9
- package/dist/types/components/time-picker.d.ts +1 -1
- package/dist/types/types.d.ts +0 -4
- package/dist/types-ts4.5/components/time-picker.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +0 -4
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 15.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#145902](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145902)
|
|
8
|
+
[`7d95e270ddda2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d95e270ddda2) -
|
|
9
|
+
Ensure provided onChange handlers on in `*PickerProps` run alongside internal parsing logic
|
|
10
|
+
instead of overriding it.
|
|
11
|
+
|
|
12
|
+
## 15.0.0
|
|
13
|
+
|
|
14
|
+
### Major Changes
|
|
15
|
+
|
|
16
|
+
- [#145306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145306)
|
|
17
|
+
[`3b17d85b64fcd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b17d85b64fcd) -
|
|
18
|
+
Remove unused analyticsContext prop and add unit tests for analytics.
|
|
19
|
+
|
|
3
20
|
## 14.1.2
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -36,7 +36,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
36
36
|
* @jsx jsx
|
|
37
37
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
38
38
|
var packageName = "@atlaskit/datetime-picker";
|
|
39
|
-
var packageVersion = "
|
|
39
|
+
var packageVersion = "15.0.1";
|
|
40
40
|
var datePickerDefaultProps = {
|
|
41
41
|
appearance: 'default',
|
|
42
42
|
autoFocus: false,
|
|
@@ -32,7 +32,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
32
32
|
* @jsx jsx
|
|
33
33
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
34
34
|
var packageName = "@atlaskit/datetime-picker";
|
|
35
|
-
var packageVersion = "
|
|
35
|
+
var packageVersion = "15.0.1";
|
|
36
36
|
// Make DatePicker 50% the width of DateTimePicker
|
|
37
37
|
// If rendering an icon container, shrink the TimePicker
|
|
38
38
|
var datePickerContainerStyles = (0, _react2.css)({
|
|
@@ -131,28 +131,43 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
|
|
|
131
131
|
(_this$props$onFocus = (_this$props2 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props2, event);
|
|
132
132
|
});
|
|
133
133
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateChange", function (dateValue) {
|
|
134
|
+
var _this$props$datePicke;
|
|
134
135
|
var parsedValues = _this.getParsedValues();
|
|
135
136
|
_this.onValueChange({
|
|
136
137
|
dateValue: dateValue,
|
|
137
138
|
timeValue: parsedValues.timeValue,
|
|
138
139
|
zoneValue: parsedValues.zoneValue
|
|
139
140
|
});
|
|
141
|
+
if ((_this$props$datePicke = _this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
|
|
142
|
+
_this.props.datePickerProps.onChange(dateValue);
|
|
143
|
+
}
|
|
140
144
|
});
|
|
141
145
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChange", function (timeValue) {
|
|
146
|
+
var _this$props$timePicke;
|
|
142
147
|
var parsedValues = _this.getParsedValues();
|
|
143
148
|
_this.onValueChange({
|
|
144
149
|
dateValue: parsedValues.dateValue,
|
|
145
150
|
timeValue: timeValue,
|
|
146
151
|
zoneValue: parsedValues.zoneValue
|
|
147
152
|
});
|
|
153
|
+
if ((_this$props$timePicke = _this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
|
|
154
|
+
_this.props.timePickerProps.onChange(timeValue);
|
|
155
|
+
}
|
|
148
156
|
});
|
|
149
157
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
|
|
158
|
+
var _this$props$datePicke2, _this$props$timePicke2;
|
|
150
159
|
var parsedValues = _this.getParsedValues();
|
|
151
160
|
_this.onValueChange({
|
|
152
161
|
dateValue: '',
|
|
153
162
|
timeValue: '',
|
|
154
163
|
zoneValue: parsedValues.zoneValue
|
|
155
164
|
});
|
|
165
|
+
if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
|
|
166
|
+
_this.props.datePickerProps.onChange('');
|
|
167
|
+
}
|
|
168
|
+
if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
|
|
169
|
+
_this.props.timePickerProps.onChange('');
|
|
170
|
+
}
|
|
156
171
|
});
|
|
157
172
|
return _this;
|
|
158
173
|
}
|
|
@@ -301,7 +316,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
|
|
|
301
316
|
name: datePickerProps.name,
|
|
302
317
|
nextMonthLabel: datePickerProps.nextMonthLabel,
|
|
303
318
|
onBlur: datePickerProps.onBlur || this.onBlur,
|
|
304
|
-
onChange:
|
|
319
|
+
onChange: this.onDateChange,
|
|
305
320
|
onFocus: datePickerProps.onFocus || this.onFocus,
|
|
306
321
|
parseInputValue: datePickerProps.parseInputValue,
|
|
307
322
|
placeholder: datePickerProps.placeholder,
|
|
@@ -330,7 +345,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
|
|
|
330
345
|
locale: timePickerProps.locale || locale,
|
|
331
346
|
name: timePickerProps.name,
|
|
332
347
|
onBlur: timePickerProps.onBlur || this.onBlur,
|
|
333
|
-
onChange:
|
|
348
|
+
onChange: this.onTimeChange,
|
|
334
349
|
onFocus: timePickerProps.onFocus || this.onFocus,
|
|
335
350
|
parseInputValue: timePickerProps.parseInputValue,
|
|
336
351
|
placeholder: timePickerProps.placeholder,
|
|
@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
27
27
|
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; }
|
|
28
28
|
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; }
|
|
29
29
|
var packageName = "@atlaskit/datetime-picker";
|
|
30
|
-
var packageVersion = "
|
|
30
|
+
var packageVersion = "15.0.1";
|
|
31
31
|
var menuStyles = {
|
|
32
32
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
33
33
|
position: 'static',
|
|
@@ -53,7 +53,6 @@ var analyticsAttributes = {
|
|
|
53
53
|
*/
|
|
54
54
|
var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
55
55
|
var ariaDescribedBy = _ref['aria-describedby'],
|
|
56
|
-
analyticsContext = _ref.analyticsContext,
|
|
57
56
|
_ref$appearance = _ref.appearance,
|
|
58
57
|
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
59
58
|
_ref$autoFocus = _ref.autoFocus,
|
|
@@ -137,8 +136,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
137
136
|
forceUpdate = _useReducer2[1];
|
|
138
137
|
var providedOnChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
|
|
139
138
|
fn: providedOnChange,
|
|
140
|
-
action: 'selectedTime'
|
|
141
|
-
analyticsData: analyticsContext
|
|
139
|
+
action: 'selectedTime'
|
|
142
140
|
}, analyticsAttributes));
|
|
143
141
|
(0, _react.useEffect)(function () {
|
|
144
142
|
if (providedValue) {
|
|
@@ -150,7 +148,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
150
148
|
setIsOpen(providedIsOpen);
|
|
151
149
|
}
|
|
152
150
|
}, [providedIsOpen]);
|
|
153
|
-
var onChange = function
|
|
151
|
+
var onChange = (0, _react.useCallback)(function (newValue, action) {
|
|
154
152
|
var rawValue = newValue ? newValue.value || newValue : '';
|
|
155
153
|
var finalValue = rawValue.toString();
|
|
156
154
|
setValue(finalValue);
|
|
@@ -158,7 +156,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
158
156
|
setClearingFromIcon(true);
|
|
159
157
|
}
|
|
160
158
|
providedOnChangeWithAnalytics(finalValue);
|
|
161
|
-
};
|
|
159
|
+
}, [providedOnChangeWithAnalytics]);
|
|
162
160
|
|
|
163
161
|
/**
|
|
164
162
|
* Only allow custom times if timeIsEditable prop is true
|
|
@@ -175,9 +173,9 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
175
173
|
var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
176
174
|
var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
|
|
177
175
|
setValue(formattedValue);
|
|
178
|
-
|
|
176
|
+
providedOnChangeWithAnalytics(formattedValue);
|
|
179
177
|
} else {
|
|
180
|
-
|
|
178
|
+
providedOnChangeWithAnalytics(inputValue);
|
|
181
179
|
}
|
|
182
180
|
};
|
|
183
181
|
var onMenuOpen = function onMenuOpen() {
|
|
@@ -19,7 +19,7 @@ import { Menu } from '../internal/menu';
|
|
|
19
19
|
import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
|
|
20
20
|
import { makeSingleValue } from '../internal/single-value';
|
|
21
21
|
const packageName = "@atlaskit/datetime-picker";
|
|
22
|
-
const packageVersion = "
|
|
22
|
+
const packageVersion = "15.0.1";
|
|
23
23
|
const datePickerDefaultProps = {
|
|
24
24
|
appearance: 'default',
|
|
25
25
|
autoFocus: false,
|
|
@@ -18,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
18
18
|
import DatePicker from './date-picker';
|
|
19
19
|
import TimePicker from './time-picker';
|
|
20
20
|
const packageName = "@atlaskit/datetime-picker";
|
|
21
|
-
const packageVersion = "
|
|
21
|
+
const packageVersion = "15.0.1";
|
|
22
22
|
// Make DatePicker 50% the width of DateTimePicker
|
|
23
23
|
// If rendering an icon container, shrink the TimePicker
|
|
24
24
|
const datePickerContainerStyles = css({
|
|
@@ -107,28 +107,43 @@ class DateTimePickerComponent extends React.Component {
|
|
|
107
107
|
(_this$props$onFocus = (_this$props2 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props2, event);
|
|
108
108
|
});
|
|
109
109
|
_defineProperty(this, "onDateChange", dateValue => {
|
|
110
|
+
var _this$props$datePicke;
|
|
110
111
|
const parsedValues = this.getParsedValues();
|
|
111
112
|
this.onValueChange({
|
|
112
113
|
dateValue,
|
|
113
114
|
timeValue: parsedValues.timeValue,
|
|
114
115
|
zoneValue: parsedValues.zoneValue
|
|
115
116
|
});
|
|
117
|
+
if ((_this$props$datePicke = this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
|
|
118
|
+
this.props.datePickerProps.onChange(dateValue);
|
|
119
|
+
}
|
|
116
120
|
});
|
|
117
121
|
_defineProperty(this, "onTimeChange", timeValue => {
|
|
122
|
+
var _this$props$timePicke;
|
|
118
123
|
const parsedValues = this.getParsedValues();
|
|
119
124
|
this.onValueChange({
|
|
120
125
|
dateValue: parsedValues.dateValue,
|
|
121
126
|
timeValue,
|
|
122
127
|
zoneValue: parsedValues.zoneValue
|
|
123
128
|
});
|
|
129
|
+
if ((_this$props$timePicke = this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
|
|
130
|
+
this.props.timePickerProps.onChange(timeValue);
|
|
131
|
+
}
|
|
124
132
|
});
|
|
125
133
|
_defineProperty(this, "onClear", () => {
|
|
134
|
+
var _this$props$datePicke2, _this$props$timePicke2;
|
|
126
135
|
const parsedValues = this.getParsedValues();
|
|
127
136
|
this.onValueChange({
|
|
128
137
|
dateValue: '',
|
|
129
138
|
timeValue: '',
|
|
130
139
|
zoneValue: parsedValues.zoneValue
|
|
131
140
|
});
|
|
141
|
+
if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
|
|
142
|
+
this.props.datePickerProps.onChange('');
|
|
143
|
+
}
|
|
144
|
+
if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
|
|
145
|
+
this.props.timePickerProps.onChange('');
|
|
146
|
+
}
|
|
132
147
|
});
|
|
133
148
|
}
|
|
134
149
|
parseValue(value, dateValue, timeValue, zoneValue) {
|
|
@@ -266,7 +281,7 @@ class DateTimePickerComponent extends React.Component {
|
|
|
266
281
|
name: datePickerProps.name,
|
|
267
282
|
nextMonthLabel: datePickerProps.nextMonthLabel,
|
|
268
283
|
onBlur: datePickerProps.onBlur || this.onBlur,
|
|
269
|
-
onChange:
|
|
284
|
+
onChange: this.onDateChange,
|
|
270
285
|
onFocus: datePickerProps.onFocus || this.onFocus,
|
|
271
286
|
parseInputValue: datePickerProps.parseInputValue,
|
|
272
287
|
placeholder: datePickerProps.placeholder,
|
|
@@ -295,7 +310,7 @@ class DateTimePickerComponent extends React.Component {
|
|
|
295
310
|
locale: timePickerProps.locale || locale,
|
|
296
311
|
name: timePickerProps.name,
|
|
297
312
|
onBlur: timePickerProps.onBlur || this.onBlur,
|
|
298
|
-
onChange:
|
|
313
|
+
onChange: this.onTimeChange,
|
|
299
314
|
onFocus: timePickerProps.onFocus || this.onFocus,
|
|
300
315
|
parseInputValue: timePickerProps.parseInputValue,
|
|
301
316
|
placeholder: timePickerProps.placeholder,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { forwardRef, useEffect, useReducer, useState } from 'react';
|
|
2
|
+
import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
|
|
3
3
|
import { format, isValid } from 'date-fns';
|
|
4
4
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
5
5
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
@@ -11,7 +11,7 @@ import parseTime from '../internal/parse-time';
|
|
|
11
11
|
import { convertTokens } from '../internal/parse-tokens';
|
|
12
12
|
import { makeSingleValue } from '../internal/single-value';
|
|
13
13
|
const packageName = "@atlaskit/datetime-picker";
|
|
14
|
-
const packageVersion = "
|
|
14
|
+
const packageVersion = "15.0.1";
|
|
15
15
|
const menuStyles = {
|
|
16
16
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
17
17
|
position: 'static',
|
|
@@ -37,7 +37,6 @@ const analyticsAttributes = {
|
|
|
37
37
|
*/
|
|
38
38
|
const TimePicker = /*#__PURE__*/forwardRef(({
|
|
39
39
|
'aria-describedby': ariaDescribedBy,
|
|
40
|
-
analyticsContext,
|
|
41
40
|
appearance = 'default',
|
|
42
41
|
autoFocus = false,
|
|
43
42
|
defaultIsOpen = false,
|
|
@@ -82,7 +81,6 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
82
81
|
const providedOnChangeWithAnalytics = usePlatformLeafEventHandler({
|
|
83
82
|
fn: providedOnChange,
|
|
84
83
|
action: 'selectedTime',
|
|
85
|
-
analyticsData: analyticsContext,
|
|
86
84
|
...analyticsAttributes
|
|
87
85
|
});
|
|
88
86
|
useEffect(() => {
|
|
@@ -95,7 +93,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
95
93
|
setIsOpen(providedIsOpen);
|
|
96
94
|
}
|
|
97
95
|
}, [providedIsOpen]);
|
|
98
|
-
const onChange = (newValue, action) => {
|
|
96
|
+
const onChange = useCallback((newValue, action) => {
|
|
99
97
|
const rawValue = newValue ? newValue.value || newValue : '';
|
|
100
98
|
const finalValue = rawValue.toString();
|
|
101
99
|
setValue(finalValue);
|
|
@@ -103,7 +101,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
103
101
|
setClearingFromIcon(true);
|
|
104
102
|
}
|
|
105
103
|
providedOnChangeWithAnalytics(finalValue);
|
|
106
|
-
};
|
|
104
|
+
}, [providedOnChangeWithAnalytics]);
|
|
107
105
|
|
|
108
106
|
/**
|
|
109
107
|
* Only allow custom times if timeIsEditable prop is true
|
|
@@ -120,9 +118,9 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
120
118
|
const formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
121
119
|
const formattedValue = format(sanitizedInput, formatFormat) || '';
|
|
122
120
|
setValue(formattedValue);
|
|
123
|
-
|
|
121
|
+
providedOnChangeWithAnalytics(formattedValue);
|
|
124
122
|
} else {
|
|
125
|
-
|
|
123
|
+
providedOnChangeWithAnalytics(inputValue);
|
|
126
124
|
}
|
|
127
125
|
};
|
|
128
126
|
const onMenuOpen = () => {
|
|
@@ -29,7 +29,7 @@ import { Menu } from '../internal/menu';
|
|
|
29
29
|
import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
|
|
30
30
|
import { makeSingleValue } from '../internal/single-value';
|
|
31
31
|
var packageName = "@atlaskit/datetime-picker";
|
|
32
|
-
var packageVersion = "
|
|
32
|
+
var packageVersion = "15.0.1";
|
|
33
33
|
var datePickerDefaultProps = {
|
|
34
34
|
appearance: 'default',
|
|
35
35
|
autoFocus: false,
|
|
@@ -28,7 +28,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
28
28
|
import DatePicker from './date-picker';
|
|
29
29
|
import TimePicker from './time-picker';
|
|
30
30
|
var packageName = "@atlaskit/datetime-picker";
|
|
31
|
-
var packageVersion = "
|
|
31
|
+
var packageVersion = "15.0.1";
|
|
32
32
|
// Make DatePicker 50% the width of DateTimePicker
|
|
33
33
|
// If rendering an icon container, shrink the TimePicker
|
|
34
34
|
var datePickerContainerStyles = css({
|
|
@@ -127,28 +127,43 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
127
127
|
(_this$props$onFocus = (_this$props2 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props2, event);
|
|
128
128
|
});
|
|
129
129
|
_defineProperty(_assertThisInitialized(_this), "onDateChange", function (dateValue) {
|
|
130
|
+
var _this$props$datePicke;
|
|
130
131
|
var parsedValues = _this.getParsedValues();
|
|
131
132
|
_this.onValueChange({
|
|
132
133
|
dateValue: dateValue,
|
|
133
134
|
timeValue: parsedValues.timeValue,
|
|
134
135
|
zoneValue: parsedValues.zoneValue
|
|
135
136
|
});
|
|
137
|
+
if ((_this$props$datePicke = _this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
|
|
138
|
+
_this.props.datePickerProps.onChange(dateValue);
|
|
139
|
+
}
|
|
136
140
|
});
|
|
137
141
|
_defineProperty(_assertThisInitialized(_this), "onTimeChange", function (timeValue) {
|
|
142
|
+
var _this$props$timePicke;
|
|
138
143
|
var parsedValues = _this.getParsedValues();
|
|
139
144
|
_this.onValueChange({
|
|
140
145
|
dateValue: parsedValues.dateValue,
|
|
141
146
|
timeValue: timeValue,
|
|
142
147
|
zoneValue: parsedValues.zoneValue
|
|
143
148
|
});
|
|
149
|
+
if ((_this$props$timePicke = _this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
|
|
150
|
+
_this.props.timePickerProps.onChange(timeValue);
|
|
151
|
+
}
|
|
144
152
|
});
|
|
145
153
|
_defineProperty(_assertThisInitialized(_this), "onClear", function () {
|
|
154
|
+
var _this$props$datePicke2, _this$props$timePicke2;
|
|
146
155
|
var parsedValues = _this.getParsedValues();
|
|
147
156
|
_this.onValueChange({
|
|
148
157
|
dateValue: '',
|
|
149
158
|
timeValue: '',
|
|
150
159
|
zoneValue: parsedValues.zoneValue
|
|
151
160
|
});
|
|
161
|
+
if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
|
|
162
|
+
_this.props.datePickerProps.onChange('');
|
|
163
|
+
}
|
|
164
|
+
if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
|
|
165
|
+
_this.props.timePickerProps.onChange('');
|
|
166
|
+
}
|
|
152
167
|
});
|
|
153
168
|
return _this;
|
|
154
169
|
}
|
|
@@ -297,7 +312,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
297
312
|
name: datePickerProps.name,
|
|
298
313
|
nextMonthLabel: datePickerProps.nextMonthLabel,
|
|
299
314
|
onBlur: datePickerProps.onBlur || this.onBlur,
|
|
300
|
-
onChange:
|
|
315
|
+
onChange: this.onDateChange,
|
|
301
316
|
onFocus: datePickerProps.onFocus || this.onFocus,
|
|
302
317
|
parseInputValue: datePickerProps.parseInputValue,
|
|
303
318
|
placeholder: datePickerProps.placeholder,
|
|
@@ -326,7 +341,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
326
341
|
locale: timePickerProps.locale || locale,
|
|
327
342
|
name: timePickerProps.name,
|
|
328
343
|
onBlur: timePickerProps.onBlur || this.onBlur,
|
|
329
|
-
onChange:
|
|
344
|
+
onChange: this.onTimeChange,
|
|
330
345
|
onFocus: timePickerProps.onFocus || this.onFocus,
|
|
331
346
|
parseInputValue: timePickerProps.parseInputValue,
|
|
332
347
|
placeholder: timePickerProps.placeholder,
|
|
@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
5
5
|
var _excluded = ["styles"];
|
|
6
6
|
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; }
|
|
7
7
|
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) { _defineProperty(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; }
|
|
8
|
-
import React, { forwardRef, useEffect, useReducer, useState } from 'react';
|
|
8
|
+
import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
|
|
9
9
|
import { format, isValid } from 'date-fns';
|
|
10
10
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
11
11
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
|
|
|
17
17
|
import { convertTokens } from '../internal/parse-tokens';
|
|
18
18
|
import { makeSingleValue } from '../internal/single-value';
|
|
19
19
|
var packageName = "@atlaskit/datetime-picker";
|
|
20
|
-
var packageVersion = "
|
|
20
|
+
var packageVersion = "15.0.1";
|
|
21
21
|
var menuStyles = {
|
|
22
22
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
23
23
|
position: 'static',
|
|
@@ -43,7 +43,6 @@ var analyticsAttributes = {
|
|
|
43
43
|
*/
|
|
44
44
|
var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
45
45
|
var ariaDescribedBy = _ref['aria-describedby'],
|
|
46
|
-
analyticsContext = _ref.analyticsContext,
|
|
47
46
|
_ref$appearance = _ref.appearance,
|
|
48
47
|
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
49
48
|
_ref$autoFocus = _ref.autoFocus,
|
|
@@ -127,8 +126,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
127
126
|
forceUpdate = _useReducer2[1];
|
|
128
127
|
var providedOnChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
|
|
129
128
|
fn: providedOnChange,
|
|
130
|
-
action: 'selectedTime'
|
|
131
|
-
analyticsData: analyticsContext
|
|
129
|
+
action: 'selectedTime'
|
|
132
130
|
}, analyticsAttributes));
|
|
133
131
|
useEffect(function () {
|
|
134
132
|
if (providedValue) {
|
|
@@ -140,7 +138,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
140
138
|
setIsOpen(providedIsOpen);
|
|
141
139
|
}
|
|
142
140
|
}, [providedIsOpen]);
|
|
143
|
-
var onChange = function
|
|
141
|
+
var onChange = useCallback(function (newValue, action) {
|
|
144
142
|
var rawValue = newValue ? newValue.value || newValue : '';
|
|
145
143
|
var finalValue = rawValue.toString();
|
|
146
144
|
setValue(finalValue);
|
|
@@ -148,7 +146,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
148
146
|
setClearingFromIcon(true);
|
|
149
147
|
}
|
|
150
148
|
providedOnChangeWithAnalytics(finalValue);
|
|
151
|
-
};
|
|
149
|
+
}, [providedOnChangeWithAnalytics]);
|
|
152
150
|
|
|
153
151
|
/**
|
|
154
152
|
* Only allow custom times if timeIsEditable prop is true
|
|
@@ -165,9 +163,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
165
163
|
var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
166
164
|
var formattedValue = format(sanitizedInput, formatFormat) || '';
|
|
167
165
|
setValue(formattedValue);
|
|
168
|
-
|
|
166
|
+
providedOnChangeWithAnalytics(formattedValue);
|
|
169
167
|
} else {
|
|
170
|
-
|
|
168
|
+
providedOnChangeWithAnalytics(inputValue);
|
|
171
169
|
}
|
|
172
170
|
};
|
|
173
171
|
var onMenuOpen = function onMenuOpen() {
|
|
@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
|
|
|
9
9
|
* - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
|
|
10
10
|
* - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
|
|
11
11
|
*/
|
|
12
|
-
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "
|
|
12
|
+
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
|
|
13
13
|
export default TimePicker;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -206,10 +206,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
|
|
|
206
206
|
weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
207
207
|
}
|
|
208
208
|
export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
|
|
209
|
-
/**
|
|
210
|
-
* Additional information to be included in the `context` of analytics events
|
|
211
|
-
*/
|
|
212
|
-
analyticsContext?: Record<string, any>;
|
|
213
209
|
/**
|
|
214
210
|
* Set the appearance of the picker.
|
|
215
211
|
* `subtle` will remove the borders, background, and icon.
|
|
@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
|
|
|
9
9
|
* - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
|
|
10
10
|
* - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
|
|
11
11
|
*/
|
|
12
|
-
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "
|
|
12
|
+
declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
|
|
13
13
|
export default TimePicker;
|
|
@@ -206,10 +206,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
|
|
|
206
206
|
weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
207
207
|
}
|
|
208
208
|
export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
|
|
209
|
-
/**
|
|
210
|
-
* Additional information to be included in the `context` of analytics events
|
|
211
|
-
*/
|
|
212
|
-
analyticsContext?: Record<string, any>;
|
|
213
209
|
/**
|
|
214
210
|
* Set the appearance of the picker.
|
|
215
211
|
* `subtle` will remove the borders, background, and icon.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.1",
|
|
4
4
|
"description": "A date time picker allows the user to select an associated date and time.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -56,11 +56,11 @@
|
|
|
56
56
|
"@af/accessibility-testing": "*",
|
|
57
57
|
"@af/integration-testing": "*",
|
|
58
58
|
"@af/visual-regression": "*",
|
|
59
|
-
"@atlaskit/button": "^20.
|
|
59
|
+
"@atlaskit/button": "^20.2.0",
|
|
60
60
|
"@atlaskit/codemod-utils": "4.2.4",
|
|
61
61
|
"@atlaskit/docs": "*",
|
|
62
62
|
"@atlaskit/form": "^10.5.0",
|
|
63
|
-
"@atlaskit/modal-dialog": "^12.
|
|
63
|
+
"@atlaskit/modal-dialog": "^12.17.0",
|
|
64
64
|
"@atlaskit/popup": "^1.27.0",
|
|
65
65
|
"@atlaskit/range": "^7.4.0",
|
|
66
66
|
"@atlaskit/section-message": "^6.6.0",
|