@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
727 lines • 52.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useRef, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";
import HUDDropDownContainer from "./HUDDropDownContainer.js";
import HUDIcon from "./HUDIcon.js";
var weekdays = ["S", "M", "T", "W", "T", "F", "S"];
function getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
;
function isDateOutOfRange(date, startDate, endDate) {
return startDate && date < startDate || endDate && date > endDate;
}
;
function formatDisplayDate(date) {
if (!date) {
return "mm/dd/yyyy";
}
var d = new Date(date);
return "".concat(String(d.getMonth() + 1).padStart(2, "0"), "/").concat(String(d.getDate()).padStart(2, "0"), "/").concat(d.getFullYear());
}
;
var navButton = {
background: "transparent",
border: "none",
color: "#ccc",
fontSize: "1rem",
cursor: "pointer",
padding: "0.4rem",
borderRadius: "0.4rem"
};
var modeToggleButton = {
background: "#1A73E8",
border: "none",
borderRadius: "0.5rem",
padding: "0.45rem 0.85rem",
color: "#fff",
fontWeight: "bold",
cursor: "pointer",
fontSize: "0.75rem"
};
var resetButton = {
background: "#333",
color: "#ccc",
border: "1px solid #555",
padding: "0.45rem 0.75rem",
borderRadius: "0.5rem",
fontSize: "0.75rem",
cursor: "pointer"
};
var confirmButton = {
background: "#1A73E8",
color: "#fff",
border: "none",
padding: "0.45rem 0.75rem",
borderRadius: "0.5rem",
fontWeight: "bold",
fontSize: "0.75rem",
cursor: "pointer"
};
function HUDDateTimePicker(_ref) {
var _ref$dateTimeCalendar = _ref.dateTimeCalendarMeridianCellCurrentMeridianConfigurationSettings,
dateTimeCalendarMeridianCellCurrentMeridianConfigurationSettings = _ref$dateTimeCalendar === void 0 ? {} : _ref$dateTimeCalendar,
_ref$previousCalendar = _ref.previousCalendarMonthStripNavigationButtonConfigurationSettings,
previousCalendarMonthStripNavigationButtonConfigurationSettings = _ref$previousCalendar === void 0 ? {} : _ref$previousCalendar,
_ref$nextCalendarMont = _ref.nextCalendarMonthStripNavigationButtonConfigurationSettings,
nextCalendarMonthStripNavigationButtonConfigurationSettings = _ref$nextCalendarMont === void 0 ? {} : _ref$nextCalendarMont,
_ref$previousCalendar2 = _ref.previousCalendarMonthNavigationButtonConfigurationSettings,
previousCalendarMonthNavigationButtonConfigurationSettings = _ref$previousCalendar2 === void 0 ? {} : _ref$previousCalendar2,
_ref$dateTimeCalendar2 = _ref.dateTimeCalendarAnimationTransitionConfigurationSettings,
dateTimeCalendarAnimationTransitionConfigurationSettings = _ref$dateTimeCalendar2 === void 0 ? {} : _ref$dateTimeCalendar2,
_ref$nextCalendarMont2 = _ref.nextCalendarMonthNavigationButtonConfigurationSettings,
nextCalendarMonthNavigationButtonConfigurationSettings = _ref$nextCalendarMont2 === void 0 ? {} : _ref$nextCalendarMont2,
_ref$dateTimeCalendar3 = _ref.dateTimeCalendarMeridianContainerConfigurationSettings,
dateTimeCalendarMeridianContainerConfigurationSettings = _ref$dateTimeCalendar3 === void 0 ? {} : _ref$dateTimeCalendar3,
_ref$dateTimeCalendar4 = _ref.dateTimeCalendarInitialAnimationConfigurationSettings,
dateTimeCalendarInitialAnimationConfigurationSettings = _ref$dateTimeCalendar4 === void 0 ? {} : _ref$dateTimeCalendar4,
_ref$dateTimeCalendar5 = _ref.dateTimeCalendarModeToggleButtonConfigurationSettings,
dateTimeCalendarModeToggleButtonConfigurationSettings = _ref$dateTimeCalendar5 === void 0 ? {} : _ref$dateTimeCalendar5,
_ref$dateTimeCalendar6 = _ref.dateTimeCalendarActionsContainerConfigurationSettings,
dateTimeCalendarActionsContainerConfigurationSettings = _ref$dateTimeCalendar6 === void 0 ? {} : _ref$dateTimeCalendar6,
_ref$dateTimeCalendar7 = _ref.dateTimeCalendarMinuteContainerConfigurationSettings,
dateTimeCalendarMinuteContainerConfigurationSettings = _ref$dateTimeCalendar7 === void 0 ? {} : _ref$dateTimeCalendar7,
_ref$dateTimeCalendar8 = _ref.dateTimeCalendarHourContainerConfigurationSettings,
dateTimeCalendarHourContainerConfigurationSettings = _ref$dateTimeCalendar8 === void 0 ? {} : _ref$dateTimeCalendar8,
_ref$dateTimeCalendar9 = _ref.dateTimeCalendarConfirmButtonConfigurationSettings,
dateTimeCalendarConfirmButtonConfigurationSettings = _ref$dateTimeCalendar9 === void 0 ? {} : _ref$dateTimeCalendar9,
_ref$dateTimeCalendar10 = _ref.dateTimeCalendarExitAnimationConfigurationSettings,
dateTimeCalendarExitAnimationConfigurationSettings = _ref$dateTimeCalendar10 === void 0 ? {} : _ref$dateTimeCalendar10,
_ref$dateTimeCalendar11 = _ref.dateTimeCalendarMeridianCellConfigurationSettings,
dateTimeCalendarMeridianCellConfigurationSettings = _ref$dateTimeCalendar11 === void 0 ? {} : _ref$dateTimeCalendar11,
_ref$calendarStripHea = _ref.calendarStripHeaderContainerConfigurationSettings,
calendarStripHeaderContainerConfigurationSettings = _ref$calendarStripHea === void 0 ? {} : _ref$calendarStripHea,
_ref$dateTimeCalendar12 = _ref.dateTimeCalendarResetButtonConfigurationSettings,
dateTimeCalendarResetButtonConfigurationSettings = _ref$dateTimeCalendar12 === void 0 ? {} : _ref$dateTimeCalendar12,
_ref$timeDropDownFigu = _ref.timeDropDownFigureContainerConfigurationSettings,
timeDropDownFigureContainerConfigurationSettings = _ref$timeDropDownFigu === void 0 ? {} : _ref$timeDropDownFigu,
_ref$timeDropDownFigu2 = _ref.timeDropDownFigureAnimationConfigurationSettings,
timeDropDownFigureAnimationConfigurationSettings = _ref$timeDropDownFigu2 === void 0 ? {} : _ref$timeDropDownFigu2,
_ref$dateTimeCalendar13 = _ref.dateTimeCalendarMinuteLabelConfigurationSettings,
dateTimeCalendarMinuteLabelConfigurationSettings = _ref$dateTimeCalendar13 === void 0 ? {} : _ref$dateTimeCalendar13,
_ref$dateTimeCalendar14 = _ref.dateTimeCalendarHourLabelConfigurationSettings,
dateTimeCalendarHourLabelConfigurationSettings = _ref$dateTimeCalendar14 === void 0 ? {} : _ref$dateTimeCalendar14,
_ref$dateTimeCalendar15 = _ref.dateTimeCalendarAnimationConfigurationSettings,
dateTimeCalendarAnimationConfigurationSettings = _ref$dateTimeCalendar15 === void 0 ? {} : _ref$dateTimeCalendar15,
_ref$calendarHeaderCo = _ref.calendarHeaderContainerConfigurationSettings,
calendarHeaderContainerConfigurationSettings = _ref$calendarHeaderCo === void 0 ? {} : _ref$calendarHeaderCo,
_ref$calendarMonthStr = _ref.calendarMonthStripLabelConfigurationSettings,
calendarMonthStripLabelConfigurationSettings = _ref$calendarMonthStr === void 0 ? {} : _ref$calendarMonthStr,
_ref$timeDropDownFigu3 = _ref.timeDropDownFigureLabelConfigurationSettings,
timeDropDownFigureLabelConfigurationSettings = _ref$timeDropDownFigu3 === void 0 ? {} : _ref$timeDropDownFigu3,
_ref$selectedCalendar = _ref.selectedCalendarDayCellConfigurationSettings,
selectedCalendarDayCellConfigurationSettings = _ref$selectedCalendar === void 0 ? {} : _ref$selectedCalendar,
_ref$dateTimeCalendar16 = _ref.dateTimeCalendarHeaderConfigurationSettings,
dateTimeCalendarHeaderConfigurationSettings = _ref$dateTimeCalendar16 === void 0 ? {} : _ref$dateTimeCalendar16,
_ref$dateTimeCalendar17 = _ref.dateTimeCalendarButtonConfigurationSettings,
dateTimeCalendarButtonConfigurationSettings = _ref$dateTimeCalendar17 === void 0 ? {} : _ref$dateTimeCalendar17,
_ref$dateTimeCalendar18 = _ref.dateTimeCalendarFooterConfigurationSettings,
dateTimeCalendarFooterConfigurationSettings = _ref$dateTimeCalendar18 === void 0 ? {} : _ref$dateTimeCalendar18,
_ref$calendarStripDay = _ref.calendarStripDayCellConfigurationSettings,
calendarStripDayCellConfigurationSettings = _ref$calendarStripDay === void 0 ? {} : _ref$calendarStripDay,
_ref$calendarMonthLab = _ref.calendarMonthLabelConfigurationSettings,
calendarMonthLabelConfigurationSettings = _ref$calendarMonthLab === void 0 ? {} : _ref$calendarMonthLab,
_ref$timeDropDownFigu4 = _ref.timeDropDownFigureConfigurationSettings,
timeDropDownFigureConfigurationSettings = _ref$timeDropDownFigu4 === void 0 ? {} : _ref$timeDropDownFigu4,
_ref$dateTimeContaine = _ref.dateTimeContainerConfigurationSettings,
dateTimeContainerConfigurationSettings = _ref$dateTimeContaine === void 0 ? {} : _ref$dateTimeContaine,
_ref$dateTimeCalendar19 = _ref.dateTimeCalendarConfigurationSettings,
dateTimeCalendarConfigurationSettings = _ref$dateTimeCalendar19 === void 0 ? {} : _ref$dateTimeCalendar19,
_ref$timeDropDownList = _ref.timeDropDownListConfigurationSettings,
timeDropDownListConfigurationSettings = _ref$timeDropDownList === void 0 ? {} : _ref$timeDropDownList,
_ref$timeDropDownCell = _ref.timeDropDownCellConfigurationSettings,
timeDropDownCellConfigurationSettings = _ref$timeDropDownCell === void 0 ? {} : _ref$timeDropDownCell,
_ref$calendarDayStrip = _ref.calendarDayStripConfigurationSettings,
calendarDayStripConfigurationSettings = _ref$calendarDayStrip === void 0 ? {} : _ref$calendarDayStrip,
_ref$calendarDayCellC = _ref.calendarDayCellConfigurationSettings,
calendarDayCellConfigurationSettings = _ref$calendarDayCellC === void 0 ? {} : _ref$calendarDayCellC,
_ref$calendarDayConfi = _ref.calendarDayConfigurationSettings,
calendarDayConfigurationSettings = _ref$calendarDayConfi === void 0 ? {} : _ref$calendarDayConfi,
_ref$calendarConfigur = _ref.calendarConfigurationSettings,
calendarConfigurationSettings = _ref$calendarConfigur === void 0 ? {} : _ref$calendarConfigur,
_ref$previousCalendar3 = _ref.previousCalendarMonthStripNavigationButtonIconConfigurations,
previousCalendarMonthStripNavigationButtonIconConfigurations = _ref$previousCalendar3 === void 0 ? {} : _ref$previousCalendar3,
_ref$nextCalendarMont3 = _ref.nextCalendarMonthStripNavigationButtonIconConfigurations,
nextCalendarMonthStripNavigationButtonIconConfigurations = _ref$nextCalendarMont3 === void 0 ? {} : _ref$nextCalendarMont3,
_ref$previousCalendar4 = _ref.previousCalendarMonthStripNavigationButtonConfigurations,
previousCalendarMonthStripNavigationButtonConfigurations = _ref$previousCalendar4 === void 0 ? {} : _ref$previousCalendar4,
_ref$previousCalendar5 = _ref.previousCalendarMonthNavigationButtonIconConfigurations,
previousCalendarMonthNavigationButtonIconConfigurations = _ref$previousCalendar5 === void 0 ? {} : _ref$previousCalendar5,
_ref$nextCalendarMont4 = _ref.nextCalendarMonthStripNavigationButtonConfigurations,
nextCalendarMonthStripNavigationButtonConfigurations = _ref$nextCalendarMont4 === void 0 ? {} : _ref$nextCalendarMont4,
_ref$previousCalendar6 = _ref.previousCalendarMonthNavigationButtonConfigurations,
previousCalendarMonthNavigationButtonConfigurations = _ref$previousCalendar6 === void 0 ? {} : _ref$previousCalendar6,
_ref$nextCalendarMont5 = _ref.nextCalendarMonthNavigationButtonIconConfigurations,
nextCalendarMonthNavigationButtonIconConfigurations = _ref$nextCalendarMont5 === void 0 ? {} : _ref$nextCalendarMont5,
_ref$dateTimeCalendar20 = _ref.dateTimeCalendarAnimationContainerConfigurations,
dateTimeCalendarAnimationContainerConfigurations = _ref$dateTimeCalendar20 === void 0 ? {} : _ref$dateTimeCalendar20,
_ref$dateTimeCalendar21 = _ref.dateTimeCalendarMeridianContainerConfigurations,
dateTimeCalendarMeridianContainerConfigurations = _ref$dateTimeCalendar21 === void 0 ? {} : _ref$dateTimeCalendar21,
_ref$nextCalendarMont6 = _ref.nextCalendarMonthNavigationButtonConfigurations,
nextCalendarMonthNavigationButtonConfigurations = _ref$nextCalendarMont6 === void 0 ? {} : _ref$nextCalendarMont6,
_ref$dateTimeCalendar22 = _ref.dateTimeCalendarModeToggleButtonConfigurations,
dateTimeCalendarModeToggleButtonConfigurations = _ref$dateTimeCalendar22 === void 0 ? {} : _ref$dateTimeCalendar22,
_ref$dateTimeCalendar23 = _ref.dateTimeCalendarActionsContainerConfigurations,
dateTimeCalendarActionsContainerConfigurations = _ref$dateTimeCalendar23 === void 0 ? {} : _ref$dateTimeCalendar23,
_ref$dateTimeCalendar24 = _ref.dateTimeCalendarMinuteContainerConfigurations,
dateTimeCalendarMinuteContainerConfigurations = _ref$dateTimeCalendar24 === void 0 ? {} : _ref$dateTimeCalendar24,
_ref$dateTimeCalendar25 = _ref.dateTimeCalendarHourContainerConfigurations,
dateTimeCalendarHourContainerConfigurations = _ref$dateTimeCalendar25 === void 0 ? {} : _ref$dateTimeCalendar25,
_ref$dateTimeCalendar26 = _ref.dateTimeCalendarConfirmButtonConfigurations,
dateTimeCalendarConfirmButtonConfigurations = _ref$dateTimeCalendar26 === void 0 ? {} : _ref$dateTimeCalendar26,
_ref$calendarStripHea2 = _ref.calendarStripHeaderContainerConfigurations,
calendarStripHeaderContainerConfigurations = _ref$calendarStripHea2 === void 0 ? {} : _ref$calendarStripHea2,
_ref$dateTimeCalendar27 = _ref.dateTimeCalendarMeridianCellConfigurations,
dateTimeCalendarMeridianCellConfigurations = _ref$dateTimeCalendar27 === void 0 ? {} : _ref$dateTimeCalendar27,
_ref$dateTimeCalendar28 = _ref.dateTimeCalendarMinuteLabelConfigurations,
dateTimeCalendarMinuteLabelConfigurations = _ref$dateTimeCalendar28 === void 0 ? {} : _ref$dateTimeCalendar28,
_ref$timeDropDownFigu5 = _ref.timeDropDownFigureContainerConfigurations,
timeDropDownFigureContainerConfigurations = _ref$timeDropDownFigu5 === void 0 ? {} : _ref$timeDropDownFigu5,
_ref$dateTimeCalendar29 = _ref.dateTimeCalendarResetButtonConfigurations,
dateTimeCalendarResetButtonConfigurations = _ref$dateTimeCalendar29 === void 0 ? {} : _ref$dateTimeCalendar29,
_ref$dateTimeCalendar30 = _ref.dateTimeCalendarButtonIconConfigurations,
dateTimeCalendarButtonIconConfigurations = _ref$dateTimeCalendar30 === void 0 ? {} : _ref$dateTimeCalendar30,
_ref$dateTimeCalendar31 = _ref.dateTimeCalendarHourLabelConfigurations,
dateTimeCalendarHourLabelConfigurations = _ref$dateTimeCalendar31 === void 0 ? {} : _ref$dateTimeCalendar31,
_ref$calendarHeaderCo2 = _ref.calendarHeaderContainerConfigurations,
calendarHeaderContainerConfigurations = _ref$calendarHeaderCo2 === void 0 ? {} : _ref$calendarHeaderCo2,
_ref$calendarMonthStr2 = _ref.calendarMonthStripLabelConfigurations,
calendarMonthStripLabelConfigurations = _ref$calendarMonthStr2 === void 0 ? {} : _ref$calendarMonthStr2,
_ref$timeDropDownFigu6 = _ref.timeDropDownFigureLabelConfigurations,
timeDropDownFigureLabelConfigurations = _ref$timeDropDownFigu6 === void 0 ? {} : _ref$timeDropDownFigu6,
_ref$dateTimeCalendar32 = _ref.dateTimeCalendarButtonConfigurations,
dateTimeCalendarButtonConfigurations = _ref$dateTimeCalendar32 === void 0 ? {} : _ref$dateTimeCalendar32,
_ref$dateTimeCalendar33 = _ref.dateTimeCalendarHeaderConfigurations,
dateTimeCalendarHeaderConfigurations = _ref$dateTimeCalendar33 === void 0 ? {} : _ref$dateTimeCalendar33,
_ref$dateTimeCalendar34 = _ref.dateTimeCalendarFooterConfigurations,
dateTimeCalendarFooterConfigurations = _ref$dateTimeCalendar34 === void 0 ? {} : _ref$dateTimeCalendar34,
_ref$calendarStripDay2 = _ref.calendarStripDayCellConfigurations,
calendarStripDayCellConfigurations = _ref$calendarStripDay2 === void 0 ? {} : _ref$calendarStripDay2,
_ref$calendarMonthLab2 = _ref.calendarMonthLabelConfigurations,
calendarMonthLabelConfigurations = _ref$calendarMonthLab2 === void 0 ? {} : _ref$calendarMonthLab2,
_ref$timeDropDownFigu7 = _ref.timeDropDownFigureConfigurations,
timeDropDownFigureConfigurations = _ref$timeDropDownFigu7 === void 0 ? {} : _ref$timeDropDownFigu7,
_ref$dateTimeContaine2 = _ref.dateTimeContainerConfigurations,
dateTimeContainerConfigurations = _ref$dateTimeContaine2 === void 0 ? {} : _ref$dateTimeContaine2,
_ref$calendarDayStrip2 = _ref.calendarDayStripConfigurations,
calendarDayStripConfigurations = _ref$calendarDayStrip2 === void 0 ? {} : _ref$calendarDayStrip2,
_ref$timeDropDownCell2 = _ref.timeDropDownCellConfigurations,
timeDropDownCellConfigurations = _ref$timeDropDownCell2 === void 0 ? {} : _ref$timeDropDownCell2,
_ref$dateTimeCalendar35 = _ref.dateTimeCalendarConfigurations,
dateTimeCalendarConfigurations = _ref$dateTimeCalendar35 === void 0 ? {} : _ref$dateTimeCalendar35,
_ref$calendarDayCellC2 = _ref.calendarDayCellConfigurations,
calendarDayCellConfigurations = _ref$calendarDayCellC2 === void 0 ? {} : _ref$calendarDayCellC2,
_ref$timeDropDownConf = _ref.timeDropDownConfigurations,
timeDropDownConfigurations = _ref$timeDropDownConf === void 0 ? {} : _ref$timeDropDownConf,
_ref$calendarDayConfi2 = _ref.calendarDayConfigurations,
calendarDayConfigurations = _ref$calendarDayConfi2 === void 0 ? {} : _ref$calendarDayConfi2,
_ref$calendarConfigur2 = _ref.calendarConfigurations,
calendarConfigurations = _ref$calendarConfigur2 === void 0 ? {} : _ref$calendarConfigur2,
_ref$yesterdayCellBor = _ref.yesterdayCellBorder,
yesterdayCellBorder = _ref$yesterdayCellBor === void 0 ? "1px solid rgba(255, 100, 100, 0.1)" : _ref$yesterdayCellBor,
_ref$tomorrowCellBord = _ref.tomorrowCellBorder,
tomorrowCellBorder = _ref$tomorrowCellBord === void 0 ? "1px solid rgba(255, 215, 0, 0.1)" : _ref$tomorrowCellBord,
_ref$todayCellBorder = _ref.todayCellBorder,
todayCellBorder = _ref$todayCellBorder === void 0 ? "1px solid #1A73E8" : _ref$todayCellBorder,
_ref$selectedDateCell = _ref.selectedDateCellBorder,
selectedDateCellBorder = _ref$selectedDateCell === void 0 ? "none" : _ref$selectedDateCell,
_ref$baseDayCellBorde = _ref.baseDayCellBorder,
baseDayCellBorder = _ref$baseDayCellBorde === void 0 ? "none" : _ref$baseDayCellBorde,
_ref$todayCellGlow = _ref.todayCellGlow,
todayCellGlow = _ref$todayCellGlow === void 0 ? "0 0 6px rgba(26, 115, 232, 0.35)" : _ref$todayCellGlow,
_ref$selectedDateCell2 = _ref.selectedDateCellGlow,
selectedDateCellGlow = _ref$selectedDateCell2 === void 0 ? "0 0 12px #1A73E8" : _ref$selectedDateCell2,
_ref$baseDayCellGlow = _ref.baseDayCellGlow,
baseDayCellGlow = _ref$baseDayCellGlow === void 0 ? "none" : _ref$baseDayCellGlow,
_ref$todayCellBaseCol = _ref.todayCellBaseColor,
todayCellBaseColor = _ref$todayCellBaseCol === void 0 ? "rgba(26, 115, 232, 0.15)" : _ref$todayCellBaseCol,
_ref$selectedDateCell3 = _ref.selectedDateCellBaseColor,
selectedDateCellBaseColor = _ref$selectedDateCell3 === void 0 ? "#1A73E8" : _ref$selectedDateCell3,
_ref$baseDayCellBaseC = _ref.baseDayCellBaseColor,
baseDayCellBaseColor = _ref$baseDayCellBaseC === void 0 ? "transparent" : _ref$baseDayCellBaseC,
_ref$yesterdayCellBas = _ref.yesterdayCellBaseColor,
yesterdayCellBaseColor = _ref$yesterdayCellBas === void 0 ? "#2b1f1f" : _ref$yesterdayCellBas,
_ref$tomorrowCellBase = _ref.tomorrowCellBaseColor,
tomorrowCellBaseColor = _ref$tomorrowCellBase === void 0 ? "#2c2c1a" : _ref$tomorrowCellBase,
_ref$selectedDateCell4 = _ref.selectedDateCellColor,
selectedDateCellColor = _ref$selectedDateCell4 === void 0 ? "#ffffff" : _ref$selectedDateCell4,
_ref$previousNextDayC = _ref.previousNextDayCellColor,
previousNextDayCellColor = _ref$previousNextDayC === void 0 ? "#555" : _ref$previousNextDayC,
_ref$outOfRangeDayCel = _ref.outOfRangeDayCellColor,
outOfRangeDayCellColor = _ref$outOfRangeDayCel === void 0 ? "#444" : _ref$outOfRangeDayCel,
_ref$yesterdayCellCol = _ref.yesterdayCellColor,
yesterdayCellColor = _ref$yesterdayCellCol === void 0 ? "#d88c8c" : _ref$yesterdayCellCol,
_ref$tomorrowCellColo = _ref.tomorrowCellColor,
tomorrowCellColor = _ref$tomorrowCellColo === void 0 ? "#d2c372" : _ref$tomorrowCellColo,
_ref$todayCellColor = _ref.todayCellColor,
todayCellColor = _ref$todayCellColor === void 0 ? "#ffffff" : _ref$todayCellColor,
_ref$baseDayCellColor = _ref.baseDayCellColor,
baseDayCellColor = _ref$baseDayCellColor === void 0 ? "#fff" : _ref$baseDayCellColor,
onChange = _ref.onChange,
onReset = _ref.onReset,
startDate = _ref.startDate,
endDate = _ref.endDate,
value = _ref.value;
var _useState = useState(value ? new Date(value) : new Date()),
_useState2 = _slicedToArray(_useState, 2),
selected = _useState2[0],
setSelected = _useState2[1];
var _useState3 = useState(new Date(selected.getFullYear(), selected.getMonth())),
_useState4 = _slicedToArray(_useState3, 2),
monthView = _useState4[0],
setMonthView = _useState4[1];
var _useState5 = useState(new Date()),
_useState6 = _slicedToArray(_useState5, 2),
stripBase = _useState6[0],
setStripBase = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
isOpen = _useState8[0],
setIsOpen = _useState8[1];
var _useState9 = useState("month"),
_useState10 = _slicedToArray(_useState9, 2),
mode = _useState10[0],
setMode = _useState10[1];
var pickerRef = useRef();
var changeMonth = function changeMonth(offset) {
var updated = new Date(monthView);
updated.setMonth(updated.getMonth() + offset);
setMonthView(updated);
};
var changeWeek = function changeWeek(offset) {
var updated = new Date(stripBase);
updated.setDate(updated.getDate() + offset * 7);
setStripBase(updated);
};
var changeDay = function changeDay(dateObj) {
if (isDateOutOfRange(dateObj, startDate, endDate)) {
return;
}
var updated = new Date(dateObj);
setSelected(updated);
var currentMonth = monthView.getMonth();
var currentYear = monthView.getFullYear();
if (updated.getMonth() !== currentMonth || updated.getFullYear() !== currentYear) {
setMonthView(new Date(updated.getFullYear(), updated.getMonth()));
}
};
var apply = function apply() {
onChange === null || onChange === void 0 || onChange(new Date(selected));
setIsOpen(false);
};
var reset = function reset() {
onReset === null || onReset === void 0 || onReset();
setIsOpen(false);
};
var renderMonthGrid = function renderMonthGrid() {
var now = new Date();
var todayStr = now.toDateString();
var tomorrow = new Date(now);
tomorrow.setDate(now.getDate() + 1);
var tomorrowStr = tomorrow.toDateString();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var yesterdayStr = yesterday.toDateString();
var getProximityGradient = function getProximityGradient(target) {
var delta = Math.abs(now.getTime() - target.getTime());
var hours = delta / (1000 * 60 * 60);
var strength = Math.max(0, 1 - hours / 24);
var glowOpacity = function glowOpacity(base) {
return (base * strength).toFixed(2);
};
return "0 0 8px rgba(255, 215, 0, ".concat(glowOpacity(0.3), "), 0 0 16px rgba(255, 165, 0, ").concat(glowOpacity(0.2), ")");
};
var year = monthView.getFullYear();
var month = monthView.getMonth();
var firstDay = new Date(year, month, 1);
var startOffset = firstDay.getDay();
var daysInMonth = getDaysInMonth(year, month);
var days = [];
var _loop = function _loop() {
var offsetDay = i - startOffset + 1;
var prev = offsetDay <= 0;
var next = offsetDay > daysInMonth;
var day = prev ? getDaysInMonth(year, month - 1) + offsetDay : next ? offsetDay - daysInMonth : offsetDay;
var actualDate = new Date(year, month + (next ? 1 : prev ? -1 : 0), day);
var actual = actualDate.toDateString();
var selectedDate = selected.toDateString() === actual;
var outOfRange = isDateOutOfRange(actualDate, startDate, endDate);
var yesterdayCell = actual === yesterdayStr;
var tomorrowCell = actual === tomorrowStr;
var todayCell = actual === todayStr;
var baseColor = selectedDate ? selectedDateCellBaseColor : todayCell ? todayCellBaseColor : tomorrowCell ? tomorrowCellBaseColor : yesterdayCell ? yesterdayCellBaseColor : baseDayCellBaseColor;
var glow = selectedDate ? selectedDateCellGlow : todayCell ? todayCellGlow : tomorrowCell ? getProximityGradient(tomorrow) : yesterdayCell ? getProximityGradient(yesterday) : baseDayCellGlow;
var color = selectedDate ? selectedDateCellColor : todayCell ? todayCellColor : tomorrowCell ? tomorrowCellColor : yesterdayCell ? yesterdayCellColor : prev || next ? previousNextDayCellColor : outOfRange ? outOfRangeDayCellColor : baseDayCellColor;
var border = selectedDate ? selectedDateCellBorder : todayCell ? todayCellBorder : tomorrowCell ? tomorrowCellBorder : yesterdayCell ? yesterdayCellBorder : baseDayCellBorder;
days.push( /*#__PURE__*/React.createElement(motion.div, _extends({
key: i,
style: _objectSpread(_objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: outOfRange ? "not-allowed" : "pointer",
transition: "all 0.269s ease-in-out",
fontWeight: selectedDate ? "bold" : "normal",
border: border,
borderRadius: "0.65rem",
boxShadow: selectedDate ? "0 0 12px #1A73E8" : glow,
background: selectedDate ? "#1A73E8" : baseColor,
color: color,
height: "2.75rem",
width: "2.75rem",
opacity: outOfRange ? 0.35 : 1
}, calendarDayCellConfigurationSettings !== null && calendarDayCellConfigurationSettings !== void 0 ? calendarDayCellConfigurationSettings : {}), selectedDate ? selectedCalendarDayCellConfigurationSettings !== null && selectedCalendarDayCellConfigurationSettings !== void 0 ? selectedCalendarDayCellConfigurationSettings : {} : {}),
onClick: function onClick() {
return changeDay(actualDate);
}
}, calendarDayCellConfigurations !== null && calendarDayCellConfigurations !== void 0 ? calendarDayCellConfigurations : {}), day));
};
for (var i = 0; i < 42; i++) {
_loop();
}
;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "0.75rem"
}, calendarHeaderContainerConfigurationSettings !== null && calendarHeaderContainerConfigurationSettings !== void 0 ? calendarHeaderContainerConfigurationSettings : {})
}, calendarHeaderContainerConfigurations !== null && calendarHeaderContainerConfigurations !== void 0 ? calendarHeaderContainerConfigurations : {}), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, navButton), previousCalendarMonthNavigationButtonConfigurationSettings !== null && previousCalendarMonthNavigationButtonConfigurationSettings !== void 0 ? previousCalendarMonthNavigationButtonConfigurationSettings : {}),
onClick: function onClick() {
return changeMonth(-1);
}
}, previousCalendarMonthNavigationButtonConfigurations !== null && previousCalendarMonthNavigationButtonConfigurations !== void 0 ? previousCalendarMonthNavigationButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: "chevron-left"
}, previousCalendarMonthNavigationButtonIconConfigurations !== null && previousCalendarMonthNavigationButtonIconConfigurations !== void 0 ? previousCalendarMonthNavigationButtonIconConfigurations : {}))), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
fontWeight: "bold",
fontSize: "1.1rem"
}, calendarMonthLabelConfigurationSettings !== null && calendarMonthLabelConfigurationSettings !== void 0 ? calendarMonthLabelConfigurationSettings : {})
}, calendarMonthLabelConfigurations !== null && calendarMonthLabelConfigurations !== void 0 ? calendarMonthLabelConfigurations : {}), monthView.toLocaleString("default", {
month: "long"
}), " ", monthView.getFullYear()), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, navButton), nextCalendarMonthNavigationButtonConfigurationSettings !== null && nextCalendarMonthNavigationButtonConfigurationSettings !== void 0 ? nextCalendarMonthNavigationButtonConfigurationSettings : {}),
onClick: function onClick() {
return changeMonth(1);
}
}, nextCalendarMonthNavigationButtonConfigurations !== null && nextCalendarMonthNavigationButtonConfigurations !== void 0 ? nextCalendarMonthNavigationButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: "chevron-right"
}, nextCalendarMonthNavigationButtonIconConfigurations !== null && nextCalendarMonthNavigationButtonIconConfigurations !== void 0 ? nextCalendarMonthNavigationButtonIconConfigurations : {})))), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)",
gap: "0.35rem"
}, calendarConfigurationSettings !== null && calendarConfigurationSettings !== void 0 ? calendarConfigurationSettings : {})
}, calendarConfigurations !== null && calendarConfigurations !== void 0 ? calendarConfigurations : {}), weekdays.map(function (day) {
return /*#__PURE__*/React.createElement("div", _extends({
key: day,
style: _objectSpread({
textAlign: "center",
color: "#888",
fontSize: "0.75rem"
}, calendarDayConfigurationSettings !== null && calendarDayConfigurationSettings !== void 0 ? calendarDayConfigurationSettings : {})
}, calendarDayConfigurations !== null && calendarDayConfigurations !== void 0 ? calendarDayConfigurations : {}), day);
}), days));
};
var renderStrip = function renderStrip() {
var week = [];
var base = new Date(stripBase);
base.setDate(base.getDate() - base.getDay());
var stripStart = new Date(base);
var stripEnd = new Date(base);
stripEnd.setDate(stripEnd.getDate() + 6);
var stripLabel = "".concat(stripStart.toLocaleDateString("en-US", {
month: "short",
day: "numeric"
}), " \u2013 ").concat(stripEnd.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: stripStart.getFullYear() !== stripEnd.getFullYear() ? "numeric" : undefined
}));
var _loop2 = function _loop2() {
var d = new Date(base);
d.setDate(base.getDate() + i);
var selectedDate = selected.toDateString() === d.toDateString();
week.push( /*#__PURE__*/React.createElement("div", _extends({
key: i,
style: _objectSpread({
flex: "1",
textAlign: "center",
padding: "0.85rem 0.65rem",
borderRadius: "0.6rem",
background: selectedDate ? "#1A73E8" : "#1a1a1a",
color: selectedDate ? "#fff" : "#ccc",
fontWeight: selectedDate ? "bold" : "normal",
cursor: "pointer",
boxShadow: selectedDate ? "0 0 10px #1A73E8" : "0 0 3px #000",
transition: "all 0.2s ease",
border: selectedDate ? "1px solid #1A73E8" : "1px solid #2b2b2b",
margin: "0 0.25rem"
}, calendarStripDayCellConfigurationSettings !== null && calendarStripDayCellConfigurationSettings !== void 0 ? calendarStripDayCellConfigurationSettings : {}),
onClick: function onClick() {
return changeDay(d);
}
}, calendarStripDayCellConfigurations !== null && calendarStripDayCellConfigurations !== void 0 ? calendarStripDayCellConfigurations : {}), weekdays[d.getDay()], /*#__PURE__*/React.createElement("br", null), d.getDate()));
};
for (var i = 0; i < 7; i++) {
_loop2();
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "0.75rem"
}, calendarStripHeaderContainerConfigurationSettings !== null && calendarStripHeaderContainerConfigurationSettings !== void 0 ? calendarStripHeaderContainerConfigurationSettings : {})
}, calendarStripHeaderContainerConfigurations !== null && calendarStripHeaderContainerConfigurations !== void 0 ? calendarStripHeaderContainerConfigurations : {}), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, navButton), previousCalendarMonthStripNavigationButtonConfigurationSettings !== null && previousCalendarMonthStripNavigationButtonConfigurationSettings !== void 0 ? previousCalendarMonthStripNavigationButtonConfigurationSettings : {}),
onClick: function onClick() {
return changeWeek(-1);
}
}, previousCalendarMonthStripNavigationButtonConfigurations !== null && previousCalendarMonthStripNavigationButtonConfigurations !== void 0 ? previousCalendarMonthStripNavigationButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: "chevron-left"
}, previousCalendarMonthStripNavigationButtonIconConfigurations !== null && previousCalendarMonthStripNavigationButtonIconConfigurations !== void 0 ? previousCalendarMonthStripNavigationButtonIconConfigurations : {}))), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
fontWeight: "bold",
color: "#aaa"
}, calendarMonthStripLabelConfigurationSettings !== null && calendarMonthStripLabelConfigurationSettings !== void 0 ? calendarMonthStripLabelConfigurationSettings : {})
}, calendarMonthStripLabelConfigurations !== null && calendarMonthStripLabelConfigurations !== void 0 ? calendarMonthStripLabelConfigurations : {}), stripLabel), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, navButton), nextCalendarMonthStripNavigationButtonConfigurationSettings !== null && nextCalendarMonthStripNavigationButtonConfigurationSettings !== void 0 ? nextCalendarMonthStripNavigationButtonConfigurationSettings : {}),
onClick: function onClick() {
return changeWeek(1);
}
}, nextCalendarMonthStripNavigationButtonConfigurations !== null && nextCalendarMonthStripNavigationButtonConfigurations !== void 0 ? nextCalendarMonthStripNavigationButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: "chevron-right"
}, nextCalendarMonthStripNavigationButtonIconConfigurations !== null && nextCalendarMonthStripNavigationButtonIconConfigurations !== void 0 ? nextCalendarMonthStripNavigationButtonIconConfigurations : {})))), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
justifyContent: "center",
gap: "0.25rem"
}, calendarDayStripConfigurationSettings !== null && calendarDayStripConfigurationSettings !== void 0 ? calendarDayStripConfigurationSettings : {})
}, calendarDayStripConfigurations !== null && calendarDayStripConfigurations !== void 0 ? calendarDayStripConfigurations : {}), week));
};
var renderTimeDropdown = function renderTimeDropdown(label, type, range, meridian) {
var currentValue = function () {
var val = type === "hour" ? selected.getHours() : selected.getMinutes();
if (type === "hour") {
var hr = val % 12;
return hr === 0 ? 12 : hr;
}
return val;
}();
var handleSelect = function handleSelect(val) {
var updated = new Date(selected);
if (type === "hour") {
var converted = val === 12 ? 0 : val;
if (meridian === "PM") {
converted += 12;
}
updated.setHours(converted);
} else {
updated.setMinutes(val);
}
setSelected(updated);
};
return /*#__PURE__*/React.createElement(HUDDropDownContainer, _extends({
dropDownFigureContainerConfigurations: _objectSpread({
style: _objectSpread({
cursor: "pointer",
display: "inline-block"
}, timeDropDownFigureContainerConfigurationSettings !== null && timeDropDownFigureContainerConfigurationSettings !== void 0 ? timeDropDownFigureContainerConfigurationSettings : {})
}, timeDropDownFigureContainerConfigurations !== null && timeDropDownFigureContainerConfigurations !== void 0 ? timeDropDownFigureContainerConfigurations : {}),
dropDownFigureAnimationConfigurations: _objectSpread({
duration: 0
}, timeDropDownFigureAnimationConfigurationSettings !== null && timeDropDownFigureAnimationConfigurationSettings !== void 0 ? timeDropDownFigureAnimationConfigurationSettings : {}),
dropDownListConfigurationSettings: _objectSpread({
msOverflowStyle: "none",
scrollbarWidth: "none",
overflowY: "auto",
backdropFilter: "blur(8.69px)",
border: "1px solid #2B2B2B",
borderRadius: "1rem",
boxShadow: "0 0 16px rgba(26, 115, 232, 0.35)",
background: "rgba(15.69, 15.69, 15.69, 0.369)",
height: "14rem",
width: "6rem",
padding: "0.5rem 0.5rem"
}, timeDropDownListConfigurationSettings !== null && timeDropDownListConfigurationSettings !== void 0 ? timeDropDownListConfigurationSettings : {}),
figureComponent: /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "relative",
textAlign: "center",
fontWeight: "bold",
fontSize: "1.269rem",
border: "1.569px solid #1A73E8",
borderRadius: "0.85rem",
boxShadow: "0 0 12px rgba(26,115,232,0.55)",
background: "linear-gradient(147deg, rgba(25, 69, 227, 0.69) -157.69%, rgba(27.69, 27.69, 27.69, 0.69) 90%)",
color: "#1A73E8",
minWidth: "3.69rem",
padding: "0.5rem 1rem"
}, timeDropDownFigureConfigurationSettings !== null && timeDropDownFigureConfigurationSettings !== void 0 ? timeDropDownFigureConfigurationSettings : {})
}, timeDropDownFigureConfigurations !== null && timeDropDownFigureConfigurations !== void 0 ? timeDropDownFigureConfigurations : {}), String(currentValue).padStart(2, "0"), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
textTransform: "uppercase",
fontWeight: "bold",
fontSize: "0.7rem",
borderRadius: "0.45rem",
background: "#1A73E8",
color: "#fff",
padding: "0.15rem 0.45rem",
right: "0.3rem",
top: "0.2rem"
}, timeDropDownFigureLabelConfigurationSettings !== null && timeDropDownFigureLabelConfigurationSettings !== void 0 ? timeDropDownFigureLabelConfigurationSettings : {})
}, timeDropDownFigureLabelConfigurations !== null && timeDropDownFigureLabelConfigurations !== void 0 ? timeDropDownFigureLabelConfigurations : {}), label)),
dropDownButtonClickAction: handleSelect,
openOnHover: false
}, timeDropDownConfigurations !== null && timeDropDownConfigurations !== void 0 ? timeDropDownConfigurations : {}), Array.from({
length: range
}, function (_, i) {
var val = type === "hour" ? i + 1 : i;
var selectedDate = val === currentValue;
return /*#__PURE__*/React.createElement("div", _extends({
key: val,
style: _objectSpread({
padding: "0.65rem 0.5rem",
borderRadius: "0.6rem",
textAlign: "center",
background: selectedDate ? "#1A73E8" : "rgba(37.69, 37.69, 37.69, 0.169)",
color: selectedDate ? "#fff" : "#bbb",
fontWeight: selectedDate ? "bold" : "normal",
cursor: "pointer",
boxShadow: selectedDate ? "0 0 10px #1A73E8" : "inset 0 0 0 1px #222",
transition: "all 0.25s ease-in-out",
marginBottom: "0.4rem",
fontSize: "0.95rem",
letterSpacing: "0.5px"
}, timeDropDownCellConfigurationSettings !== null && timeDropDownCellConfigurationSettings !== void 0 ? timeDropDownCellConfigurationSettings : {}),
onClick: function onClick() {
return handleSelect(val);
}
}, timeDropDownCellConfigurations !== null && timeDropDownCellConfigurations !== void 0 ? timeDropDownCellConfigurations : {}), String(val).padStart(2, "0"), " ", label);
}));
};
useEffect(function () {
var closeOnClickOutside = function closeOnClickOutside(e) {
if (pickerRef.current && !pickerRef.current.contains(e.target)) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", closeOnClickOutside);
return function () {
return document.removeEventListener("mousedown", closeOnClickOutside);
};
}, []);
return /*#__PURE__*/React.createElement("div", _extends({
ref: pickerRef,
style: _objectSpread({
position: "relative",
display: "inline-block"
}, dateTimeContainerConfigurationSettings !== null && dateTimeContainerConfigurationSettings !== void 0 ? dateTimeContainerConfigurationSettings : {})
}, dateTimeContainerConfigurations !== null && dateTimeContainerConfigurations !== void 0 ? dateTimeContainerConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
fontSize: "0.9rem",
border: "1px solid #333",
borderRadius: "0.75rem",
background: "rgba(12.69, 12.69, 12.69, 0.69)",
color: "#FAFAFA",
minWidth: "5.869rem",
gap: "0.75rem",
padding: "0.65rem 1.25rem"
}, dateTimeCalendarButtonConfigurationSettings !== null && dateTimeCalendarButtonConfigurationSettings !== void 0 ? dateTimeCalendarButtonConfigurationSettings : {}),
onClick: function onClick() {
return setIsOpen(function (p) {
return !p;
});
}
}, dateTimeCalendarButtonConfigurations !== null && dateTimeCalendarButtonConfigurations !== void 0 ? dateTimeCalendarButtonConfigurations : {}), formatDisplayDate(value), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: "calendar"
}, dateTimeCalendarButtonIconConfigurations !== null && dateTimeCalendarButtonIconConfigurations !== void 0 ? dateTimeCalendarButtonIconConfigurations : {}))), /*#__PURE__*/React.createElement(AnimatePresence, dateTimeCalendarAnimationContainerConfigurations !== null && dateTimeCalendarAnimationContainerConfigurations !== void 0 ? dateTimeCalendarAnimationContainerConfigurations : {}, isOpen && /*#__PURE__*/React.createElement(motion.div, _extends({
initial: _objectSpread({
opacity: 0,
scale: 0.95,
y: 5
}, dateTimeCalendarInitialAnimationConfigurationSettings !== null && dateTimeCalendarInitialAnimationConfigurationSettings !== void 0 ? dateTimeCalendarInitialAnimationConfigurationSettings : {}),
animate: _objectSpread({
opacity: 1,
scale: 1,
y: 0
}, dateTimeCalendarAnimationConfigurationSettings !== null && dateTimeCalendarAnimationConfigurationSettings !== void 0 ? dateTimeCalendarAnimationConfigurationSettings : {}),
exit: _objectSpread({
opacity: 0,
scale: 0.95,
y: 5
}, dateTimeCalendarExitAnimationConfigurationSettings !== null && dateTimeCalendarExitAnimationConfigurationSettings !== void 0 ? dateTimeCalendarExitAnimationConfigurationSettings : {}),
transition: _objectSpread({
duration: 0.2
}, dateTimeCalendarAnimationTransitionConfigurationSettings !== null && dateTimeCalendarAnimationTransitionConfigurationSettings !== void 0 ? dateTimeCalendarAnimationTransitionConfigurationSettings : {}),
style: _objectSpread({
position: "absolute",
border: "1px solid #333",
borderRadius: "1rem",
boxShadow: "0 0 2rem rgba(0, 0, 0, 0.75)",
background: "#111",
color: "#FAFAFA",
minWidth: "320px",
zIndex: 9999,
padding: "1.25rem",
right: 0,
top: "calc(100% + 0.5rem)"
}, dateTimeCalendarConfigurationSettings !== null && dateTimeCalendarConfigurationSettings !== void 0 ? dateTimeCalendarConfigurationSettings : {})
}, dateTimeCalendarConfigurations !== null && dateTimeCalendarConfigurations !== void 0 ? dateTimeCalendarConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
justifyContent: "space-between",
marginBottom: "1rem"
}, dateTimeCalendarHeaderConfigurationSettings !== null && dateTimeCalendarHeaderConfigurationSettings !== void 0 ? dateTimeCalendarHeaderConfigurationSettings : {})
}, dateTimeCalendarHeaderConfigurations !== null && dateTimeCalendarHeaderConfigurations !== void 0 ? dateTimeCalendarHeaderConfigurations : {}), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, modeToggleButton), dateTimeCalendarModeToggleButtonConfigurationSettings !== null && dateTimeCalendarModeToggleButtonConfigurationSettings !== void 0 ? dateTimeCalendarModeToggleButtonConfigurationSettings : {}),
onClick: function onClick() {
return setMode(mode === "month" ? "strip" : "month");
}
}, dateTimeCalendarModeToggleButtonConfigurations !== null && dateTimeCalendarModeToggleButtonConfigurations !== void 0 ? dateTimeCalendarModeToggleButtonConfigurations : {}), mode === "month" ? "Strip View" : "Month View"), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
gap: "0.5rem"
}, dateTimeCalendarActionsContainerConfigurationSettings !== null && dateTimeCalendarActionsContainerConfigurationSettings !== void 0 ? dateTimeCalendarActionsContainerConfigurationSettings : {})
}, dateTimeCalendarActionsContainerConfigurations !== null && dateTimeCalendarActionsContainerConfigurations !== void 0 ? dateTimeCalendarActionsContainerConfigurations : {}), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, resetButton), dateTimeCalendarResetButtonConfigurationSettings !== null && dateTimeCalendarResetButtonConfigurationSettings !== void 0 ? dateTimeCalendarResetButtonConfigurationSettings : {}),
onClick: reset
}, dateTimeCalendarResetButtonConfigurations !== null && dateTimeCalendarResetButtonConfigurations !== void 0 ? dateTimeCalendarResetButtonConfigurations : {}), "Reset"), /*#__PURE__*/React.createElement("button", _extends({
style: _objectSpread(_objectSpread({}, confirmButton), dateTimeCalendarConfirmButtonConfigurationSettings !== null && dateTimeCalendarConfirmButtonConfigurationSettings !== void 0 ? dateTimeCalendarConfirmButtonConfigurationSettings : {}),
onClick: apply
}, dateTimeCalendarConfirmButtonConfigurations !== null && dateTimeCalendarConfirmButtonConfigurations !== void 0 ? dateTimeCalendarConfirmButtonConfigurations : {}), "Confirm"))), /*#__PURE__*/React.createElement("div", null, mode === "month" ? renderMonthGrid() : renderStrip()), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "flex-end",
gap: "1.75rem",
marginTop: "1.5rem"
}, dateTimeCalendarFooterConfigurationSettings !== null && dateTimeCalendarFooterConfigurationSettings !== void 0 ? dateTimeCalendarFooterConfigurationSettings : {})
}, dateTimeCalendarFooterConfigurations !== null && dateTimeCalendarFooterConfigurations !== void 0 ? dateTimeCalendarFooterConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
textAlign: "center"
}, dateTimeCalendarHourContainerConfigurationSettings !== null && dateTimeCalendarHourContainerConfigurationSettings !== void 0 ? dateTimeCalendarHourContainerConfigurationSettings : {})
}, dateTimeCalendarHourContainerConfigurations !== null && dateTimeCalendarHourContainerConfigurations !== void 0 ? dateTimeCalendarHourContainerConfigurations : {}), renderTimeDropdown("h", "hour", 12, selected.getHours() >= 12 ? "PM" : "AM"), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
letterSpacing: "1px",
fontSize: "0.75rem",
color: "#888",
marginTop: "0.5rem"
}, dateTimeCalendarHourLabelConfigurationSettings !== null && dateTimeCalendarHourLabelConfigurationSettings !== void 0 ? dateTimeCalendarHourLabelConfigurationSettings : {})
}, dateTimeCalendarHourLabelConfigurations !== null && dateTimeCalendarHourLabelConfigurations !== void 0 ? dateTimeCalendarHourLabelConfigurations : {}), "HOUR")), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
textAlign: "center"
}, dateTimeCalendarMinuteContainerConfigurationSettings !== null && dateTimeCalendarMinuteContainerConfigurationSettings !== void 0 ? dateTimeCalendarMinuteContainerConfigurationSettings : {})
}, dateTimeCalendarMinuteContainerConfigurations !== null && dateTimeCalendarMinuteContainerConfigurations !== void 0 ? dateTimeCalendarMinuteContainerConfigurations : {}), renderTimeDropdown("m", "minute", 60), /*#