@fluentui/react
Version:
Reusable React components for building web experiences.
201 lines • 11.9 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "@fluentui/date-time-utilities", "../../ComboBox", "../../Utilities", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, Utilities_1, date_time_utilities_1, ComboBox_1, Utilities_2, react_hooks_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimePicker = void 0;
var REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[1-9]):([0-5][0-9]):([0-5][0-9])\s([AaPp][Mm]))$/;
var REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[1-9]):[0-5][0-9]\s([AaPp][Mm]))$/;
var REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
var REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/;
var TIME_LOWER_BOUND = 0;
var TIME_UPPER_BOUND = 23;
var getDefaultStrings = function (useHour12, showSeconds) {
var hourUnits = useHour12 ? '12-hour' : '24-hour';
var timeFormat = "hh:mm".concat(showSeconds ? ':ss' : '').concat(useHour12 ? ' AP' : '');
var invalidInputErrorMessage = "Enter a valid time in the ".concat(hourUnits, " format: ").concat(timeFormat);
var timeOutOfBoundsErrorMessage = "Please enter a time within the range of {0} and {1}";
return {
invalidInputErrorMessage: invalidInputErrorMessage,
timeOutOfBoundsErrorMessage: timeOutOfBoundsErrorMessage,
};
};
/**
* {@docCategory TimePicker}
*/
var TimePicker = function (_a) {
var label = _a.label, _b = _a.increments, increments = _b === void 0 ? 30 : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? false : _c, _d = _a.allowFreeform, allowFreeform = _d === void 0 ? true : _d, _e = _a.useHour12, useHour12 = _e === void 0 ? false : _e, timeRange = _a.timeRange, _f = _a.strings, strings = _f === void 0 ? getDefaultStrings(useHour12, showSeconds) : _f, defaultValue = _a.defaultValue, value = _a.value, dateAnchor = _a.dateAnchor, onChange = _a.onChange, onFormatDate = _a.onFormatDate, onValidateUserInput = _a.onValidateUserInput, onValidationResult = _a.onValidationResult, rest = tslib_1.__rest(_a, ["label", "increments", "showSeconds", "allowFreeform", "useHour12", "timeRange", "strings", "defaultValue", "value", "dateAnchor", "onChange", "onFormatDate", "onValidateUserInput", "onValidationResult"]);
var _g = React.useState(''), comboBoxText = _g[0], setComboBoxText = _g[1];
var _h = React.useState(), selectedKey = _h[0], setSelectedKey = _h[1];
var _j = React.useState(''), errorMessage = _j[0], setErrorMessage = _j[1];
var fallbackDateAnchor = (0, react_hooks_1.useConst)(new Date());
var _k = (0, react_hooks_1.useControllableValue)(value, defaultValue), selectedTime = _k[0], setSelectedTime = _k[1];
var optionsCount = getDropdownOptionsCount(increments, timeRange);
var internalDateAnchor = dateAnchor || value || defaultValue || fallbackDateAnchor;
var dateStartAnchor = React.useMemo(function () { return getDateAnchor(internalDateAnchor, 'start', increments, timeRange); }, [internalDateAnchor, increments, timeRange]);
var dateEndAnchor = React.useMemo(function () { return getDateAnchor(internalDateAnchor, 'end', increments, timeRange); }, [internalDateAnchor, increments, timeRange]);
var timePickerOptions = React.useMemo(function () {
var optionsList = Array(optionsCount);
for (var i = 0; i < optionsCount; i++) {
optionsList[i] = 0;
}
return optionsList.map(function (_, index) {
var option = (0, date_time_utilities_1.addMinutes)(dateStartAnchor, increments * index);
option.setSeconds(0);
var formattedTimeString = (0, date_time_utilities_1.formatTimeString)(option, showSeconds, useHour12);
var optionText = onFormatDate ? onFormatDate(option) : formattedTimeString;
return {
key: formattedTimeString,
text: optionText,
data: option,
};
});
}, [dateStartAnchor, increments, optionsCount, showSeconds, onFormatDate, useHour12]);
React.useEffect(function () {
if (selectedTime && !isNaN(selectedTime.valueOf())) {
var formattedTimeString_1 = (0, date_time_utilities_1.formatTimeString)(selectedTime, showSeconds, useHour12);
var comboboxOption = timePickerOptions.find(function (option) { return option.key === formattedTimeString_1; });
setSelectedKey(comboboxOption === null || comboboxOption === void 0 ? void 0 : comboboxOption.key);
setComboBoxText(comboboxOption ? comboboxOption.text : formattedTimeString_1);
}
else {
setSelectedKey(null);
setComboBoxText('');
}
}, [selectedTime, timePickerOptions, onFormatDate, showSeconds, useHour12]);
var onInputChange = React.useCallback(function (ev, option, _index, input) {
var validateUserInput = function (userInput) {
var errorMessageToDisplay = '';
var regex;
if (useHour12) {
regex = showSeconds ? REGEX_SHOW_SECONDS_HOUR_12 : REGEX_HIDE_SECONDS_HOUR_12;
}
else {
regex = showSeconds ? REGEX_SHOW_SECONDS_HOUR_24 : REGEX_HIDE_SECONDS_HOUR_24;
}
if (!regex.test(userInput)) {
errorMessageToDisplay = strings.invalidInputErrorMessage;
}
else if (timeRange && strings.timeOutOfBoundsErrorMessage) {
var optionDate = (0, date_time_utilities_1.getDateFromTimeSelection)(useHour12, dateStartAnchor, userInput);
if (optionDate < dateStartAnchor || optionDate > dateEndAnchor) {
errorMessageToDisplay = (0, Utilities_2.format)(strings.timeOutOfBoundsErrorMessage, dateStartAnchor.toString(), dateEndAnchor.toString());
}
}
return errorMessageToDisplay;
};
var errorMessageToDisplay = '';
if (input) {
if (allowFreeform && !option) {
if (!onFormatDate) {
// Validate only if user did not add onFormatDate
errorMessageToDisplay = validateUserInput(input);
}
else {
// Use user provided validation if onFormatDate is provided
if (onValidateUserInput) {
errorMessageToDisplay = onValidateUserInput(input);
}
}
}
}
if (onValidationResult && errorMessage !== errorMessageToDisplay) {
// only call onValidationResult if stored errorMessage state value is different from latest error message
onValidationResult(ev, { errorMessage: errorMessageToDisplay });
}
var changedTime;
if (errorMessageToDisplay || (input !== undefined && !input.length)) {
var timeSelection = input || (option === null || option === void 0 ? void 0 : option.text) || '';
setComboBoxText(timeSelection);
setSelectedTime(errorMessageToDisplay ? new Date('invalid') : undefined);
changedTime = new Date('invalid');
}
else {
var updatedTime = void 0;
if ((option === null || option === void 0 ? void 0 : option.data) instanceof Date) {
updatedTime = option.data;
}
else {
var timeSelection = (option === null || option === void 0 ? void 0 : option.key) || input || '';
updatedTime = (0, date_time_utilities_1.getDateFromTimeSelection)(useHour12, dateStartAnchor, timeSelection);
}
setSelectedTime(updatedTime);
changedTime = updatedTime;
}
onChange === null || onChange === void 0 ? void 0 : onChange(ev, changedTime);
setErrorMessage(errorMessageToDisplay);
}, [
timeRange,
dateStartAnchor,
dateEndAnchor,
allowFreeform,
onFormatDate,
onValidateUserInput,
showSeconds,
useHour12,
strings.invalidInputErrorMessage,
strings.timeOutOfBoundsErrorMessage,
setSelectedTime,
onValidationResult,
onChange,
errorMessage,
]);
var evaluatePressedKey = function (event) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var charCode = event.charCode;
if (!onFormatDate &&
// Only permit input of digits, space, colon, A/P/M characters
!((charCode >= Utilities_1.KeyCodes.zero && charCode <= Utilities_1.KeyCodes.colon) ||
charCode === Utilities_1.KeyCodes.space ||
charCode === Utilities_1.KeyCodes.a ||
charCode === Utilities_1.KeyCodes.m ||
charCode === Utilities_1.KeyCodes.p)) {
event.preventDefault();
}
};
return (React.createElement(ComboBox_1.ComboBox, tslib_1.__assign({}, rest, { allowFreeform: allowFreeform, selectedKey: selectedKey, label: label, errorMessage: errorMessage, options: timePickerOptions, onChange: onInputChange, text: comboBoxText,
//eslint-disable-next-line
onKeyPress: evaluatePressedKey, useComboBoxAsMenuWidth: true })));
};
exports.TimePicker = TimePicker;
exports.TimePicker.displayName = 'TimePicker';
var getDateAnchor = function (internalDateAnchor, startEnd, increments, timeRange) {
var clampedDateAnchor = new Date(internalDateAnchor.getTime());
if (timeRange) {
var clampedTimeRange = clampTimeRange(timeRange);
var timeRangeHours = startEnd === 'start' ? clampedTimeRange.start : clampedTimeRange.end;
if (clampedDateAnchor.getHours() !== timeRangeHours) {
clampedDateAnchor.setHours(timeRangeHours);
}
}
else if (startEnd === 'end') {
clampedDateAnchor.setDate(clampedDateAnchor.getDate() + 1);
}
clampedDateAnchor.setMinutes(0);
clampedDateAnchor.setSeconds(0);
clampedDateAnchor.setMilliseconds(0);
return (0, date_time_utilities_1.ceilMinuteToIncrement)(clampedDateAnchor, increments);
};
var clampTimeRange = function (timeRange) {
return {
start: Math.min(Math.max(timeRange.start, TIME_LOWER_BOUND), TIME_UPPER_BOUND),
end: Math.min(Math.max(timeRange.end, TIME_LOWER_BOUND), TIME_UPPER_BOUND),
};
};
var getHoursInRange = function (timeRange) {
var hoursInRange = date_time_utilities_1.TimeConstants.HoursInOneDay;
if (timeRange) {
var clampedTimeRange = clampTimeRange(timeRange);
if (clampedTimeRange.start > clampedTimeRange.end) {
hoursInRange = date_time_utilities_1.TimeConstants.HoursInOneDay - timeRange.start - timeRange.end;
}
else if (timeRange.end > timeRange.start) {
hoursInRange = timeRange.end - timeRange.start;
}
}
return hoursInRange;
};
var getDropdownOptionsCount = function (increments, timeRange) {
var hoursInRange = getHoursInRange(timeRange);
return Math.floor((date_time_utilities_1.TimeConstants.MinutesInOneHour * hoursInRange) / increments);
};
});
//# sourceMappingURL=TimePicker.js.map