contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridProducts = void 0;
+
+var _styles = require("./styles");
+
+var _GridItem = require("../../molecules/GridItem");
+
+var _HeaderItem = require("../../molecules/HeaderItem");
+
+var _RowItem = require("../../molecules/RowItem");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var GridProducts = function GridProducts(_ref) {
+  var _ref$products = _ref.products,
+      products = _ref$products === void 0 ? [] : _ref$products,
+      _ref$columnsArray = _ref.columnsArray,
+      columnsArray = _ref$columnsArray === void 0 ? [] : _ref$columnsArray,
+      _ref$gridView = _ref.gridView,
+      gridView = _ref$gridView === void 0 ? true : _ref$gridView,
+      chkOnChange = _ref.chkOnChange,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? [] : _ref$selected,
+      chkChecked = _ref.chkChecked,
+      checkAll = _ref.checkAll,
+      chkCheckedAll = _ref.chkCheckedAll,
+      onGridClick = _ref.onGridClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: !gridView ? products === null || products === void 0 ? void 0 : products.map(function (_ref2, i) {
+      var gridElement = _ref2.gridElement,
+          product = _ref2.product,
+          id = _ref2.id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridItem.GridItem, {
+        id: id,
+        index: i,
+        product: product,
+        gridElement: gridElement,
+        chkOnChange: chkOnChange,
+        onGridClick: onGridClick,
+        selected: selected,
+        chkChecked: chkChecked
+      }, i);
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "table-view",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderItem.HeaderItem, {
+        columnsArray: columnsArray,
+        checkAll: checkAll,
+        chkCheckedAll: chkCheckedAll
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowItem.RowItem, {
+        productsArray: products,
+        chkOnChange: chkOnChange,
+        onGridClick: onGridClick,
+        chkChecked: chkChecked
+      })]
+    })
+  });
+};
+
+exports.GridProducts = GridProducts;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  height: calc(100% - 100px);\n  overflow: auto;\n\n  .table-view {\n    height: 100%;\n    width: 100%;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/organisms/GridProducts/utils.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProductsToTable = void 0;
+
+var _RetailerCatalog = require("../../atoms/RetailerCatalog");
+
+var _UserCatalog = require("../../atoms/UserCatalog");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var getProductsToTable = function getProductsToTable() {
+  var products = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var textSpecialists = arguments.length > 1 ? arguments[1] : undefined;
+  var imagesSpecialists = arguments.length > 2 ? arguments[2] : undefined;
+  var auditors = arguments.length > 3 ? arguments[3] : undefined;
+  var images = arguments.length > 4 ? arguments[4] : undefined;
+  var onAssign = arguments.length > 5 ? arguments[5] : undefined;
+  var productsTableArray = [];
+  products.forEach(function (product) {
+    var article = product.article,
+        orderId = product.orderId,
+        upc = product.upc,
+        status = product.status,
+        version = product.version;
+    var id = (article === null || article === void 0 ? void 0 : article.id_article) + "-" + orderId;
+    var imgArray = images[(article === null || article === void 0 ? void 0 : article.id_article) + "-" + version];
+    var element = {
+      id: id,
+      cols: [{
+        name: (article === null || article === void 0 ? void 0 : article.country) || "-",
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: orderId || "-",
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: upc || "-",
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: (article === null || article === void 0 ? void 0 : article.name) || "-",
+        flex: 1,
+        minWidth: 200
+      }, {
+        name: "S/M" || "-",
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: status || "-",
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailerCatalog.RetailerCatalog, {
+          id: "retailers-" + id,
+          article: product,
+          retailers: product.retailers
+        }),
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: product.prio,
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserCatalog.UserCatalog, {
+          datasheet: article.id_datasheet_especialist,
+          description: article.id_description_especialist,
+          images: article.id_images_especialist,
+          auditor: article.id_auditor,
+          textSpecialists: textSpecialists,
+          imagesSpecialists: imagesSpecialists,
+          auditors: auditors,
+          id: "users-" + id,
+          product: product,
+          onAssign: onAssign
+        }),
+        flex: 1,
+        minWidth: 100
+      }, {
+        name: "Cont.",
+        flex: 1,
+        minWidth: 100
+      }],
+      gridElement: {
+        images: imgArray,
+        info: [{
+          title: "name",
+          value: (article === null || article === void 0 ? void 0 : article.name) || "-"
+        }, {
+          title: "order",
+          value: orderId || "-"
+        }, {
+          title: "category",
+          value: (article === null || article === void 0 ? void 0 : article.category) || "-"
+        }, {
+          title: "company",
+          value: (article === null || article === void 0 ? void 0 : article.company_name) || "-"
+        }, {
+          title: "price",
+          value: (article === null || article === void 0 ? void 0 : article.price) || "-"
+        }],
+        status: [{
+          title: "datasheet",
+          value: product === null || product === void 0 ? void 0 : product.datasheet_status,
+          percent: 80
+        }, {
+          title: "description",
+          value: product === null || product === void 0 ? void 0 : product.description_status,
+          percent: 80
+        }, {
+          title: "images",
+          value: product === null || product === void 0 ? void 0 : product.images_status,
+          percent: 80
+        }],
+        catalogs: {
+          leftSide: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailerCatalog.RetailerCatalog, {
+            id: "retailers-" + id,
+            limit: 2,
+            article: product,
+            retailers: product.retailers
+          }),
+          rightSide: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserCatalog.UserCatalog, {
+            datasheet: article.id_datasheet_especialist,
+            description: article.id_description_especialist,
+            images: article.id_images_especialist,
+            auditor: article.id_auditor,
+            textSpecialists: textSpecialists,
+            imagesSpecialists: imagesSpecialists,
+            auditors: auditors,
+            id: "users-" + id,
+            product: product,
+            onAssign: onAssign
+          })
+        }
+      },
+      showBottom: true,
+      product: product,
+      article: article
+    };
+    productsTableArray.push(element);
+  });
+  return productsTableArray;
+};
+
+exports.getProductsToTable = getProductsToTable;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageDataTableDefault = 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/ImageDataTable",
+  component: _index.ImageDataTable
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImageDataTable, (0, _objectSpread2.default)({}, args));
+};
+
+var ImageDataTableDefault = Template.bind({});
+exports.ImageDataTableDefault = ImageDataTableDefault;
+ImageDataTableDefault.args = {
+  headerInfo: {
+    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+    name: "Hero.jpg",
+    status: "AA"
+  },
+  imageData: [{
+    feature: "Tipo de imagen",
+    value: "Tipo de imagen"
+  }, {
+    feature: "Identificador",
+    value: "F26"
+  }, {
+    feature: "Formato",
+    value: "jpg"
+  }, {
+    feature: "Resolución",
+    value: "300dpi"
+  }, {
+    feature: "Tamaño de imagen",
+    value: "1000x10000"
+  }]
+};

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageDataTable = void 0;
+
+var _styles = require("./styles");
+
+var _TableHeader = require("../../molecules/TableHeader");
+
+var _styles2 = require("../../molecules/TableRow/styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _LabelToInput = _interopRequireDefault(require("../../atoms/LabelToInput"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageDataTable = function ImageDataTable(_ref) {
+  var _lists$inputs, _lists$inputs$find, _lists$imagePackaging, _lists$imagePackaging2, _lists$imageType, _lists$imageType$find, _lists$imageShotType, _lists$imageShotType$, _lists$attrForImgs, _lists$attrForImgs$ge;
+
+  var activeImage = _ref.activeImage,
+      darkMode = _ref.darkMode,
+      lists = _ref.lists,
+      retailerSelected = _ref.retailerSelected,
+      setImages = _ref.setImages,
+      assignationsImages = _ref.assignationsImages,
+      imagesStatus = _ref.imagesStatus,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      shotThd = _ref.shotThd;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    darkMode: darkMode,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
+      imagesStatus: imagesStatus,
+      activeImage: activeImage,
+      assignationsImages: assignationsImages,
+      setAssignation: setAssignation,
+      isRetailer: isRetailer,
+      showSaveButton: showSaveButton,
+      onClickSave: onClickSave,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de toma"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$inputs = lists.inputs) === null || _lists$inputs === void 0 ? void 0 : (_lists$inputs$find = _lists$inputs.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_id);
+        })) === null || _lists$inputs$find === void 0 ? void 0 : _lists$inputs$find.name) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de empaque"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imagePackaging = lists.imagePackagingType) === null || _lists$imagePackaging === void 0 ? void 0 : (_lists$imagePackaging2 = _lists$imagePackaging.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.packing_type);
+        })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imageType = lists.imageType) === null || _lists$imageType === void 0 ? void 0 : (_lists$imageType$find = _lists$imageType.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_type);
+        })) === null || _lists$imageType$find === void 0 ? void 0 : _lists$imageType$find.name) || "-"
+      })]
+    }), shotThd && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de imagen THD"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imageShotType = lists.imageShotType) === null || _lists$imageShotType === void 0 ? void 0 : (_lists$imageShotType$ = _lists$imageShotType.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_shot_type);
+        })) === null || _lists$imageShotType$ === void 0 ? void 0 : _lists$imageShotType$.type_shot) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Formato"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tama\xF1o de imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: activeImage !== null && activeImage !== void 0 && activeImage.width && activeImage.height ? "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px") : "-"
+      })]
+    }), retailerSelected && (lists === null || lists === void 0 ? void 0 : lists.attrForImgs) && (lists === null || lists === void 0 ? void 0 : (_lists$attrForImgs = lists.attrForImgs) === null || _lists$attrForImgs === void 0 ? void 0 : (_lists$attrForImgs$ge = _lists$attrForImgs.general) === null || _lists$attrForImgs$ge === void 0 ? void 0 : _lists$attrForImgs$ge.map(function (attr, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "table-row-text",
+          text: (attr === null || attr === void 0 ? void 0 : attr.name) || "-"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelToInput.default, {
+          width: "100px",
+          defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
+          onChange: function onChange(e) {
+            setImages({
+              action: "changeAttrValue",
+              value: e.target.value || "-",
+              id: attr.id
+            });
+          }
+        })]
+      }, "row-" + index + "-" + (attr === null || attr === void 0 ? void 0 : attr.name));
+    }))]
+  });
+};
+
+exports.ImageDataTable = ImageDataTable;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 340px;\n  padding: 10px;\n  border: 1px solid ", ";\n  border-radius: 3px;\n\n  .input-name-header,\n  .table-row-text {\n    color: ", ";\n  }\n  .gray-table-row {\n    background-color: ", ";\n  }\n"])), _variables.GlobalColors.s2, function (_ref) {
+  var darkMode = _ref.darkMode;
+  return darkMode && _variables.GlobalColors.s1;
+}, function (_ref2) {
+  var darkMode = _ref2.darkMode;
+  return darkMode && _variables.GlobalColors.s5;
+});
+
+exports.Container = Container;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageDataTablev2Default = 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/ImageDataTablev2",
+  component: _index.ImageDataTablev2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImageDataTablev2, (0, _objectSpread2.default)({}, args));
+};
+
+var ImageDataTablev2Default = Template.bind({});
+exports.ImageDataTablev2Default = ImageDataTablev2Default;
+ImageDataTablev2Default.args = {
+  headerInfo: {
+    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+    name: "Hero.jpg",
+    status: "AA"
+  },
+  imageData: [{
+    feature: "Tipo de imagen",
+    value: "Tipo de imagen"
+  }, {
+    feature: "Identificador",
+    value: "F26"
+  }, {
+    feature: "Formato",
+    value: "jpg"
+  }, {
+    feature: "Resolución",
+    value: "300dpi"
+  }, {
+    feature: "Tamaño de imagen",
+    value: "1000x10000"
+  }]
+};

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageDataTablev2 = void 0;
+
+var _styles = require("./styles");
+
+var _TableHeader = require("../../molecules/TableHeader");
+
+var _styles2 = require("../../molecules/TableRow/styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _LabelToInput = _interopRequireDefault(require("../../atoms/LabelToInput"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageDataTablev2 = function ImageDataTablev2(_ref) {
+  var _lists$inputs, _lists$inputs$find, _lists$imagePackaging, _lists$imagePackaging2, _lists$imageType, _lists$imageType$find, _lists$imageShotType, _lists$imageShotType$, _lists$attrForImgs, _lists$attrForImgs$ge;
+
+  var activeImage = _ref.activeImage,
+      darkMode = _ref.darkMode,
+      lists = _ref.lists,
+      retailerSelected = _ref.retailerSelected,
+      setImages = _ref.setImages,
+      assignationsImages = _ref.assignationsImages,
+      imagesStatus = _ref.imagesStatus,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      shotThd = _ref.shotThd;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    darkMode: darkMode,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
+      imagesStatus: imagesStatus,
+      activeImage: activeImage,
+      assignationsImages: assignationsImages,
+      setAssignation: setAssignation,
+      isRetailer: isRetailer,
+      showSaveButton: showSaveButton,
+      onClickSave: onClickSave,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de toma"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$inputs = lists.inputs) === null || _lists$inputs === void 0 ? void 0 : (_lists$inputs$find = _lists$inputs.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_id);
+        })) === null || _lists$inputs$find === void 0 ? void 0 : _lists$inputs$find.name) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de empaque"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imagePackaging = lists.imagePackagingType) === null || _lists$imagePackaging === void 0 ? void 0 : (_lists$imagePackaging2 = _lists$imagePackaging.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.packing_type);
+        })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imageType = lists.imageType) === null || _lists$imageType === void 0 ? void 0 : (_lists$imageType$find = _lists$imageType.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_type);
+        })) === null || _lists$imageType$find === void 0 ? void 0 : _lists$imageType$find.name) || "-"
+      })]
+    }), shotThd && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de imagen THD"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imageShotType = lists.imageShotType) === null || _lists$imageShotType === void 0 ? void 0 : (_lists$imageShotType$ = _lists$imageShotType.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_shot_type);
+        })) === null || _lists$imageShotType$ === void 0 ? void 0 : _lists$imageShotType$.type_shot) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Formato"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tama\xF1o de imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: activeImage !== null && activeImage !== void 0 && activeImage.width && activeImage.height ? "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px") : "-"
+      })]
+    }), retailerSelected && (lists === null || lists === void 0 ? void 0 : lists.attrForImgs) && (lists === null || lists === void 0 ? void 0 : (_lists$attrForImgs = lists.attrForImgs) === null || _lists$attrForImgs === void 0 ? void 0 : (_lists$attrForImgs$ge = _lists$attrForImgs.general) === null || _lists$attrForImgs$ge === void 0 ? void 0 : _lists$attrForImgs$ge.map(function (attr, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "table-row-text",
+          text: (attr === null || attr === void 0 ? void 0 : attr.name) || "-"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelToInput.default, {
+          width: "100px",
+          defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
+          onChange: function onChange(e) {
+            setImages({
+              action: "changeAttrValue",
+              value: e.target.value || "-",
+              id: attr.id
+            });
+          }
+        })]
+      }, "row-" + index + "-" + (attr === null || attr === void 0 ? void 0 : attr.name));
+    }))]
+  });
+};
+
+exports.ImageDataTablev2 = ImageDataTablev2;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 377px;\n  padding: 10px;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  background-color:", ";\n\n  .input-name-header,\n  .table-row-text {\n    color: ", ";\n  }\n  .gray-table-row {\n    background-color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.white, function (_ref) {
+  var darkMode = _ref.darkMode;
+  return darkMode && _variables.GlobalColors.s1;
+}, function (_ref2) {
+  var darkMode = _ref2.darkMode;
+  return darkMode && _variables.GlobalColors.white;
+});
+
+exports.Container = Container;