@fluentui/react
Version:
Reusable React components for building web experiences.
397 lines • 24.2 kB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/utilities", "../../Calendar", "@fluentui/date-time-utilities", "../../Callout", "../../Styling", "../../TextField", "../../FocusTrapZone", "@fluentui/react-hooks", "./defaults"], function (require, exports, tslib_1, React, utilities_1, Calendar_1, date_time_utilities_1, Callout_1, Styling_1, TextField_1, FocusTrapZone_1, react_hooks_1, defaults_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerBase = void 0;
var getClassNames = (0, utilities_1.classNamesFunction)();
var DEFAULT_PROPS = {
allowTextInput: false,
formatDate: function (date) { return (date ? date.toDateString() : ''); },
parseDateFromString: function (dateStr) {
//if dateStr is DATE ONLY ISO 8601 -> add time so Date.parse() won't convert it to UTC
//See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#date_time_string_format
if (dateStr.match(/^\d{4}(-\d{2}){2}$/)) {
dateStr += 'T12:00';
}
var date = Date.parse(dateStr);
return date ? new Date(date) : null;
},
firstDayOfWeek: date_time_utilities_1.DayOfWeek.Sunday,
initialPickerDate: new Date(),
isRequired: false,
isMonthPickerVisible: true,
showMonthPickerAsOverlay: false,
strings: defaults_1.defaultDatePickerStrings,
highlightCurrentMonth: false,
highlightSelectedMonth: false,
borderless: false,
pickerAriaLabel: 'Calendar',
showWeekNumbers: false,
firstWeekOfYear: date_time_utilities_1.FirstWeekOfYear.FirstDay,
showGoToToday: true,
showCloseButton: false,
underlined: false,
allFocusable: false,
};
function useFocusLogic() {
var textFieldRef = React.useRef(null);
var preventFocusOpeningPicker = React.useRef(false);
var focus = function () {
var _a, _b;
(_b = (_a = textFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
};
var preventNextFocusOpeningPicker = function () {
preventFocusOpeningPicker.current = true;
};
return [textFieldRef, focus, preventFocusOpeningPicker, preventNextFocusOpeningPicker];
}
function useCalendarVisibility(_a, focus) {
var allowTextInput = _a.allowTextInput, onAfterMenuDismiss = _a.onAfterMenuDismiss;
var _b = React.useState(false), isCalendarShown = _b[0], setIsCalendarShown = _b[1];
var isMounted = React.useRef(false);
var async = (0, react_hooks_1.useAsync)();
React.useEffect(function () {
if (isMounted.current && !isCalendarShown) {
// In browsers like IE, textfield gets unfocused when datepicker is collapsed
if (allowTextInput) {
async.requestAnimationFrame(focus);
}
// If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss
onAfterMenuDismiss === null || onAfterMenuDismiss === void 0 ? void 0 : onAfterMenuDismiss();
}
isMounted.current = true;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isCalendarShown]);
return [isCalendarShown, setIsCalendarShown];
}
function useSelectedDate(_a) {
var formatDate = _a.formatDate, value = _a.value, onSelectDate = _a.onSelectDate;
var _b = (0, react_hooks_1.useControllableValue)(value, undefined, function (ev, newValue) {
return onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(newValue);
}), selectedDate = _b[0], setSelectedDateState = _b[1];
var _c = React.useState(function () { return (value && formatDate ? formatDate(value) : ''); }), formattedDate = _c[0], setFormattedDate = _c[1];
var setSelectedDate = function (newDate) {
setSelectedDateState(newDate);
setFormattedDate(newDate && formatDate ? formatDate(newDate) : '');
};
React.useEffect(function () {
setFormattedDate(value && formatDate ? formatDate(value) : '');
}, [formatDate, value]);
return [selectedDate, formattedDate, setSelectedDate, setFormattedDate];
}
function useErrorMessage(_a, selectedDate, setSelectedDate, inputValue, isCalendarShown) {
var _b;
var isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate, formatDate = _a.formatDate, minDate = _a.minDate, maxDate = _a.maxDate, textField = _a.textField;
var _c = React.useState(), errorMessage = _c[0], setErrorMessage = _c[1];
var _d = React.useState(), statusMessage = _d[0], setStatusMessage = _d[1];
var isFirstLoadRef = React.useRef(true);
var validateOnLoad = (_b = textField === null || textField === void 0 ? void 0 : textField.validateOnLoad) !== null && _b !== void 0 ? _b : true;
var validateTextInput = function (date) {
if (date === void 0) { date = null; }
if (allowTextInput) {
if (inputValue || date) {
// Don't parse if the selected date has the same formatted string as what we're about to parse.
// The formatted string might be ambiguous (ex: "1/2/3" or "New Year Eve") and the parser might
// not be able to come up with the exact same date.
if (selectedDate && !errorMessage && formatDate && formatDate(date !== null && date !== void 0 ? date : selectedDate) === inputValue) {
return;
}
date = date || parseDateFromString(inputValue);
// Check if date is null, or date is Invalid Date
if (!date || isNaN(date.getTime())) {
// Reset invalid input field, if formatting is available
setSelectedDate(selectedDate);
// default the newer isResetStatusMessage string to invalidInputErrorMessage for legacy support
var selectedText = formatDate ? formatDate(selectedDate) : '';
var statusText = strings.isResetStatusMessage
? (0, utilities_1.format)(strings.isResetStatusMessage, inputValue, selectedText)
: strings.invalidInputErrorMessage || '';
setStatusMessage(statusText);
}
else {
// Check against optional date boundaries
if (isDateOutOfBounds(date, minDate, maxDate)) {
setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');
}
else {
setSelectedDate(date);
setErrorMessage(undefined);
setStatusMessage(undefined);
}
}
}
else {
// Only show error for empty inputValue if it is a required field
setErrorMessage(isRequired ? strings.isRequiredErrorMessage || ' ' : undefined);
// If no input date string or input date string is invalid
// date variable will be null, callback should expect null value for this case
onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(date);
}
}
else if (isRequired && !inputValue) {
// Check when DatePicker is a required field but has NO input value
setErrorMessage(strings.isRequiredErrorMessage || ' ');
}
else {
// Cleanup the error message and status message
setErrorMessage(undefined);
setStatusMessage(undefined);
}
};
React.useEffect(function () {
if (isFirstLoadRef.current) {
isFirstLoadRef.current = false;
if (!validateOnLoad) {
return;
}
}
if (isRequired && !selectedDate) {
setErrorMessage(strings.isRequiredErrorMessage || ' ');
}
else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) {
setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');
}
else {
setErrorMessage(undefined);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
// We don't want to compare the date itself, since two instances of date at the same time are not equal
// eslint-disable-next-line react-hooks/exhaustive-deps
minDate && (0, date_time_utilities_1.getDatePartHashValue)(minDate),
// eslint-disable-next-line react-hooks/exhaustive-deps
maxDate && (0, date_time_utilities_1.getDatePartHashValue)(maxDate),
// eslint-disable-next-line react-hooks/exhaustive-deps
selectedDate && (0, date_time_utilities_1.getDatePartHashValue)(selectedDate),
isRequired,
validateOnLoad,
]);
return [
isCalendarShown ? undefined : errorMessage,
validateTextInput,
setErrorMessage,
isCalendarShown ? undefined : statusMessage,
setStatusMessage,
];
}
exports.DatePickerBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {
var _a, _b;
var props = (0, utilities_1.getPropsWithDefaults)(DEFAULT_PROPS, propsWithoutDefaults);
var firstDayOfWeek = props.firstDayOfWeek, strings = props.strings, label = props.label, theme = props.theme, className = props.className, styles = props.styles, initialPickerDate = props.initialPickerDate, isRequired = props.isRequired, disabled = props.disabled, ariaLabel = props.ariaLabel, pickerAriaLabel = props.pickerAriaLabel, placeholder = props.placeholder, allowTextInput = props.allowTextInput, borderless = props.borderless, minDate = props.minDate, maxDate = props.maxDate, showCloseButton = props.showCloseButton, calendarProps = props.calendarProps, calloutProps = props.calloutProps, textFieldProps = props.textField, underlined = props.underlined, allFocusable = props.allFocusable, _c = props.calendarAs, CalendarType = _c === void 0 ? Calendar_1.Calendar : _c, tabIndex = props.tabIndex, _d = props.disableAutoFocus, disableAutoFocus = _d === void 0 ? true : _d;
var id = (0, react_hooks_1.useId)('DatePicker', props.id);
var calloutId = (0, react_hooks_1.useId)('DatePicker-Callout');
var calendar = React.useRef(null);
var datePickerDiv = React.useRef(null);
var _e = useFocusLogic(), textFieldRef = _e[0], focus = _e[1], preventFocusOpeningPicker = _e[2], preventNextFocusOpeningPicker = _e[3];
var _f = useCalendarVisibility(props, focus), isCalendarShown = _f[0], setIsCalendarShown = _f[1];
var _g = useSelectedDate(props), selectedDate = _g[0], formattedDate = _g[1], setSelectedDate = _g[2], setFormattedDate = _g[3];
var _h = useErrorMessage(props, selectedDate, setSelectedDate, formattedDate, isCalendarShown), errorMessage = _h[0], validateTextInput = _h[1], setErrorMessage = _h[2], statusMessage = _h[3], setStatusMessage = _h[4];
var showDatePickerPopup = React.useCallback(function () {
if (!isCalendarShown) {
preventNextFocusOpeningPicker();
setIsCalendarShown(true);
}
}, [isCalendarShown, preventNextFocusOpeningPicker, setIsCalendarShown]);
React.useImperativeHandle(props.componentRef, function () { return ({
focus: focus,
reset: function () {
setIsCalendarShown(false);
setSelectedDate(undefined);
setErrorMessage(undefined);
setStatusMessage(undefined);
},
showDatePickerPopup: showDatePickerPopup,
}); }, [focus, setErrorMessage, setIsCalendarShown, setSelectedDate, setStatusMessage, showDatePickerPopup]);
var onTextFieldFocus = function () {
if (disableAutoFocus) {
return;
}
if (!allowTextInput) {
if (!preventFocusOpeningPicker.current) {
showDatePickerPopup();
}
preventFocusOpeningPicker.current = false;
}
};
var onSelectDate = function (date) {
if (props.calendarProps && props.calendarProps.onSelectDate) {
props.calendarProps.onSelectDate(date);
}
calendarDismissed(date);
};
var onCalloutPositioned = function () {
var shouldFocus = true;
// If the user has specified that the callout shouldn't use initial focus, then respect
// that and don't attempt to set focus. That will default to true within the callout
// so we need to check if it's undefined here.
if (props.calloutProps && props.calloutProps.setInitialFocus !== undefined) {
shouldFocus = props.calloutProps.setInitialFocus;
}
if (calendar.current && shouldFocus) {
calendar.current.focus();
}
};
var onTextFieldBlur = function (ev) {
validateTextInput();
};
var onTextFieldChanged = function (ev, newValue) {
var _a;
var textField = props.textField;
if (allowTextInput) {
if (isCalendarShown) {
dismissDatePickerPopup();
}
setFormattedDate(newValue);
}
(_a = textField === null || textField === void 0 ? void 0 : textField.onChange) === null || _a === void 0 ? void 0 : _a.call(textField, ev, newValue);
};
var onTextFieldKeyDown = function (ev) {
// eslint-disable-next-line deprecation/deprecation
switch (ev.which) {
case utilities_1.KeyCodes.enter:
ev.preventDefault();
ev.stopPropagation();
if (!isCalendarShown) {
validateTextInput();
showDatePickerPopup();
}
else {
// When DatePicker allows input date string directly,
// it is expected to hit another enter to close the popup
if (props.allowTextInput) {
dismissDatePickerPopup();
}
}
break;
case utilities_1.KeyCodes.escape:
handleEscKey(ev);
break;
case utilities_1.KeyCodes.down:
if (ev.altKey && !isCalendarShown) {
showDatePickerPopup();
}
break;
default:
break;
}
};
var onTextFieldClick = function (ev) {
// default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior
var openOnClick = props.openOnClick || !props.disableAutoFocus;
if (openOnClick && !isCalendarShown && !props.disabled) {
showDatePickerPopup();
return;
}
if (props.allowTextInput) {
dismissDatePickerPopup();
}
};
var onIconClick = function (ev) {
ev.stopPropagation();
if (!isCalendarShown && !props.disabled) {
showDatePickerPopup();
}
else if (props.allowTextInput) {
dismissDatePickerPopup();
}
};
var dismissDatePickerPopup = function (newlySelectedDate) {
if (isCalendarShown) {
setIsCalendarShown(false);
validateTextInput(newlySelectedDate);
if (!allowTextInput && newlySelectedDate) {
setSelectedDate(newlySelectedDate);
}
}
};
var renderTextfieldDescription = function (inputProps, defaultRender) {
return (React.createElement(React.Fragment, null,
inputProps.description || inputProps.onRenderDescription ? defaultRender(inputProps) : null,
React.createElement("div", { "aria-live": "assertive", className: classNames.statusMessage }, statusMessage)));
};
var renderReadOnlyInput = function (inputProps) {
var divProps = (0, utilities_1.getNativeProps)(inputProps, utilities_1.divProperties);
// Need to merge styles so the provided styles win over the default ones. This is due to the classnames having the
// same specificity.
var readOnlyTextFieldClassName = (0, Styling_1.mergeStyles)(divProps.className, classNames.readOnlyTextField);
// Talkback on Android treats readonly inputs as disabled, so swipe gestures to open the Calendar
// don't register. Workaround is rendering a div with role="combobox" (passed in via TextField props).
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: readOnlyTextFieldClassName, tabIndex: tabIndex || 0 }), formattedDate || (
// Putting the placeholder in a separate span fixes specificity issues for the text color
React.createElement("span", { className: classNames.readOnlyPlaceholder }, placeholder))));
};
/**
* Callback for closing the calendar callout
*/
var calendarDismissed = function (newlySelectedDate) {
preventNextFocusOpeningPicker();
dismissDatePickerPopup(newlySelectedDate);
// don't need to focus the text box, if necessary the focusTrapZone will do it
};
var calloutDismissed = function (ev) {
calendarDismissed();
};
var handleEscKey = function (ev) {
if (isCalendarShown) {
ev.stopPropagation();
calendarDismissed();
}
};
var onCalendarDismissed = function (ev) {
calendarDismissed();
};
var classNames = getClassNames(styles, {
theme: theme,
className: className,
disabled: disabled,
underlined: underlined,
label: !!label,
isDatePickerShown: isCalendarShown,
});
var nativeProps = (0, utilities_1.getNativeProps)(props, utilities_1.divProperties, ['value']);
var iconProps = textFieldProps && textFieldProps.iconProps;
var textFieldId = textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label';
var readOnly = !allowTextInput && !disabled;
var dataIsFocusable = (_b = (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps['data-is-focusable']) !== null && _a !== void 0 ? _a : props['data-is-focusable']) !== null && _b !== void 0 ? _b : true;
// Props to create a semantic but non-focusable button when the datepicker has a text input
// Used for voice control and touch screen reader accessibility
var iconA11yProps = allowTextInput
? {
role: 'button',
'aria-expanded': isCalendarShown,
'aria-label': ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label,
'aria-labelledby': textFieldProps && textFieldProps['aria-labelledby'],
}
: {};
return (React.createElement("div", tslib_1.__assign({}, nativeProps, { className: classNames.root, ref: forwardedRef }),
React.createElement("div", { ref: datePickerDiv, "aria-owns": isCalendarShown ? calloutId : undefined, className: classNames.wrapper },
React.createElement(TextField_1.TextField, tslib_1.__assign({ role: "combobox", label: label, "aria-expanded": isCalendarShown, ariaLabel: ariaLabel, "aria-haspopup": "dialog", "aria-controls": isCalendarShown ? calloutId : undefined, required: isRequired, disabled: disabled, errorMessage: errorMessage, placeholder: placeholder, borderless: borderless, value: formattedDate, componentRef: textFieldRef, underlined: underlined, tabIndex: tabIndex, readOnly: !allowTextInput }, textFieldProps, { "data-is-focusable": dataIsFocusable, id: textFieldId, className: (0, utilities_1.css)(classNames.textField, textFieldProps && textFieldProps.className), iconProps: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ iconName: 'Calendar' }, iconA11yProps), iconProps), { className: (0, utilities_1.css)(classNames.icon, iconProps && iconProps.className), onClick: onIconClick }),
// eslint-disable-next-line react/jsx-no-bind
onRenderDescription: renderTextfieldDescription,
// eslint-disable-next-line react/jsx-no-bind
onKeyDown: onTextFieldKeyDown,
// eslint-disable-next-line react/jsx-no-bind
onFocus: onTextFieldFocus,
// eslint-disable-next-line react/jsx-no-bind
onBlur: onTextFieldBlur,
// eslint-disable-next-line react/jsx-no-bind
onClick: onTextFieldClick,
// eslint-disable-next-line react/jsx-no-bind
onChange: onTextFieldChanged, onRenderInput: readOnly ? renderReadOnlyInput : undefined }))),
isCalendarShown && (React.createElement(Callout_1.Callout, tslib_1.__assign({ id: calloutId, role: "dialog", ariaLabel: pickerAriaLabel, isBeakVisible: false, gapSpace: 0, doNotLayer: false, target: datePickerDiv.current, directionalHint: Callout_1.DirectionalHint.bottomLeftEdge }, calloutProps, { className: (0, utilities_1.css)(classNames.callout, calloutProps && calloutProps.className),
// eslint-disable-next-line react/jsx-no-bind
onDismiss: calloutDismissed,
// eslint-disable-next-line react/jsx-no-bind
onPositioned: onCalloutPositioned }),
React.createElement(FocusTrapZone_1.FocusTrapZone, { isClickableOutsideFocusTrap: true, disableFirstFocus: disableAutoFocus },
React.createElement(CalendarType, tslib_1.__assign({}, calendarProps, {
// eslint-disable-next-line react/jsx-no-bind
onSelectDate: onSelectDate,
// eslint-disable-next-line react/jsx-no-bind
onDismiss: onCalendarDismissed, isMonthPickerVisible: props.isMonthPickerVisible, showMonthPickerAsOverlay: props.showMonthPickerAsOverlay, today: props.today, value: selectedDate || initialPickerDate, firstDayOfWeek: firstDayOfWeek, strings: strings, highlightCurrentMonth: props.highlightCurrentMonth, highlightSelectedMonth: props.highlightSelectedMonth, showWeekNumbers: props.showWeekNumbers, firstWeekOfYear: props.firstWeekOfYear, showGoToToday: props.showGoToToday, dateTimeFormatter: props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: calendar, showCloseButton: showCloseButton, allFocusable: allFocusable })))))));
});
exports.DatePickerBase.displayName = 'DatePickerBase';
function isDateOutOfBounds(date, minDate, maxDate) {
return (!!minDate && (0, date_time_utilities_1.compareDatePart)(minDate, date) > 0) || (!!maxDate && (0, date_time_utilities_1.compareDatePart)(maxDate, date) < 0);
}
});
//# sourceMappingURL=DatePicker.base.js.map