contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,40 +1,59 @@
 "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");
-const ChatLists = props => {
-  const {
-    companies /* {
-              id: { name , src , statusChat , items } ,
-              ...
-              } */,
-    currentCompanyId,
-    // number
-    onClickCompany // (id) => {}
-  } = props;
-  const [openChats, setOpenChats] = (0, _react.useState)([]);
-  const [closedChats, setClosedChats] = (0, _react.useState)([]);
-  (0, _react.useEffect)(() => {
+
+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]);
-  const renderChats = () => {
-    let jsxOpenChats = [];
-    let jsxClosedChats = [];
-    for (const companyId of Object.keys(companies)) {
-      const company = companies[companyId];
-      // crear el item chat
-      const itemChat = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerItemChat, {
-        onClick: event => {
+
+  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, {
@@ -66,14 +85,19 @@ const ChatLists = props => {
             children: "Interno"
           })
         })]
-      }, "itemChat-" + companyId);
+      }, "itemChat-" + companyId); // checar si es chat abierto
 
-      // 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", {
@@ -132,4 +156,5 @@ const ChatLists = props => {
     })
   });
 };
+
 exports.ChatLists = ChatLists;

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

@@ -1,16 +1,29 @@
 "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;
-const Container = exports.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);
-const ContainerItemChat = exports.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"
-const ContainerTooltip = exports.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);
+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,21 +1,30 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/organisms/Chat/ContainerItems",
   component: _index.ContainerItems
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ContainerItems, {
-  ...args
-});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ContainerItems, (0, _objectSpread2.default)({}, args));
+}; // items de prueba
+
 
-// items de prueba
-const items = {
+var items = {
   1: {
     date: "2022-10-13 10:10:00",
     type: "message",
@@ -112,10 +121,9 @@ const items = {
     value: "84300/1/chat/noExiste6.txt",
     userId: 10
   }
-};
+}; // users de prueba
 
-// users de prueba
-const users = {
+var users = {
   10: {
     name: "Pedro Castillo",
     companyId: 100
@@ -128,10 +136,9 @@ const users = {
     name: "Javier Aguayo",
     companyId: 100
   }
-};
+}; // companies de prueba multiple
 
-// companies de prueba multiple
-const companies = {
+var companies = {
   100: {
     name: "Fábrica",
     statusChat: "enabled"
@@ -141,19 +148,21 @@ const companies = {
     statusChat: "current"
   }
 };
-const exampleChat = exports.exampleChat = Template.bind({});
+var exampleChat = Template.bind({});
+exports.exampleChat = exampleChat;
 exampleChat.args = {
   chatData: {
-    items,
-    users,
-    companies
+    items: items,
+    users: users,
+    companies: companies
   },
   currentUser: {
     id: 10,
     companyId: 100
   }
 };
-const emptyChat = exports.emptyChat = Template.bind({});
+var emptyChat = Template.bind({});
+exports.emptyChat = emptyChat;
 emptyChat.args = {
   chatData: {
     items: [],