contentoh-components-library 21.2.102 → 21.2.104

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

@@ -1,160 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChatLists = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _styles = require("./styles");
-
-var _react = require("react");
-
-var _utils = require("../../../../global-files/utils");
-
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-
-var _CustomIcon = require("../../../atoms/CustomIcon");
-
-var _Image = require("../../../atoms/Image");
-
-var _Tooltip = require("../../../atoms/Tooltip");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var ChatLists = function ChatLists(props) {
-  var companies = props.companies,
-      currentCompanyId = props.currentCompanyId,
-      onClickCompany = props.onClickCompany;
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      openChats = _useState2[0],
-      setOpenChats = _useState2[1];
-
-  var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      closedChats = _useState4[0],
-      setClosedChats = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    renderChats();
-  }, [companies]);
-
-  var renderChats = function renderChats() {
-    var jsxOpenChats = [];
-    var jsxClosedChats = [];
-
-    var _loop = function _loop() {
-      var companyId = _Object$keys[_i];
-      var company = companies[companyId]; // crear el item chat
-
-      var itemChat = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerItemChat, {
-        onClick: function onClick(event) {
-          onClickCompany && onClickCompany(companyId);
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
-          className: "img-logoCompany",
-          width: "34px",
-          sizeLoading: 24,
-          colorLoading: undefined,
-          src: company.src,
-          componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
-            className: "icon-logoCompany",
-            type: "white",
-            borderType: "circle",
-            size: 15,
-            icon: _freeSolidSvgIcons.faImage
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "container-info",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-            className: "label-name",
-            children: [" ", company.name, " "]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            className: "label-lastDate",
-            children: (0, _utils.getCustomDate)(new Date(company.items.length ? company.items[0].date : undefined))
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "container-indicators",
-          children: currentCompanyId == companyId && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "label-ownCompany",
-            children: "Interno"
-          })
-        })]
-      }, "itemChat-" + companyId); // checar si es chat abierto
-
-      if (company.statusChat == "closed") jsxClosedChats.push(itemChat);else jsxOpenChats.push(itemChat);
-    };
-
-    for (var _i = 0, _Object$keys = Object.keys(companies); _i < _Object$keys.length; _i++) {
-      _loop();
-    }
-
-    setOpenChats(jsxOpenChats);
-    setClosedChats(jsxClosedChats);
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-      children: [openChats.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "container-headerChats",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-            className: "tooltip-title",
-            position: "topCenter",
-            addArrow: false,
-            transitionType: "zoom",
-            followCursor: false,
-            componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerTooltip, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-                className: "label-title",
-                children: " Chats abiertos "
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-                className: "label-message",
-                children: "De acuerdo al estatus \n                  actual del producto, puedes establecer una conversaci\xF3n \n                  con estas compa\xF1ias"
-              })]
-            }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-              children: " Chats abiertos "
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "container-bodyChats",
-          children: openChats
-        })]
-      }), closedChats.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "container-headerChats",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-            className: "tooltip-title",
-            position: "topCenter",
-            addArrow: false,
-            transitionType: "zoom",
-            followCursor: false,
-            componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerTooltip, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-                className: "label-title",
-                children: " Chats cerrados "
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-                className: "label-message",
-                children: "Las conversaciones \n                  con estas compa\xF1ias han finalizado debido al cambio de \n                  estatus, sigue el flujo de trabajo con tus chats abiertos"
-              })]
-            }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-              children: " Chats cerrados "
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "container-bodyChats",
-          children: closedChats
-        })]
-      })]
-    })
-  });
-};
-
-exports.ChatLists = ChatLists;

package/dist/components/organisms/Chat/ChatLists/styles.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ContainerTooltip = exports.ContainerItemChat = exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../../global-files/variables");
-
-var _templateObject, _templateObject2, _templateObject3;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: 100%;\n  flex-grow: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 30px;\n  background: white;\n  padding: 20px;\n  overflow: auto;\n  //border: 1px solid red;\n\n  section {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n\n    // container del nombre de la seccion con su icono info\n    .container-headerChats {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: 5px;\n\n      .tooltip-title {\n        max-width: 100%;\n\n        label {\n          font-family: ", ", sans-serif;\n          font-size: 15px;\n          text-align: left;\n          color: #262626;\n        }\n      }\n    }\n\n    // container de la lista de los items chats de la seccion\n    .container-bodyChats {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium);
-
-exports.Container = Container;
-
-var ContainerItemChat = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  min-width: min-content;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 20px;\n  background: #f7f7fc;\n  padding: 15px;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background 0.25s;\n\n  * {\n    cursor: inherit;\n  }\n\n  // imagen del logo de la compa\xF1ia\n  .img-logoCompany {\n    border-radius: 50%;\n    overflow: hidden;\n    height: 34px;\n    width: 34px;\n\n    .icon-logoCompany {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  // container de las etiquetas \"name\" y \"lastDate\"\n  .container-info {\n    flex-grow: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n\n    .label-name {\n      font-family: ", ", sans-serif;\n      font-size: 15px;\n      text-align: left;\n      color: #262626;\n    }\n    .label-lastDate {\n      font-family: ", ", sans-serif;\n      font-size: 11px;\n      text-align: left;\n      color: #b3b3b3;\n    }\n  }\n\n  .container-indicators {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 7px;\n\n    // label \"Interno\"\n    .label-ownCompany {\n      padding: 5px 10px;\n      border-radius: 3px;\n      font-family: ", ", sans-serif;\n      font-size: 10px;\n      background-color: rgba(0, 0, 0, 0.05);\n      color: #707070;\n    }\n  }\n\n  // cuando el item chat tenga el cursor\n  &:hover {\n    background-color: #d7d7dd;\n\n    .container-info {\n      .label-lastDate {\n        color: #959292;\n      }\n    }\n\n    /*\n    .label-ownCompany {\n      background-color: ;\n    }*/\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular); // container con 2 labels "label-title" y "label-message"
-
-
-exports.ContainerItemChat = ContainerItemChat;
-
-var ContainerTooltip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: min-content;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 5px;\n  background: transparent;\n\n  .label-title {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    text-align: left;\n    color: #262626;\n  }\n  .label-message {\n    font-family: ", ", sans-serif;\n    font-size: 11px;\n    text-align: left;\n    color: #262626;\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
-
-exports.ContainerTooltip = ContainerTooltip;

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

@@ -1,176 +0,0 @@
-"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
-  }
-};