@portnet/ui 0.1.54 → 0.1.56

package/dist/components/inputs/PuiDateTimeField.js

@@ -23,6 +23,7 @@ var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
 var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
 var _PuiDialog = _interopRequireDefault(require("../others/PuiDialog"));
 var _PuiTextField = _interopRequireDefault(require("./PuiTextField"));
+var _DateTimePickerField = _interopRequireDefault(require("../others/DateTimePickerField"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
   _excluded2 = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
@@ -288,9 +289,9 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardDateTimeField, _objectSpread({
-    id: id,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerField.default, _objectSpread({
     ref: ref,
+    id: id,
     className: className,
     sx: sx,
     label: label,

package/dist/components/others/DateTimePickerField.js

@@ -0,0 +1,261 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _CalendarMonth = _interopRequireDefault(require("@mui/icons-material/CalendarMonth"));
+var _material = require("@mui/material");
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _reactDatepicker = _interopRequireWildcard(require("@trendmicro/react-datepicker"));
+var _formik = require("formik");
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _react = _interopRequireWildcard(require("react"));
+var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
+var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
+require("./custom-datepicker.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const dateTimeRegex = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun)\s(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s\d{2}\s\d{4}\s\d{2}:\d{2}:\d{2}\sGMT[+-]\d{4}\s\(UTC[+-]\d{2}:\d{2}\)$/;
+const DATE_TIME_FORMATS = {
+  LONG: "YYYY-MM-DD HH:mm:ss",
+  SHORT: "YYYY-MM-DD HH:mm"
+};
+const DateTimePickerField = _ref => {
+  let {
+    label,
+    name,
+    format = "YYYY-MM-DD HH:mm",
+    onChange,
+    minDate,
+    maxDate,
+    value,
+    required = true,
+    error = false,
+    helperText = null,
+    fullWidth = true
+  } = _ref;
+  const [field] = (0, _formik.useField)(name);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [timeAnchorEl, setTimeAnchorEl] = (0, _react.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, _react.useState)(null);
+  const [selectedTime, setSelectedTime] = (0, _react.useState)(null);
+  const openDatePopover = Boolean(anchorEl);
+  const openTimePopover = Boolean(timeAnchorEl);
+  const hasInitialized = (0, _react.useRef)(false);
+  const [canUpdate, setCanUpdate] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    const initialize = () => {
+      const initialValue = value || (field === null || field === void 0 ? void 0 : field.value);
+      setSelectedDate(initialValue ? (0, _momentTimezone.default)(initialValue).format("YYYY-MM-DD") : "");
+      setSelectedTime(initialValue ? (0, _momentTimezone.default)(initialValue).format("HH:mm") : "");
+      hasInitialized.current = true;
+    };
+    if (canUpdate && !hasInitialized.current && (value || field !== null && field !== void 0 && field.value)) {
+      initialize();
+    }
+    return () => {
+      hasInitialized.current = false;
+    };
+  }, [value, field === null || field === void 0 ? void 0 : field.value]);
+  const handleDateTimeClick = event => setAnchorEl(event.currentTarget);
+  const handleTimeClick = event => setTimeAnchorEl(event.currentTarget);
+  const handleDateChange = date => setSelectedDate((0, _momentTimezone.default)(date).format("YYYY-MM-DD"));
+  const handleTimeChange = time => setSelectedTime(time);
+  const handleDateClose = () => {
+    const combinedDateTime = "".concat(selectedDate, " ").concat(selectedTime);
+    console.log("🚀 ~ handleDateClose ~ combinedDateTime:", combinedDateTime);
+    const unixTimestamp = _momentTimezone.default.utc(combinedDateTime, "YYYY-MM-DD HH:mm").subtract(1, "hours");
+    console.log("🚀 ~ handleDateClose ~ unixTimestamp:", unixTimestamp);
+    setCanUpdate(false);
+    if (onChange) onChange(unixTimestamp);
+    setAnchorEl(null);
+  };
+  const handleTimeClose = () => setTimeAnchorEl(null);
+  const convertDateTimeFormat = dateStr => {
+    const regex = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}(:\d{2})?$/;
+    if (!regex.test(dateStr)) {
+      return null;
+    }
+    try {
+      const [datePart, timePart] = dateStr.split(" ");
+      const [year, month, day] = datePart.split("-");
+      return "".concat(day, "/").concat(month, "/").concat(year, " ").concat(timePart);
+    } catch (error) {
+      return null;
+    }
+  };
+  const renderTimeSelectors = () => {
+    const timeParts = selectedTime === null || selectedTime === void 0 ? void 0 : selectedTime.split(":");
+    const hours = timeParts === null || timeParts === void 0 ? void 0 : timeParts[0];
+    const minutes = timeParts === null || timeParts === void 0 ? void 0 : timeParts[1];
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      style: {
+        display: "flex",
+        gap: 4
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        value: hours,
+        onChange: e => handleTimeChange("".concat(e.target.value, ":").concat(minutes)),
+        style: {
+          width: "55px",
+          fontSize: 11.5
+        },
+        children: [...Array(24).keys()].map(hour => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          style: {
+            fontSize: 11.5
+          },
+          value: String(hour).padStart(2, "0"),
+          children: String(hour).padStart(2, "0")
+        }, hour))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        value: minutes,
+        onChange: e => handleTimeChange("".concat(hours, ":").concat(e.target.value)),
+        style: {
+          width: "55px",
+          fontSize: 11.5
+        },
+        children: [...Array(60).keys()].map(minute => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          style: {
+            fontSize: 11.5
+          },
+          value: String(minute).padStart(2, "0"),
+          children: String(minute).padStart(2, "0")
+        }, minute))
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiTextField.default, {
+      name: name,
+      label: label,
+      value: convertDateTimeFormat(selectedDate + " " + selectedTime),
+      fullWidth: fullWidth,
+      onClick: handleDateTimeClick,
+      readOnly: true,
+      error: error,
+      helperText: helperText,
+      required: required,
+      InputProps: {
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+          position: "end",
+          style: {
+            marginLeft: -10,
+            marginTop: "-0.1px"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarMonth.default, {
+            fontSize: "small"
+          })
+        })
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+      open: openDatePopover,
+      anchorEl: anchorEl,
+      onClose: handleDateClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      style: {
+        width: "310px"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        style: {
+          padding: 16
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-around"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.DateInput, {
+            value: selectedDate,
+            onChange: date => handleDateChange(date)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+            value: selectedTime,
+            onChange: event => {
+              const inputValue = event.target.value;
+              if (/^[0-9:]*$/.test(inputValue)) setSelectedTime(inputValue);
+            },
+            onBlur: () => {
+              const [hour, minute] = selectedTime === null || selectedTime === void 0 ? void 0 : selectedTime.split(":").map(val => parseInt(val, 10) || 0);
+              const validatedHour = String(Math.min(23, hour)).padStart(2, "0");
+              const validatedMinute = String(Math.min(59, minute)).padStart(2, "0");
+              setSelectedTime("".concat(validatedHour, ":").concat(validatedMinute));
+            },
+            sx: {
+              "& .MuiInputBase-root": {
+                width: "100%",
+                fontSize: 12.5
+              },
+              "& .MuiOutlinedInput-input": {
+                padding: "4px",
+                height: "23.5px"
+              }
+            },
+            InputProps: {
+              startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+                onClick: handleTimeClick,
+                position: "start",
+                style: {
+                  marginLeft: -10,
+                  cursor: "pointer"
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccessTime.default, {
+                  fontSize: "small"
+                })
+              })
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+          date: selectedDate,
+          onSelect: date => handleDateChange(date),
+          minDate: minDate,
+          maxDate: maxDate
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            textAlign: "right",
+            padding: 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+            onClick: handleDateClose,
+            children: "Choisir"
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+      open: openTimePopover,
+      anchorEl: timeAnchorEl,
+      onClose: handleTimeClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      style: {
+        marginTop: 16,
+        marginLeft: -4
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        style: {
+          padding: 4,
+          display: "flex",
+          justifyContent: "center",
+          width: "120px",
+          height: "25px"
+        },
+        children: renderTimeSelectors()
+      })
+    })]
+  });
+};
+var _default = exports.default = DateTimePickerField;

