merchi_checkout/lib/components/merchi_image_editor/EditorImages.js

Merchi's custom checkout step form

import React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var DraftTemplateThumbnail = function DraftTemplateThumbnail(_ref) {
  var draft = _ref.draft;
  // Implement the DraftTemplateThumbnail here.
  // I don't have the details so I'm just rendering a placeholder.

  return /*#__PURE__*/_jsx("img", {
    style: {
      objectFit: 'cover'
    },
    src: draft.file.viewUrl,
    height: "100",
    width: "100",
    alt: "Draft Thumbnail"
  });
};
var EditorImages = function EditorImages(_ref2) {
  var activeIndex = _ref2.activeIndex,
    _ref2$classNameEditor = _ref2.classNameEditorImagesContainer,
    classNameEditorImagesContainer = _ref2$classNameEditor === void 0 ? 'd-flex mb-3' : _ref2$classNameEditor,
    _ref2$classNameEditor2 = _ref2.classNameEditorImagesImage,
    classNameEditorImagesImage = _ref2$classNameEditor2 === void 0 ? 'nav-item mr-2' : _ref2$classNameEditor2,
    draftTemplates = _ref2.draftTemplates,
    setActiveTemplateIndex = _ref2.setActiveTemplateIndex;
  function isActive(index) {
    return index === activeIndex;
  }
  var activeDraftTemplate = draftTemplates[activeIndex];
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx("div", {
      className: classNameEditorImagesContainer,
      children: draftTemplates.map(function (d, index) {
        return /*#__PURE__*/_jsx("div", {
          className: "".concat(classNameEditorImagesImage, " ").concat(isActive(index) ? 'active' : ''),
          onClick: function onClick() {
            return setActiveTemplateIndex(index);
          },
          style: {
            borderRadius: '0.75rem',
            border: isActive(index) ? '2px #888 dashed' : '2px rgb(213, 213, 213) dashed',
            height: 101,
            overflow: 'hidden',
            width: 101,
            cursor: 'pointer',
            transition: 'border-color 0.2s ease-in-out'
          },
          children: /*#__PURE__*/_jsx(DraftTemplateThumbnail, {
            draft: d
          })
        }, "".concat(index, "-draft-image"));
      })
    }), activeDraftTemplate ? /*#__PURE__*/_jsxs("div", {
      className: "d-flex flex-column",
      children: [/*#__PURE__*/_jsxs("h4", {
        className: "mb-0",
        children: [activeDraftTemplate.name, " ", activeDraftTemplate.height, " *", ' ', activeDraftTemplate.width, "px"]
      }), /*#__PURE__*/_jsx("small", {
        className: "mt-0",
        children: activeDraftTemplate.description
      })]
    }) : /*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx("h5", {
        className: "mb-0",
        children: "Loading template..."
      })
    })]
  });
};
export default EditorImages;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsImpzeCIsIl9qc3giLCJqc3hzIiwiX2pzeHMiLCJGcmFnbWVudCIsIl9GcmFnbWVudCIsIkRyYWZ0VGVtcGxhdGVUaHVtYm5haWwiLCJfcmVmIiwiZHJhZnQiLCJzdHlsZSIsIm9iamVjdEZpdCIsInNyYyIsImZpbGUiLCJ2aWV3VXJsIiwiaGVpZ2h0Iiwid2lkdGgiLCJhbHQiLCJFZGl0b3JJbWFnZXMiLCJfcmVmMiIsImFjdGl2ZUluZGV4IiwiX3JlZjIkY2xhc3NOYW1lRWRpdG9yIiwiY2xhc3NOYW1lRWRpdG9ySW1hZ2VzQ29udGFpbmVyIiwiX3JlZjIkY2xhc3NOYW1lRWRpdG9yMiIsImNsYXNzTmFtZUVkaXRvckltYWdlc0ltYWdlIiwiZHJhZnRUZW1wbGF0ZXMiLCJzZXRBY3RpdmVUZW1wbGF0ZUluZGV4IiwiaXNBY3RpdmUiLCJpbmRleCIsImFjdGl2ZURyYWZ0VGVtcGxhdGUiLCJjaGlsZHJlbiIsImNsYXNzTmFtZSIsIm1hcCIsImQiLCJjb25jYXQiLCJvbkNsaWNrIiwiYm9yZGVyUmFkaXVzIiwiYm9yZGVyIiwib3ZlcmZsb3ciLCJjdXJzb3IiLCJ0cmFuc2l0aW9uIiwibmFtZSIsImRlc2NyaXB0aW9uIl0sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbWVyY2hpX2ltYWdlX2VkaXRvci9FZGl0b3JJbWFnZXMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmludGVyZmFjZSBEcmFmdCB7XG4gIC8vIERlZmluZSB0aGUgc3RydWN0dXJlIG9mIGRyYWZ0IGhlcmUuIEkgZG9uJ3QgaGF2ZSB0aGUgZGV0YWlscyBzbyBJJ3ZlIGxlZnQgaXQgZ2VuZXJpYy5cbn1cblxuaW50ZXJmYWNlIERyYWZ0VGVtcGxhdGVUaHVtYm5haWxQcm9wcyB7XG4gIGRyYWZ0OiBEcmFmdDtcbn1cblxuY29uc3QgRHJhZnRUZW1wbGF0ZVRodW1ibmFpbDogUmVhY3QuRkM8RHJhZnRUZW1wbGF0ZVRodW1ibmFpbFByb3BzPiA9ICh7XG4gIGRyYWZ0LFxufTogYW55KSA9PiB7XG4gIC8vIEltcGxlbWVudCB0aGUgRHJhZnRUZW1wbGF0ZVRodW1ibmFpbCBoZXJlLlxuICAvLyBJIGRvbid0IGhhdmUgdGhlIGRldGFpbHMgc28gSSdtIGp1c3QgcmVuZGVyaW5nIGEgcGxhY2Vob2xkZXIuXG5cbiAgcmV0dXJuIChcbiAgICA8aW1nXG4gICAgICBzdHlsZT17eyBvYmplY3RGaXQ6ICdjb3ZlcicgfX1cbiAgICAgIHNyYz17ZHJhZnQuZmlsZS52aWV3VXJsfVxuICAgICAgaGVpZ2h0PScxMDAnXG4gICAgICB3aWR0aD0nMTAwJ1xuICAgICAgYWx0PSdEcmFmdCBUaHVtYm5haWwnXG4gICAgLz5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGFjdGl2ZUluZGV4OiBudW1iZXI7XG4gIGNsYXNzTmFtZUVkaXRvckltYWdlc0NvbnRhaW5lcj86IHN0cmluZztcbiAgY2xhc3NOYW1lRWRpdG9ySW1hZ2VzSW1hZ2U/OiBzdHJpbmc7XG4gIGRyYWZ0VGVtcGxhdGVzOiBEcmFmdFtdO1xuICBzZXRBY3RpdmVUZW1wbGF0ZUluZGV4OiAoaW5kZXg6IG51bWJlcikgPT4gdm9pZDtcbn1cblxuY29uc3QgRWRpdG9ySW1hZ2VzOiBSZWFjdC5GQzxQcm9wcz4gPSAoe1xuICBhY3RpdmVJbmRleCxcbiAgY2xhc3NOYW1lRWRpdG9ySW1hZ2VzQ29udGFpbmVyID0gJ2QtZmxleCBtYi0zJyxcbiAgY2xhc3NOYW1lRWRpdG9ySW1hZ2VzSW1hZ2UgPSAnbmF2LWl0ZW0gbXItMicsXG4gIGRyYWZ0VGVtcGxhdGVzLFxuICBzZXRBY3RpdmVUZW1wbGF0ZUluZGV4LFxufSkgPT4ge1xuICBmdW5jdGlvbiBpc0FjdGl2ZShpbmRleDogbnVtYmVyKSB7XG4gICAgcmV0dXJuIGluZGV4ID09PSBhY3RpdmVJbmRleDtcbiAgfVxuICBjb25zdCBhY3RpdmVEcmFmdFRlbXBsYXRlOiBhbnkgPSBkcmFmdFRlbXBsYXRlc1thY3RpdmVJbmRleF07XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbGFzc05hbWVFZGl0b3JJbWFnZXNDb250YWluZXJ9PlxuICAgICAgICB7ZHJhZnRUZW1wbGF0ZXMubWFwKChkLCBpbmRleCkgPT4gKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGtleT17YCR7aW5kZXh9LWRyYWZ0LWltYWdlYH1cbiAgICAgICAgICAgIGNsYXNzTmFtZT17YCR7Y2xhc3NOYW1lRWRpdG9ySW1hZ2VzSW1hZ2V9ICR7XG4gICAgICAgICAgICAgIGlzQWN0aXZlKGluZGV4KSA/ICdhY3RpdmUnIDogJydcbiAgICAgICAgICAgIH1gfVxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0QWN0aXZlVGVtcGxhdGVJbmRleChpbmRleCl9XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICcwLjc1cmVtJyxcbiAgICAgICAgICAgICAgYm9yZGVyOiBpc0FjdGl2ZShpbmRleClcbiAgICAgICAgICAgICAgICA/ICcycHggIzg4OCBkYXNoZWQnXG4gICAgICAgICAgICAgICAgOiAnMnB4IHJnYigyMTMsIDIxMywgMjEzKSBkYXNoZWQnLFxuICAgICAgICAgICAgICBoZWlnaHQ6IDEwMSxcbiAgICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgICAgICAgICB3aWR0aDogMTAxLFxuICAgICAgICAgICAgICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgICAgICAgICAgICAgdHJhbnNpdGlvbjogJ2JvcmRlci1jb2xvciAwLjJzIGVhc2UtaW4tb3V0JyxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPERyYWZ0VGVtcGxhdGVUaHVtYm5haWwgZHJhZnQ9e2R9IC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICkpfVxuICAgICAgPC9kaXY+XG4gICAgICB7YWN0aXZlRHJhZnRUZW1wbGF0ZSA/IChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9J2QtZmxleCBmbGV4LWNvbHVtbic+XG4gICAgICAgICAgPGg0IGNsYXNzTmFtZT0nbWItMCc+XG4gICAgICAgICAgICB7YWN0aXZlRHJhZnRUZW1wbGF0ZS5uYW1lfSB7YWN0aXZlRHJhZnRUZW1wbGF0ZS5oZWlnaHR9ICp7JyAnfVxuICAgICAgICAgICAge2FjdGl2ZURyYWZ0VGVtcGxhdGUud2lkdGh9cHhcbiAgICAgICAgICA8L2g0PlxuICAgICAgICAgIDxzbWFsbCBjbGFzc05hbWU9J210LTAnPnthY3RpdmVEcmFmdFRlbXBsYXRlLmRlc2NyaXB0aW9ufTwvc21hbGw+XG4gICAgICAgIDwvZGl2PlxuICAgICAgKSA6IChcbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8aDUgY2xhc3NOYW1lPSdtYi0wJz5Mb2FkaW5nIHRlbXBsYXRlLi4uPC9oNT5cbiAgICAgICAgPC9kaXY+XG4gICAgICApfVxuICAgIDwvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRWRpdG9ySW1hZ2VzO1xuIl0sIm1hcHBpbmdzIjoiQUFBQSxPQUFPQSxLQUFLLE1BQU0sT0FBTztBQUFDLFNBQUFDLEdBQUEsSUFBQUMsSUFBQTtBQUFBLFNBQUFDLElBQUEsSUFBQUMsS0FBQTtBQUFBLFNBQUFDLFFBQUEsSUFBQUMsU0FBQTtBQVUxQixJQUFNQyxzQkFBNkQsR0FBRyxTQUFoRUEsc0JBQTZEQSxDQUFBQyxJQUFBLEVBRXhEO0VBQUEsSUFEVEMsS0FBSyxHQUFBRCxJQUFBLENBQUxDLEtBQUs7RUFFTDtFQUNBOztFQUVBLG9CQUNFUCxJQUFBO0lBQ0VRLEtBQUssRUFBRTtNQUFFQyxTQUFTLEVBQUU7SUFBUSxDQUFFO0lBQzlCQyxHQUFHLEVBQUVILEtBQUssQ0FBQ0ksSUFBSSxDQUFDQyxPQUFRO0lBQ3hCQyxNQUFNLEVBQUMsS0FBSztJQUNaQyxLQUFLLEVBQUMsS0FBSztJQUNYQyxHQUFHLEVBQUM7RUFBaUIsQ0FDdEIsQ0FBQztBQUVOLENBQUM7QUFVRCxJ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