@coreui/react-pro
Version:
UI Components Library for React.js
230 lines (226 loc) • 21.1 kB
JavaScript
'use strict';
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var index = require('../../node_modules/classnames/index.js');
var PropTypes = require('prop-types');
var lib = require('../../node_modules/react-device-detect/dist/lib.js');
var CButton = require('../button/CButton.js');
var CCalendar = require('../calendar/CCalendar.js');
var CFormControlWrapper = require('../form/CFormControlWrapper.js');
var CPicker = require('../picker/CPicker.js');
var CTimePicker = require('../time-picker/CTimePicker.js');
var useDebouncedCallback = require('../../hooks/useDebouncedCallback.js');
require('@popperjs/core');
var utils = require('./utils.js');
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var CDateRangePicker = React.forwardRef(function (_a, ref) {
var _b;
var ariaNavNextMonthLabel = _a.ariaNavNextMonthLabel, ariaNavNextYearLabel = _a.ariaNavNextYearLabel, ariaNavPrevMonthLabel = _a.ariaNavPrevMonthLabel, ariaNavPrevYearLabel = _a.ariaNavPrevYearLabel, _c = _a.calendars, calendars = _c === void 0 ? 2 : _c, calendarDate = _a.calendarDate, _d = _a.cancelButton, cancelButton = _d === void 0 ? 'Cancel' : _d, _e = _a.cancelButtonColor, cancelButtonColor = _e === void 0 ? 'primary' : _e, _f = _a.cancelButtonSize, cancelButtonSize = _f === void 0 ? 'sm' : _f, _g = _a.cancelButtonVariant, cancelButtonVariant = _g === void 0 ? 'ghost' : _g, className = _a.className, _h = _a.cleaner, cleaner = _h === void 0 ? true : _h, _j = _a.closeOnSelect, closeOnSelect = _j === void 0 ? true : _j, _k = _a.confirmButton, confirmButton = _k === void 0 ? 'OK' : _k, _l = _a.confirmButtonColor, confirmButtonColor = _l === void 0 ? 'primary' : _l, _m = _a.confirmButtonSize, confirmButtonSize = _m === void 0 ? 'sm' : _m, confirmButtonVariant = _a.confirmButtonVariant, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, footer = _a.footer, id = _a.id, _o = _a.indicator, indicator = _o === void 0 ? true : _o, inputDateFormat = _a.inputDateFormat, inputDateParse = _a.inputDateParse, _p = _a.inputOnChangeDelay, inputOnChangeDelay = _p === void 0 ? 750 : _p, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _q = _a.locale, locale = _q === void 0 ? 'default' : _q, maxDate = _a.maxDate, minDate = _a.minDate, name = _a.name, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _r = _a.placeholder, placeholder = _r === void 0 ? ['Start date', 'End date'] : _r, _s = _a.range, range = _s === void 0 ? true : _s, ranges = _a.ranges, _t = _a.rangesButtonsColor, rangesButtonsColor = _t === void 0 ? 'secondary' : _t, rangesButtonsSize = _a.rangesButtonsSize, _u = _a.rangesButtonsVariant, rangesButtonsVariant = _u === void 0 ? 'ghost' : _u, required = _a.required, _v = _a.separator, separator = _v === void 0 ? true : _v, selectAdjacementDays = _a.selectAdjacementDays, _w = _a.selectionType, selectionType = _w === void 0 ? 'day' : _w, showAdjacementDays = _a.showAdjacementDays, showWeekNumber = _a.showWeekNumber, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _x = _a.todayButton, todayButton = _x === void 0 ? 'Today' : _x, _y = _a.todayButtonColor, todayButtonColor = _y === void 0 ? 'primary' : _y, _z = _a.todayButtonSize, todayButtonSize = _z === void 0 ? 'sm' : _z, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, weekNumbersLabel = _a.weekNumbersLabel, rest = tslib_es6.__rest(_a, ["ariaNavNextMonthLabel", "ariaNavNextYearLabel", "ariaNavPrevMonthLabel", "ariaNavPrevYearLabel", "calendars", "calendarDate", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "closeOnSelect", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "footer", "id", "indicator", "inputDateFormat", "inputDateParse", "inputOnChangeDelay", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "name", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "selectAdjacementDays", "selectionType", "showAdjacementDays", "showWeekNumber", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat", "weekNumbersLabel"]);
var inputEndRef = React.useRef(null);
var inputStartRef = React.useRef(null);
var formRef = React.useRef();
var _0 = React.useState(calendarDate !== null && calendarDate !== void 0 ? calendarDate : null), _calendarDate = _0[0], setCalendarDate = _0[1];
var _1 = React.useState(endDate !== null && endDate !== void 0 ? endDate : null), _endDate = _1[0], setEndDate = _1[1];
var _2 = React.useState(maxDate !== null && maxDate !== void 0 ? maxDate : null), _maxDate = _2[0], setMaxDate = _2[1];
var _3 = React.useState(minDate !== null && minDate !== void 0 ? minDate : null), _minDate = _3[0], setMinDate = _3[1];
var _4 = React.useState(startDate !== null && startDate !== void 0 ? startDate : null), _startDate = _4[0], setStartDate = _4[1];
var _5 = React.useState(visible), _visible = _5[0], setVisible = _5[1];
var _6 = React.useState(startDate !== null && startDate !== void 0 ? startDate : null), initialStartDate = _6[0], setInitialStartDate = _6[1];
var _7 = React.useState(endDate !== null && endDate !== void 0 ? endDate : null), initialEndDate = _7[0], setInitialEndDate = _7[1];
var _8 = React.useState(null), inputStartHoverValue = _8[0], setInputStartHoverValue = _8[1];
var _9 = React.useState(null), inputEndHoverValue = _9[0], setInputEndHoverValue = _9[1];
var _10 = React.useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _10[0], setIsValid = _10[1];
var _11 = React.useState(false), selectEndDate = _11[0], setSelectEndDate = _11[1];
React.useEffect(function () {
setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
}, [valid, invalid]);
React.useEffect(function () {
setStartDate(startDate ? startDate : null);
setCalendarDate(startDate ? startDate : null);
}, [startDate]);
React.useEffect(function () {
setEndDate(endDate ? endDate : null);
range && setCalendarDate(endDate ? endDate : null);
}, [endDate]);
React.useEffect(function () {
maxDate && setMaxDate(maxDate);
}, [maxDate]);
React.useEffect(function () {
minDate && setMinDate(minDate);
}, [minDate]);
React.useEffect(function () {
if (inputStartHoverValue) {
setInputValue(inputStartRef.current, inputStartHoverValue);
return;
}
setInputValue(inputStartRef.current, _startDate);
}, [inputStartHoverValue, _startDate]);
React.useEffect(function () {
if (inputEndHoverValue) {
setInputValue(inputEndRef.current, inputEndHoverValue);
return;
}
setInputValue(inputEndRef.current, _endDate);
}, [inputEndHoverValue, _endDate]);
React.useEffect(function () {
if (inputStartRef.current && inputStartRef.current.form) {
formRef.current = inputStartRef.current.form;
}
}, [inputStartRef]);
React.useEffect(function () {
if (formRef.current) {
formRef.current.addEventListener('submit', function (event) {
setTimeout(function () { return handleFormValidation(event.target); });
});
handleFormValidation(formRef.current);
}
}, [formRef, _startDate, _endDate]);
var formatDate = function (date) {
if (selectionType !== 'day') {
return date;
}
var _date = new Date(date);
return inputDateFormat
? inputDateFormat(_date)
: timepicker
? _date.toLocaleString(locale)
: _date.toLocaleDateString(locale);
};
var setInputValue = function (el, date) {
if (!el) {
return;
}
if (date) {
el.value = formatDate(date);
return;
}
el.value = '';
};
var handleDateHover = function (date) {
selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date);
};
var handleClear = function (event) {
event.stopPropagation();
setStartDate(null);
setEndDate(null);
};
var handleEndDateChange = function (date) {
setEndDate(date);
setInputEndHoverValue(null);
onEndDateChange && onEndDateChange(date);
if (timepicker || footer) {
return;
}
if (closeOnSelect) {
_startDate !== null && setVisible(false);
}
};
var handleFormValidation = function (form) {
if (!form.classList.contains('was-validated')) {
return;
}
if ((range && _startDate && _endDate) || (!range && _startDate)) {
return setIsValid(true);
}
setIsValid(false);
};
var handleStartDateChange = function (date) {
setStartDate(date);
setInputStartHoverValue(null);
onStartDateChange && onStartDateChange(date);
if (timepicker || footer) {
return;
}
if (closeOnSelect && !range) {
setVisible(false);
}
};
var handleOnChange = useDebouncedCallback.useDebouncedCallback(function (value, input) {
var date = inputDateParse
? inputDateParse(value)
: utils.getLocalDateFromString(value, locale, timepicker);
if (date instanceof Date && date.getTime()) {
setCalendarDate(date);
input === 'start' ? setStartDate(date) : setEndDate(date);
}
}, inputOnChangeDelay);
var InputGroup = function () { return (React.createElement("div", { className: "date-picker-input-group" },
React.createElement("input", tslib_es6.__assign({ autoComplete: "off", className: index.default('date-picker-input', {
hover: inputStartHoverValue,
}), disabled: disabled }, (id && { id: utils.getInputIdOrName(id, range, 'start') }), (name && { name: utils.getInputIdOrName(name, range, 'start') }), (id &&
!Array.isArray(id) &&
!name && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly, required: required, onChange: function (event) {
handleOnChange(event.target.value, 'start');
}, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef })),
range && separator !== false && React.createElement("div", { className: "date-picker-separator" }),
range && (React.createElement("input", tslib_es6.__assign({ autoComplete: "off", className: index.default('date-picker-input', {
hover: inputEndHoverValue,
}), disabled: disabled }, (id && { id: utils.getInputIdOrName(id, range, 'end') }), (name && { name: utils.getInputIdOrName(name, range, 'end') }), (id && !Array.isArray(id) && !name && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly, required: required, onChange: function (event) {
handleOnChange(event.target.value, 'end');
}, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef }))),
indicator &&
(typeof indicator === 'boolean' ? React.createElement("div", { className: "date-picker-indicator" }) : indicator),
cleaner &&
(_startDate || _endDate) &&
(typeof cleaner === 'boolean' ? (React.createElement("div", { className: "date-picker-cleaner", onClick: function (event) { return handleClear(event); } })) : (React.isValidElement(cleaner) &&
React.cloneElement(cleaner, {
onClick: function (event) { return handleClear(event); },
}))))); };
return (React.createElement(CFormControlWrapper.CFormControlWrapper, tslib_es6.__assign({ describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid }, (id && !Array.isArray(id) && { id: id }), { invalid: isValid === false ? true : false, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: isValid }),
React.createElement(CPicker.CPicker, tslib_es6.__assign({ className: index.default('date-picker', (_b = {},
_b["date-picker-".concat(size)] = size,
_b.disabled = disabled,
_b['is-invalid'] = isValid === false ? true : false,
_b['is-valid'] = isValid,
_b), className), disabled: disabled, dropdownClassNames: "date-picker-dropdown", footer: footer || timepicker, footerContent: React.createElement("div", { className: "date-picker-footer" },
todayButton && (React.createElement(CButton.CButton, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
var date = new Date();
handleStartDateChange(date);
range && handleEndDateChange(date);
setCalendarDate(date);
} }, todayButton)),
cancelButton && (React.createElement(CButton.CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () {
handleStartDateChange(initialStartDate);
range && handleEndDateChange(initialEndDate);
setVisible(false);
} }, cancelButton)),
confirmButton && (React.createElement(CButton.CButton, { color: confirmButtonColor, size: confirmButtonSize, variant: confirmButtonVariant, onClick: function () {
setVisible(false);
} }, confirmButton))), toggler: toggler !== null && toggler !== void 0 ? toggler : InputGroup(), onHide: function () {
setVisible(false);
onHide && onHide();
}, onShow: function () {
setInitialStartDate(_startDate);
setInitialEndDate(_endDate);
setVisible(true);
onShow && onShow();
}, visible: _visible }, rest, { ref: ref }),
React.createElement("div", { className: "date-picker-body" },
ranges && (React.createElement("div", { className: "date-picker-ranges" }, Object.keys(ranges).map(function (key, index) { return (React.createElement(CButton.CButton, { color: rangesButtonsColor, key: index, onClick: function () {
handleStartDateChange(ranges[key][0]);
handleEndDateChange(ranges[key][1]);
}, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
React.createElement(CCalendar.CCalendar, { ariaNavNextMonthLabel: ariaNavNextMonthLabel, ariaNavNextYearLabel: ariaNavNextYearLabel, ariaNavPrevMonthLabel: ariaNavPrevMonthLabel, ariaNavPrevYearLabel: ariaNavPrevYearLabel, calendarDate: _calendarDate, calendars: lib.isMobile ? 1 : calendars, className: "date-picker-calendars", dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, locale: locale, maxDate: _maxDate, minDate: _minDate, navigation: navigation, navYearFirst: navYearFirst, range: range, selectAdjacementDays: selectAdjacementDays, selectEndDate: selectEndDate, selectionType: selectionType, showAdjacementDays: showAdjacementDays, showWeekNumber: showWeekNumber, startDate: _startDate, weekdayFormat: weekdayFormat, weekNumbersLabel: weekNumbersLabel, onDateHover: function (date) { return handleDateHover(date); }, onCalendarDateChange: function (date) { return setCalendarDate(date); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); }, onSelectEndChange: function (value) { return setSelectEndDate(value); } }),
timepicker && (React.createElement("div", { className: "date-picker-timepickers" }, (lib.isMobile && range) || (range && calendars === 1) ? (React.createElement(React.Fragment, null,
React.createElement(CTimePicker.CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleStartDateChange(date); }, time: _startDate && new Date(_startDate), variant: "select" }),
React.createElement(CTimePicker.CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleEndDateChange(date); }, time: _endDate && new Date(_endDate), variant: "select" }))) : (Array.from({ length: calendars }).map(function (_, index) { return (React.createElement(CTimePicker.CTimePicker, { container: "inline", disabled: index === 0
? _startDate === null
? true
: false
: _endDate === null
? true
: false, key: index, locale: locale, onTimeChange: function (_, __, date) {
return index === 0
? date && handleStartDateChange(date)
: date && handleEndDateChange(date);
}, time: index === 0
? _startDate && new Date(_startDate)
: _endDate && new Date(_endDate), variant: "select" })); }))))))));
});
CDateRangePicker.displayName = 'CDateRangePicker';
CDateRangePicker.propTypes = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, CCalendar.CCalendar.propTypes), CFormControlWrapper.CFormControlWrapper.propTypes), CPicker.CPicker.propTypes), { cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), cancelButtonColor: (_a = CButton.CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, cancelButtonSize: (_b = CButton.CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, cancelButtonVariant: (_c = CButton.CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, calendars: PropTypes.number, className: PropTypes.string, cleaner: PropTypes.bool, closeOnSelect: PropTypes.bool, confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), confirmButtonColor: (_d = CButton.CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, confirmButtonSize: (_e = CButton.CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, confirmButtonVariant: (_f = CButton.CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant, id: PropTypes.oneOfType([PropTypes.string, PropTypes.any]), indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), inputDateFormat: PropTypes.func, inputDateParse: PropTypes.func, inputOnChangeDelay: PropTypes.number, inputReadOnly: PropTypes.bool, name: PropTypes.oneOfType([PropTypes.string, PropTypes.any]), placeholder: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string.isRequired),
]), range: PropTypes.bool, ranges: PropTypes.object, rangesButtonsColor: (_g = CButton.CButton.propTypes) === null || _g === void 0 ? void 0 : _g.color, rangesButtonsSize: (_h = CButton.CButton.propTypes) === null || _h === void 0 ? void 0 : _h.size, rangesButtonsVariant: (_j = CButton.CButton.propTypes) === null || _j === void 0 ? void 0 : _j.variant, required: PropTypes.bool, separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), size: PropTypes.oneOf(['sm', 'lg']), timepicker: PropTypes.bool, todayButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), todayButtonColor: (_k = CButton.CButton.propTypes) === null || _k === void 0 ? void 0 : _k.color, todayButtonSize: (_l = CButton.CButton.propTypes) === null || _l === void 0 ? void 0 : _l.size, todayButtonVariant: (_m = CButton.CButton.propTypes) === null || _m === void 0 ? void 0 : _m.variant });
exports.CDateRangePicker = CDateRangePicker;
//# sourceMappingURL=CDateRangePicker.js.map