@coreui/react-pro
Version:
UI Components Library for React.js
254 lines (251 loc) • 21.5 kB
JavaScript
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import PropTypes from 'prop-types';
import { l as libExports } from '../../_virtual/lib.js';
import { CButton } from '../button/CButton.js';
import { CCalendar } from '../calendar/CCalendar.js';
import { convertToDateObject } from '../calendar/utils.js';
import { CFormControlWrapper } from '../form/CFormControlWrapper.js';
import { CPicker } from '../picker/CPicker.js';
import { CTimePicker } from '../time-picker/CTimePicker.js';
import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js';
import '@popperjs/core';
import { getLocalDateFromString, getInputIdOrName } from './utils.js';
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var CDateRangePicker = 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, _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.portal, portal = _s === void 0 ? true : _s, _t = _a.range, range = _t === void 0 ? true : _t, ranges = _a.ranges, _u = _a.rangesButtonsColor, rangesButtonsColor = _u === void 0 ? 'secondary' : _u, rangesButtonsSize = _a.rangesButtonsSize, _v = _a.rangesButtonsVariant, rangesButtonsVariant = _v === void 0 ? 'ghost' : _v, required = _a.required, _w = _a.separator, separator = _w === void 0 ? true : _w, selectAdjacementDays = _a.selectAdjacementDays, _x = _a.selectionType, selectionType = _x === void 0 ? 'day' : _x, showAdjacementDays = _a.showAdjacementDays, showWeekNumber = _a.showWeekNumber, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _y = _a.todayButton, todayButton = _y === void 0 ? 'Today' : _y, _z = _a.todayButtonColor, todayButtonColor = _z === void 0 ? 'primary' : _z, _0 = _a.todayButtonSize, todayButtonSize = _0 === void 0 ? 'sm' : _0, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, weekNumbersLabel = _a.weekNumbersLabel, _1 = _a.calendarDate, calendarDate = _1 === void 0 ? startDate || endDate || null : _1, rest = __rest(_a, ["ariaNavNextMonthLabel", "ariaNavNextYearLabel", "ariaNavPrevMonthLabel", "ariaNavPrevYearLabel", "calendars", "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", "portal", "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", "calendarDate"]);
var inputEndRef = useRef(null);
var inputStartRef = useRef(null);
var formRef = useRef(null);
var _2 = useState(calendarDate), _calendarDate = _2[0], setCalendarDate = _2[1];
var _3 = useState(endDate !== null && endDate !== void 0 ? endDate : null), _endDate = _3[0], setEndDate = _3[1];
var _4 = useState(maxDate !== null && maxDate !== void 0 ? maxDate : null), _maxDate = _4[0], setMaxDate = _4[1];
var _5 = useState(minDate !== null && minDate !== void 0 ? minDate : null), _minDate = _5[0], setMinDate = _5[1];
var _6 = useState(startDate !== null && startDate !== void 0 ? startDate : null), _startDate = _6[0], setStartDate = _6[1];
var _7 = useState(visible), _visible = _7[0], setVisible = _7[1];
var _8 = useState(startDate !== null && startDate !== void 0 ? startDate : null), initialStartDate = _8[0], setInitialStartDate = _8[1];
var _9 = useState(endDate !== null && endDate !== void 0 ? endDate : null), initialEndDate = _9[0], setInitialEndDate = _9[1];
var _10 = useState(null), inputStartHoverValue = _10[0], setInputStartHoverValue = _10[1];
var _11 = useState(null), inputEndHoverValue = _11[0], setInputEndHoverValue = _11[1];
var _12 = useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _12[0], setIsValid = _12[1];
var _13 = useState(false), selectEndDate = _13[0], setSelectEndDate = _13[1];
useEffect(function () {
setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
}, [valid, invalid]);
useEffect(function () {
if (startDate) {
setStartDate(startDate);
}
}, [startDate]);
useEffect(function () {
if (endDate) {
setEndDate(endDate);
}
}, [endDate]);
useEffect(function () {
if (maxDate) {
setMaxDate(maxDate);
}
}, [maxDate]);
useEffect(function () {
if (minDate) {
setMinDate(minDate);
}
}, [minDate]);
useEffect(function () {
if (inputStartHoverValue) {
setInputValue(inputStartRef.current, inputStartHoverValue);
return;
}
setInputValue(inputStartRef.current, _startDate);
}, [inputStartHoverValue, _startDate]);
useEffect(function () {
if (inputEndHoverValue) {
setInputValue(inputEndRef.current, inputEndHoverValue);
return;
}
setInputValue(inputEndRef.current, _endDate);
}, [inputEndHoverValue, _endDate]);
useEffect(function () {
if (inputStartRef.current && inputStartRef.current.form) {
formRef.current = inputStartRef.current.form;
}
}, [inputStartRef]);
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 (inputDateFormat) {
return inputDateFormat(date instanceof Date ? new Date(date) : convertToDateObject(date, selectionType));
}
if (selectionType !== 'day') {
return date;
}
var _date = new Date(date);
return 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) {
if (selectEndDate) {
setInputEndHoverValue(date);
}
else {
setInputStartHoverValue(date);
}
};
var handleClear = function (event) {
event.stopPropagation();
setStartDate(null);
setEndDate(null);
};
var handleEndDateChange = function (date) {
setEndDate(date);
setInputEndHoverValue(null);
onEndDateChange === null || onEndDateChange === void 0 ? void 0 : 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 === null || onStartDateChange === void 0 ? void 0 : onStartDateChange(date);
if (timepicker || footer) {
return;
}
if (closeOnSelect && !range) {
setVisible(false);
}
};
var handleOnChange = useDebouncedCallback(function (value, input) {
var date = inputDateParse
? inputDateParse(value)
: getLocalDateFromString(value, locale, timepicker);
if (date instanceof Date && date.getTime()) {
setCalendarDate(date);
if (input === 'start') {
setStartDate(date);
}
else {
setEndDate(date);
}
}
}, inputOnChangeDelay);
var InputGroup = function () { return (React.createElement("div", { className: "date-picker-input-group" },
React.createElement("input", __assign({ autoComplete: "off", className: classNames('date-picker-input', {
hover: inputStartHoverValue,
}), disabled: disabled }, (id && { id: getInputIdOrName(id, range, 'start') }), (name && { name: 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", __assign({ autoComplete: "off", className: classNames('date-picker-input', {
hover: inputEndHoverValue,
}), disabled: disabled }, (id && { id: getInputIdOrName(id, range, 'end') }), (name && { name: 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", __assign({ className: "date-picker-indicator" }, (disabled !== false && {
onClick: function () { return setVisible(!_visible); },
onKeyDown: function (event) {
if (event.key === 'Enter') {
setVisible(!_visible);
}
},
tabIndex: 0,
})))) : (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, __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, __assign({ className: classNames('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, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
var date = new Date();
handleStartDateChange(date);
if (range)
handleEndDateChange(date);
setCalendarDate(date);
} }, todayButton)),
cancelButton && (React.createElement(CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () {
handleStartDateChange(initialStartDate);
if (range)
handleEndDateChange(initialEndDate);
setVisible(false);
} }, cancelButton)),
confirmButton && (React.createElement(CButton, { color: confirmButtonColor, size: confirmButtonSize, variant: confirmButtonVariant, onClick: function () {
setVisible(false);
} }, confirmButton))), toggler: toggler !== null && toggler !== void 0 ? toggler : InputGroup(), portal: portal, onHide: function () {
setVisible(false);
onHide === null || onHide === void 0 ? void 0 : onHide();
}, onShow: function () {
setInitialStartDate(_startDate);
setInitialEndDate(_endDate);
setVisible(true);
onShow === null || onShow === void 0 ? void 0 : 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, { color: rangesButtonsColor, key: index, onClick: function () {
handleStartDateChange(ranges[key][0]);
handleEndDateChange(ranges[key][1]);
}, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
React.createElement(CCalendar, { ariaNavNextMonthLabel: ariaNavNextMonthLabel, ariaNavNextYearLabel: ariaNavNextYearLabel, ariaNavPrevMonthLabel: ariaNavPrevMonthLabel, ariaNavPrevYearLabel: ariaNavPrevYearLabel, calendarDate: _calendarDate, calendars: libExports.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" }, (libExports.isMobile && range) || (range && calendars === 1) ? (React.createElement(React.Fragment, null,
React.createElement(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, { 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, { 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 = __assign(__assign(__assign(__assign({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), cancelButtonColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, cancelButtonSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, cancelButtonVariant: (_c = 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.propTypes) === null || _d === void 0 ? void 0 : _d.color, confirmButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, confirmButtonVariant: (_f = 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.propTypes) === null || _g === void 0 ? void 0 : _g.color, rangesButtonsSize: (_h = CButton.propTypes) === null || _h === void 0 ? void 0 : _h.size, rangesButtonsVariant: (_j = 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.propTypes) === null || _k === void 0 ? void 0 : _k.color, todayButtonSize: (_l = CButton.propTypes) === null || _l === void 0 ? void 0 : _l.size, todayButtonVariant: (_m = CButton.propTypes) === null || _m === void 0 ? void 0 : _m.variant });
export { CDateRangePicker };
//# sourceMappingURL=CDateRangePicker.js.map