mantine-datetime-picker
Version:
Mantine UI Datetime Picker component.
196 lines • 13 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import dayjs from "dayjs";
import React, { useState, useRef, forwardRef, useEffect } from "react";
import { useUncontrolled, useMergedRef, upperFirst } from "@mantine/hooks";
import { useMantineTheme, useComponentDefaultProps, Group, Button, } from "@mantine/core";
import { Calendar, DatePickerBase, TimeInput, } from "@mantine/dates";
import { IconClock } from "@tabler/icons-react";
var defaultProps = {
shadow: "sm",
transitionDuration: 200,
labelFormat: "MMMM YYYY",
initiallyOpened: false,
name: "date",
size: "sm",
dropdownType: "popover",
dropdownPosition: "flip",
clearable: true,
disabled: false,
fixOnBlur: true,
withinPortal: false,
firstDayOfWeek: "monday",
openDropdownOnClear: false,
hideNow: false,
autoHideNow: true,
nowLabel: "Now",
okLabel: "Ok",
};
export var DateTimePicker = forwardRef(function (props, ref) {
var _a = useComponentDefaultProps("DatePicker", defaultProps, props), value = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, classNames = _a.classNames, styles = _a.styles, shadow = _a.shadow, locale = _a.locale, inputFormat = _a.inputFormat, transitionDuration = _a.transitionDuration, transitionTimingFunction = _a.transitionTimingFunction, nextMonthLabel = _a.nextMonthLabel, previousMonthLabel = _a.previousMonthLabel, labelFormat = _a.labelFormat, dayClassName = _a.dayClassName, dayStyle = _a.dayStyle, disableOutsideEvents = _a.disableOutsideEvents, minDate = _a.minDate, maxDate = _a.maxDate, excludeDate = _a.excludeDate, initialMonth = _a.initialMonth, initiallyOpened = _a.initiallyOpened, name = _a.name, size = _a.size, dropdownType = _a.dropdownType, dropdownPosition = _a.dropdownPosition, clearable = _a.clearable, disabled = _a.disabled, clearButtonLabel = _a.clearButtonLabel, fixOnBlur = _a.fixOnBlur, allowFreeInput = _a.allowFreeInput, withinPortal = _a.withinPortal, dateParser = _a.dateParser, firstDayOfWeek = _a.firstDayOfWeek, onFocus = _a.onFocus, onBlur = _a.onBlur, amountOfMonths = _a.amountOfMonths, allowLevelChange = _a.allowLevelChange, initialLevel = _a.initialLevel, onDropdownClose = _a.onDropdownClose, onDropdownOpen = _a.onDropdownOpen, hideOutsideDates = _a.hideOutsideDates, hideWeekdays = _a.hideWeekdays, renderDay = _a.renderDay, type = _a.type, openDropdownOnClear = _a.openDropdownOnClear, unstyled = _a.unstyled, weekendDays = _a.weekendDays, yearLabelFormat = _a.yearLabelFormat, nextDecadeLabel = _a.nextDecadeLabel, nextYearLabel = _a.nextYearLabel, previousDecadeLabel = _a.previousDecadeLabel, previousYearLabel = _a.previousYearLabel, hideNow = _a.hideNow, autoHideNow = _a.autoHideNow, nowLabel = _a.nowLabel, okLabel = _a.okLabel, others = __rest(_a, ["value", "onChange", "defaultValue", "classNames", "styles", "shadow", "locale", "inputFormat", "transitionDuration", "transitionTimingFunction", "nextMonthLabel", "previousMonthLabel", "labelFormat", "dayClassName", "dayStyle", "disableOutsideEvents", "minDate", "maxDate", "excludeDate", "initialMonth", "initiallyOpened", "name", "size", "dropdownType", "dropdownPosition", "clearable", "disabled", "clearButtonLabel", "fixOnBlur", "allowFreeInput", "withinPortal", "dateParser", "firstDayOfWeek", "onFocus", "onBlur", "amountOfMonths", "allowLevelChange", "initialLevel", "onDropdownClose", "onDropdownOpen", "hideOutsideDates", "hideWeekdays", "renderDay", "type", "openDropdownOnClear", "unstyled", "weekendDays", "yearLabelFormat", "nextDecadeLabel", "nextYearLabel", "previousDecadeLabel", "previousYearLabel", "hideNow", "autoHideNow", "nowLabel", "okLabel"]);
var theme = useMantineTheme();
var finalLocale = locale || theme.datesLocale;
var dateFormat = inputFormat !== null && inputFormat !== void 0 ? inputFormat : "DD/MM/YYYY hh:mm a";
var _b = useState(initiallyOpened), dropdownOpened = _b[0], setDropdownOpened = _b[1];
var calendarSize = size === "lg" || size === "xl" ? "md" : "sm";
var inputRef = useRef(null);
var _c = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null), lastValidValue = _c[0], setLastValidValue = _c[1];
var _d = useUncontrolled({
value: value,
defaultValue: defaultValue,
finalValue: null,
onChange: onChange,
}), _value = _d[0], setValue = _d[1];
var _e = useState(_value || initialMonth || new Date()), calendarMonth = _e[0], setCalendarMonth = _e[1];
var _f = useState(false), focused = _f[0], setFocused = _f[1];
var _g = useState(_value instanceof Date
? upperFirst(dayjs(_value).locale(finalLocale).format(dateFormat))
: ""), inputState = _g[0], setInputState = _g[1];
var _h = useState(hideNow), _hideNow = _h[0], setHideNow = _h[1];
var closeDropdown = function () {
setDropdownOpened(false);
onDropdownClose === null || onDropdownClose === void 0 ? void 0 : onDropdownClose();
};
var openDropdown = function () {
setDropdownOpened(true);
onDropdownOpen === null || onDropdownOpen === void 0 ? void 0 : onDropdownOpen();
};
useEffect(function () {
if (value === null && !focused) {
setInputState("");
}
if (value instanceof Date && !focused) {
setInputState(upperFirst(dayjs(value).locale(finalLocale).format(dateFormat)));
}
}, [value, focused, finalLocale, dateFormat]);
var handleValueChange = function (date) {
setValue(date);
setInputState(upperFirst(dayjs(date).locale(finalLocale).format(dateFormat)));
window.setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
};
var handleClear = function () {
var _a;
setValue(null);
setLastValidValue(null);
setInputState("");
openDropdownOnClear && openDropdown();
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
var parseDate = function (date) {
return dateParser
? dateParser(date)
: dayjs(date, dateFormat, finalLocale).toDate();
};
var setDateFromInput = function () {
var date = typeof _value === "string" ? parseDate(_value) : _value;
if (maxDate && dayjs(date).isAfter(maxDate)) {
date = maxDate;
}
if (minDate && dayjs(date).isBefore(minDate)) {
date = minDate;
}
if (date && dayjs(date).isValid()) {
setValue(date);
setLastValidValue(date);
setInputState(upperFirst(dayjs(date).locale(finalLocale).format(dateFormat)));
setCalendarMonth(date);
}
else if (fixOnBlur) {
setValue(lastValidValue);
}
};
var handleInputBlur = function (event) {
typeof onBlur === "function" && onBlur(event);
setFocused(false);
if (allowFreeInput) {
setDateFromInput();
}
};
var handleKeyDown = function (event) {
if (event.key === "Enter" && allowFreeInput) {
closeDropdown();
setDateFromInput();
}
};
var handleInputFocus = function (event) {
typeof onFocus === "function" && onFocus(event);
setFocused(true);
};
var handleChange = function (event) {
openDropdown();
var date = parseDate(event.target.value);
if (dayjs(date).isValid()) {
setValue(date);
setLastValidValue(date);
setInputState(event.target.value);
setCalendarMonth(date);
}
else {
setInputState(event.target.value);
}
};
var handleNow = function () {
var now = new Date();
setValue(now);
setInputState(upperFirst(dayjs(value).locale(finalLocale).format(dateFormat)));
setDropdownOpened(false);
window.setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
onChange === null || onChange === void 0 ? void 0 : onChange(now);
};
var handleOk = function () {
setInputState(upperFirst(dayjs(_value).locale(finalLocale).format(dateFormat)));
setDropdownOpened(false);
window.setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
onChange === null || onChange === void 0 ? void 0 : onChange(_value);
};
var combineTimeAndDate = function (time, date) {
if (!(time instanceof Date))
return date;
var hour = dayjs(time).hour();
var minute = dayjs(time).minute();
var dateAndTime = dayjs(date).hour(hour).minute(minute);
//@ts-ignore
return dateAndTime.$d;
};
useEffect(function () {
if (hideNow || !autoHideNow)
return;
if ((minDate && dayjs(new Date()).isBefore(minDate)) ||
(maxDate && dayjs(new Date()).isAfter(maxDate))) {
setHideNow(true);
}
else {
setHideNow(false);
}
}, [hideNow, autoHideNow, minDate, maxDate]);
return (React.createElement(DatePickerBase, __assign({ allowFreeInput: allowFreeInput, dropdownOpened: dropdownOpened !== null && dropdownOpened !== void 0 ? dropdownOpened : false, setDropdownOpened: setDropdownOpened, shadow: shadow, transitionDuration: transitionDuration, ref: useMergedRef(ref, inputRef), size: size, styles: styles, classNames: classNames, onChange: handleChange, onBlur: handleInputBlur, onFocus: handleInputFocus, onKeyDown: handleKeyDown, name: name, inputLabel: inputState, __staticSelector: "DatePicker", dropdownType: dropdownType, dropdownPosition: dropdownPosition, clearable: type === "date" ? false : clearable && !!_value && !disabled, clearButtonLabel: clearButtonLabel, onClear: handleClear, disabled: disabled, withinPortal: withinPortal, amountOfMonths: amountOfMonths, onDropdownClose: onDropdownClose, onDropdownOpen: onDropdownOpen, type: type, unstyled: unstyled }, others),
React.createElement(Calendar, { style: { justifyContent: "center", maxWidth: "unset" }, classNames: classNames, styles: styles, locale: finalLocale, nextMonthLabel: nextMonthLabel, previousMonthLabel: previousMonthLabel, month: allowFreeInput ? calendarMonth : undefined, initialMonth: initialMonth || (_value instanceof Date ? _value : new Date()), onMonthChange: setCalendarMonth, value: _value instanceof Date ? _value : dayjs(_value).toDate(), onChange: handleValueChange, labelFormat: labelFormat, dayClassName: dayClassName, dayStyle: dayStyle, disableOutsideEvents: disableOutsideEvents, minDate: minDate, maxDate: maxDate, excludeDate: excludeDate, __staticSelector: "DatePicker", fullWidth: dropdownType === "modal", __stopPropagation: dropdownType !== "modal", size: dropdownType === "modal" ? "lg" : calendarSize, firstDayOfWeek: firstDayOfWeek, preventFocus: allowFreeInput, amountOfMonths: amountOfMonths, allowLevelChange: allowLevelChange, initialLevel: initialLevel, hideOutsideDates: hideOutsideDates, hideWeekdays: hideWeekdays, renderDay: renderDay, unstyled: unstyled, weekendDays: weekendDays, yearLabelFormat: yearLabelFormat, nextDecadeLabel: nextDecadeLabel, nextYearLabel: nextYearLabel, previousDecadeLabel: previousDecadeLabel, previousYearLabel: previousYearLabel }),
React.createElement(Group, { align: "center", mt: 12, spacing: "xs" },
!_hideNow && (React.createElement(Button, { sx: { flexGrow: 1 }, variant: "light", onClick: handleNow }, nowLabel)),
React.createElement(TimeInput, { icon: React.createElement(IconClock, { size: 18 }), sx: { flexGrow: 1 }, disabled: !_value, value: _value, onChange: function (value) {
setValue(combineTimeAndDate(value, _value));
}, format: dateFormat.match(/ a$/i) ? "12" : "24" }),
React.createElement(Button, { sx: { flexGrow: 1 }, onClick: handleOk }, okLabel))));
});
export default DateTimePicker;
//# sourceMappingURL=DateTimePicker.js.map