contentoh-components-library 21.3.19 → 21.3.21

package/dist/components/organisms/Chat/ContainerItems/ContainerItems.stories.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.exampleChat = exports.emptyChat = exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Chat/ContainerItems",
+  component: _index.ContainerItems
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ContainerItems, (0, _objectSpread2.default)({}, args));
+}; // items de prueba
+
+
+var items = {
+  1: {
+    date: "2022-10-13 10:10:00",
+    type: "message",
+    value: "mensaje 1 user10",
+    userId: 10
+  },
+  2: {
+    date: "2022-10-12 13:19:00",
+    type: "message",
+    value: "mensaje 1 user20",
+    userId: 20
+  },
+  3: {
+    date: "2022-10-12 12:33:00",
+    type: "comment",
+    value: "comentario 1 user20",
+    userId: 20
+  },
+  4: {
+    date: "2022-10-12 11:56:00",
+    type: "comment",
+    value: "comentario 1 user30",
+    userId: 30
+  },
+  5: {
+    date: "2022-10-12 8:41:00",
+    type: "statusService",
+    value: "La sección imágenes ha sido validada",
+    userId: 20
+  },
+  6: {
+    date: "2022-10-11 14:58:00",
+    type: "img",
+    value: "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg",
+    userId: 10
+  },
+  7: {
+    date: "2022-10-10 16:12:00",
+    type: "img",
+    value: "84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg",
+    userId: 30
+  },
+  8: {
+    date: "2022-10-10 15:55:00",
+    type: "statusArticle",
+    value: "El estatus cambio a Aprobado Coordinador",
+    userId: 20
+  },
+  9: {
+    date: "2022-10-10 9:15:00",
+    type: "comment",
+    value: "comentario 1 user10",
+    userId: 10
+  },
+  10: {
+    date: "2022-10-9 6:24:00",
+    type: "file",
+    value: "84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf",
+    userId: 10
+  },
+  11: {
+    date: "2022-10-9 4:29:00",
+    type: "file",
+    value: "84300/1/chat/noExiste.docx",
+    userId: 30
+  },
+  12: {
+    date: "2022-10-9 2:39:00",
+    type: "file",
+    value: "84300/1/chat/noExiste2.xlsx",
+    userId: 20
+  },
+  13: {
+    date: "2022-10-8 23:46:00",
+    type: "file",
+    value: "84300/1/chat/noExiste3.csv",
+    userId: 20
+  },
+  14: {
+    date: "2022-10-8 23:22:00",
+    type: "file",
+    value: "84300/1/chat/noExiste4.pptx",
+    userId: 30
+  },
+  15: {
+    date: "2022-10-8 21:01:00",
+    type: "file",
+    value: "84300/1/chat/noExiste5.zip",
+    userId: 10
+  },
+  16: {
+    date: "2022-10-8 20:11:00",
+    type: "file",
+    value: "84300/1/chat/noExiste6.txt",
+    userId: 10
+  }
+}; // users de prueba
+
+var users = {
+  10: {
+    name: "Pedro Castillo",
+    companyId: 100
+  },
+  20: {
+    name: "Ana Carranza",
+    companyId: 200
+  },
+  30: {
+    name: "Javier Aguayo",
+    companyId: 100
+  }
+}; // companies de prueba multiple
+
+var companies = {
+  100: {
+    name: "Fábrica",
+    statusChat: "enabled"
+  },
+  200: {
+    name: "Proveedor",
+    statusChat: "current"
+  }
+};
+var exampleChat = Template.bind({});
+exports.exampleChat = exampleChat;
+exampleChat.args = {
+  chatData: {
+    items: items,
+    users: users,
+    companies: companies
+  },
+  currentUser: {
+    id: 10,
+    companyId: 100
+  }
+};
+var emptyChat = Template.bind({});
+exports.emptyChat = emptyChat;
+emptyChat.args = {
+  chatData: {
+    items: [],
+    users: [],
+    companies: []
+  },
+  currentUser: {
+    id: 10,
+    companyId: 100
+  }
+};

package/dist/components/organisms/Chat/ContainerItems/index.js

