mantine-datetime-picker
Version:
Mantine UI Datetime Picker component.
225 lines • 14.8 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateTimePicker = void 0;
var dayjs_1 = __importDefault(require("dayjs"));
var react_1 = __importStar(require("react"));
var hooks_1 = require("@mantine/hooks");
var core_1 = require("@mantine/core");
var dates_1 = require("@mantine/dates");
var icons_react_1 = require("@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",
};
exports.DateTimePicker = (0, react_1.forwardRef)(function (props, ref) {
var _a = (0, core_1.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 = (0, core_1.useMantineTheme)();
var finalLocale = locale || theme.datesLocale;
var dateFormat = inputFormat !== null && inputFormat !== void 0 ? inputFormat : "DD/MM/YYYY hh:mm a";
var _b = (0, react_1.useState)(initiallyOpened), dropdownOpened = _b[0], setDropdownOpened = _b[1];
var calendarSize = size === "lg" || size === "xl" ? "md" : "sm";
var inputRef = (0, react_1.useRef)(null);
var _c = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null), lastValidValue = _c[0], setLastValidValue = _c[1];
var _d = (0, hooks_1.useUncontrolled)({
value: value,
defaultValue: defaultValue,
finalValue: null,
onChange: onChange,
}), _value = _d[0], setValue = _d[1];
var _e = (0, react_1.useState)(_value || initialMonth || new Date()), calendarMonth = _e[0], setCalendarMonth = _e[1];
var _f = (0, react_1.useState)(false), focused = _f[0], setFocused = _f[1];
var _g = (0, react_1.useState)(_value instanceof Date
? (0, hooks_1.upperFirst)((0, dayjs_1.default)(_value).locale(finalLocale).format(dateFormat))
: ""), inputState = _g[0], setInputState = _g[1];
var _h = (0, react_1.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();
};
(0, react_1.useEffect)(function () {
if (value === null && !focused) {
setInputState("");
}
if (value instanceof Date && !focused) {
setInputState((0, hooks_1.upperFirst)((0, dayjs_1.default)(value).locale(finalLocale).format(dateFormat)));
}
}, [value, focused, finalLocale, dateFormat]);
var handleValueChange = function (date) {
setValue(date);
setInputState((0, hooks_1.upperFirst)((0, dayjs_1.default)(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)
: (0, dayjs_1.default)(date, dateFormat, finalLocale).toDate();
};
var setDateFromInput = function () {
var date = typeof _value === "string" ? parseDate(_value) : _value;
if (maxDate && (0, dayjs_1.default)(date).isAfter(maxDate)) {
date = maxDate;
}
if (minDate && (0, dayjs_1.default)(date).isBefore(minDate)) {
date = minDate;
}
if (date && (0, dayjs_1.default)(date).isValid()) {
setValue(date);
setLastValidValue(date);
setInputState((0, hooks_1.upperFirst)((0, dayjs_1.default)(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 ((0, dayjs_1.default)(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((0, hooks_1.upperFirst)((0, dayjs_1.default)(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((0, hooks_1.upperFirst)((0, dayjs_1.default)(_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 = (0, dayjs_1.default)(time).hour();
var minute = (0, dayjs_1.default)(time).minute();
var dateAndTime = (0, dayjs_1.default)(date).hour(hour).minute(minute);
//@ts-ignore
return dateAndTime.$d;
};
(0, react_1.useEffect)(function () {
if (hideNow || !autoHideNow)
return;
if ((minDate && (0, dayjs_1.default)(new Date()).isBefore(minDate)) ||
(maxDate && (0, dayjs_1.default)(new Date()).isAfter(maxDate))) {
setHideNow(true);
}
else {
setHideNow(false);
}
}, [hideNow, autoHideNow, minDate, maxDate]);
return (react_1.default.createElement(dates_1.DatePickerBase, __assign({ allowFreeInput: allowFreeInput, dropdownOpened: dropdownOpened !== null && dropdownOpened !== void 0 ? dropdownOpened : false, setDropdownOpened: setDropdownOpened, shadow: shadow, transitionDuration: transitionDuration, ref: (0, hooks_1.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_1.default.createElement(dates_1.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 : (0, dayjs_1.default)(_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_1.default.createElement(core_1.Group, { align: "center", mt: 12, spacing: "xs" },
!_hideNow && (react_1.default.createElement(core_1.Button, { sx: { flexGrow: 1 }, variant: "light", onClick: handleNow }, nowLabel)),
react_1.default.createElement(dates_1.TimeInput, { icon: react_1.default.createElement(icons_react_1.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_1.default.createElement(core_1.Button, { sx: { flexGrow: 1 }, onClick: handleOk }, okLabel))));
});
exports.default = exports.DateTimePicker;
//# sourceMappingURL=DateTimePicker.js.map