@pedidopago/ui 1.3.4 → 1.3.7

package/dist/components/DateInput/index.js

@@ -5,21 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateInput = DateInput;
 
+var _react = require("react");
+
 var _styles = require("./styles");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Input = _interopRequireDefault(require("../Input"));
 
-var _DatePicker = _interopRequireDefault(require("../DatePicker"));
+var _ReactPortal = require("../ReactPortal");
 
-var _react = require("react");
+var _DatePicker = _interopRequireDefault(require("../DatePicker"));
 
-var _useOnClickOutside = require("../../shared/hooks/useOnClickOutside");
+var _ModalWrapper = require("./components/ModalWrapper");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["label", "placeholder", "alert", "helperText", "value", "locales", "localeOptions", "onChange"];
+var _excluded = ["label", "placeholder", "alert", "helperText", "value", "locales", "localeOptions", "onChange", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,6 +49,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 // TODO: Mudar a posição do datepicker dependendo da posição dele aberto.
 function DateInput(_ref) {
+  var _containerRef$current, _optionsModalRef$curr, _containerRef$current3, _containerRef$current4, _containerRef$current5;
+
   var label = _ref.label,
       placeholder = _ref.placeholder,
       alert = _ref.alert,
@@ -55,22 +59,32 @@ function DateInput(_ref) {
       locales = _ref.locales,
       localeOptions = _ref.localeOptions,
       onChange = _ref.onChange,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(),
+  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),
       _useState2 = _slicedToArray(_useState, 2),
-      currentValue = _useState2[0],
-      setCurrentValue = _useState2[1];
+      positionContainer = _useState2[0],
+      setPositionContainer = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(),
       _useState4 = _slicedToArray(_useState3, 2),
-      datePickerOpen = _useState4[0],
-      setDatePickerOpen = _useState4[1];
+      currentValue = _useState4[0],
+      setCurrentValue = _useState4[1];
 
-  var containerRef = (0, _react.useRef)(null);
-  (0, _useOnClickOutside.useOnClickOutside)(containerRef, function () {
-    setDatePickerOpen(false);
-  });
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      datePickerOpen = _useState6[0],
+      setDatePickerOpen = _useState6[1];
+
+  var _useState7 = (0, _react.useState)((_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.getBoundingClientRect().height),
+      _useState8 = _slicedToArray(_useState7, 2),
+      heightModal = _useState8[0],
+      setHeightModal = _useState8[1];
 
   function selectDate(value) {
     setCurrentValue(value);
@@ -81,6 +95,19 @@ function DateInput(_ref) {
   (0, _react.useEffect)(function () {
     setCurrentValue(value);
   }, [value]);
+
+  function handleRepositionModal() {
+    var _containerRef$current2, _optionsModalRef$curr2;
+
+    setPositionContainer((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top);
+    setHeightModal((_optionsModalRef$curr2 = optionsModalRef.current) === null || _optionsModalRef$curr2 === void 0 ? void 0 : _optionsModalRef$curr2.getBoundingClientRect().height);
+  }
+
+  var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    handleRepositionModal();
+    if (!disabled) setDatePickerOpen(!datePickerOpen);
+  }, [datePickerOpen, disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateInputContainer, {
     ref: containerRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
@@ -91,28 +118,30 @@ function DateInput(_ref) {
       withIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "calendar"
       }),
+      disabled: disabled,
+      tabIndex: disabled ? -1 : 0,
       value: currentValue ? Array.isArray(currentValue) ? "".concat(currentValue[0].toLocaleDateString(locales, localeOptions), " - ").concat(currentValue[1].toLocaleDateString(locales, localeOptions)) : currentValue.toLocaleDateString(locales) : '',
-      onClick: function onClick() {
-        return setDatePickerOpen(!datePickerOpen);
-      }
-    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerContainer, {
-      position: 'bottom',
-      variants: {
-        fadeIn: {
-          opacity: 1,
-          y: 0
-        },
-        fadeOut: {
-          opacity: 0,
-          y: -20
+      onClick: toggleOptionsAreaView,
+      onMouseOver: handleRepositionModal
+    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+        onClick: function onClick() {
+          return setDatePickerOpen(false);
         }
-      },
-      initial: "fadeOut",
-      animate: "fadeIn",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
-        value: currentValue,
-        onChange: selectDate
-      }, rest))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+        wrapperId: "portal-root",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalWrapper.ModalWrapper, {
+          open: true,
+          left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
+          top: Number(positionContainer) < 470 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ").concat(heightModal && heightModal + 10, "px)"),
+          ref: optionsModalRef,
+          maxWidth: "auto",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
+            value: currentValue,
+            onChange: selectDate
+          }, rest))
+        })
+      })]
     })]
   });
 }