@coreui/react-pro
Version:
UI Components Library for React.js
180 lines (177 loc) • 14.8 kB
JavaScript
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../node_modules/classnames/index.js';
import { CButton } from '../button/CButton.js';
import { CFormControlWrapper } from '../form/CFormControlWrapper.js';
import { CPicker } from '../picker/CPicker.js';
import { CTimePickerRollCol } from './CTimePickerRollCol.js';
import { convertTimeToDate, getAmPm, getLocalizedTimePartials, getSelectedHour, getSelectedMinutes, getSelectedSeconds, isValidTime, convert12hTo24h } from './utils.js';
import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js';
import '@popperjs/core';
var _a, _b, _c, _d, _e, _f;
var CTimePicker = forwardRef(function (_a, ref) {
var _b, _c;
var _d = _a.ampm, ampm = _d === void 0 ? 'auto' : _d, _e = _a.cancelButton, cancelButton = _e === void 0 ? 'Cancel' : _e, _f = _a.cancelButtonColor, cancelButtonColor = _f === void 0 ? 'primary' : _f, _g = _a.cancelButtonSize, cancelButtonSize = _g === void 0 ? 'sm' : _g, _h = _a.cancelButtonVariant, cancelButtonVariant = _h === void 0 ? 'ghost' : _h, className = _a.className, _j = _a.cleaner, cleaner = _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, _o = _a.container, container = _o === void 0 ? 'dropdown' : _o, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _p = _a.footer, footer = _p === void 0 ? true : _p, hours = _a.hours, id = _a.id, _q = _a.indicator, indicator = _q === void 0 ? true : _q, _r = _a.inputOnChangeDelay, inputOnChangeDelay = _r === void 0 ? 750 : _r, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _s = _a.locale, locale = _s === void 0 ? 'default' : _s, _t = _a.minutes, minutes = _t === void 0 ? true : _t, name = _a.name, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _u = _a.placeholder, placeholder = _u === void 0 ? 'Select time' : _u, required = _a.required, _v = _a.seconds, seconds = _v === void 0 ? true : _v, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _w = _a.variant, variant = _w === void 0 ? 'roll' : _w, visible = _a.visible, rest = __rest(_a, ["ampm", "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", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
var formRef = useRef();
var inputRef = useRef(null);
var _x = useState(convertTimeToDate(time)), date = _x[0], setDate = _x[1];
var _y = useState(null), initialDate = _y[0], setInitialDate = _y[1];
var _z = useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _z[0], setIsValid = _z[1];
var _0 = useState(date ? getAmPm(new Date(date), locale) : 'am'), _ampm = _0[0], setAmPm = _0[1];
var _1 = useState(visible), _visible = _1[0], setVisible = _1[1];
var _2 = useState({
listOfHours: [],
listOfMinutes: [],
listOfSeconds: [],
hour12: false,
}), localizedTimePartials = _2[0], setLocalizedTimePartials = _2[1];
useEffect(function () {
setDate(time ? convertTimeToDate(time) : null);
}, [time]);
useEffect(function () {
setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
}, [valid, invalid]);
useEffect(function () {
setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm, hours, minutes, seconds));
if (inputRef.current) {
inputRef.current.value = date
? date.toLocaleTimeString(locale, __assign(__assign({ hour12: localizedTimePartials && localizedTimePartials.hour12, hour: 'numeric' }, (minutes && { minute: 'numeric' })), (seconds && { second: 'numeric' })))
: '';
}
date && setAmPm(getAmPm(new Date(date), locale));
}, [date]);
useEffect(function () {
if (inputRef.current && inputRef.current.form) {
formRef.current = inputRef.current.form;
}
}, [inputRef]);
useEffect(function () {
if (formRef.current) {
formRef.current.addEventListener('submit', function (event) {
setTimeout(function () { return handleFormValidation(event.target); });
});
handleFormValidation(formRef.current);
}
}, [formRef, date]);
var handleClear = function (event) {
event.stopPropagation();
setDate(null);
onTimeChange && onTimeChange(null);
};
var handleFormValidation = function (form) {
if (!form.classList.contains('was-validated')) {
return;
}
if (date) {
return setIsValid(true);
}
setIsValid(false);
};
var handleOnChange = useDebouncedCallback(function (value) { return isValidTime(value) && setDate(convertTimeToDate(value)); }, inputOnChangeDelay);
var handleTimeChange = function (set, value) {
var _date = date || new Date('1970-01-01');
if (set === 'toggle') {
if (value === 'am') {
_date.setHours(_date.getHours() - 12);
}
if (value === 'pm') {
_date.setHours(_date.getHours() + 12);
}
}
if (set === 'hours') {
if (localizedTimePartials && localizedTimePartials.hour12) {
_date.setHours(convert12hTo24h(_ampm, 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 && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
};
var InputGroup = function () { return (React.createElement("div", { className: "time-picker-input-group" },
React.createElement("input", { autoComplete: "off", className: "time-picker-input", disabled: disabled, id: id, name: name, onChange: function (event) { return handleOnChange(event.target.value); }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
indicator &&
(typeof indicator === 'boolean' ? React.createElement("div", { className: "time-picker-indicator" }) : indicator),
cleaner &&
date &&
(typeof cleaner === 'boolean' ? (React.createElement("div", { className: "time-picker-cleaner", onClick: function (event) { return handleClear(event); } })) : (React.isValidElement(cleaner) &&
React.cloneElement(cleaner, {
onClick: function (event) { return handleClear(event); },
}))))); };
var TimePickerSelect = function () {
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: function (event) {
return handleTimeChange('hours', event.target.value);
}, value: getSelectedHour(date, locale) }, localizedTimePartials &&
localizedTimePartials.listOfHours.map(function (option, index) { return (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: function (event) {
return handleTimeChange('minutes', event.target.value);
}, value: getSelectedMinutes(date) }, localizedTimePartials &&
localizedTimePartials.listOfMinutes.map(function (option, index) { return (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: function (event) {
return handleTimeChange('seconds', event.target.value);
}, value: getSelectedSeconds(date) }, localizedTimePartials &&
localizedTimePartials.listOfSeconds.map(function (option, index) { return (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: function (event) {
return handleTimeChange('toggle', event.target.value);
}, value: _ampm },
React.createElement("option", { value: "am" }, "AM"),
React.createElement("option", { value: "pm" }, "PM")))));
};
return (React.createElement(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, __assign({ className: classNames('time-picker', (_b = {},
_b["time-picker-".concat(size)] = size,
_b.disabled = disabled,
_b['is-invalid'] = isValid === false ? true : false,
_b['is-valid'] = isValid,
_b), className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React.createElement("div", { className: "time-picker-footer" },
cancelButton && (React.createElement(CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () {
initialDate && setDate(new Date(initialDate));
setVisible(false);
} }, cancelButton)),
confirmButton && (React.createElement(CButton, { color: confirmButtonColor, size: confirmButtonSize, variant: confirmButtonVariant, onClick: function () {
setVisible(false);
} }, confirmButton))), onHide: function () {
setVisible(false);
onHide && onHide();
}, onShow: function () {
date && setInitialDate(new Date(date));
setVisible(true);
onShow && onShow();
}, toggler: InputGroup(), visible: _visible }, rest, { ref: ref }),
React.createElement("div", { className: classNames('time-picker-body', (_c = {},
_c['time-picker-roll'] = variant === 'roll',
_c)) }, variant === 'select' ? (React.createElement(TimePickerSelect, null)) : (React.createElement(React.Fragment, null,
React.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: getSelectedHour(date, locale, ampm) }),
minutes && (React.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfMinutes, onClick: function (index) { return handleTimeChange('minutes', index.toString()); }, selected: getSelectedMinutes(date) })),
seconds && (React.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfSeconds, onClick: function (index) { return handleTimeChange('seconds', index.toString()); }, selected: getSelectedSeconds(date) })),
localizedTimePartials && localizedTimePartials.hour12 && (React.createElement(CTimePickerRollCol, { elements: [
{ value: 'am', label: 'AM' },
{ value: 'pm', label: 'PM' },
], onClick: function (value) { return handleTimeChange('toggle', value); }, selected: _ampm }))))))));
});
CTimePicker.propTypes = __assign(__assign(__assign({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]), 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, className: PropTypes.string, 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, 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';
export { CTimePicker };
//# sourceMappingURL=CTimePicker.js.map