@coreui/react-pro
Version:
UI Components Library for React.js
220 lines (216 loc) • 16.3 kB
JavaScript
'use strict';
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var CButton = require('../button/CButton.js');
var CFormControlWrapper = require('../form/CFormControlWrapper.js');
var CPicker = require('../picker/CPicker.js');
var CTimePickerRollCol = require('./CTimePickerRollCol.js');
var utils = require('./utils.js');
var useDebouncedCallback = require('../../hooks/useDebouncedCallback.js');
require('@popperjs/core');
var _a, _b, _c, _d, _e, _f;
const CTimePicker = React.forwardRef((_a, ref) => {
var { ampm = 'auto', ariaSelectHoursLabel = 'Select hours', ariaSelectMeridiemLabel = 'Select AM/PM', ariaSelectMinutesLabel = 'Select minutes', ariaSelectSecondsLabel = 'Select seconds', cancelButton = 'Cancel', cancelButtonColor = 'primary', cancelButtonSize = 'sm', cancelButtonVariant = 'ghost', className, cleaner = true, confirmButton = 'OK', confirmButtonColor = 'primary', confirmButtonSize = 'sm', confirmButtonVariant, container = 'dropdown', disabled, feedback, feedbackInvalid, feedbackValid, footer = true, hours, id, indicator = true, inputOnChangeDelay = 750, inputReadOnly, invalid, label, locale = 'default', minutes = true, name, onTimeChange, onHide, onShow, placeholder = 'Select time', portal = false, required, seconds = true, size, text, time, tooltipFeedback, valid, variant = 'roll', visible } = _a, rest = tslib_es6.__rest(_a, ["ampm", "ariaSelectHoursLabel", "ariaSelectMeridiemLabel", "ariaSelectMinutesLabel", "ariaSelectSecondsLabel", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "hours", "id", "indicator", "inputOnChangeDelay", "inputReadOnly", "invalid", "label", "locale", "minutes", "name", "onTimeChange", "onHide", "onShow", "placeholder", "portal", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
const formRef = React.useRef(null);
const inputRef = React.useRef(null);
const timePickerBodyRef = React.useRef(null);
const columnRefs = React.useRef([]);
const [date, setDate] = React.useState(utils.convertTimeToDate(time));
const [initialDate, setInitialDate] = React.useState(null);
const [isValid, setIsValid] = React.useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
const [_ampm, setAmPm] = React.useState(date ? utils.getAmPm(new Date(date), locale) : null);
const [_visible, setVisible] = React.useState(visible);
const [localizedTimePartials, setLocalizedTimePartials] = React.useState({
listOfHours: [],
listOfMinutes: [],
listOfSeconds: [],
hour12: false,
});
React.useEffect(() => {
setDate(time ? utils.convertTimeToDate(time) : null);
}, [time]);
React.useEffect(() => {
setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
}, [valid, invalid]);
React.useEffect(() => {
setLocalizedTimePartials(utils.getLocalizedTimePartials(locale, ampm, hours, minutes, seconds));
if (inputRef.current) {
inputRef.current.value = date
? date.toLocaleTimeString(locale, Object.assign(Object.assign({ hour12: localizedTimePartials && localizedTimePartials.hour12, hour: 'numeric' }, (minutes && { minute: 'numeric' })), (seconds && { second: 'numeric' })))
: '';
}
if (date) {
setAmPm(utils.getAmPm(new Date(date), locale));
}
}, [date]);
React.useEffect(() => {
if (inputRef.current && inputRef.current.form) {
formRef.current = inputRef.current.form;
}
}, [inputRef]);
React.useEffect(() => {
if (formRef.current) {
formRef.current.addEventListener('submit', (event) => {
setTimeout(() => handleFormValidation(event.target));
});
handleFormValidation(formRef.current);
}
}, [formRef, date]);
const handleClear = (event) => {
event.stopPropagation();
setDate(null);
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(null);
};
const handleFormValidation = (form) => {
if (!form.classList.contains('was-validated')) {
return;
}
if (date) {
return setIsValid(true);
}
setIsValid(false);
};
const handleOnChange = useDebouncedCallback.useDebouncedCallback((value) => {
if (utils.isValidTime(value)) {
const date = utils.convertTimeToDate(value);
setDate(date);
if (date) {
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(date.toTimeString(), date.toLocaleTimeString(), date);
}
else {
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(null);
}
}
else {
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(null);
}
}, inputOnChangeDelay);
const handleTimeChange = (set, value) => {
const _date = date || new Date('1970-01-01');
if (set === 'meridiem') {
const currentHours = _date.getHours();
if (value === 'am') {
setAmPm('am');
// Convert PM hours (12-23) to AM hours (0-11)
if (currentHours >= 12) {
_date.setHours(currentHours - 12);
}
}
if (value === 'pm') {
setAmPm('pm');
// Convert AM hours (0-11) to PM hours (12-23)
if (currentHours < 12) {
_date.setHours(currentHours + 12);
}
}
}
if (set === 'hours') {
if (localizedTimePartials && localizedTimePartials.hour12) {
_date.setHours(utils.convert12hTo24h(_ampm !== null && _ampm !== void 0 ? _ampm : 'am', Number.parseInt(value)));
}
else {
_date.setHours(Number.parseInt(value));
}
}
if (set === 'minutes') {
_date.setMinutes(Number.parseInt(value));
}
if (set === 'seconds') {
_date.setSeconds(Number.parseInt(value));
}
setDate(new Date(_date));
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
};
const InputGroup = () => (React.createElement("div", { className: "time-picker-input-group" },
React.createElement("input", { autoComplete: "off", className: "time-picker-input", disabled: disabled, id: id, name: name, onChange: (event) => handleOnChange(event.target.value), placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
indicator &&
(typeof indicator === 'boolean' ? (React.createElement("div", Object.assign({ className: "time-picker-indicator" }, (!disabled && {
onClick: () => setVisible(!_visible),
onKeyDown: (event) => {
if (event.key === 'Enter') {
setVisible(!_visible);
}
},
tabIndex: 0,
})))) : (indicator)),
cleaner &&
date &&
(typeof cleaner === 'boolean' ? (React.createElement("div", { className: "time-picker-cleaner", onClick: (event) => handleClear(event) })) : (React.isValidElement(cleaner) &&
React.cloneElement(cleaner, {
onClick: (event) => handleClear(event),
})))));
const TimePickerSelect = () => {
return (React.createElement(React.Fragment, null,
React.createElement("span", { className: "time-picker-inline-icon" }),
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('hours', event.target.value), value: utils.getSelectedHour(date, locale), "aria-label": ariaSelectHoursLabel }, localizedTimePartials &&
localizedTimePartials.listOfHours.map((option, index) => (React.createElement("option", { value: option.value.toString(), key: index }, option.label)))),
minutes && (React.createElement(React.Fragment, null,
React.createElement(React.Fragment, null, ":"),
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('minutes', event.target.value), value: utils.getSelectedMinutes(date), "aria-label": ariaSelectMinutesLabel }, localizedTimePartials &&
localizedTimePartials.listOfMinutes.map((option, index) => (React.createElement("option", { value: option.value.toString(), key: index }, option.label)))))),
seconds && (React.createElement(React.Fragment, null,
React.createElement(React.Fragment, null, ":"),
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('seconds', event.target.value), value: utils.getSelectedSeconds(date), "aria-label": ariaSelectSecondsLabel }, localizedTimePartials &&
localizedTimePartials.listOfSeconds.map((option, index) => (React.createElement("option", { value: option.value.toString(), key: index }, option.label)))))),
localizedTimePartials && localizedTimePartials.hour12 && (React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('meridiem', event.target.value), value: _ampm !== null && _ampm !== void 0 ? _ampm : 'am', "aria-label": ariaSelectMeridiemLabel },
React.createElement("option", { value: "am" }, "AM"),
React.createElement("option", { value: "pm" }, "PM")))));
};
return (React.createElement(CFormControlWrapper.CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: isValid === false ? true : false, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: isValid },
React.createElement(CPicker.CPicker, Object.assign({ className: index.default('time-picker', {
[`time-picker-${size}`]: size,
disabled: disabled,
'is-invalid': isValid === false ? true : false,
'is-valid': isValid,
}, className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React.createElement("div", { className: "time-picker-footer" },
cancelButton && (React.createElement(CButton.CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: () => {
if (initialDate) {
setDate(new Date(initialDate));
}
setVisible(false);
} }, cancelButton)),
confirmButton && (React.createElement(CButton.CButton, { color: confirmButtonColor, size: confirmButtonSize, variant: confirmButtonVariant, onClick: () => {
setVisible(false);
} }, confirmButton))), onHide: () => {
setVisible(false);
onHide === null || onHide === void 0 ? void 0 : onHide();
}, onShow: () => {
if (date) {
setInitialDate(new Date(date));
}
setVisible(true);
onShow === null || onShow === void 0 ? void 0 : onShow();
}, portal: portal, toggler: InputGroup(), visible: _visible }, rest, { ref: ref }),
React.createElement("div", Object.assign({ className: index.default('time-picker-body', {
['time-picker-roll']: variant === 'roll',
}) }, (variant !== 'select' && { role: 'group' }), { ref: timePickerBodyRef }), variant === 'select' ? (React.createElement(TimePickerSelect, null)) : (React.createElement(React.Fragment, null,
React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectHoursLabel, columnIndex: 0, columnRefs: columnRefs.current, elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: (index) => handleTimeChange('hours', index.toString()), selected: utils.getSelectedHour(date, locale, ampm), ref: (node) => {
columnRefs.current[0] = node;
} }),
minutes && (React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectMinutesLabel, columnIndex: 1, columnRefs: columnRefs.current, elements: localizedTimePartials && localizedTimePartials.listOfMinutes, onClick: (index) => handleTimeChange('minutes', index.toString()), selected: utils.getSelectedMinutes(date), ref: (node) => {
columnRefs.current[1] = node;
} })),
seconds && (React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectSecondsLabel, columnIndex: minutes ? 2 : 1, columnRefs: columnRefs.current, elements: localizedTimePartials && localizedTimePartials.listOfSeconds, onClick: (index) => handleTimeChange('seconds', index.toString()), selected: utils.getSelectedSeconds(date), ref: (node) => {
columnRefs.current[minutes ? 2 : 1] = node;
} })),
localizedTimePartials && localizedTimePartials.hour12 && (React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectMeridiemLabel, columnIndex: (minutes ? 1 : 0) + (seconds ? 1 : 0) + 1, columnRefs: columnRefs.current, elements: [
{ value: 'am', label: 'AM' },
{ value: 'pm', label: 'PM' },
], onClick: (value) => handleTimeChange('meridiem', value), selected: _ampm, ref: (node) => {
columnRefs.current[(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1] = node;
} }))))))));
});
CTimePicker.propTypes = Object.assign(Object.assign(Object.assign({}, CFormControlWrapper.CFormControlWrapper.propTypes), CPicker.CPicker.propTypes), { ampm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]), 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, className: PropTypes.string, 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, hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]), id: PropTypes.string, inputOnChangeDelay: PropTypes.number, locale: PropTypes.string, minutes: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.arrayOf(PropTypes.number.isRequired),
PropTypes.func,
]), name: PropTypes.string, onTimeChange: PropTypes.func, required: PropTypes.bool, seconds: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.arrayOf(PropTypes.number.isRequired),
PropTypes.func,
]), time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]), variant: PropTypes.oneOf(['roll', 'select']) });
CTimePicker.displayName = 'CTimePicker';
exports.CTimePicker = CTimePicker;
//# sourceMappingURL=CTimePicker.js.map