@carbon/react 1.3.0-rc.1 → 1.4.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/es/components/Checkbox/Checkbox.Skeleton.js +5 -3
- package/es/components/ComposedModal/next/ComposedModal.js +11 -11
- package/es/components/DatePicker/DatePicker.js +264 -334
- package/es/components/DatePickerInput/DatePickerInput.js +141 -168
- package/es/components/FileUploader/FileUploader.js +3 -3
- package/es/components/FileUploader/FileUploaderButton.js +4 -4
- package/es/components/FileUploader/FileUploaderDropContainer.js +3 -3
- package/es/components/FormGroup/FormGroup.js +1 -2
- package/es/components/IconButton/index.js +2 -2
- package/es/components/MultiSelect/FilterableMultiSelect.js +10 -0
- package/es/components/MultiSelect/next/FilterableMultiSelect.js +11 -0
- package/es/components/RadioButton/RadioButton.js +1 -1
- package/es/components/Slider/Slider.js +11 -0
- package/es/components/StructuredList/next/StructuredList.js +19 -3
- package/es/components/TabContent/TabContent.js +2 -1
- package/es/components/Tabs/next/Tabs.js +31 -25
- package/es/components/UIShell/SideNav.js +1 -1
- package/es/index.js +3 -3
- package/lib/components/Checkbox/Checkbox.Skeleton.js +5 -3
- package/lib/components/ComposedModal/next/ComposedModal.js +11 -11
- package/lib/components/DatePicker/DatePicker.js +261 -331
- package/lib/components/DatePickerInput/DatePickerInput.js +138 -165
- package/lib/components/FileUploader/FileUploader.js +3 -3
- package/lib/components/FileUploader/FileUploaderButton.js +4 -4
- package/lib/components/FileUploader/FileUploaderDropContainer.js +3 -3
- package/lib/components/FormGroup/FormGroup.js +1 -2
- package/lib/components/IconButton/index.js +1 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.js +10 -0
- package/lib/components/MultiSelect/next/FilterableMultiSelect.js +11 -0
- package/lib/components/RadioButton/RadioButton.js +1 -1
- package/lib/components/Slider/Slider.js +11 -0
- package/lib/components/StructuredList/next/StructuredList.js +19 -3
- package/lib/components/TabContent/TabContent.js +2 -1
- package/lib/components/Tabs/next/Tabs.js +31 -25
- package/lib/components/UIShell/SideNav.js +1 -1
- package/lib/index.js +100 -100
- package/package.json +4 -4
- package/es/components/DatePicker/index.js +0 -15
- package/es/components/DatePicker/next/DatePicker.js +0 -562
- package/es/components/DatePickerInput/index.js +0 -15
- package/es/components/DatePickerInput/next/DatePickerInput.js +0 -244
- package/lib/components/DatePicker/index.js +0 -39
- package/lib/components/DatePicker/next/DatePicker.js +0 -573
- package/lib/components/DatePickerInput/index.js +0 -39
- package/lib/components/DatePickerInput/next/DatePickerInput.js +0 -254
|
@@ -1,573 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var PropTypes = require('prop-types');
|
|
14
|
-
var React = require('react');
|
|
15
|
-
var cx = require('classnames');
|
|
16
|
-
var flatpickr = require('flatpickr');
|
|
17
|
-
var index = require('../../../node_modules/flatpickr/dist/l10n/index.js');
|
|
18
|
-
var index$1 = require('../../DatePickerInput/index.js');
|
|
19
|
-
var appendToPlugin = require('../plugins/appendToPlugin.js');
|
|
20
|
-
var fixEventsPlugin = require('../plugins/fixEventsPlugin.js');
|
|
21
|
-
var rangePlugin = require('../plugins/rangePlugin.js');
|
|
22
|
-
var usePrefix = require('../../../internal/usePrefix.js');
|
|
23
|
-
var useSavedCallback = require('../../../internal/useSavedCallback.js');
|
|
24
|
-
var match = require('../../../internal/keyboard/match.js');
|
|
25
|
-
var keys = require('../../../internal/keyboard/keys.js');
|
|
26
|
-
|
|
27
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
28
|
-
|
|
29
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
32
|
-
var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
|
|
33
|
-
|
|
34
|
-
var _excluded = ["allowInput", "appendTo", "children", "className", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
|
|
35
|
-
|
|
36
|
-
index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
|
|
37
|
-
var currentDay = index["default"].en.weekdays.shorthand;
|
|
38
|
-
|
|
39
|
-
if (currentDay[index$1] === 'Thu' || currentDay[index$1] === 'Th') {
|
|
40
|
-
currentDay[index$1] = 'Th';
|
|
41
|
-
} else {
|
|
42
|
-
currentDay[index$1] = currentDay[index$1].charAt(0);
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
var forEach = Array.prototype.forEach;
|
|
46
|
-
/**
|
|
47
|
-
* @param {number} monthNumber The month number.
|
|
48
|
-
* @param {boolean} shorthand `true` to use shorthand month.
|
|
49
|
-
* @param {Locale} locale The Flatpickr locale data.
|
|
50
|
-
* @returns {string} The month string.
|
|
51
|
-
*/
|
|
52
|
-
|
|
53
|
-
var monthToStr = function monthToStr(monthNumber, shorthand, locale) {
|
|
54
|
-
return locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* @param {object} config Plugin configuration.
|
|
58
|
-
* @param {boolean} [config.shorthand] `true` to use shorthand month.
|
|
59
|
-
* @param {string} config.selectorFlatpickrMonthYearContainer The CSS selector for the container of month/year selection UI.
|
|
60
|
-
* @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
|
|
61
|
-
* @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
|
|
62
|
-
* @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
|
|
63
|
-
* @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
|
|
64
|
-
*/
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin(config) {
|
|
68
|
-
return function (fp) {
|
|
69
|
-
var setupElements = function setupElements() {
|
|
70
|
-
var _fp$monthElements;
|
|
71
|
-
|
|
72
|
-
if (!fp.monthElements) {
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
fp.monthElements.forEach(function (elem) {
|
|
77
|
-
if (!elem.parentNode) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
elem.parentNode.removeChild(elem);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
(_fp$monthElements = fp.monthElements).splice.apply(_fp$monthElements, [0, fp.monthElements.length].concat(_rollupPluginBabelHelpers.toConsumableArray(fp.monthElements.map(function () {
|
|
85
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
86
|
-
var monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
|
|
87
|
-
|
|
88
|
-
monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
|
|
89
|
-
fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
|
|
90
|
-
return monthElement;
|
|
91
|
-
}))));
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
var updateCurrentMonth = function updateCurrentMonth() {
|
|
95
|
-
var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
|
|
96
|
-
fp.yearElements.forEach(function (elem) {
|
|
97
|
-
var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
|
|
98
|
-
Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), function (monthElement) {
|
|
99
|
-
monthElement.textContent = monthStr;
|
|
100
|
-
});
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
var register = function register() {
|
|
105
|
-
fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
return {
|
|
109
|
-
onMonthChange: updateCurrentMonth,
|
|
110
|
-
onValueUpdate: updateCurrentMonth,
|
|
111
|
-
onOpen: updateCurrentMonth,
|
|
112
|
-
onReady: [setupElements, updateCurrentMonth, register]
|
|
113
|
-
};
|
|
114
|
-
};
|
|
115
|
-
};
|
|
116
|
-
/**
|
|
117
|
-
* Determine if every child in a list of children has no label specified
|
|
118
|
-
* @param {Array<ReactElement>} children
|
|
119
|
-
* @returns {boolean}
|
|
120
|
-
*/
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
function isLabelTextEmpty(children) {
|
|
124
|
-
return children.every(function (child) {
|
|
125
|
-
return !child.props.labelText;
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
var rightArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n</svg>";
|
|
130
|
-
var leftArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n</svg>";
|
|
131
|
-
|
|
132
|
-
function updateClassNames(calendar, prefix) {
|
|
133
|
-
var calendarContainer = calendar.calendarContainer;
|
|
134
|
-
var daysContainer = calendar.days;
|
|
135
|
-
|
|
136
|
-
if (calendarContainer && daysContainer) {
|
|
137
|
-
// calendarContainer and daysContainer are undefined if flatpickr detects a mobile device
|
|
138
|
-
calendarContainer.classList.add("".concat(prefix, "--date-picker__calendar"));
|
|
139
|
-
calendarContainer.querySelector('.flatpickr-month').classList.add("".concat(prefix, "--date-picker__month"));
|
|
140
|
-
calendarContainer.querySelector('.flatpickr-weekdays').classList.add("".concat(prefix, "--date-picker__weekdays"));
|
|
141
|
-
calendarContainer.querySelector('.flatpickr-days').classList.add("".concat(prefix, "--date-picker__days"));
|
|
142
|
-
forEach.call(calendarContainer.querySelectorAll('.flatpickr-weekday'), function (item) {
|
|
143
|
-
var currentItem = item;
|
|
144
|
-
currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
|
|
145
|
-
currentItem.classList.add("".concat(prefix, "--date-picker__weekday"));
|
|
146
|
-
});
|
|
147
|
-
forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), function (item) {
|
|
148
|
-
item.classList.add("".concat(prefix, "--date-picker__day"));
|
|
149
|
-
|
|
150
|
-
if (item.classList.contains('today') && calendar.selectedDates.length > 0) {
|
|
151
|
-
item.classList.add('no-border');
|
|
152
|
-
} else if (item.classList.contains('today') && calendar.selectedDates.length === 0) {
|
|
153
|
-
item.classList.remove('no-border');
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
function DatePicker(_ref) {
|
|
160
|
-
var _cx;
|
|
161
|
-
|
|
162
|
-
var allowInput = _ref.allowInput,
|
|
163
|
-
appendTo = _ref.appendTo,
|
|
164
|
-
children = _ref.children,
|
|
165
|
-
className = _ref.className,
|
|
166
|
-
_ref$dateFormat = _ref.dateFormat,
|
|
167
|
-
dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
|
|
168
|
-
datePickerType = _ref.datePickerType,
|
|
169
|
-
disable = _ref.disable,
|
|
170
|
-
enable = _ref.enable,
|
|
171
|
-
inline = _ref.inline,
|
|
172
|
-
_ref$light = _ref.light,
|
|
173
|
-
light = _ref$light === void 0 ? false : _ref$light,
|
|
174
|
-
_ref$locale = _ref.locale,
|
|
175
|
-
locale = _ref$locale === void 0 ? 'en' : _ref$locale,
|
|
176
|
-
maxDate = _ref.maxDate,
|
|
177
|
-
minDate = _ref.minDate,
|
|
178
|
-
onChange = _ref.onChange,
|
|
179
|
-
onClose = _ref.onClose,
|
|
180
|
-
onOpen = _ref.onOpen,
|
|
181
|
-
_ref$short = _ref.short,
|
|
182
|
-
short = _ref$short === void 0 ? false : _ref$short,
|
|
183
|
-
value = _ref.value,
|
|
184
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
185
|
-
|
|
186
|
-
var prefix = usePrefix.usePrefix();
|
|
187
|
-
var startInputField = React.useRef(null);
|
|
188
|
-
var endInputField = React.useRef(null);
|
|
189
|
-
var calendarRef = React.useRef(null);
|
|
190
|
-
var savedOnChange = useSavedCallback.useSavedCallback(onChange);
|
|
191
|
-
var savedOnClose = useSavedCallback.useSavedCallback(onClose);
|
|
192
|
-
var savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
|
|
193
|
-
var datePickerClasses = cx__default["default"]("".concat(prefix, "--date-picker"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--short"), short), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--simple"), datePickerType === 'simple'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--single"), datePickerType === 'single'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--range"), datePickerType === 'range'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--nolabel"), datePickerType === 'range' && isLabelTextEmpty(children)), _cx));
|
|
194
|
-
var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
|
|
195
|
-
var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child, index) {
|
|
196
|
-
if (index === 0 && child.type === React__default["default"].createElement(index$1["default"], child.props).type) {
|
|
197
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
198
|
-
datePickerType: datePickerType,
|
|
199
|
-
ref: startInputField,
|
|
200
|
-
openCalendar: function openCalendar() {
|
|
201
|
-
if (calendarRef.current) {
|
|
202
|
-
calendarRef.current.open();
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
if (index === 1 && child.type === React__default["default"].createElement(index$1["default"], child.props).type) {
|
|
209
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
210
|
-
datePickerType: datePickerType,
|
|
211
|
-
ref: endInputField,
|
|
212
|
-
openCalendar: function openCalendar() {
|
|
213
|
-
if (calendarRef.current) {
|
|
214
|
-
calendarRef.current.open();
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
if (index === 0) {
|
|
221
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
222
|
-
ref: startInputField
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
if (index === 1) {
|
|
227
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
228
|
-
ref: endInputField
|
|
229
|
-
});
|
|
230
|
-
}
|
|
231
|
-
});
|
|
232
|
-
React.useEffect(function () {
|
|
233
|
-
var _flatpickr;
|
|
234
|
-
|
|
235
|
-
if (datePickerType !== 'single' && datePickerType !== 'range') {
|
|
236
|
-
return;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
if (startInputField.current === null) {
|
|
240
|
-
return;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
var onHook = function onHook(_electedDates, _dateStr, instance, prefix) {
|
|
244
|
-
updateClassNames(instance, prefix);
|
|
245
|
-
}; // Logic to determine if `enable` or `disable` will be passed down. If neither
|
|
246
|
-
// is provided, we return the default empty disabled array, allowing all dates.
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
var enableOrDisable = enable ? 'enable' : 'disable';
|
|
250
|
-
var enableOrDisableArr;
|
|
251
|
-
|
|
252
|
-
if (!enable && !disable) {
|
|
253
|
-
enableOrDisableArr = [];
|
|
254
|
-
} else if (enable) {
|
|
255
|
-
enableOrDisableArr = enable;
|
|
256
|
-
} else {
|
|
257
|
-
enableOrDisableArr = disable;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
var localeData;
|
|
261
|
-
|
|
262
|
-
if (_rollupPluginBabelHelpers["typeof"](locale) === 'object') {
|
|
263
|
-
var location = locale.locale ? locale.locale : 'en';
|
|
264
|
-
localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, index["default"][location]), locale);
|
|
265
|
-
} else {
|
|
266
|
-
localeData = index["default"][locale];
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
var start = startInputField.current;
|
|
270
|
-
var end = endInputField.current;
|
|
271
|
-
var calendar = new flatpickr__default["default"](start, (_flatpickr = {
|
|
272
|
-
inline: inline !== null && inline !== void 0 ? inline : false,
|
|
273
|
-
disableMobile: true,
|
|
274
|
-
defaultDate: value,
|
|
275
|
-
mode: datePickerType,
|
|
276
|
-
allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
|
|
277
|
-
dateFormat: dateFormat,
|
|
278
|
-
locale: localeData
|
|
279
|
-
}, _rollupPluginBabelHelpers.defineProperty(_flatpickr, enableOrDisable, enableOrDisableArr), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "minDate", minDate), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "maxDate", maxDate), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "plugins", [datePickerType === 'range' ? new rangePlugin["default"]({
|
|
280
|
-
input: endInputField.current
|
|
281
|
-
}) : function () {}, appendTo ? appendToPlugin["default"]({
|
|
282
|
-
appendTo: appendTo
|
|
283
|
-
}) : function () {}, carbonFlatpickrMonthSelectPlugin({
|
|
284
|
-
selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
|
|
285
|
-
selectorFlatpickrYearContainer: '.numInputWrapper',
|
|
286
|
-
selectorFlatpickrCurrentMonth: '.cur-month',
|
|
287
|
-
classFlatpickrCurrentMonth: 'cur-month'
|
|
288
|
-
}), fixEventsPlugin["default"]({
|
|
289
|
-
inputFrom: startInputField.current,
|
|
290
|
-
inputTo: endInputField.current
|
|
291
|
-
})]), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "clickOpens", true), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onChange", function onChange() {
|
|
292
|
-
if (savedOnChange) {
|
|
293
|
-
savedOnChange.apply(void 0, arguments);
|
|
294
|
-
}
|
|
295
|
-
}), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onClose", savedOnClose), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onReady", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onMonthChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onYearChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onOpen", function onOpen() {
|
|
296
|
-
onHook.apply(void 0, arguments);
|
|
297
|
-
savedOnOpen.apply(void 0, arguments);
|
|
298
|
-
}), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onValueUpdate", onHook), _flatpickr));
|
|
299
|
-
calendarRef.current = calendar;
|
|
300
|
-
|
|
301
|
-
function handleArrowDown(event) {
|
|
302
|
-
if (match.match(event, keys.ArrowDown)) {
|
|
303
|
-
var calendarContainer = calendar.calendarContainer,
|
|
304
|
-
fpSelectedDateElem = calendar.selectedDateElem,
|
|
305
|
-
fptodayDateElem = calendar.todayDateElem;
|
|
306
|
-
var selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
|
|
307
|
-
var todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
|
|
308
|
-
(selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
function handleOnChange() {
|
|
313
|
-
if (start.value !== '') {
|
|
314
|
-
return;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
if (!calendar.selectedDates) {
|
|
318
|
-
return;
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
if (calendar.selectedDates.length === 0) {
|
|
322
|
-
return;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
calendar.clear();
|
|
326
|
-
calendar.input.focus();
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
if (start) {
|
|
330
|
-
start.addEventListener('keydown', handleArrowDown);
|
|
331
|
-
start.addEventListener('change', handleOnChange); // Flatpickr's calendar dialog is not rendered in a landmark causing an
|
|
332
|
-
// error with IBM Equal Access Accessibility Checker so we add an aria
|
|
333
|
-
// role to the container div.
|
|
334
|
-
|
|
335
|
-
calendar.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
|
|
336
|
-
|
|
337
|
-
calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
if (end) {
|
|
341
|
-
end.addEventListener('keydown', handleArrowDown);
|
|
342
|
-
end.addEventListener('change', handleOnChange);
|
|
343
|
-
} //component did unmount equivalent
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
return function () {
|
|
347
|
-
// Note: if the `startInputField` ref is undefined then calendar will be
|
|
348
|
-
// of type: Array and `destroy` will not be defined
|
|
349
|
-
if (calendar && calendar.destroy) {
|
|
350
|
-
calendar.destroy();
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
if (start) {
|
|
354
|
-
start.removeEventListener('keydown', handleArrowDown);
|
|
355
|
-
start.removeEventListener('change', handleOnChange);
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
if (end) {
|
|
359
|
-
end.removeEventListener('keydown', handleArrowDown);
|
|
360
|
-
end.removeEventListener('change', handleOnChange);
|
|
361
|
-
}
|
|
362
|
-
};
|
|
363
|
-
}, [savedOnChange, savedOnClose, savedOnOpen]); //eslint-disable-line react-hooks/exhaustive-deps
|
|
364
|
-
|
|
365
|
-
React.useEffect(function () {
|
|
366
|
-
if (calendarRef.current) {
|
|
367
|
-
calendarRef.current.set({
|
|
368
|
-
dateFormat: dateFormat
|
|
369
|
-
});
|
|
370
|
-
}
|
|
371
|
-
}, [dateFormat]);
|
|
372
|
-
React.useEffect(function () {
|
|
373
|
-
if (calendarRef.current && minDate) {
|
|
374
|
-
calendarRef.current.set('minDate', minDate);
|
|
375
|
-
}
|
|
376
|
-
}, [minDate]);
|
|
377
|
-
React.useEffect(function () {
|
|
378
|
-
if (calendarRef.current && maxDate) {
|
|
379
|
-
calendarRef.current.set('maxDate', maxDate);
|
|
380
|
-
}
|
|
381
|
-
}, [maxDate]);
|
|
382
|
-
React.useEffect(function () {
|
|
383
|
-
if (calendarRef.current && disable) {
|
|
384
|
-
calendarRef.current.set('disbale', disable);
|
|
385
|
-
}
|
|
386
|
-
}, [disable]);
|
|
387
|
-
React.useEffect(function () {
|
|
388
|
-
if (calendarRef.current && enable) {
|
|
389
|
-
calendarRef.current.set('enable', enable);
|
|
390
|
-
}
|
|
391
|
-
}, [enable]);
|
|
392
|
-
React.useEffect(function () {
|
|
393
|
-
if (calendarRef.current && inline) {
|
|
394
|
-
calendarRef.current.set('inline', inline);
|
|
395
|
-
}
|
|
396
|
-
}, [inline]);
|
|
397
|
-
React.useEffect(function () {
|
|
398
|
-
if (calendarRef.current) {
|
|
399
|
-
calendarRef.current.set({
|
|
400
|
-
value: value
|
|
401
|
-
});
|
|
402
|
-
updateClassNames(calendarRef.current, prefix); //for simple date picker w/o calendar; initial mount may not have value
|
|
403
|
-
} else if (!calendarRef.current && value) {
|
|
404
|
-
startInputField.current.value = value;
|
|
405
|
-
}
|
|
406
|
-
}, [value, prefix]);
|
|
407
|
-
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
|
408
|
-
className: wrapperClasses
|
|
409
|
-
}, rest), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
410
|
-
className: datePickerClasses
|
|
411
|
-
}, childrenWithProps));
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
DatePicker.propTypes = {
|
|
415
|
-
/**
|
|
416
|
-
* flatpickr prop passthrough. Allows the user to enter a date directly
|
|
417
|
-
* into the input field
|
|
418
|
-
*/
|
|
419
|
-
allowInput: PropTypes__default["default"].bool,
|
|
420
|
-
|
|
421
|
-
/**
|
|
422
|
-
* The DOM element the Flatpicker should be inserted into. `<body>` by default.
|
|
423
|
-
*/
|
|
424
|
-
appendTo: PropTypes__default["default"].object,
|
|
425
|
-
|
|
426
|
-
/**
|
|
427
|
-
* The child nodes.
|
|
428
|
-
*/
|
|
429
|
-
children: PropTypes__default["default"].node,
|
|
430
|
-
|
|
431
|
-
/**
|
|
432
|
-
* The CSS class names.
|
|
433
|
-
*/
|
|
434
|
-
className: PropTypes__default["default"].string,
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* The date format.
|
|
438
|
-
*/
|
|
439
|
-
dateFormat: PropTypes__default["default"].string,
|
|
440
|
-
|
|
441
|
-
/**
|
|
442
|
-
* The type of the date picker:
|
|
443
|
-
*
|
|
444
|
-
* * `simple` - Without calendar dropdown.
|
|
445
|
-
* * `single` - With calendar dropdown and single date.
|
|
446
|
-
* * `range` - With calendar dropdown and a date range.
|
|
447
|
-
*/
|
|
448
|
-
datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range']),
|
|
449
|
-
|
|
450
|
-
/**
|
|
451
|
-
* The flatpickr `disable` option that allows a user to disable certain dates.
|
|
452
|
-
*/
|
|
453
|
-
disable: PropTypes__default["default"].array,
|
|
454
|
-
|
|
455
|
-
/**
|
|
456
|
-
* The flatpickr `enable` option that allows a user to enable certain dates.
|
|
457
|
-
*/
|
|
458
|
-
enable: PropTypes__default["default"].array,
|
|
459
|
-
|
|
460
|
-
/**
|
|
461
|
-
* The flatpickr `inline` option.
|
|
462
|
-
*/
|
|
463
|
-
inline: PropTypes__default["default"].bool,
|
|
464
|
-
|
|
465
|
-
/**
|
|
466
|
-
* `true` to use the light version.
|
|
467
|
-
*/
|
|
468
|
-
light: PropTypes__default["default"].bool,
|
|
469
|
-
|
|
470
|
-
/**
|
|
471
|
-
* The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
|
|
472
|
-
*/
|
|
473
|
-
locale: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].oneOf(['ar', // Arabic
|
|
474
|
-
'at', // Austria
|
|
475
|
-
'az', // Azerbaijan
|
|
476
|
-
'be', // Belarusian
|
|
477
|
-
'bg', // Bulgarian
|
|
478
|
-
'bn', // Bangla
|
|
479
|
-
'bs', // Bosnia
|
|
480
|
-
'cat', // Catalan
|
|
481
|
-
'cs', // Czech
|
|
482
|
-
'cy', // Welsh
|
|
483
|
-
'da', // Danish
|
|
484
|
-
'de', // German
|
|
485
|
-
'en', // English
|
|
486
|
-
'eo', // Esperanto
|
|
487
|
-
'es', // Spanish
|
|
488
|
-
'et', // Estonian
|
|
489
|
-
'fa', // Persian
|
|
490
|
-
'fi', // Finnish
|
|
491
|
-
'fo', // Faroese
|
|
492
|
-
'fr', // French
|
|
493
|
-
'ga', // Gaelic
|
|
494
|
-
'gr', // Greek
|
|
495
|
-
'he', // Hebrew
|
|
496
|
-
'hi', // Hindi
|
|
497
|
-
'hr', // Croatian
|
|
498
|
-
'hu', // Hungarian
|
|
499
|
-
'id', // Indonesian
|
|
500
|
-
'is', // Icelandic
|
|
501
|
-
'it', // Italian
|
|
502
|
-
'ja', // Japanese
|
|
503
|
-
'ka', // Georgian
|
|
504
|
-
'km', // Khmer
|
|
505
|
-
'ko', // Korean
|
|
506
|
-
'kz', // Kazakh
|
|
507
|
-
'lt', // Lithuanian
|
|
508
|
-
'lv', // Latvian
|
|
509
|
-
'mk', // Macedonian
|
|
510
|
-
'mn', // Mongolian
|
|
511
|
-
'ms', // Malaysian
|
|
512
|
-
'my', // Burmese
|
|
513
|
-
'nl', // Dutch
|
|
514
|
-
'no', // Norwegian
|
|
515
|
-
'pa', // Punjabi
|
|
516
|
-
'pl', // Polish
|
|
517
|
-
'pt', // Portuguese
|
|
518
|
-
'ro', // Romanian
|
|
519
|
-
'ru', // Russian
|
|
520
|
-
'si', // Sinhala
|
|
521
|
-
'sk', // Slovak
|
|
522
|
-
'sl', // Slovenian
|
|
523
|
-
'sq', // Albanian
|
|
524
|
-
'sr', // Serbian
|
|
525
|
-
'sv', // Swedish
|
|
526
|
-
'th', // Thai
|
|
527
|
-
'tr', // Turkish
|
|
528
|
-
'uk', // Ukrainian
|
|
529
|
-
'uz', // Uzbek
|
|
530
|
-
'uz_latn', // Uzbek Latin
|
|
531
|
-
'vn', // Vietnamese
|
|
532
|
-
'zh_tw', // Mandarin Traditional
|
|
533
|
-
'zh' // Mandarin
|
|
534
|
-
])]),
|
|
535
|
-
|
|
536
|
-
/**
|
|
537
|
-
* The maximum date that a user can pick to.
|
|
538
|
-
*/
|
|
539
|
-
maxDate: PropTypes__default["default"].string,
|
|
540
|
-
|
|
541
|
-
/**
|
|
542
|
-
* The minimum date that a user can start picking from.
|
|
543
|
-
*/
|
|
544
|
-
minDate: PropTypes__default["default"].string,
|
|
545
|
-
|
|
546
|
-
/**
|
|
547
|
-
* The `change` event handler.
|
|
548
|
-
*/
|
|
549
|
-
onChange: PropTypes__default["default"].func,
|
|
550
|
-
|
|
551
|
-
/**
|
|
552
|
-
* The `close` event handler.
|
|
553
|
-
*/
|
|
554
|
-
onClose: PropTypes__default["default"].func,
|
|
555
|
-
|
|
556
|
-
/**
|
|
557
|
-
* The `open` event handler.
|
|
558
|
-
*/
|
|
559
|
-
onOpen: PropTypes__default["default"].func,
|
|
560
|
-
|
|
561
|
-
/**
|
|
562
|
-
* `true` to use the short version.
|
|
563
|
-
*/
|
|
564
|
-
short: PropTypes__default["default"].bool,
|
|
565
|
-
|
|
566
|
-
/**
|
|
567
|
-
* The value of the date value provided to flatpickr, could
|
|
568
|
-
* be a date, a date number, a date string, an array of dates.
|
|
569
|
-
*/
|
|
570
|
-
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])), PropTypes__default["default"].object, PropTypes__default["default"].number])
|
|
571
|
-
};
|
|
572
|
-
|
|
573
|
-
exports["default"] = DatePicker;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var FeatureFlags = require('@carbon/feature-flags');
|
|
13
|
-
var DatePickerInput$2 = require('./next/DatePickerInput.js');
|
|
14
|
-
var DatePickerInput$3 = require('./DatePickerInput.js');
|
|
15
|
-
|
|
16
|
-
function _interopNamespace(e) {
|
|
17
|
-
if (e && e.__esModule) return e;
|
|
18
|
-
var n = Object.create(null);
|
|
19
|
-
if (e) {
|
|
20
|
-
Object.keys(e).forEach(function (k) {
|
|
21
|
-
if (k !== 'default') {
|
|
22
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
23
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
24
|
-
enumerable: true,
|
|
25
|
-
get: function () { return e[k]; }
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
n["default"] = e;
|
|
31
|
-
return Object.freeze(n);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
|
|
35
|
-
|
|
36
|
-
var DatePickerInput = FeatureFlags__namespace.enabled('enable-v11-release') ? DatePickerInput$2["default"] : DatePickerInput$3["default"];
|
|
37
|
-
var DatePickerInput$1 = DatePickerInput;
|
|
38
|
-
|
|
39
|
-
exports["default"] = DatePickerInput$1;
|