contentoh-components-library 21.4.80 → 21.4.81

package/dist/components/organisms/EditGroup/EditGroup.stories.js

@@ -26,6 +26,7 @@ var Template = function Template(args) {
 var EditGroupDefault = Template.bind({});
 exports.EditGroupDefault = EditGroupDefault;
 EditGroupDefault.args = {
+  show: true,
   groups: [{
     groupName: 'Impuestos',
     editing: false

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

@@ -78,7 +78,9 @@ var reducerGroups = function reducerGroups(state, action) {
 };
 
 var EditGroup = function EditGroup(_ref) {
-  var token = _ref.token;
+  var token = _ref.token,
+      show = _ref.show,
+      onClose = _ref.onClose;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -105,35 +107,35 @@ var EditGroup = function EditGroup(_ref) {
       deletingIndex = _useState8[0],
       setDeletingIndex = _useState8[1];
 
-  var _useState9 = (0, _react.useState)([]),
+  var _useState9 = (0, _react.useState)(null),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      deletedRows = _useState10[0],
-      setDeletedRows = _useState10[1];
+      hoveredIndex = _useState10[0],
+      setHoveredIndex = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(null),
+  var _useState11 = (0, _react.useState)([]),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      hoveredIndex = _useState12[0],
-      setHoveredIndex = _useState12[1];
+      isEditingList = _useState12[0],
+      setIsEditingList = _useState12[1];
 
-  var _useState13 = (0, _react.useState)([]),
+  var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      isEditingList = _useState14[0],
-      setIsEditingList = _useState14[1];
+      newGroup = _useState14[0],
+      setNewGroup = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(false),
+  var _useState15 = (0, _react.useState)(null),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      newGroup = _useState16[0],
-      setNewGroup = _useState16[1];
+      currentEditIndex = _useState16[0],
+      setCurrentEditIndex = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(null),
+  var _useState17 = (0, _react.useState)([]),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      currentEditIndex = _useState18[0],
-      setCurrentEditIndex = _useState18[1];
+      inputValue = _useState18[0],
+      setInputValue = _useState18[1];
 
-  var _useState19 = (0, _react.useState)([]),
+  var _useState19 = (0, _react.useState)(false),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      inputValue = _useState20[0],
-      setInputValue = _useState20[1];
+      shouldClose = _useState20[0],
+      setShouldClose = _useState20[1];
 
   var _useState21 = (0, _react.useState)({
     show: false,
@@ -150,6 +152,11 @@ var EditGroup = function EditGroup(_ref) {
   (0, _react.useEffect)(function () {
     loadData();
   }, []);
+  (0, _react.useEffect)(function () {
+    if (shouldClose) {
+      onClose && onClose();
+    }
+  }, [shouldClose, onClose]);
 
   var loadData = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -449,110 +456,113 @@ var EditGroup = function EditGroup(_ref) {
     }
   };
 
-  var handleCloseModal = function handleCloseModal(e) {
-    if (modalRef.current && !modalRef.current.contains(e.target)) {
-      setEditingIndex(null);
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    document.addEventListener("mousedown", handleCloseModal);
-    return function () {
-      document.removeEventListener("mousedown", handleCloseModal);
-    };
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    ref: modalRef,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "contentModal",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "header",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-          className: "title-edit",
-          children: "Editar grupos"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          className: "circular-button close-button",
-          onClick: handleCloseModal,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _close.default,
-            alt: "close icon"
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "details-edit",
-        children: "Agrega, edita y borra. Luego guarda los cambios."
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"),
-        children: groups.map(function (group, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.GroupRow, {
-            editing: editingIndex === index,
-            deleting: deletingIndex === index,
-            onMouseEnter: function onMouseEnter() {
-              return setHoveredIndex(index);
-            },
-            onMouseLeave: function onMouseLeave() {
-              return setHoveredIndex(null);
-            },
-            className: "group-row ".concat(isEditingList[index] ? "editing" : ""),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              className: "input-group",
-              placeholder: "Escribe el nombre del grupo",
-              value: index !== undefined ? group.groupName : inputValue,
-              onChange: function onChange(e) {
-                return handleInputChange(e.target.value, index);
-              },
-              disabled: !isEditingList[index],
-              autoFocus: isEditingList[index] && editingIndex === index
-            }, index), currentEditIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-              className: "circular-button save-button visible",
-              onClick: function onClick() {
-                return handleSaveChanges(index);
-              },
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+    open: show,
+    className: "container-backgroundModal",
+    timeout: 400,
+    style: {
+      backgroundColor: "transparent",
+      zIndex: 10
+    },
+    onClick: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: show,
+      timeout: 400,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+        ref: modalRef,
+        open: show,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "contentModal",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "header",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: "title-edit",
+              children: "Editar grupos"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              className: "circular-button close-button",
+              onClick: onClose,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: _save.default,
-                alt: "save update icon"
+                src: _close.default,
+                alt: "close icon"
               })
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-                className: "circular-button edit-button ".concat(hoveredIndex === index ? "visible" : ""),
-                onClick: function onClick() {
-                  return handleEditButtonClick(index);
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "details-edit",
+            children: "Agrega, edita y borra. Luego guarda los cambios."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"),
+            children: groups.map(function (group, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.GroupRow, {
+                editing: editingIndex === index,
+                deleting: deletingIndex === index,
+                onMouseEnter: function onMouseEnter() {
+                  return setHoveredIndex(index);
                 },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                  src: _edit.default,
-                  alt: "edit icon"
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-                className: "circular-button delete-button ".concat(hoveredIndex === index ? "visible" : ""),
-                onClick: function onClick() {
-                  return handleDeleteButtonClick(group.groupId);
+                onMouseLeave: function onMouseLeave() {
+                  return setHoveredIndex(null);
                 },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                  src: _trash.default,
-                  alt: "trash icon"
-                })
-              })]
-            })]
-          }, group.groupId);
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "container-save-add",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          className: "button-add",
-          onClick: function onClick() {
-            return handleAddButtonClick();
-          },
-          children: "+ Agregar Grupo"
+                className: "group-row ".concat(isEditingList[index] ? "editing" : ""),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  className: "input-group",
+                  placeholder: "Escribe el nombre del grupo",
+                  value: index !== undefined ? group.groupName : inputValue,
+                  onChange: function onChange(e) {
+                    return handleInputChange(e.target.value, index);
+                  },
+                  disabled: !isEditingList[index],
+                  autoFocus: isEditingList[index] && editingIndex === index
+                }, index), currentEditIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                  className: "circular-button save-button visible",
+                  onClick: function onClick() {
+                    return handleSaveChanges(index);
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: _save.default,
+                    alt: "save update icon"
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                    className: "circular-button edit-button ".concat(hoveredIndex === index ? "visible" : ""),
+                    onClick: function onClick() {
+                      return handleEditButtonClick(index);
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      src: _edit.default,
+                      alt: "edit icon"
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                    className: "circular-button delete-button ".concat(hoveredIndex === index ? "visible" : ""),
+                    onClick: function onClick() {
+                      return handleDeleteButtonClick(group.groupId);
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      src: _trash.default,
+                      alt: "trash icon"
+                    })
+                  })]
+                })]
+              }, group.groupId);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "container-save-add",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              className: "button-add",
+              onClick: function onClick() {
+                return handleAddButtonClick();
+              },
+              children: "+ Agregar Grupo"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
+            onClickBtnDefault: function onClickBtnDefault() {
+              return setModalData(function (prev) {
+                return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                  show: false
+                });
+              });
+            }
+          }))]
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
-        onClickBtnDefault: function onClickBtnDefault() {
-          return setModalData(function (prev) {
-            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-              show: false
-            });
-          });
-        }
-      }))]
+      })
     })
   });
 };

