carbon-react 99.1.0 → 100.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -25,282 +25,240 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
|
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
27
|
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
31
|
-
|
|
32
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
33
|
-
|
|
34
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
35
|
-
|
|
36
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
37
|
-
|
|
38
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
39
|
-
|
|
40
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
41
|
-
|
|
42
|
-
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
28
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
43
29
|
|
|
44
|
-
function
|
|
30
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
|
|
45
31
|
|
|
46
|
-
function
|
|
47
|
-
|
|
48
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
49
|
-
|
|
50
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
32
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
51
33
|
|
|
52
34
|
const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
|
|
53
35
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
36
|
+
const DateRange = ({
|
|
37
|
+
defaultValue,
|
|
38
|
+
endDateProps = {},
|
|
39
|
+
id,
|
|
40
|
+
labelsInline,
|
|
41
|
+
name,
|
|
42
|
+
onBlur,
|
|
43
|
+
onChange,
|
|
44
|
+
startDateProps = {},
|
|
45
|
+
tooltipPosition,
|
|
46
|
+
validationOnLabel,
|
|
47
|
+
value,
|
|
48
|
+
...rest
|
|
49
|
+
}) => {
|
|
50
|
+
const {
|
|
51
|
+
locale,
|
|
52
|
+
date
|
|
53
|
+
} = (0, _react.useContext)(_i18nContext.default);
|
|
54
|
+
const format = date.formats.javascript();
|
|
55
|
+
const formats = date.formats.inputs();
|
|
56
|
+
const localeData = (0, _react.useMemo)(() => ({
|
|
57
|
+
locale: locale(),
|
|
58
|
+
formats,
|
|
59
|
+
format
|
|
60
|
+
}), [format, formats, locale]);
|
|
61
|
+
const inlineLabelWidth = 40;
|
|
62
|
+
|
|
63
|
+
const today = _date2.default.todayFormatted();
|
|
64
|
+
|
|
65
|
+
const isControlled = value !== undefined;
|
|
66
|
+
const startDateInputRef = (0, _react.useRef)();
|
|
67
|
+
const endDateInputRef = (0, _react.useRef)();
|
|
68
|
+
/** The startDate value */
|
|
69
|
+
|
|
70
|
+
const getStartDate = (0, _react.useCallback)(() => {
|
|
71
|
+
const {
|
|
72
|
+
value: startValue
|
|
73
|
+
} = startDateProps;
|
|
74
|
+
const computedValue = isControlled ? value : defaultValue;
|
|
75
|
+
return startValue || computedValue ? computedValue[0] : undefined;
|
|
76
|
+
}, [defaultValue, isControlled, startDateProps, value]);
|
|
77
|
+
/** The endDate value */
|
|
78
|
+
|
|
79
|
+
const getEndDate = (0, _react.useCallback)(() => {
|
|
80
|
+
const {
|
|
81
|
+
value: endValue
|
|
82
|
+
} = endDateProps;
|
|
83
|
+
const computedValue = isControlled ? value : defaultValue;
|
|
84
|
+
return endValue || computedValue ? computedValue[1] : undefined;
|
|
85
|
+
}, [defaultValue, isControlled, endDateProps, value]);
|
|
86
|
+
const [startDateValue, setStartDateValue] = (0, _react.useState)({
|
|
87
|
+
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
88
|
+
value: getStartDate(),
|
|
89
|
+
...localeData
|
|
90
|
+
}),
|
|
91
|
+
rawValue: _date2.default.formatValue({
|
|
92
|
+
value: getStartDate() || (!isControlled ? today : ""),
|
|
93
|
+
...localeData
|
|
94
|
+
})
|
|
95
|
+
});
|
|
96
|
+
const [endDateValue, setEndDateValue] = (0, _react.useState)({
|
|
97
|
+
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
98
|
+
value: getEndDate(),
|
|
99
|
+
...localeData
|
|
100
|
+
}),
|
|
101
|
+
rawValue: _date2.default.formatValue({
|
|
102
|
+
value: getEndDate() || (!isControlled ? today : ""),
|
|
103
|
+
...localeData
|
|
104
|
+
})
|
|
105
|
+
});
|
|
106
|
+
const updateValues = (0, _react.useCallback)(() => {
|
|
107
|
+
setStartDateValue({
|
|
108
|
+
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
109
|
+
value: getStartDate(),
|
|
110
|
+
...localeData
|
|
111
|
+
}),
|
|
112
|
+
rawValue: _date2.default.formatValue({
|
|
113
|
+
value: getStartDate() || today,
|
|
114
|
+
...localeData
|
|
115
|
+
})
|
|
70
116
|
});
|
|
117
|
+
setEndDateValue({
|
|
118
|
+
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
119
|
+
value: getEndDate(),
|
|
120
|
+
...localeData
|
|
121
|
+
}),
|
|
122
|
+
rawValue: _date2.default.formatValue({
|
|
123
|
+
value: getEndDate() || today,
|
|
124
|
+
...localeData
|
|
125
|
+
})
|
|
126
|
+
});
|
|
127
|
+
}, [getEndDate, getStartDate, localeData, today]);
|
|
71
128
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
_defineProperty(_assertThisInitialized(_this), "isBlurBlocked", true);
|
|
129
|
+
function usePrevious(arg) {
|
|
130
|
+
const ref = (0, _react.useRef)();
|
|
131
|
+
(0, _react.useEffect)(() => {
|
|
132
|
+
ref.current = arg;
|
|
133
|
+
});
|
|
134
|
+
return ref.current;
|
|
135
|
+
}
|
|
81
136
|
|
|
82
|
-
|
|
137
|
+
const previousValue = usePrevious(value);
|
|
138
|
+
(0, _react.useEffect)(() => {
|
|
139
|
+
const hasPreviousValues = previousValue === null || previousValue === void 0 ? void 0 : previousValue.length;
|
|
140
|
+
const hasUpdated = isControlled && hasPreviousValues && (value[0] !== previousValue[0] || value[1] !== previousValue[1]);
|
|
83
141
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
142
|
+
if (hasUpdated) {
|
|
143
|
+
updateValues();
|
|
144
|
+
}
|
|
145
|
+
}, [value, previousValue, updateValues, isControlled]);
|
|
146
|
+
const buildCustomEvent = (0, _react.useCallback)((changedDate, newValue) => {
|
|
147
|
+
const startValue = changedDate === "startDate" && newValue ? newValue : startDateValue;
|
|
148
|
+
const endValue = changedDate === "endDate" && newValue ? newValue : endDateValue;
|
|
149
|
+
return {
|
|
150
|
+
target: { ...(name && {
|
|
151
|
+
name
|
|
89
152
|
}),
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
..._this.localeData
|
|
93
|
-
})
|
|
94
|
-
},
|
|
95
|
-
endDateValue: {
|
|
96
|
-
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
97
|
-
value: _this.endDate,
|
|
98
|
-
..._this.localeData
|
|
153
|
+
...(id && {
|
|
154
|
+
id
|
|
99
155
|
}),
|
|
100
|
-
|
|
101
|
-
value: _this.endDate || (!_this.isControlled ? _this.today : ""),
|
|
102
|
-
..._this.localeData
|
|
103
|
-
})
|
|
156
|
+
value: [startValue, endValue]
|
|
104
157
|
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
_defineProperty(_assertThisInitialized(_this), "startDateOnChange", ev => {
|
|
108
|
-
_this._onChange("startDate", ev);
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
_defineProperty(_assertThisInitialized(_this), "endDateOnChange", ev => {
|
|
112
|
-
_this._onChange("endDate", ev);
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
_defineProperty(_assertThisInitialized(_this), "_onChange", (changedDate, ev) => {
|
|
116
|
-
_this.setState({
|
|
117
|
-
[`${changedDate}Value`]: { ...ev.target.value
|
|
118
|
-
}
|
|
119
|
-
}, () => {
|
|
120
|
-
if (_this.props.onChange) {
|
|
121
|
-
const event = _this.buildCustomEvent();
|
|
158
|
+
};
|
|
159
|
+
}, [endDateValue, id, name, startDateValue]);
|
|
122
160
|
|
|
123
|
-
|
|
124
|
-
|
|
161
|
+
const handleOnChange = (changedDate, ev) => {
|
|
162
|
+
if (changedDate === "startDate") {
|
|
163
|
+
setStartDateValue({ ...ev.target.value
|
|
125
164
|
});
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
_defineProperty(_assertThisInitialized(_this), "_onBlur", () => {
|
|
129
|
-
if (_this.isBlurBlocked()) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
if (_this.props.onBlur) {
|
|
134
|
-
const event = _this.buildCustomEvent();
|
|
135
|
-
|
|
136
|
-
_this.props.onBlur(event);
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
_defineProperty(_assertThisInitialized(_this), "isBlurBlocked", () => {
|
|
141
|
-
var _this$startDateInputR, _this$startDateInputR2, _this$startDateInputR3, _this$startDateInputR4, _this$endDateInputRef, _this$endDateInputRef2, _this$endDateInputRef3, _this$endDateInputRef4;
|
|
142
|
-
|
|
143
|
-
const startBlocked = ((_this$startDateInputR = _this.startDateInputRef) === null || _this$startDateInputR === void 0 ? void 0 : (_this$startDateInputR2 = _this$startDateInputR.current) === null || _this$startDateInputR2 === void 0 ? void 0 : _this$startDateInputR2.isBlurBlocked) || ((_this$startDateInputR3 = _this.startDateInputRef) === null || _this$startDateInputR3 === void 0 ? void 0 : (_this$startDateInputR4 = _this$startDateInputR3.current) === null || _this$startDateInputR4 === void 0 ? void 0 : _this$startDateInputR4.inputFocusedViaPicker);
|
|
144
|
-
const endBlocked = ((_this$endDateInputRef = _this.endDateInputRef) === null || _this$endDateInputRef === void 0 ? void 0 : (_this$endDateInputRef2 = _this$endDateInputRef.current) === null || _this$endDateInputRef2 === void 0 ? void 0 : _this$endDateInputRef2.isBlurBlocked) || ((_this$endDateInputRef3 = _this.endDateInputRef) === null || _this$endDateInputRef3 === void 0 ? void 0 : (_this$endDateInputRef4 = _this$endDateInputRef3.current) === null || _this$endDateInputRef4 === void 0 ? void 0 : _this$endDateInputRef4.inputFocusedViaPicker);
|
|
145
|
-
return startBlocked || endBlocked;
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
_defineProperty(_assertThisInitialized(_this), "buildCustomEvent", () => {
|
|
149
|
-
const {
|
|
150
|
-
startDateValue,
|
|
151
|
-
endDateValue
|
|
152
|
-
} = _this.state;
|
|
153
|
-
const {
|
|
154
|
-
name,
|
|
155
|
-
id
|
|
156
|
-
} = _this.props;
|
|
157
|
-
return {
|
|
158
|
-
target: { ...(name && {
|
|
159
|
-
name
|
|
160
|
-
}),
|
|
161
|
-
...(id && {
|
|
162
|
-
id
|
|
163
|
-
}),
|
|
164
|
-
value: [startDateValue, endDateValue]
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
});
|
|
168
|
-
|
|
169
|
-
_defineProperty(_assertThisInitialized(_this), "focusStart", () => {
|
|
170
|
-
_this.blockBlur("start");
|
|
171
|
-
|
|
172
|
-
_this.endDateInputRef.current.closeDatePicker();
|
|
173
|
-
});
|
|
174
|
-
|
|
175
|
-
_defineProperty(_assertThisInitialized(_this), "focusEnd", () => {
|
|
176
|
-
_this.blockBlur("end");
|
|
177
|
-
|
|
178
|
-
_this.startDateInputRef.current.closeDatePicker();
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
_defineProperty(_assertThisInitialized(_this), "blockBlur", id => {
|
|
182
|
-
if (id === "start") {
|
|
183
|
-
_this.startDateInputRef.current.isBlurBlocked = true;
|
|
184
|
-
_this.startDateInputRef.current.inputFocusedViaPicker = true;
|
|
185
|
-
} else {
|
|
186
|
-
_this.endDateInputRef.current.isBlurBlocked = true;
|
|
187
|
-
_this.endDateInputRef.current.inputFocusedViaPicker = true;
|
|
188
|
-
}
|
|
189
|
-
});
|
|
190
|
-
|
|
191
|
-
return _this;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
_createClass(DateRange, [{
|
|
195
|
-
key: "componentDidUpdate",
|
|
196
|
-
value: function componentDidUpdate(prevProps) {
|
|
197
|
-
if (this.hasUpdated(prevProps)) {
|
|
198
|
-
this.updateValues(this.props.value);
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}, {
|
|
202
|
-
key: "hasUpdated",
|
|
203
|
-
value: function hasUpdated(prevProps) {
|
|
204
|
-
return this.isControlled && (this.props.value[0] !== prevProps.value[0] || this.props.value[1] !== prevProps.value[1]);
|
|
205
|
-
}
|
|
206
|
-
}, {
|
|
207
|
-
key: "updateValues",
|
|
208
|
-
value: function updateValues() {
|
|
209
|
-
this.setState({
|
|
210
|
-
startDateValue: {
|
|
211
|
-
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
212
|
-
value: this.startDate,
|
|
213
|
-
...this.localeData
|
|
214
|
-
}),
|
|
215
|
-
rawValue: _date2.default.formatValue({
|
|
216
|
-
value: this.startDate || this.today,
|
|
217
|
-
...this.localeData
|
|
218
|
-
})
|
|
219
|
-
},
|
|
220
|
-
endDateValue: {
|
|
221
|
-
formattedValue: _date2.default.formatDateToCurrentLocale({
|
|
222
|
-
value: this.endDate,
|
|
223
|
-
...this.localeData
|
|
224
|
-
}),
|
|
225
|
-
rawValue: _date2.default.formatValue({
|
|
226
|
-
value: this.endDate || this.today,
|
|
227
|
-
...this.localeData
|
|
228
|
-
})
|
|
229
|
-
}
|
|
165
|
+
} else {
|
|
166
|
+
setEndDateValue({ ...ev.target.value
|
|
230
167
|
});
|
|
231
168
|
}
|
|
232
|
-
}, {
|
|
233
|
-
key: "startDate",
|
|
234
|
-
get:
|
|
235
|
-
/** The startDate value */
|
|
236
|
-
function () {
|
|
237
|
-
const value = this.isControlled ? this.props.value : this.props.defaultValue;
|
|
238
|
-
|
|
239
|
-
if (this.props.startDateProps && this.props.startDateProps.value) {
|
|
240
|
-
return this.props.startDateProps.value;
|
|
241
|
-
}
|
|
242
169
|
|
|
243
|
-
|
|
170
|
+
if (onChange) {
|
|
171
|
+
const event = buildCustomEvent(changedDate, ev.target.value);
|
|
172
|
+
onChange(event);
|
|
244
173
|
}
|
|
245
|
-
|
|
174
|
+
};
|
|
246
175
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
const value = this.isControlled ? this.props.value : this.props.defaultValue;
|
|
176
|
+
const startDateOnChange = ev => {
|
|
177
|
+
handleOnChange("startDate", ev);
|
|
178
|
+
};
|
|
251
179
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
180
|
+
const endDateOnChange = ev => {
|
|
181
|
+
handleOnChange("endDate", ev);
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
const isBlurBlocked = () => {
|
|
185
|
+
var _startDateInputRef$cu, _startDateInputRef$cu2, _endDateInputRef$curr, _endDateInputRef$curr2;
|
|
255
186
|
|
|
256
|
-
|
|
187
|
+
const startBlocked = (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : (_startDateInputRef$cu = startDateInputRef.current) === null || _startDateInputRef$cu === void 0 ? void 0 : _startDateInputRef$cu.isBlurBlocked) || (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : (_startDateInputRef$cu2 = startDateInputRef.current) === null || _startDateInputRef$cu2 === void 0 ? void 0 : _startDateInputRef$cu2.inputFocusedViaPicker);
|
|
188
|
+
const endBlocked = (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : (_endDateInputRef$curr = endDateInputRef.current) === null || _endDateInputRef$curr === void 0 ? void 0 : _endDateInputRef$curr.isBlurBlocked) || (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : (_endDateInputRef$curr2 = endDateInputRef.current) === null || _endDateInputRef$curr2 === void 0 ? void 0 : _endDateInputRef$curr2.inputFocusedViaPicker);
|
|
189
|
+
return startBlocked || endBlocked;
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
const handleOnBlur = () => {
|
|
193
|
+
if (isBlurBlocked()) {
|
|
194
|
+
return;
|
|
257
195
|
}
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
value: function dateProps(propsKey) {
|
|
263
|
-
const dateProps = this.props[`${propsKey}DateProps`] || {};
|
|
264
|
-
return {
|
|
265
|
-
label: this.props[`${propsKey}Label`],
|
|
266
|
-
labelInline: this.props.labelsInline,
|
|
267
|
-
value: this.state[`${propsKey}DateValue`].rawValue,
|
|
268
|
-
error: this.props[`${propsKey}Error`],
|
|
269
|
-
warning: this.props[`${propsKey}Warning`],
|
|
270
|
-
info: this.props[`${propsKey}Info`],
|
|
271
|
-
validationOnLabel: this.props.validationOnLabel,
|
|
272
|
-
onBlur: this._onBlur,
|
|
273
|
-
onChange: this[`${propsKey}DateOnChange`],
|
|
274
|
-
...dateProps
|
|
275
|
-
};
|
|
196
|
+
|
|
197
|
+
if (onBlur) {
|
|
198
|
+
const event = buildCustomEvent();
|
|
199
|
+
onBlur(event);
|
|
276
200
|
}
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
labelWidth: this.inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
|
|
287
|
-
,
|
|
288
|
-
tooltipPosition: this.props.tooltipPosition
|
|
289
|
-
})), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, this.dateProps("end"), {
|
|
290
|
-
onFocus: this.focusEnd,
|
|
291
|
-
"data-element": "end-date",
|
|
292
|
-
ref: this.endDateInputRef,
|
|
293
|
-
labelWidth: this.inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
|
|
294
|
-
,
|
|
295
|
-
tooltipPosition: this.props.tooltipPosition
|
|
296
|
-
})));
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
const blockBlur = blockId => {
|
|
204
|
+
if (blockId === "start") {
|
|
205
|
+
startDateInputRef.current.isBlurBlocked = true;
|
|
206
|
+
startDateInputRef.current.inputFocusedViaPicker = true;
|
|
207
|
+
} else {
|
|
208
|
+
endDateInputRef.current.isBlurBlocked = true;
|
|
209
|
+
endDateInputRef.current.inputFocusedViaPicker = true;
|
|
297
210
|
}
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
const focusStart = () => {
|
|
214
|
+
blockBlur("start");
|
|
215
|
+
endDateInputRef.current.closeDatePicker();
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
const focusEnd = () => {
|
|
219
|
+
blockBlur("end");
|
|
220
|
+
startDateInputRef.current.closeDatePicker();
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const dateProps = propsKey => {
|
|
224
|
+
const props = propsKey === "start" ? startDateProps : endDateProps;
|
|
225
|
+
const {
|
|
226
|
+
rawValue
|
|
227
|
+
} = propsKey === "start" ? startDateValue : endDateValue;
|
|
228
|
+
const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
|
|
229
|
+
return {
|
|
230
|
+
label: rest[`${propsKey}Label`],
|
|
231
|
+
labelInline: labelsInline,
|
|
232
|
+
value: rawValue,
|
|
233
|
+
error: rest[`${propsKey}Error`],
|
|
234
|
+
warning: rest[`${propsKey}Warning`],
|
|
235
|
+
info: rest[`${propsKey}Info`],
|
|
236
|
+
validationOnLabel,
|
|
237
|
+
onBlur: handleOnBlur,
|
|
238
|
+
onChange: onChangeCallback,
|
|
239
|
+
...props
|
|
240
|
+
};
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", rest), {
|
|
244
|
+
labelsInline: labelsInline
|
|
245
|
+
}, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("start"), {
|
|
246
|
+
onFocus: focusStart,
|
|
247
|
+
"data-element": "start-date",
|
|
248
|
+
ref: startDateInputRef,
|
|
249
|
+
labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
|
|
250
|
+
,
|
|
251
|
+
tooltipPosition: tooltipPosition
|
|
252
|
+
})), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("end"), {
|
|
253
|
+
onFocus: focusEnd,
|
|
254
|
+
"data-element": "end-date",
|
|
255
|
+
ref: endDateInputRef,
|
|
256
|
+
labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
|
|
257
|
+
,
|
|
258
|
+
tooltipPosition: tooltipPosition
|
|
259
|
+
})));
|
|
260
|
+
};
|
|
302
261
|
|
|
303
|
-
DateRange.contextType = _i18nContext.default;
|
|
304
262
|
DateRange.propTypes = {
|
|
305
263
|
/** Filtered styled system margin props */
|
|
306
264
|
...marginPropTypes,
|
|
@@ -81,6 +81,6 @@ export interface DateRangeProps extends MarginProps {
|
|
|
81
81
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
declare
|
|
84
|
+
declare function DateRange(props: DateRangeProps): JSX.Element;
|
|
85
85
|
|
|
86
86
|
export default DateRange;
|