@pedidopago/ui 1.3.29 → 1.4.0

package/dist/components/DateInput/index.js

@@ -13,14 +13,12 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Input = _interopRequireDefault(require("../Input"));
 
-var _ReactPortal = require("../ReactPortal");
-
 var _DatePicker = _interopRequireDefault(require("../DatePicker"));
 
-var _ModalWrapper = require("./components/ModalWrapper");
-
 var _useDisableBodyScroll = require("../../shared/hooks/useDisableBodyScroll");
 
+var _Modal = require("../Modal");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["label", "placeholder", "alert", "helperText", "value", "locales", "localeOptions", "minDate", "maxDate", "onChange", "disabled", "datePickerPosition", "disableWeekendDays"];
@@ -50,8 +48,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 function DateInput(_ref) {
-  var _containerRef$current, _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6, _containerRef$current7;
-
   var label = _ref.label,
       placeholder = _ref.placeholder,
       alert = _ref.alert,
@@ -70,22 +66,16 @@ function DateInput(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = (0, _react.useRef)(null);
-  var optionsModalRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().top),
+  var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
-      positionContainer = _useState2[0],
-      setPositionContainer = _useState2[1];
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      currentValue = _useState4[0],
-      setCurrentValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      datePickerOpen = _useState6[0],
-      setDatePickerOpen = _useState6[1];
+      datePickerOpen = _useState4[0],
+      setDatePickerOpen = _useState4[1];
 
   function selectDate(value) {
     setCurrentValue(value);
@@ -97,16 +87,8 @@ function DateInput(_ref) {
     setCurrentValue(value);
   }, [value]);
   (0, _useDisableBodyScroll.useDisableBodyScroll)(datePickerOpen, 'child_element');
-
-  function handleRepositionModal() {
-    var _containerRef$current2;
-
-    setPositionContainer((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top);
-  }
-
   var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
-    handleRepositionModal();
     if (!disabled) setDatePickerOpen(!datePickerOpen);
   }, [datePickerOpen, disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateInputContainer, {
@@ -122,31 +104,21 @@ function DateInput(_ref) {
       disabled: disabled,
       tabIndex: disabled ? -1 : 0,
       value: currentValue ? Array.isArray(currentValue) ? String(currentValue[0]) !== String(currentValue[1]) ? "".concat(currentValue[0].toLocaleDateString(locales, localeOptions), " - ").concat(currentValue[1].toLocaleDateString(locales, localeOptions)) : new Date(currentValue[0]).toLocaleDateString() : new Date(currentValue).toLocaleDateString() : '',
-      onClick: toggleOptionsAreaView,
-      onMouseOver: handleRepositionModal
-    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ReactPortal.ReactPortal, {
-        wrapperId: "portal-root",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
-          onClick: function onClick() {
-            return setDatePickerOpen(false);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalWrapper.ModalWrapper, {
-          open: datePickerOpen,
-          left: datePickerPosition === 'left' ? "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px") : undefined,
-          right: datePickerPosition === 'right' ? "".concat(window.innerWidth - Number(containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetLeft) - Number(containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.offsetWidth), "px") : undefined,
-          top: Number(positionContainer) < 540 ? "calc(".concat(((_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current7 = containerRef.current) === null || _containerRef$current7 === void 0 ? void 0 : _containerRef$current7.getBoundingClientRect().top) || 0, "px - ", 360, "px)"),
-          ref: optionsModalRef,
-          maxWidth: "auto",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
-            value: currentValue,
-            onChange: selectDate,
-            minDate: minDate,
-            maxDate: maxDate,
-            disableWeekendDays: disableWeekendDays
-          }, rest))
-        })]
-      })
+      onClick: toggleOptionsAreaView
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      maxWidth: "max-content",
+      maxHeight: "max-content",
+      onClose: function onClose() {
+        return setDatePickerOpen(false);
+      },
+      open: datePickerOpen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
+        value: currentValue,
+        onChange: selectDate,
+        minDate: minDate,
+        maxDate: maxDate,
+        disableWeekendDays: disableWeekendDays
+      }, rest))
     })]
   });
 }