package/package.json

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

package/src/components/organisms/EditGroup/EditGroup.stories.js

@@ -10,6 +10,7 @@ const Template = (args) => <EditGroup {...args} />;
 
 export const EditGroupDefault = Template.bind({});
 EditGroupDefault.args = {
+  show:true,
   groups : [
     { groupName: 'Impuestos', editing: false },
     { groupName: 'Legal', editing: false },

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

@@ -8,6 +8,7 @@ import edit from "../../../assets/images/Icons/edit.svg";
 import close from "../../../assets/images/Icons/close.svg";
 import save from "../../../assets/images/Icons/save.svg";
 import { Modal } from "../../organisms/Modal";
+import { Fade, Grow, Zoom, Backdrop } from "@mui/material";
 import axios from "axios";
 
 const reducerGroups = (state, action) => {
@@ -32,18 +33,18 @@ const reducerGroups = (state, action) => {
   }
 };
 
-export const EditGroup = ({ token }) => {
+export const EditGroup = ({ token, show, onClose }) => {
   const [groups, setGroups] = useState([]);
   const [state, dispatch] = useReducer(reducerGroups, {});
   const [isMoreThanTenGroups, setIsMoreThanTenGroups] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
   const [deletingIndex, setDeletingIndex] = useState(null);
-  const [deletedRows, setDeletedRows] = useState([]);
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const [isEditingList, setIsEditingList] = useState([]);
   const [newGroup, setNewGroup] = useState(false);
   const [currentEditIndex, setCurrentEditIndex] = useState(null);
   const [inputValue, setInputValue] = useState([]);
+  const [shouldClose, setShouldClose] = useState(false);
   const [modalData, setModalData] = useState({
     show: false,
     title: "Actualización completa",
@@ -53,13 +54,18 @@ export const EditGroup = ({ token }) => {
 
   const modalRef = useRef();
 
-  useEffect(() => {
-  }, [groups]);
+  useEffect(() => {}, [groups]);
 
   useEffect(() => {
     loadData();
   }, []);
 
+  useEffect(() => {
+    if (shouldClose) {
+      onClose && onClose();
+    }
+  }, [shouldClose, onClose]);
+
   const loadData = async () => {
     try {
       const response = await axios.post(
@@ -123,7 +129,7 @@ export const EditGroup = ({ token }) => {
     try {
       const response = await axios.post(
         `${process.env.REACT_APP_GROUPS_ENDPOINT}/update?id=${groupId}&groupName=${updatedGroupName}`,
-       {},
+        {},
         {
           headers: {
             Authorization: token,
@@ -231,101 +237,108 @@ export const EditGroup = ({ token }) => {
     if (newGroup !== undefined) {
       handleUpdateGroup(index, newGroup, concatenatedValue);
     } else {
-      AddGroup(index,concatenatedValue);
+      AddGroup(index, concatenatedValue);
     }
   };
 
-  const handleCloseModal = (e) => {
-    if (modalRef.current && !modalRef.current.contains(e.target)) {
-      setEditingIndex(null);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleCloseModal);
-
-    return () => {
-      document.removeEventListener("mousedown", handleCloseModal);
-    };
-  }, []);
-
   return (
-    <Container ref={modalRef}>
-      <div className={`contentModal`}>
-        <div className="header">
-          <h2 className="title-edit">Editar grupos</h2>
-          <Button className={`circular-button close-button`} onClick={handleCloseModal}>
-            <img src={close} alt="close icon" />
-          </Button>
-        </div>
-        <p className="details-edit">
-          Agrega, edita y borra. Luego guarda los cambios.
-        </p>
-        <div
-          className={`${
-            isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"
-          }`}
-        >
-          {groups.map((group, index) => (
-            <GroupRow
-              key={group.groupId}
-              editing={editingIndex === index}
-              deleting={deletingIndex === index}
-              onMouseEnter={() => setHoveredIndex(index)}
-              onMouseLeave={() => setHoveredIndex(null)}
-              className={`group-row ${isEditingList[index] ? "editing" : ""}`}
+    <Backdrop
+      open={show}
+      className="container-backgroundModal"
+      timeout={400}
+      style={{
+        backgroundColor: "transparent",
+        zIndex: 10,
+      }}
+      onClick={onClose}
+    >
+      <Fade in={show} timeout={400}>
+        <Container ref={modalRef} open={show}>
+          <div className={`contentModal`}>
+            <div className="header">
+              <h2 className="title-edit">Editar grupos</h2>
+              <Button
+                className={`circular-button close-button`}
+                onClick={onClose}
+              >
+                <img src={close} alt="close icon" />
+              </Button>
+            </div>
+            <p className="details-edit">
+              Agrega, edita y borra. Luego guarda los cambios.
+            </p>
+            <div
+              className={`${
+                isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"
+              }`}
             >
-              <input
-                key={index}
-                className={`input-group`}
-                placeholder="Escribe el nombre del grupo"
-                value={index !== undefined ? group.groupName : inputValue}
-                onChange={(e) => handleInputChange(e.target.value, index)}
-                disabled={!isEditingList[index]}
-                autoFocus={isEditingList[index] && editingIndex === index}
-              />
-              { currentEditIndex === index ? (
-                <Button
-                  className={`circular-button save-button visible`}
-                  onClick={() => handleSaveChanges(index)}
+              {groups.map((group, index) => (
+                <GroupRow
+                  key={group.groupId}
+                  editing={editingIndex === index}
+                  deleting={deletingIndex === index}
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                  className={`group-row ${
+                    isEditingList[index] ? "editing" : ""
+                  }`}
                 >
-                  <img src={save} alt="save update icon" />
-                </Button>
-              ) : (
-                <>
-                  <Button
-                    className={`circular-button edit-button ${
-                      hoveredIndex === index ? "visible" : ""
-                    }`}
-                    onClick={() => handleEditButtonClick(index)}
-                  >
-                    <img src={edit} alt="edit icon" />
-                  </Button>
-                  <Button
-                    className={`circular-button delete-button ${
-                      hoveredIndex === index ? "visible" : ""
-                    }`}
-                    onClick={() => handleDeleteButtonClick(group.groupId)}
-                  >
-                    <img src={trash} alt="trash icon" />
-                  </Button>
-                </>
-              )}
-            </GroupRow>
-          ))}
-        </div>
-        <div className="container-save-add">
-          <Button className="button-add" onClick={() => handleAddButtonClick()}>
-            + Agregar Grupo
-          </Button>
-        </div>
-        <Modal
-          {...modalData}
-          onClickBtnDefault={() =>
-            setModalData((prev) => ({ ...prev, show: false }))
-          }
-        />
-      </div>
-    </Container>
+                  <input
+                    key={index}
+                    className={`input-group`}
+                    placeholder="Escribe el nombre del grupo"
+                    value={index !== undefined ? group.groupName : inputValue}
+                    onChange={(e) => handleInputChange(e.target.value, index)}
+                    disabled={!isEditingList[index]}
+                    autoFocus={isEditingList[index] && editingIndex === index}
+                  />
+                  {currentEditIndex === index ? (
+                    <Button
+                      className={`circular-button save-button visible`}
+                      onClick={() => handleSaveChanges(index)}
+                    >
+                      <img src={save} alt="save update icon" />
+                    </Button>
+                  ) : (
+                    <>
+                      <Button
+                        className={`circular-button edit-button ${
+                          hoveredIndex === index ? "visible" : ""
+                        }`}
+                        onClick={() => handleEditButtonClick(index)}
+                      >
+                        <img src={edit} alt="edit icon" />
+                      </Button>
+                      <Button
+                        className={`circular-button delete-button ${
+                          hoveredIndex === index ? "visible" : ""
+                        }`}
+                        onClick={() => handleDeleteButtonClick(group.groupId)}
+                      >
+                        <img src={trash} alt="trash icon" />
+                      </Button>
+                    </>
+                  )}
+                </GroupRow>
+              ))}
+            </div>
+            <div className="container-save-add">
+              <Button
+                className="button-add"
+                onClick={() => handleAddButtonClick()}
+              >
+                + Agregar Grupo
+              </Button>
+            </div>
+            <Modal
+              {...modalData}
+              onClickBtnDefault={() =>
+                setModalData((prev) => ({ ...prev, show: false }))
+              }
+            />
+          </div>
+        </Container>
+      </Fade>
+    </Backdrop>
   );
 };