package/dist/components/others/custom-datepicker.css

@@ -0,0 +1,227 @@
+.datepicker---date-picker-container---1kNBY {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 20px;
+  border: none;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  padding: 0 5px;
+  position: relative;
+  display: inline-block;
+}
+.datepicker---date-picker-container---1kNBY *,
+.datepicker---date-picker-container---1kNBY *:before,
+.datepicker---date-picker-container---1kNBY *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__header {
+  text-align: center;
+  background-color: #fff;
+  border: none;
+  position: relative;
+  padding: 0;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__month {
+  margin: 0;
+  text-align: center;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__current-month {
+  color: #222;
+  font-family: "Roboto", sans-serif !important;
+  font-weight: bold;
+  font-size: 13px;
+  height: 20px;
+  margin: 8px 0;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__navigation {
+  background: none;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  position: absolute;
+  top: 3px;
+  padding: 5px;
+  border: none;
+  z-index: 1;
+  outline: 0;
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__navigation:hover {
+  border-radius: 3px;
+  background-color: #eee;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__navigation--previous {
+  left: 8px;
+  background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgVHJlbmQgTWljcm8gU3R5bGUgUG9ydGFsIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8dGl0bGU+YW5nbGUtbGVmdDwvdGl0bGU+DQogIDxwYXRoIGZpbGw9InJnYigzNCwzNCwzNCkiIGQ9Ik05LjUwMSAxMi41MDZsLTQuNDk5LTQuNTA2IDQuNDg4LTQuNDk0IDEgMS0zLjQ5IDMuNDk0IDMuNTAxIDMuNTA2eiI+PC9wYXRoPg0KPC9zdmc+);
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__navigation--next {
+  right: 8px;
+  background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgVHJlbmQgTWljcm8gU3R5bGUgUG9ydGFsIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8dGl0bGU+YW5nbGUtcmlnaHQ8L3RpdGxlPg0KICA8cGF0aCBmaWxsPSJyZ2IoMzQsMzQsMzQpIiBkPSJNNi41MDEgMTIuNWwtMS0xIDMuNTAxLTMuNTA2LTMuNDktMy40OTQgMS0xIDQuNDg4IDQuNDk0eiI+PC9wYXRoPg0KPC9zdmc+);
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day,
+.datepicker---date-picker-container---1kNBY .react-datepicker__day-name {
+  color: #222;
+  display: inline-block;
+  text-align: center;
+  width: 30px;
+  line-height: 20px;
+  border: 0;
+  padding: 5px;
+  margin: 2px;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day {
+  cursor: pointer;
+  font-size: 13px;
+  font-family: "Roboto", sans-serif !important;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day:hover {
+  background: #eee;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day.react-datepicker__day--disabled,
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day:hover.react-datepicker__day--disabled {
+  background: inherit;
+  cursor: default;
+  color: #bbb;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day-name {
+  padding-top: 9px;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: "Roboto", sans-serif !important;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day-names {
+  white-space: nowrap;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day--outside-month {
+  color: #bbb;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day--today {
+  color: #888 !important;
+}
+
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day--today.react-datepicker__day--selected {
+  color: #fff !important;
+}
+
+.datepicker---date-picker-container---1kNBY .react-datepicker__day--selected {
+  color: #fff;
+  font-weight: bold;
+  font-family: "Roboto", sans-serif !important;
+  background-color: #232f66 !important;
+  border-radius: 50%;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day--selected:hover {
+  background-color: #232f66 !important;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .datepicker---date-input---1vOyn > input {
+    height: 32px;
+  }
+}
+.datepicker---date-input-container---2zD9B {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 20px;
+  position: relative;
+}
+.datepicker---date-input-container---2zD9B *,
+.datepicker---date-input-container---2zD9B *:before,
+.datepicker---date-input-container---2zD9B *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+.datepicker---date-input---1vOyn {
+  width: 120px;
+}
+.datepicker---date-input---1vOyn > input {
+  display: block;
+  width: 100%;
+  height: auto;
+  line-height: inherit;
+  padding: 5px 12px;
+  padding-left: 30px;
+  font-size: 13px;
+  font-family: "Roboto", sans-serif !important;
+  color: #222;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  outline: none;
+}
+.datepicker---date-input---1vOyn > input:focus {
+  border-color: #232f66 !important;
+}
+.datepicker---date-input-icon---1UeQu {
+  position: absolute;
+  left: 9px;
+  top: 8px;
+  color: #666;
+  width: 14px;
+  height: 14px;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .datepicker---time-input---2ICRB > input {
+    height: 32px;
+  }
+}
+.datepicker---time-input-container---s4Ikh {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 20px;
+  position: relative;
+}
+.datepicker---time-input-container---s4Ikh *,
+.datepicker---time-input-container---s4Ikh *:before,
+.datepicker---time-input-container---s4Ikh *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+.datepicker---time-input---2ICRB {
+  width: 120px;
+}
+.datepicker---time-input---2ICRB > input {
+  display: block;
+  width: 100%;
+  height: auto;
+  line-height: inherit;
+  padding: 5px 12px;
+  padding-left: 30px;
+  font-size: 13px;
+  font-family: "Roboto", sans-serif !important;
+  color: #222;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  outline: none;
+}
+.datepicker---time-input---2ICRB > input:focus {
+  border-color: #232f66 !important;
+}
+.datepicker---time-input-icon---3TeZ8 {
+  position: absolute;
+  left: 9px;
+  top: 8px;
+  color: #666;
+  width: 14px;
+  height: 14px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "description": "Portnet UI",
   "keywords": [
     "react",