contentoh-components-library 21.3.63 → 21.3.64

package/dist/components/organisms/SideModal/index.js

@@ -22,6 +22,8 @@ var SideModal = function SideModal(_ref) {
   var modal = (0, _react.useRef)();
 
   var closeModal = function closeModal(e) {
+    console.log("borrado");
+
     if (!e.target.closest("#".concat(id)) && show) {
       var _modal$current, _modal$current$classL;
 
@@ -39,6 +41,14 @@ var SideModal = function SideModal(_ref) {
       modal === null || modal === void 0 ? void 0 : (_modal$current2 = modal.current) === null || _modal$current2 === void 0 ? void 0 : (_modal$current2$class = _modal$current2.classList) === null || _modal$current2$class === void 0 ? void 0 : _modal$current2$class.add("shown");
     }
   }, [show]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _modal$current3, _modal$current3$class;
+
+      document.removeEventListener("click", closeModal, false);
+      modal === null || modal === void 0 ? void 0 : (_modal$current3 = modal.current) === null || _modal$current3 === void 0 ? void 0 : (_modal$current3$class = _modal$current3.classList) === null || _modal$current3$class === void 0 ? void 0 : _modal$current3$class.remove("shown");
+    };
+  }, []);
   return show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       id: id,

package/dist/components/organisms/SideModal/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 9999999;\n  background-color: transparent;\n\n  .modal-container {\n    width: 600px;\n    height: 100%;\n    position: absolute;\n    right: -600px;\n    background-color: #fff;\n\n    &.shown {\n      right: 0;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 9999999;\n  background-color: transparent;\n  top: 0;\n  left: 0;\n\n  .modal-container {\n    width: 600px;\n    height: 100%;\n    position: absolute;\n    right: -600px;\n    background-color: #fff;\n    display: flex;\n    flex-direction: column;\n\n    .modal-body {\n      flex: 1;\n    }\n\n    &.shown {\n      right: 0;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.63",
+  "version": "21.3.64",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/organisms/SideModal/index.js

@@ -13,6 +13,7 @@ export const SideModal = ({
   const modal = useRef();
 
   const closeModal = (e) => {
+    console.log("borrado");
     if (!e.target.closest(`#${id}`) && show) {
       document.removeEventListener("click", closeModal, false);
       modal?.current?.classList?.remove("shown");
@@ -27,6 +28,13 @@ export const SideModal = ({
     }
   }, [show]);
 
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("click", closeModal, false);
+      modal?.current?.classList?.remove("shown");
+    };
+  }, []);
+
   return (
     show && (
       <Container>

package/src/components/organisms/SideModal/styles.js

@@ -6,6 +6,8 @@ export const Container = styled.div`
   position: fixed;
   z-index: 9999999;
   background-color: transparent;
+  top: 0;
+  left: 0;
 
   .modal-container {
     width: 600px;
@@ -13,6 +15,12 @@ export const Container = styled.div`
     position: absolute;
     right: -600px;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+
+    .modal-body {
+      flex: 1;
+    }
 
     &.shown {
       right: 0;