@nateradebaugh/react-datetime
Version:
A lightweight but complete datetime picker React.js component
783 lines (771 loc) • 27.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var popover = require('@reach/popover');
var useOnClickOutside = _interopDefault(require('use-onclickoutside'));
var format = _interopDefault(require('date-fns/format'));
var rawParse = _interopDefault(require('date-fns/parse'));
var isDate = _interopDefault(require('date-fns/isDate'));
var toDate = _interopDefault(require('date-fns/toDate'));
var isDateValid = _interopDefault(require('date-fns/isValid'));
var startOfDay = _interopDefault(require('date-fns/startOfDay'));
var clsx = _interopDefault(require('clsx'));
var getHours = _interopDefault(require('date-fns/getHours'));
var addHours = _interopDefault(require('date-fns/addHours'));
var addMinutes = _interopDefault(require('date-fns/addMinutes'));
var addSeconds = _interopDefault(require('date-fns/addSeconds'));
var addMilliseconds = _interopDefault(require('date-fns/addMilliseconds'));
var setHours = _interopDefault(require('date-fns/setHours'));
var addDays = _interopDefault(require('date-fns/addDays'));
var differenceInDays = _interopDefault(require('date-fns/differenceInDays'));
var startOfWeek = _interopDefault(require('date-fns/startOfWeek'));
var startOfMonth = _interopDefault(require('date-fns/startOfMonth'));
var endOfMonth = _interopDefault(require('date-fns/endOfMonth'));
var isSameDay = _interopDefault(require('date-fns/isSameDay'));
var isBefore = _interopDefault(require('date-fns/isBefore'));
var addMonths = _interopDefault(require('date-fns/addMonths'));
var getDate = _interopDefault(require('date-fns/getDate'));
var addYears = _interopDefault(require('date-fns/addYears'));
var isSameMonth = _interopDefault(require('date-fns/isSameMonth'));
var setMonth = _interopDefault(require('date-fns/setMonth'));
var getDaysInMonth = _interopDefault(require('date-fns/getDaysInMonth'));
var setDate = _interopDefault(require('date-fns/setDate'));
var getYear = _interopDefault(require('date-fns/getYear'));
var setYear = _interopDefault(require('date-fns/setYear'));
var getDaysInYear = _interopDefault(require('date-fns/getDaysInYear'));
var setDayOfYear = _interopDefault(require('date-fns/setDayOfYear'));
var isSameYear = _interopDefault(require('date-fns/isSameYear'));
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var allCounters = ["hours", "minutes", "seconds", "milliseconds"];
var defaultTimeConstraints = {
hours: {
step: 1
},
minutes: {
step: 1
},
seconds: {
step: 1
},
milliseconds: {
step: 1
}
};
var TimePart = function TimePart(props) {
var showPrefix = props.showPrefix,
onUp = props.onUp,
onDown = props.onDown,
value = props.value;
return value !== null && value !== undefined ? React.createElement(React.Fragment, null, showPrefix && React.createElement("div", {
className: "rdtCounterSeparator"
}, ":"), React.createElement("div", {
className: "rdtCounter"
}, React.createElement("span", {
className: "rdtBtn",
onMouseDown: onUp
}, "\u25B2"), React.createElement("div", {
className: "rdtCount"
}, value), React.createElement("span", {
className: "rdtBtn",
onMouseDown: onDown
}, "\u25BC"))) : null;
};
function getStepSize(type, timeConstraints) {
var step = defaultTimeConstraints[type].step;
var config = timeConstraints ? timeConstraints[type] : undefined;
if (config && config.step) {
step = config.step;
}
return step;
}
var changeLookup = {
hours: addHours,
minutes: addMinutes,
seconds: addSeconds,
milliseconds: addMilliseconds
};
function change(op, type, timestamp, timeConstraints) {
var mult = op === "sub" ? -1 : 1;
var step = getStepSize(type, timeConstraints) * mult;
return changeLookup[type](timestamp, step);
}
function getFormatted(type, timestamp, timeFormat, formatOptions) {
var fmt = timeFormat;
function has(f, val) {
return f.indexOf(val) !== -1;
}
var hasHours = has(fmt.toLowerCase(), FORMATS.SHORT_HOUR);
var hasMinutes = has(fmt, FORMATS.SHORT_MINUTE);
var hasSeconds = has(fmt, FORMATS.SHORT_SECOND);
var hasMilliseconds = has(fmt, FORMATS.SHORT_MILLISECOND);
var hasDayPart = has(fmt, FORMATS.AM_PM);
var typeFormat = type === "hours" && hasHours ? hasDayPart ? FORMATS.HOUR : FORMATS.MILITARY_HOUR : type === "minutes" && hasMinutes ? FORMATS.MINUTE : type === "seconds" && hasSeconds ? FORMATS.SECOND : type === "milliseconds" && hasMilliseconds ? FORMATS.MILLISECOND : type === "daypart" && hasDayPart ? FORMATS.AM_PM : undefined;
if (typeFormat) {
return format(timestamp, typeFormat, formatOptions);
}
return undefined;
}
function toggleDayPart(timestamp, setSelectedDate) {
return function () {
var hours = getHours(timestamp);
var newHours = hours >= 12 ? hours - 12 : hours + 12;
setSelectedDate(setHours(timestamp, newHours));
};
}
var timer;
var increaseTimer;
var _mouseUpListener;
function onStartClicking(op, type, props) {
return function () {
var readonly = props.readonly,
origViewTimestamp = props.viewTimestamp,
timeConstraints = props.timeConstraints,
setViewTimestamp = props.setViewTimestamp,
setSelectedDate = props.setSelectedDate;
if (!readonly) {
var viewTimestamp = change(op, type, origViewTimestamp, timeConstraints);
setViewTimestamp(viewTimestamp);
timer = setTimeout(function () {
increaseTimer = setInterval(function () {
viewTimestamp = change(op, type, viewTimestamp, timeConstraints);
setViewTimestamp(viewTimestamp);
}, 70);
}, 500);
_mouseUpListener = function mouseUpListener() {
clearTimeout(timer);
clearInterval(increaseTimer);
setSelectedDate(viewTimestamp);
document.body.removeEventListener("mouseup", _mouseUpListener);
document.body.removeEventListener("touchend", _mouseUpListener);
};
document.body.addEventListener("mouseup", _mouseUpListener);
document.body.addEventListener("touchend", _mouseUpListener);
}
};
}
function TimeView(props) {
var viewTimestamp = props.viewTimestamp,
dateFormat = props.dateFormat,
setViewMode = props.setViewMode,
timeFormat = props.timeFormat,
formatOptions = props.formatOptions,
setSelectedDate = props.setSelectedDate;
var numCounters = 0;
return React.createElement("div", {
className: "rdtTime",
"data-testid": "time-picker"
}, React.createElement("table", null, dateFormat ? React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
className: "rdtSwitch",
"data-testid": "time-mode-switcher",
colSpan: 4,
onClick: function onClick() {
return setViewMode("days");
}
}, format(viewTimestamp, dateFormat)))) : null, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, React.createElement("div", {
className: "rdtCounters"
}, allCounters.map(function (type) {
var val = getFormatted(type, viewTimestamp, timeFormat, formatOptions);
if (val) {
numCounters++;
}
return React.createElement(TimePart, {
key: type,
showPrefix: numCounters > 1,
onUp: onStartClicking("add", type, props),
onDown: onStartClicking("sub", type, props),
value: val
});
}), React.createElement(TimePart, {
onUp: toggleDayPart(viewTimestamp, setSelectedDate),
onDown: toggleDayPart(viewTimestamp, setSelectedDate),
value: getFormatted("daypart", viewTimestamp, timeFormat, formatOptions)
})))))));
}
function DaysView(props) {
var timeFormat = props.timeFormat,
viewDate = props.viewDate,
setViewDate = props.setViewDate,
selectedDate = props.selectedDate,
setSelectedDate = props.setSelectedDate,
formatOptions = props.formatOptions,
setViewMode = props.setViewMode,
isValidDate = props.isValidDate;
var weekStart = startOfWeek(viewDate, formatOptions);
var prevMonth = addMonths(viewDate, -1);
var daysSincePrevMonthLastWeekStart = differenceInDays(startOfWeek(endOfMonth(prevMonth), formatOptions), viewDate);
var prevMonthLastWeekStart = addDays(viewDate, daysSincePrevMonthLastWeekStart);
return React.createElement("div", {
className: "rdtDays",
"data-testid": "day-picker"
}, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
className: "rdtPrev",
onClick: function onClick() {
return setViewDate(addMonths(viewDate, -1));
}
}, React.createElement("span", null, "\u2039")), React.createElement("th", {
className: "rdtSwitch",
"data-testid": "day-mode-switcher",
onClick: function onClick() {
return setViewMode("months");
},
colSpan: 5
}, format(viewDate, FORMATS.FULL_MONTH_NAME + " " + FORMATS.YEAR, formatOptions)), React.createElement("th", {
className: "rdtNext",
onClick: function onClick() {
return setViewDate(addMonths(viewDate, 1));
}
}, React.createElement("span", null, "\u203A"))), React.createElement("tr", null, [0, 1, 2, 3, 4, 5, 6].map(function (colNum) {
return React.createElement("th", {
key: colNum,
className: "dow"
}, format(addDays(weekStart, colNum), FORMATS.SHORT_DAY_OF_WEEK, formatOptions));
}))), React.createElement("tbody", null, [0, 1, 2, 3, 4, 5].map(function (rowNum) {
// Use 7 columns per row
var rowStartDay = rowNum * 7;
return React.createElement("tr", {
key: format(addDays(prevMonthLastWeekStart, rowStartDay), FORMATS.FULL_TIMESTAMP)
}, [0, 1, 2, 3, 4, 5, 6].map(function (d) {
var i = d + rowStartDay;
var workingDate = addDays(prevMonthLastWeekStart, i);
var isDisabled = typeof isValidDate === "function" && !isValidDate(workingDate);
var isActive = selectedDate && isSameDay(workingDate, selectedDate);
return React.createElement("td", {
key: getDate(workingDate),
className: clsx(["rdtDay", {
rdtOld: isBefore(workingDate, startOfMonth(viewDate)),
rdtNew: isBefore(endOfMonth(viewDate), workingDate),
rdtActive: isActive,
rdtToday: isSameDay(workingDate, new Date()),
rdtDisabled: isDisabled
}]),
onClick: function onClick() {
if (!isDisabled) {
setSelectedDate(workingDate);
}
}
}, format(workingDate, FORMATS.SHORT_DAY, formatOptions));
}));
})), timeFormat ? React.createElement("tfoot", null, React.createElement("tr", null, React.createElement("td", {
onClick: function onClick() {
return setViewMode("time");
},
colSpan: 7,
className: "rdtTimeToggle",
"data-testid": "day-to-time-mode-switcher"
}, format(viewDate, timeFormat, formatOptions)))) : null));
}
function MonthsView(props) {
var viewDate = props.viewDate,
setViewDate = props.setViewDate,
selectedDate = props.selectedDate,
setSelectedDate = props.setSelectedDate,
formatOptions = props.formatOptions,
setViewMode = props.setViewMode,
isValidDate = props.isValidDate;
return React.createElement("div", {
className: "rdtMonths",
"data-testid": "month-picker"
}, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
className: "rdtPrev",
onClick: function onClick() {
return setViewDate(addYears(viewDate, -1));
}
}, React.createElement("span", null, "\u2039")), React.createElement("th", {
className: "rdtSwitch",
"data-testid": "month-mode-switcher",
onClick: function onClick() {
return setViewMode("years");
},
colSpan: 2
}, format(viewDate, FORMATS.YEAR, formatOptions)), React.createElement("th", {
className: "rdtNext",
onClick: function onClick() {
return setViewDate(addYears(viewDate, 1));
}
}, React.createElement("span", null, "\u203A"))))), React.createElement("table", null, React.createElement("tbody", null, [0, 1, 2].map(function (rowNum) {
// Use 4 columns per row
var rowStartMonth = rowNum * 4;
return React.createElement("tr", {
key: rowStartMonth
}, [0, 1, 2, 3].map(function (m) {
var month = m + rowStartMonth;
var currentMonth = setMonth(viewDate, month);
var daysInMonths = Array.from({
length: getDaysInMonth(currentMonth)
}, function (e, i) {
return setDate(currentMonth, i + 1);
});
var isDisabled = daysInMonths.every(function (d) {
return typeof isValidDate === "function" && !isValidDate(d);
});
var monthDate = setMonth(new Date(), month);
var isActive = selectedDate && isSameMonth(selectedDate, currentMonth);
return React.createElement("td", {
key: month,
className: clsx(["rdtMonth", {
rdtDisabled: isDisabled,
rdtActive: isActive
}]),
onClick: function onClick() {
if (!isDisabled) {
setSelectedDate(setMonth(viewDate, month));
}
}
}, format(monthDate, FORMATS.SHORT_MONTH_NAME, formatOptions));
}));
}))));
}
function YearsView(props) {
var viewDate = props.viewDate,
setViewDate = props.setViewDate,
selectedDate = props.selectedDate,
setSelectedDate = props.setSelectedDate,
formatOptions = props.formatOptions,
setViewMode = props.setViewMode,
isValidDate = props.isValidDate;
var startYear = Math.floor(getYear(viewDate) / 10) * 10;
return React.createElement("div", {
className: "rdtYears",
"data-testid": "year-picker"
}, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
className: "rdtPrev",
onClick: function onClick() {
return setViewDate(addYears(viewDate, -10));
}
}, React.createElement("span", null, "\u2039")), React.createElement("th", {
className: "rdtSwitch",
"data-testid": "year-mode-switcher",
onClick: function onClick() {
return setViewMode("years");
},
colSpan: 2
}, startYear, "-", startYear + 9), React.createElement("th", {
className: "rdtNext",
onClick: function onClick() {
return setViewDate(addYears(viewDate, 10));
}
}, React.createElement("span", null, "\u203A"))))), React.createElement("table", null, React.createElement("tbody", null, [0, 1, 2].map(function (rowNum) {
// Use 4 columns per row
var rowStartYear = startYear - 1 + rowNum * 4;
return React.createElement("tr", {
key: rowStartYear
}, [0, 1, 2, 3].map(function (y) {
var year = y + rowStartYear;
var currentYear = setYear(viewDate, year);
var daysInYear = Array.from({
length: getDaysInYear(viewDate)
}, function (e, i) {
return setDayOfYear(currentYear, i + 1);
});
var isDisabled = daysInYear.every(function (d) {
return typeof isValidDate === "function" && !isValidDate(d);
});
var isActive = selectedDate && isSameYear(selectedDate, currentYear);
return React.createElement("td", {
key: year,
className: clsx(["rdtYear", {
rdtDisabled: isDisabled,
rdtActive: isActive
}]),
onClick: function onClick() {
if (!isDisabled) {
setSelectedDate(setYear(viewDate, year));
}
}
}, format(currentYear, "yyyy", formatOptions));
}));
}))));
}
var _excluded = ["viewMode", "isStatic", "id", "className", "style"];
var viewLookup = {
time: TimeView,
months: MonthsView,
years: YearsView,
days: DaysView
};
var CalendarContainer = /*#__PURE__*/React.forwardRef(function CalendarContainer(props, ref) {
var viewMode = props.viewMode,
isStatic = props.isStatic,
id = props.id,
className = props.className,
style = props.style,
rest = _objectWithoutPropertiesLoose(props, _excluded);
if (!viewMode) {
return null;
}
var CalendarElement = viewLookup[viewMode];
return React.createElement("div", {
ref: ref,
id: id,
"data-testid": "picker-wrapper",
className: clsx(["rdtPicker", className, {
rdtStatic: isStatic
}]),
style: style
}, CalendarElement && React.createElement(CalendarElement, Object.assign({}, rest)));
});
var _excluded$1 = ["isValidDate", "dateTypeMode", "value", "onChange", "onBlur", "onFocus", "dateFormat", "timeFormat", "locale", "weekStartsOn", "shouldHideInput", "timeConstraints"];
var FORMATS = {
MONTH: "LL",
SHORT_MONTH_NAME: "LLL",
FULL_MONTH_NAME: "LLLL",
SHORT_DAY: "d",
DAY: "dd",
SHORT_DAY_OF_WEEK: "iiiiii",
YEAR: "yyyy",
MILITARY_HOUR: "H",
HOUR: "h",
SHORT_HOUR: "h",
SHORT_MINUTE: "m",
MINUTE: "mm",
SHORT_SECOND: "s",
SECOND: "ss",
SHORT_MILLISECOND: "SSS",
MILLISECOND: "SSS",
AM_PM: "a",
FULL_TIMESTAMP: "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"
};
function useDefaultStateWithOverride(defaultValue) {
var _useState = React.useState(undefined),
override = _useState[0],
setOverride = _useState[1];
var value = override || defaultValue;
// Clear the override if the default changes
React.useEffect(function () {
setOverride(undefined);
}, [defaultValue]);
return [value, setOverride];
}
function useDefaultDateWithOverride(defaultValue) {
var _useState2 = React.useState(undefined),
override = _useState2[0],
setOverride = _useState2[1];
var value = override || defaultValue;
// Clear the override if the default changes
var changeVal = defaultValue.getTime();
React.useEffect(function () {
setOverride(undefined);
}, [changeVal]);
return [value, setOverride];
}
function parse(date, fullFormat, formatOptions) {
if (typeof date === "string") {
var asDate = rawParse(date, fullFormat, new Date(), formatOptions);
if (isDateValid(asDate)) {
var formatted = format(asDate, fullFormat, formatOptions);
if (date === formatted) {
return asDate;
}
}
} else if (date) {
var _asDate = toDate(date);
if (isDateValid(_asDate)) {
return _asDate;
}
}
return undefined;
}
var nextViewModes = {
days: "days",
months: "days",
years: "months"
};
function getDefaultViewMode(dateFormat, timeFormat) {
if (dateFormat) {
if (dateFormat.match(/[d]/)) {
return "days";
} else if (dateFormat.indexOf("L") !== -1) {
return "months";
} else if (dateFormat.indexOf("y") !== -1) {
return "years";
}
}
if (timeFormat) {
return "time";
}
return undefined;
}
function getDateTypeMode(rawDateTypeMode) {
if (typeof rawDateTypeMode === "string") {
var lowerRawDateTypeMode = rawDateTypeMode.toLowerCase();
switch (lowerRawDateTypeMode) {
case "utc-ms-timestamp":
case "input-format":
return lowerRawDateTypeMode;
}
}
return "Date";
}
// Please do not use types off of a default export module or else Storybook Docs will suffer.
// see: https://github.com/storybookjs/storybook/issues/9556
var DateTime = function DateTime(props) {
var isValidDate = props.isValidDate,
rawDateTypeMode = props.dateTypeMode,
value = props.value,
rawOnChange = props.onChange,
onBlur = props.onBlur,
onFocus = props.onFocus,
_props$dateFormat = props.dateFormat,
rawDateFormat = _props$dateFormat === void 0 ? true : _props$dateFormat,
_props$timeFormat = props.timeFormat,
rawTimeFormat = _props$timeFormat === void 0 ? true : _props$timeFormat,
locale = props.locale,
weekStartsOn = props.weekStartsOn,
_props$shouldHideInpu = props.shouldHideInput,
shouldHideInput = _props$shouldHideInpu === void 0 ? false : _props$shouldHideInpu,
timeConstraints = props.timeConstraints,
rest = _objectWithoutPropertiesLoose(props, _excluded$1);
var isDisabled = props.disabled || props.readOnly;
//
// Formats
//
var defaultDateFormat = FORMATS.MONTH + "/" + FORMATS.DAY + "/" + FORMATS.YEAR;
var dateFormat = rawDateFormat === true ? defaultDateFormat : rawDateFormat === false ? "" : rawDateFormat;
var defaultTimeFormat = FORMATS.HOUR + ":" + FORMATS.MINUTE + " " + FORMATS.AM_PM;
var timeFormat = rawTimeFormat === true ? defaultTimeFormat : rawTimeFormat === false ? "" : rawTimeFormat;
var fullFormat = dateFormat && timeFormat ? dateFormat + " " + timeFormat : dateFormat || timeFormat || "";
var formatOptions = React.useMemo(function () {
return {
locale: locale,
weekStartsOn: typeof weekStartsOn === "number" ? weekStartsOn % 7 : weekStartsOn
};
}, [locale, weekStartsOn]);
var valueAsDate = parse(value, fullFormat, formatOptions);
var dateTypeMode = getDateTypeMode(rawDateTypeMode);
var getChangedValue = React.useCallback(function (newValue) {
if (typeof newValue === "string") {
return newValue;
}
if (!newValue) {
return newValue;
}
switch (dateTypeMode) {
case "utc-ms-timestamp":
return newValue.getTime();
case "input-format":
return format(newValue, fullFormat, formatOptions);
}
return newValue;
}, [dateTypeMode, formatOptions, fullFormat]);
//
// On Change
// string -> string
// falsy -> raw onChange
// Date -> if numeric, number (ms)
// Date -> if not numeric, Date
//
var onChange = React.useCallback(function (newValue) {
if (typeof rawOnChange !== "function") {
return;
}
var changedValue = getChangedValue(newValue);
//
// Suppress change event when the value didn't change!
//
if (value && changedValue && isDate(value) && isDate(changedValue)) {
var oldValStr = format(value, fullFormat, formatOptions);
var newValStr = format(changedValue, fullFormat, formatOptions);
if (oldValStr === newValStr) {
return;
}
}
rawOnChange(changedValue);
}, [formatOptions, fullFormat, getChangedValue, rawOnChange, value]);
//
// ViewDate
//
var _useDefaultDateWithOv = useDefaultDateWithOverride(valueAsDate || startOfDay(new Date())),
viewDate = _useDefaultDateWithOv[0],
setViewDate = _useDefaultDateWithOv[1];
//
// ViewMode
//
var defaultViewMode = getDefaultViewMode(dateFormat, timeFormat);
var _useDefaultStateWithO = useDefaultStateWithOverride(defaultViewMode),
viewMode = _useDefaultStateWithO[0],
setViewMode = _useDefaultStateWithO[1];
//
// ViewTimestamp
//
var _useDefaultDateWithOv2 = useDefaultDateWithOverride(valueAsDate || viewDate),
viewTimestamp = _useDefaultDateWithOv2[0],
setViewTimestamp = _useDefaultDateWithOv2[1];
//
// IsOpen
//
var _useState3 = React.useState(false),
isOpen = _useState3[0],
setIsOpen = _useState3[1];
function open() {
// Don't allow opening if disabled
if (isDisabled) {
return;
}
if (!isOpen && viewMode) {
setIsOpen(true);
if (typeof onFocus === "function") {
onFocus();
}
}
}
function closeWith(newValue) {
if (isOpen) {
setIsOpen(false);
if (typeof onBlur === "function") {
var changedValue = getChangedValue(newValue);
onBlur(changedValue);
}
}
}
function close() {
return closeWith(valueAsDate);
}
//
// SetSelectedDate
//
function setSelectedDate(newDate, tryClose) {
if (tryClose === void 0) {
tryClose = true;
}
var asDate = toDate(newDate);
setViewDate(asDate);
setViewTimestamp(asDate);
// Time switches value but stays open
if (viewMode === "time") {
onChange(newDate);
}
// When view mode is the default, switch and try to close
else if (viewMode === defaultViewMode) {
onChange(newDate);
if (tryClose) {
closeWith(newDate);
}
}
// When view mode is not the default, switch to the next view mode
else {
var newViewMode = viewMode ? nextViewModes[viewMode] : undefined;
setViewMode(newViewMode);
}
}
//
// Trigger change when important props change
//
React.useEffect(function () {
if (valueAsDate) {
setSelectedDate(valueAsDate);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dateTypeMode, fullFormat]);
function onInputChange(e) {
var newValue = e.target.value;
var newValueAsDate = parse(newValue, fullFormat, formatOptions);
if (newValueAsDate) {
setSelectedDate(newValueAsDate, false);
} else {
onChange(newValue);
}
}
function onInputKeyDown(e) {
if (isOpen) {
switch (e.code) {
// Enter key
case "Enter":
// Eat enter key
e.preventDefault();
if (inputRef.current) {
inputRef.current.blur();
}
close();
break;
// Escape key
case "Escape":
if (inputRef.current) {
inputRef.current.blur();
}
close();
break;
// Tab key
case "Tab":
close();
break;
}
} else {
switch (e.code) {
// Down arrow
case "ArrowDown":
open();
break;
}
}
}
var inputRef = React.useRef(null);
var contentRef = React.useRef(null);
useOnClickOutside(contentRef, close);
var valueStr = valueAsDate && fullFormat ? format(valueAsDate, fullFormat, formatOptions) : typeof value === "string" ? value : "";
//
// Input Props
//
var finalInputProps = _extends({}, rest, {
ref: inputRef,
type: "text",
onClick: open,
onFocus: open,
onChange: onInputChange,
onKeyDown: onInputKeyDown,
value: valueStr
});
//
// Calendar props
//
var calendarProps = {
ref: contentRef,
dateFormat: dateFormat,
timeFormat: timeFormat,
viewDate: viewDate,
setViewDate: setViewDate,
selectedDate: valueAsDate,
setSelectedDate: setSelectedDate,
viewTimestamp: viewTimestamp,
setViewTimestamp: setViewTimestamp,
formatOptions: formatOptions,
viewMode: viewMode,
setViewMode: setViewMode,
isValidDate: isValidDate,
isStatic: shouldHideInput,
timeConstraints: timeConstraints
};
return !shouldHideInput ? React__default.createElement(React__default.Fragment, null, React__default.createElement("input", Object.assign({}, finalInputProps)), isOpen && React__default.createElement(popover.Popover, {
targetRef: inputRef
}, React__default.createElement(CalendarContainer, Object.assign({}, calendarProps)))) : React__default.createElement(CalendarContainer, Object.assign({}, finalInputProps, calendarProps));
};
exports.DateTime = DateTime;
exports.FORMATS = FORMATS;
exports.default = DateTime;
//# sourceMappingURL=react-datetime.cjs.development.js.map