@@ -0,0 +1,537 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerItems = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _data = require("../../../../global-files/data");
+
+var _ImageTooltip = require("../../../molecules/ImageTooltip");
+
+var _utils = require("../../../../global-files/utils");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _CustomIcon = require("../../../atoms/CustomIcon");
+
+var _ButtonV = require("../../../atoms/ButtonV2");
+
+var _ButtonDownloadFile = require("../../../molecules/ButtonDownloadFile");
+
+var _Modal = require("../../Modal");
+
+var _Tooltip = require("../../../atoms/Tooltip");
+
+var _material = require("@mui/material");
+
+var _ImagePreview = require("../../../atoms/ImagePreview");
+
+var _handle_userTech = require("../../../../global-files/handle_userTech");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ContainerItems = function ContainerItems(props) {
+  var items = props.items,
+      users = props.users,
+      currentUser = props.currentUser,
+      activeCompanyId = props.activeCompanyId,
+      chatType = props.chatType,
+      showBtnLoadMore = props.showBtnLoadMore,
+      onClickBtnLoadMore = props.onClickBtnLoadMore;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      scrollHeight = _useState2[0],
+      setScrollHeight = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      btnLoadMoreLoading = _useState4[0],
+      setBtnLoadMoreLoading = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      customItems = _useState6[0],
+      setCustomItems = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({
+    show: false,
+    title: "",
+    message: ""
+  }),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      modalAlert = _useState8[0],
+      setModalAlert = _useState8[1];
+
+  var containerList = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!items) return;
+    if (["merchant_product", "order_product"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
+  }, [items]);
+
+  var updateScroll = function updateScroll() {
+    var containerScroll = document.getElementById("containerItems");
+
+    if (containerScroll) {
+      var newScrollHeight = containerScroll.scrollHeight + 15;
+      var positionScroll = newScrollHeight - scrollHeight;
+
+      if (newScrollHeight !== scrollHeight) {
+        containerScroll.scrollTop = positionScroll;
+        setScrollHeight(newScrollHeight);
+      }
+    }
+  };
+
+  var renderGrayLabel = function renderGrayLabel(text, key) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
+      in: true,
+      timeout: 600,
+      container: containerList.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        className: "label-gray",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "separator"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "separator"
+        })]
+      })
+    }, key !== null && key !== void 0 ? key : "");
+  };
+
+  var renderStatusService = function renderStatusService(text, key) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
+      in: true,
+      timeout: 600,
+      container: containerList.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "label-statusService",
+        children: text
+      })
+    }, key !== null && key !== void 0 ? key : "");
+  };
+
+  var renderStatusArticle = function renderStatusArticle(text, key) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
+      in: true,
+      timeout: 600,
+      container: containerList.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "label-statusArticle",
+        children: text
+      })
+    }, key !== null && key !== void 0 ? key : "");
+  };
+
+  var renderStatusTicket = function renderStatusTicket(item) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "item-statusTicket",
+      children: item.value
+    });
+  };
+
+  var renderStatusTicketNeutral = function renderStatusTicketNeutral(item) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+      componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: users[item.userId].name
+      }),
+      className: "itemStatus ticket",
+      position: "topCenter",
+      addArrow: false,
+      transitionType: "zoom",
+      followCursor: false,
+      children: item.value
+    });
+  };
+
+  var renderMessage = function renderMessage(item) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: "item-message",
+      children: [" ", item.value, " "]
+    });
+  };
+
+  var renderComment = function renderComment(item) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: "item-comment",
+      children: [" ", item.value, " "]
+    });
+  };
+
+  var renderImg = function renderImg(item) {
+    var _value$width, _value$height, _value$width2, _value$height2;
+
+    var value = (0, _utils.decodeJSON)(item.value);
+    var originalImgURL = "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value.key); // dimensiones de la imagen a mostrar en el chat
+
+    var imgHeight = (0, _utils.getResizeImgHeight)((_value$width = value.width) !== null && _value$width !== void 0 ? _value$width : 400, (_value$height = value.height) !== null && _value$height !== void 0 ? _value$height : 400, 400);
+    var imgURL = (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value.key, 400, imgHeight); // dimensiones de la imagen a mostrar en modal full
+
+    var modalImgHeight = (0, _utils.getResizeImgHeight)((_value$width2 = value.width) !== null && _value$width2 !== void 0 ? _value$width2 : screen.width, (_value$height2 = value.height) !== null && _value$height2 !== void 0 ? _value$height2 : screen.height, screen.width);
+    var modalImgURL = (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value.key, screen.width, modalImgHeight);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "item-img",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
+        className: "container-ImagePreview",
+        width: "100%",
+        sizeLoading: 35,
+        colorLoading: undefined,
+        imgURL: imgURL,
+        modalImgURL: modalImgURL,
+        downloadImgURL: originalImgURL,
+        imageName: value.name,
+        showButtonDownload: true,
+        componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            children: value.name
+          }),
+          className: "label-nameImg",
+          position: "topCenter",
+          addArrow: false,
+          transitionType: "zoom",
+          followCursor: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "iconDefaultImg",
+            type: "white",
+            size: 60,
+            borderType: "rectangle",
+            icon: _freeSolidSvgIcons.faImage
+          })
+        }),
+        componentDefaultModal: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            children: value.name
+          }),
+          className: "label-nameImgModal",
+          position: "topCenter",
+          addArrow: false,
+          transitionType: "zoom",
+          followCursor: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "iconDefaultImgModal",
+            type: "white",
+            size: 100,
+            borderType: "rectangle",
+            icon: _freeSolidSvgIcons.faImage
+          })
+        })
+      })
+    });
+    /*
+    <Tooltip
+          componentTooltip={<label>{value.name}</label>}
+          className="label-nameFileShort"
+          position={"topCenter"}
+          addArrow={false}
+          transitionType={"zoom"}
+          followCursor={false}
+        >
+          {value.name}
+        </Tooltip>
+         */
+  };
+
+  var renderFile = function renderFile(item, ownMessage) {
+    var value = (0, _utils.decodeJSON)(item.value);
+    var url = "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value.key);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "item-file",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDownloadFile.ButtonDownloadFile, {
+        className: "btnDownloadFileItem",
+        size: 22,
+        type: ownMessage ? "black" : "white",
+        transparent: true,
+        url: url,
+        onDownload: function onDownload(error) {
+          error && setModalAlert(function (prev) {
+            return {
+              show: true,
+              title: error.message,
+              message: error.details
+            };
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: value.name
+        }),
+        className: "label-nameFileShort",
+        position: "topCenter",
+        addArrow: false,
+        transitionType: "zoom",
+        followCursor: false,
+        children: value.name
+      })]
+    });
+  };
+
+  var getUserCreatedItem = function getUserCreatedItem(ownMessage, item, lastUserId) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
+      id: "itemScroll-" + item.id,
+      direction: ownMessage ? "left" : "right",
+      in: true,
+      timeout: 500,
+      container: containerList.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        className: (ownMessage ? "own-message " : "") + (lastUserId === item.userId ? "sameUser" : ""),
+        children: [lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
+          className: "container-imgUser",
+          sizeLoading: 25,
+          colorLoading: undefined,
+          src: (0, _data.getProfilePicture)(item.userId, 34, 34),
+          componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "icon-imgUser",
+            type: "whiteS2",
+            size: 17,
+            borderType: "circle",
+            icon: _freeSolidSvgIcons.faUser
+          }),
+          classNameTooltip: "tooltip-imgUser",
+          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "label-nameUser",
+            children: users[item.userId].name
+          })
+        }), item.type === "message" ? renderMessage(item) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "label-time",
+          children: (0, _utils.getTime)(item.date)
+        })]
+      })
+    }, "item-" + item.id);
+  };
+
+  var getItemNeutral = function getItemNeutral(item) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
+      in: true,
+      timeout: 600,
+      container: containerList.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        className: "itemNeutral",
+        children: item.type === "statusTicket" ? renderStatusTicketNeutral(item) : null
+      })
+    }, "item-" + item.id);
+  };
+
+  var renderItems = function renderItems() {
+    var jsxItems = [];
+    var date = undefined;
+    var countDate = 1;
+
+    var _iterator = (0, _createForOfIteratorHelper2.default)(items),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+
+        // manejo de las etiquetas fechas
+        if (!date) {
+          date = (0, _utils.getFullDate)(new Date(item.date));
+          jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
+        } else {
+          var newDate = (0, _utils.getFullDate)(new Date(item.date));
+
+          if (newDate !== date) {
+            jsxItems.push(renderGrayLabel(newDate, "itemDate-".concat(countDate++)));
+            date = newDate;
+          }
+        } // elementos que van alineados al centro
+
+
+        switch (item.type) {
+          case "statusArticle":
+            jsxItems.push(renderStatusArticle(item.value, "item-".concat(item.id)));
+            break;
+
+          case "statusService":
+            jsxItems.push(renderStatusService(item.value, "item-".concat(item.id)));
+            break;
+        } // acomodo del item (left o right)
+
+
+        var ownMessage = false; // CHAT MERCHANT ARTICLE
+
+        if (chatType === "merchant_product") {
+          if (currentUser.companyId === users[item.userId].companyId) {
+            ownMessage = true;
+          }
+        } // CHAT ORDER ARTICLE
+        else if (chatType === "order_product") {
+          if (currentUser.companyId === users[item.userId].companyId) {
+            if (activeCompanyId && activeCompanyId === currentUser.companyId) {
+              if (item.userId === currentUser.id) {
+                ownMessage = true;
+              }
+            } else {
+              ownMessage = true;
+            }
+          }
+        } // renderizar tipo de item
+
+
+        jsxItems.push(getUserCreatedItem(ownMessage, item));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    setCustomItems(jsxItems);
+  };
+
+  var renderItemsTicket = function renderItemsTicket() {
+    var jsxItems = [];
+    var date = undefined;
+    var countDate = 1;
+    var lastUserId = undefined; // recorrido de los items (del mas viejo al mas reciente)
+
+    for (var index = items.length - 1; index >= 0; index--) {
+      var item = items[index]; // manejo de las etiquetas fechas
+
+      if (!date) {
+        date = (0, _utils.getFullDate)(new Date(item.date));
+        jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
+        lastUserId = undefined;
+      } else {
+        var newDate = (0, _utils.getFullDate)(new Date(item.date));
+
+        if (newDate !== date) {
+          jsxItems.push(renderGrayLabel(newDate, "itemDate-".concat(countDate++)));
+          date = newDate;
+          lastUserId = undefined;
+        }
+      } // elementos que van alineados al centro
+
+      /*
+      switch (item.type) {
+        case "statusTicket":
+          jsxItems.push(getItemNeutral(item));
+          lastUserId = undefined;
+          continue;
+      }
+      */
+      // acomodo del item (left o right)
+
+
+      var ownMessage = false; // user tech
+
+      if (currentUser.isUserTech) {
+        if ((0, _handle_userTech.isUserTech)(users[item.userId].isUserTech)) ownMessage = true;
+      } // user normal
+      else {
+        if (!(0, _handle_userTech.isUserTech)(users[item.userId].isUserTech)) {
+          if (currentUser.companyId === users[item.userId].companyId) {
+            ownMessage = true;
+          }
+        } else if (currentUser.id === item.userId) {
+          ownMessage = true;
+        }
+      } // renderizar tipo de item
+
+
+      jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId));
+      lastUserId = item.userId;
+    }
+
+    setCustomItems(jsxItems);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      id: "containerItems",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "btn-loadMore",
+        children: showBtnLoadMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          className: "container-btnLoadMore",
+          type: "purple",
+          label: "cargar más",
+          size: 10,
+          borderType: "oval",
+          icon: _freeSolidSvgIcons.faRedoAlt,
+          iconPosition: "start",
+          isLoading: btnLoadMoreLoading,
+          onClick: /*#__PURE__*/function () {
+            var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
+              var responseError;
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      setBtnLoadMoreLoading(true);
+
+                      if (!onClickBtnLoadMore) {
+                        _context.next = 6;
+                        break;
+                      }
+
+                      _context.next = 4;
+                      return onClickBtnLoadMore();
+
+                    case 4:
+                      responseError = _context.sent;
+
+                      if (responseError) {
+                        setModalAlert({
+                          show: true,
+                          title: responseError.title,
+                          message: responseError.message
+                        });
+                      }
+
+                    case 6:
+                      setBtnLoadMoreLoading(false);
+
+                    case 7:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            }));
+
+            return function (_x) {
+              return _ref.apply(this, arguments);
+            };
+          }()
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        id: "ulItems",
+        ref: containerList,
+        children: customItems
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      show: modalAlert.show,
+      title: modalAlert.title,
+      message: modalAlert.message,
+      icon: "info",
+      onClickBtnDefault: function onClickBtnDefault(event) {
+        return setModalAlert(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
+    })]
+  });
+};
+
+exports.ContainerItems = ContainerItems;