@portnet/ui 0.1.21 → 0.1.22

package/dist/components/inputs/PuiDateTimeField.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.symbol.description.js");
+var _material = require("@mui/material");
 var _styles = require("@mui/material/styles");
 var _DatePicker = require("@mui/x-date-pickers/DatePicker");
 var _formik = require("formik");
@@ -14,10 +15,10 @@ var _moment = _interopRequireDefault(require("moment"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _apperance = require("../../config/apperance");
-var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
-var _PuiTextField = _interopRequireDefault(require("./PuiTextField"));
 var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
+var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
 var _PuiDialog = _interopRequireDefault(require("../others/PuiDialog"));
+var _PuiTextField = _interopRequireDefault(require("./PuiTextField"));
 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"],
@@ -48,11 +49,13 @@ const StyledDateMuiTextField = (0, _styles.styled)( /*#__PURE__*/React.forwardRe
   }
 }));
 const TimePickerDialog = _ref => {
+  var _ref2, _position$top, _ref3, _ref4;
   let {
     open,
     selectedDate,
     onTimeSelected,
-    onClose
+    onClose,
+    position
   } = _ref;
   const defaultTime = (0, _moment.default)(selectedDate).isValid() ? (0, _moment.default)(selectedDate).format("HH:mm") : (0, _moment.default)().format("HH:mm");
   const [selectedTime, setSelectedTime] = React.useState(defaultTime);
@@ -63,7 +66,7 @@ const TimePickerDialog = _ref => {
     onTimeSelected(selectedTime);
     onClose();
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiDialog.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiDialog.default, {
     open: open,
     onClose: onClose,
     slotProps: {
@@ -78,49 +81,64 @@ const TimePickerDialog = _ref => {
     PaperProps: {
       elevation: 5,
       sx: {
-        width: 380,
-        maxWidth: "720px!important"
+        backgroundColor: "white",
+        alignItems: "center",
+        display: "flex",
+        width: 340,
+        maxWidth: "720px!important",
+        position: "fixed",
+        height: 48,
+        left: (_ref2 = (position === null || position === void 0 ? void 0 : position.left) - 420 / 2) !== null && _ref2 !== void 0 ? _ref2 : 0,
+        top: (_position$top = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top !== void 0 ? _position$top : 0,
+        paddingLeft: 0
       }
     },
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: 2,
-      width: 340,
-      justifyContent: "center",
-      alignSelf: "center"
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTextField.default, {
-      id: "time",
-      type: "time",
-      value: selectedTime,
-      onChange: handleTimeChange,
-      InputLabelProps: {
-        shrink: true
-      },
-      inputProps: {
-        step: 60
-      },
-      formik: false,
-      sx: {
-        width: 150
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-      onClick: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
-        color: _apperance.palette.primary
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        marginTop: 1,
+        gap: 2,
+        width: 340,
+        justifyContent: "center",
+        left: (_ref3 = (position === null || position === void 0 ? void 0 : position.left) - 380 / 2) !== null && _ref3 !== void 0 ? _ref3 : 0,
+        top: (_ref4 = (position === null || position === void 0 ? void 0 : position.top) + 36) !== null && _ref4 !== void 0 ? _ref4 : 36,
+        paddingLeft: 1.5,
+        position: "fixed"
       },
-      children: "Annuler"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-      onClick: handleOk,
-      sx: {
-        color: _apperance.palette.primary
-      },
-      children: "OK"
-    })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTextField.default, {
+        id: "time",
+        type: "time",
+        value: selectedTime,
+        onChange: handleTimeChange,
+        InputLabelProps: {
+          shrink: true
+        },
+        inputProps: {
+          step: 60
+        },
+        formik: false,
+        sx: {
+          width: 150
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+        onClick: onClose,
+        sx: {
+          color: _apperance.palette.primary
+        },
+        children: "Cancel"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+        onClick: handleOk,
+        sx: {
+          color: _apperance.palette.primary
+        },
+        children: "OK"
+      })]
+    })
   });
 };
-const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
       id,
       className,
@@ -142,13 +160,15 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       helperText,
       onChange,
       onBlur
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref5,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  const textFieldRef = React.useRef(null);
   const [dateTime, setDateTime] = React.useState(value || null);
   const minDateObj = minDate ? (0, _moment.default)(minDate, format).toDate() : undefined;
   const maxDateObj = maxDate ? (0, _moment.default)(maxDate, format).toDate() : undefined;
   const [displayedDateTime, setDisplayedDateTime] = React.useState(value || null);
   const [openTimePicker, setOpenTimePicker] = React.useState(false);
+  const [dialogPosition, setDialogPosition] = React.useState();
   const handleDateChange = date => {
     if (date) {
       setDateTime((0, _moment.default)(date).format(format));
@@ -162,6 +182,24 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     setDisplayedDateTime(updatedDateTime);
     onChange(updatedDateTime);
   };
+  React.useEffect(() => {
+    const updatePosition = () => {
+      if (textFieldRef.current) {
+        const rect = textFieldRef.current.getBoundingClientRect();
+        setDialogPosition({
+          left: rect.left + rect.width / 2 + window.scrollX,
+          top: rect.top > 310 ? rect.top - 80 : rect.top + 80
+        });
+      }
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, _objectSpread({
       ref: ref,
@@ -185,6 +223,7 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         }
       },
       renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDateMuiTextField, _objectSpread(_objectSpread({}, params), {}, {
+        ref: textFieldRef,
         id: id,
         className: className,
         label: label,
@@ -202,11 +241,12 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       open: openTimePicker,
       selectedDate: dateTime,
       onTimeSelected: handleTimeSelected,
-      onClose: () => setOpenTimePicker(false)
+      onClose: () => setOpenTimePicker(false),
+      position: dialogPosition
     })]
   });
 });
-const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
       id,
       className,
@@ -228,8 +268,8 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       helperText,
       onChange,
       onBlur
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref6,
+    rest = _objectWithoutProperties(_ref6, _excluded2);
   const [field, meta] = (0, _formik.useField)(name);
   const formikContext = (0, _formik.useFormikContext)();
   const [hasError, setHasError] = React.useState(false);
@@ -276,7 +316,7 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onBlur: handleBlur
   }, rest));
 });
-const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
       formik,
       id,
@@ -299,8 +339,8 @@ const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       helperText,
       onChange,
       onBlur
-    } = _ref4,
-    rest = _objectWithoutProperties(_ref4, _excluded3);
+    } = _ref7,
+    rest = _objectWithoutProperties(_ref7, _excluded3);
   return /*#__PURE__*/React.createElement(formik ? PuiFormikDateTimeField : PuiStandardDateTimeField, _objectSpread({
     ref,
     id,

package/package.json

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