contentoh-components-library 21.6.55 → 21.6.57

package/dist/components/pages/CreatorsProductEdition/sections/ImagePanel.js

@@ -0,0 +1,421 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagePanel = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _react2 = require("swiper/react");
+
+var _swiper = require("swiper");
+
+require("swiper/swiper.min.css");
+
+var _openModal = _interopRequireDefault(require("../../../../assets/images/generalButton/openModal.svg"));
+
+var _ProductMedia = require("./ProductMedia");
+
+var _ServiceActions = require("./ServiceActions");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["imagesArray", "activeImage", "currentIndex", "setActiveImage", "setShowModal"];
+
+/*
+  Panel de imagen: la imagen activa, las miniaturas y los datos de la imagen.
+
+  Reemplaza a `organisms/ImagePreviewer` (EditionActiveImage + ImageSelector) y a
+  `organisms/ImageDataTable` (TableHeader + filas), con los mismos props, hecho
+  con MUI y Swiper. Se estira al ancho de su columna en vez de medir 340px fijos:
+  en desktop ocupa el panel izquierdo y en tablet/celular va arriba del contenido.
+*/
+// --- Vista previa ----------------------------------------------------------
+var Preview = function Preview(_ref) {
+  var _imagesArray$values;
+
+  var imagesArray = _ref.imagesArray,
+      activeImage = _ref.activeImage,
+      setActiveImage = _ref.setActiveImage,
+      setShowModal = _ref.setShowModal,
+      currentIndex = _ref.currentIndex;
+  var images = (_imagesArray$values = imagesArray === null || imagesArray === void 0 ? void 0 : imagesArray.values) !== null && _imagesArray$values !== void 0 ? _imagesArray$values : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        position: "relative",
+        width: "100%",
+        // Misma proporción que el visor original (340 x 295).
+        aspectRatio: "340 / 295",
+        bgcolor: _tokens.COLORS.white
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductMedia.ProductMedia, {
+        src: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
+        ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
+        alt: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Ver en grande",
+        arrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Ver en grande",
+          onClick: function onClick() {
+            return setShowModal(true);
+          },
+          sx: {
+            position: "absolute",
+            right: 4,
+            bottom: 4,
+            width: 30,
+            height: 30,
+            p: 0,
+            backgroundImage: "url(".concat(_openModal.default, ")"),
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center"
+          }
+        })
+      })]
+    }), images.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        mt: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+        modules: [_swiper.FreeMode, _swiper.Mousewheel, _swiper.Keyboard],
+        slidesPerView: "auto",
+        spaceBetween: 4,
+        freeMode: true,
+        mousewheel: {
+          forceToAxis: true
+        },
+        keyboard: {
+          enabled: true
+        },
+        style: {
+          width: "100%"
+        },
+        children: images.map(function (image, index) {
+          var selected = index === currentIndex;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+            style: {
+              width: 85
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+              "aria-label": "Ver imagen ".concat(index + 1),
+              "aria-pressed": selected,
+              onClick: function onClick() {
+                return setActiveImage(index);
+              },
+              sx: {
+                width: 85,
+                height: 55,
+                borderRadius: "3px",
+                overflow: "hidden",
+                outline: selected ? "2px solid ".concat(_tokens.COLORS.magenta_s2) : "none",
+                outlineOffset: -2,
+                bgcolor: _tokens.COLORS.white
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductMedia.ProductMedia, {
+                src: image.src,
+                ext: image.ext,
+                alt: image.altText,
+                thumbnail: true
+              })
+            })
+          }, "".concat(index, "-").concat(image === null || image === void 0 ? void 0 : image.name));
+        })
+      })
+    })]
+  });
+}; // --- Datos de la imagen ----------------------------------------------------
+
+
+var labelSx = {
+  fontFamily: _tokens.FONTS.AvenirNext,
+  fontSize: 11,
+  lineHeight: "18px",
+  color: _tokens.COLORS.s4
+};
+
+var DataRow = function DataRow(_ref2) {
+  var label = _ref2.label,
+      children = _ref2.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+    sx: {
+      "& td, & th": {
+        border: 0,
+        py: "2px",
+        px: 0
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      component: "th",
+      scope: "row",
+      sx: labelSx,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, labelSx), {}, {
+        pl: 1
+      }),
+      children: children
+    })]
+  });
+};
+
+var GrayValue = function GrayValue(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "span",
+    sx: {
+      display: "inline-block",
+      maxWidth: "100%",
+      px: "3px",
+      py: "1px",
+      borderRadius: "3px",
+      bgcolor: _tokens.COLORS.s2,
+      color: _tokens.COLORS.s5,
+      fontFamily: _tokens.FONTS.AvenirNext,
+      fontSize: 11,
+      lineHeight: "19px",
+      overflowWrap: "anywhere"
+    },
+    children: children
+  });
+};
+/**
+ * Valor que se edita con un clic, como `atoms/LabelToInput`: se muestra como
+ * etiqueta y al hacer clic se vuelve campo de texto; al salir, vuelve a ser
+ * etiqueta. Cada cambio se avisa con el mismo payload que el original.
+ */
+
+
+var EditableValue = function EditableValue(_ref4) {
+  var defaultValue = _ref4.defaultValue,
+      _onChange = _ref4.onChange;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      editing = _useState2[0],
+      setEditing = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultValue === "" ? "-" : defaultValue),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    return setValue(defaultValue === "" ? "-" : defaultValue);
+  }, [defaultValue]);
+  (0, _react.useEffect)(function () {
+    var _inputRef$current;
+
+    if (editing) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }, [editing]);
+
+  if (!editing) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+      onClick: function onClick() {
+        return setEditing(true);
+      },
+      "aria-label": "Editar valor",
+      sx: {
+        borderRadius: "3px",
+        justifyContent: "flex-end",
+        maxWidth: "100%"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GrayValue, {
+        children: value !== null && value !== void 0 ? value : "-"
+      })
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputBase, {
+    inputRef: inputRef,
+    value: value !== null && value !== void 0 ? value : "",
+    onChange: function onChange(e) {
+      setValue(e.target.value);
+
+      _onChange(e);
+    },
+    onBlur: function onBlur() {
+      return setEditing(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && setEditing(false);
+    },
+    sx: {
+      width: 120,
+      maxWidth: "100%",
+      fontFamily: _tokens.FONTS.AvenirNext,
+      fontSize: 12,
+      border: "1px solid ".concat(_tokens.COLORS.s3),
+      borderRadius: "3px",
+      px: 0.5
+    }
+  });
+};
+
+var ImageData = function ImageData(_ref5) {
+  var _lists$inputs, _lists$inputs$find, _lists$imageShotType, _lists$imageShotType$, _lists$attrForImgs, _lists$attrForImgs$ge;
+
+  var activeImage = _ref5.activeImage,
+      lists = _ref5.lists,
+      retailerSelected = _ref5.retailerSelected,
+      setImages = _ref5.setImages,
+      assignationsImages = _ref5.assignationsImages,
+      imagesStatus = _ref5.imagesStatus,
+      setAssignation = _ref5.setAssignation,
+      isRetailer = _ref5.isRetailer,
+      onClickSave = _ref5.onClickSave,
+      showSaveButton = _ref5.showSaveButton,
+      version = _ref5.version,
+      setShowVersionSelector = _ref5.setShowVersionSelector,
+      shotThd = _ref5.shotThd;
+  var shotName = (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) || "-";
+  var thdShot = (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) || "-";
+  var size = activeImage !== null && activeImage !== void 0 && activeImage.width && activeImage.height ? "".concat(activeImage.width, "x").concat(activeImage.height, "px") : "-";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+    variant: "outlined",
+    sx: {
+      mt: {
+        xs: 2,
+        sm: 0,
+        md: 2
+      },
+      p: "10px",
+      borderColor: _tokens.COLORS.s2,
+      borderRadius: "3px",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: 1,
+      sx: {
+        pb: "5px",
+        borderBottom: "1px solid ".concat(_tokens.COLORS.s2)
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        title: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.name) || "-",
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway,
+          fontSize: 14,
+          lineHeight: "23px",
+          color: _tokens.COLORS.s5,
+          flex: "1 1 90px",
+          minWidth: 0,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.name) || "-"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceActions.ServiceActions, {
+        status: imagesStatus,
+        assig: assignationsImages,
+        setAssignation: setAssignation,
+        isRetailer: isRetailer,
+        onClickSave: onClickSave,
+        showSaveButton: showSaveButton,
+        version: version,
+        setShowVersionSelector: setShowVersionSelector
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Table, {
+      size: "small",
+      sx: {
+        mt: "4px",
+        tableLayout: "fixed"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableBody, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tipo de toma",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GrayValue, {
+            children: shotName
+          })
+        }), shotThd && /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tipo de imagen THD",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GrayValue, {
+            children: thdShot
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Formato",
+          children: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tama\xF1o de imagen",
+          children: size
+        }), retailerSelected && (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.jsx)(DataRow, {
+            label: (attr === null || attr === void 0 ? void 0 : attr.name) || "-",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableValue, {
+              defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
+              onChange: function onChange(e) {
+                return setImages({
+                  action: "changeAttrValue",
+                  value: e.target.value || "-",
+                  id: attr.id
+                });
+              }
+            })
+          }, "row-".concat(index, "-").concat(attr === null || attr === void 0 ? void 0 : attr.name));
+        }))]
+      })
+    })]
+  });
+}; // --- Panel completo --------------------------------------------------------
+
+
+var ImagePanel = function ImagePanel(_ref6) {
+  var imagesArray = _ref6.imagesArray,
+      activeImage = _ref6.activeImage,
+      currentIndex = _ref6.currentIndex,
+      setActiveImage = _ref6.setActiveImage,
+      setShowModal = _ref6.setShowModal,
+      dataProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+  return (
+    /*#__PURE__*/
+    // En tablet la imagen y sus datos van lado a lado: apilados, la imagen
+    // ocuparía todo el ancho y empujaría el contenido muy abajo.
+    (0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        width: "100%",
+        minWidth: 0,
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "minmax(0, 1fr)",
+          sm: "repeat(2, minmax(0, 1fr))",
+          md: "minmax(0, 1fr)"
+        },
+        columnGap: 2,
+        alignItems: "start"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Preview, {
+        imagesArray: imagesArray,
+        activeImage: activeImage,
+        currentIndex: currentIndex,
+        setActiveImage: setActiveImage,
+        setShowModal: setShowModal
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageData, (0, _objectSpread2.default)({
+        activeImage: activeImage
+      }, dataProps))]
+    })
+  );
+};
+
+exports.ImagePanel = ImagePanel;