@wavemaker/react-runtime 11.14.1-rc.236

package/components/input/epoch/date/components/DatePickerPopover.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _styled = require("../styled");
+var _store = require("@wavemaker/react-runtime/store");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var DatePickerPopover = function DatePickerPopover(_ref) {
+  var open = _ref.open,
+    anchorEl = _ref.anchorEl,
+    onClose = _ref.onClose,
+    adaptiveposition = _ref.adaptiveposition,
+    showbuttonbar = _ref.showbuttonbar,
+    todaybutton = _ref.todaybutton,
+    clearbutton = _ref.clearbutton,
+    todaybuttonlabel = _ref.todaybuttonlabel,
+    clearbuttonlabel = _ref.clearbuttonlabel,
+    isNavigationDisabled = _ref.isNavigationDisabled,
+    restProps = _ref.restProps,
+    getDateObj = _ref.getDateObj,
+    viewmode = _ref.viewmode,
+    calendarViewMode = _ref.calendarViewMode,
+    calendarDate = _ref.calendarDate,
+    selectedDate = _ref.selectedDate,
+    selectfromothermonth = _ref.selectfromothermonth,
+    showweeks = _ref.showweeks,
+    isDateDisabled = _ref.isDateDisabled,
+    handleYearChange = _ref.handleYearChange,
+    handleMonthChange = _ref.handleMonthChange,
+    handleCalendarChange = _ref.handleCalendarChange,
+    setCalendarViewMode = _ref.setCalendarViewMode,
+    setCalendarDate = _ref.setCalendarDate,
+    handleTodayClick = _ref.handleTodayClick,
+    handleClearClick = _ref.handleClearClick;
+  // Get current locale from moment
+  var currentLocale = (0, _store.useAppSelector)(function (state) {
+    return state.i18n.selectedLocale;
+  });
+
+  // Set moment to use full month names globally for this component
+  (0, _react.useEffect)(function () {
+    // Update the current locale with full month names for both months and monthsShort
+    _momentTimezone["default"].updateLocale(currentLocale, {
+      monthsShort: Array.from({
+        length: 12
+      }, function (_, i) {
+        return (0, _momentTimezone["default"])().month(i).format("MMM");
+      }),
+      months: Array.from({
+        length: 12
+      }, function (_, i) {
+        return (0, _momentTimezone["default"])().month(i).format("MMMM");
+      })
+    });
+
+    // Cleanup function to restore original locale
+    return function () {
+      _momentTimezone["default"].locale(currentLocale);
+    };
+  }, [currentLocale]);
+
+  // Render Calendar View
+  var renderCalendarView = function renderCalendarView() {
+    var minDateMoment = restProps.mindate ? (0, _momentTimezone["default"])(getDateObj(restProps.mindate)) : undefined;
+    var maxDateMoment = restProps.maxdate ? (0, _momentTimezone["default"])(getDateObj(restProps.maxdate)) : undefined;
+    var commonProps = {
+      minDate: minDateMoment,
+      maxDate: maxDateMoment,
+      disabled: isNavigationDisabled
+    };
+    switch (viewmode) {
+      case "year":
+        return __jsx(_styled.StyledYearCalendar, (0, _extends2["default"])({
+          value: selectedDate || calendarDate,
+          onChange: handleYearChange
+        }, commonProps));
+      case "month":
+        switch (calendarViewMode) {
+          case "year":
+            return __jsx(_styled.StyledYearCalendar, (0, _extends2["default"])({
+              value: calendarDate,
+              onChange: handleYearChange
+            }, commonProps));
+          default:
+            // Ensure we have a valid date for month view
+            var monthViewDate = calendarDate.isValid() ? calendarDate : (0, _momentTimezone["default"])();
+            return __jsx(_styled.StyledDateCalendar, (0, _extends2["default"])({
+              value: monthViewDate,
+              onChange: handleMonthChange,
+              views: ["month"],
+              view: "month",
+              openTo: "month",
+              referenceDate: monthViewDate,
+              onViewChange: function onViewChange(newView) {
+                if (!isNavigationDisabled && newView) {
+                  setCalendarViewMode(newView);
+                }
+              },
+              dayOfWeekFormatter: function dayOfWeekFormatter(date) {
+                return date.locale(currentLocale).format("ddd");
+              }
+            }, commonProps));
+        }
+      default:
+        // 'day'
+        switch (calendarViewMode) {
+          case "year":
+            return __jsx(_styled.StyledYearCalendar, (0, _extends2["default"])({
+              value: calendarDate,
+              onChange: handleYearChange
+            }, commonProps));
+          case "month":
+            return __jsx(_styled.StyledDateCalendar, (0, _extends2["default"])({
+              value: calendarDate,
+              onChange: handleMonthChange,
+              views: ["month"],
+              view: "month",
+              onViewChange: function onViewChange(newView) {
+                if (!isNavigationDisabled && newView) {
+                  setCalendarViewMode(newView);
+                }
+              },
+              dayOfWeekFormatter: function dayOfWeekFormatter(date) {
+                return date.locale(currentLocale).format("ddd");
+              }
+            }, commonProps));
+          default:
+            return __jsx(_styled.StyledDateCalendar, (0, _extends2["default"])({
+              value: calendarDate,
+              onChange: handleCalendarChange,
+              showDaysOutsideCurrentMonth: selectfromothermonth,
+              displayWeekNumber: showweeks,
+              views: ["day", "year", "month"],
+              view: calendarViewMode,
+              onViewChange: function onViewChange(newView) {
+                if (!isNavigationDisabled && newView) {
+                  setCalendarViewMode(newView);
+                }
+              },
+              onYearChange: function onYearChange(date) {
+                if (!isNavigationDisabled && date) {
+                  setCalendarDate(date);
+                }
+              },
+              onMonthChange: function onMonthChange(date) {
+                if (!isNavigationDisabled && date) {
+                  setCalendarDate(date);
+                }
+              },
+              shouldDisableDate: isDateDisabled,
+              dayOfWeekFormatter: function dayOfWeekFormatter(date) {
+                return date.locale(currentLocale).format("ddd");
+              }
+            }, commonProps));
+        }
+    }
+  };
+  var todayButtonStyle = {
+    "--wm-btn-color": "var(--wm-color-primary)",
+    "--wm-btn-state-layer-color": "var(--wm-color-primary)",
+    background: "none",
+    border: "none"
+  };
+  return __jsx(_material.Popover, {
+    open: open,
+    anchorEl: anchorEl,
+    onClose: onClose,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: adaptiveposition ? "right" : "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: adaptiveposition ? "right" : "left"
+    },
+    sx: {
+      "& .MuiPopover-paper": {
+        boxShadow: 3,
+        borderRadius: 1
+      },
+      "& .MuiDateCalendar-root": {
+        width: showweeks ? "420px" : "370px"
+      }
+    },
+    className: "app-date"
+  }, __jsx(_material.Paper, {
+    elevation: 0,
+    sx: {
+      width: "auto",
+      pb: 2,
+      background: "var(--wm-datepicker-background)"
+    }
+  }, renderCalendarView(), showbuttonbar && (todaybutton || clearbutton) && __jsx(_material.Box, {
+    display: "flex",
+    justifyContent: "space-between",
+    px: 2,
+    mt: 1
+  }, todaybutton && __jsx(_material.Button, {
+    variant: "text",
+    onClick: handleTodayClick,
+    className: "btn  today-btn",
+    disabled: isNavigationDisabled && !(0, _momentTimezone["default"])().isSame((0, _momentTimezone["default"])(getDateObj(restProps.mindate)), "day"),
+    style: todayButtonStyle
+  }, todaybuttonlabel), clearbutton && __jsx(_material.Button, {
+    variant: "text",
+    onClick: handleClearClick,
+    className: "btn  clear-btn",
+    style: todayButtonStyle
+  }, clearbuttonlabel))));
+};
+var _default = exports["default"] = DatePickerPopover;