@configuratorware/configurator-admingui 1.28.4 → 1.29.0

package/Screens/Creator/Components/VisualizationAndMediaData/VisualizationAndMediaData.js

@@ -0,0 +1,1098 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VisualizationAndMediaData = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRedux = require("react-redux");
+
+var _first = _interopRequireDefault(require("lodash/first"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _find = _interopRequireDefault(require("lodash/find"));
+
+var _padStart = _interopRequireDefault(require("lodash/padStart"));
+
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+var _reactSortableHoc = require("react-sortable-hoc");
+
+var _arrayMove = _interopRequireDefault(require("array-move"));
+
+var _i18n = require("../../../../App/i18n");
+
+var _Dialog = _interopRequireDefault(require("../../../../UIComponents/Dialog"));
+
+var _Button = _interopRequireDefault(require("../../../../UIComponents/Button"));
+
+var _Tabs = require("../../../../UIComponents/Tabs");
+
+var _Paper = _interopRequireDefault(require("../../../../UIComponents/Paper"));
+
+var _IconButton = _interopRequireDefault(require("../../../../UIComponents/IconButton"));
+
+var _DeleteIcon = _interopRequireDefault(require("../../../../UIComponents/icons/DeleteIcon"));
+
+var _AsyncProps = require("../../../../Utils/HOCs/AsyncProps");
+
+var _RemappedProps = require("../../../../Utils/HOCs/RemappedProps");
+
+var _ApiCalls = require("../../../Designer/SubScreens/Visualization/ApiCalls");
+
+var _Api = _interopRequireDefault(require("../../../../App/Api"));
+
+var _Actions = require("../../../../App/Reducers/Api/Actions");
+
+var _Image = _interopRequireDefault(require("./Components/Image"));
+
+var _PathStructure = _interopRequireDefault(require("./Components/PathStructure"));
+
+var _ConfirmDelete = _interopRequireDefault(require("./Components/ConfirmDelete"));
+
+var _ViewEdit = _interopRequireDefault(require("./Components/ViewEdit"));
+
+var _EditableText = _interopRequireDefault(require("./Components/EditableText"));
+
+var _ImageEditTools = _interopRequireDefault(require("./Components/ImageEditTools"));
+
+require("./Translations");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ImageTile = (0, _withStyles["default"])(function (theme) {
+  return {
+    imageTile: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      '&:hover $imageEditTools': {
+        transform: 'scale(1, 1)'
+      }
+    },
+    imageLabel: {
+      marginTop: theme.spacing.unit,
+      height: 38,
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column'
+    },
+    imageLabelText: {
+      flex: 1,
+      fontWeight: 'bold'
+    },
+    fileName: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: '100%',
+      margin: 'auto'
+    },
+    imageEditTools: {
+      transform: 'scale(0, 0)',
+      transition: 'transform ease-in-out 0.3s',
+      position: 'absolute',
+      top: 0,
+      left: '50%',
+      width: 100,
+      marginLeft: -50
+    }
+  };
+})(function (_ref) {
+  var src = _ref.src,
+      fileName = _ref.fileName,
+      expectedSrc = _ref.expectedSrc,
+      label = _ref.label,
+      classes = _ref.classes,
+      uploadUrl = _ref.uploadUrl,
+      removeUrl = _ref.removeUrl,
+      onUpdate = _ref.onUpdate;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.imageTile
+  }, expectedSrc ? /*#__PURE__*/_react["default"].createElement(_PathStructure["default"], {
+    path: expectedSrc
+  }) : /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+    src: src
+  }), uploadUrl && removeUrl && /*#__PURE__*/_react["default"].createElement(_ImageEditTools["default"], {
+    className: classes.imageEditTools,
+    deleteEnabled: !!src,
+    uploadUrl: uploadUrl,
+    removeUrl: removeUrl,
+    onUpdate: onUpdate
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.imageLabel
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.imageLabelText
+  }, label, "\xA0"), uploadUrl && removeUrl && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.fileName,
+    title: fileName
+  }, fileName || (0, _i18n.t)('visualizationAndMediaData.imageStatus.noImage'))));
+});
+ImageTile.displayName = 'ImageTile';
+var ItemTile = (0, _withStyles["default"])(function (theme) {
+  return {
+    root: {
+      padding: theme.spacing.unit * 2,
+      textAlign: 'center',
+      marginBottom: theme.spacing.unit * 2,
+      height: 202,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      fontSize: '0.8em'
+    },
+    title: {
+      fontWeight: 'bold'
+    },
+    titleSubtitle: {}
+  };
+})(function (_ref2) {
+  var title = _ref2.title,
+      subTitle = _ref2.subTitle,
+      children = _ref2.children,
+      classes = _ref2.classes;
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    className: classes.root
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.titleSubtitle,
+    title: title
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.title
+  }, title), " ", subTitle), children);
+});
+ItemTile.displayName = 'ItemTile';
+var TabTile = (0, _withStyles["default"])(function (theme) {
+  return {
+    root: {
+      textAlign: 'center',
+      height: 170,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      textTransform: 'none',
+      position: 'relative'
+    },
+    title: {
+      display: 'flex',
+      width: 133,
+      height: 24,
+      marginBottom: theme.spacing.unit,
+      marginRight: 8
+    },
+    iconButton: {
+      font: 'inherit',
+      fontSize: '1em',
+      padding: 4,
+      color: 'white',
+      position: 'absolute',
+      right: -20,
+      top: -2
+    }
+  };
+})(function (_ref3) {
+  var title = _ref3.title,
+      onDeleteClick = _ref3.onDeleteClick,
+      children = _ref3.children,
+      classes = _ref3.classes;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.root
+  }, title && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.title
+  }, title), onDeleteClick && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    className: classes.iconButton,
+    "aria-label": "Remove",
+    onClick: onDeleteClick
+  }, /*#__PURE__*/_react["default"].createElement(_DeleteIcon["default"], {
+    fontSize: "small"
+  })), children);
+});
+TabTile.displayName = 'TabTile';
+var SortableTabs = (0, _reactSortableHoc.SortableContainer)(_Tabs.Tabs);
+var SortableTab = (0, _reactSortableHoc.SortableElement)(_Tabs.Tab);
+var editorModes = {
+  componentsAndOptions: 0,
+  viewsAndVisualization: 1
+};
+var VisualizationAndMediaData = (0, _withStyles["default"])(function (theme) {
+  return {
+    dialog: {
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: 700,
+      minWidth: 900
+    },
+    missingImageNotice: {
+      marginBottom: theme.spacing.unit
+    },
+    buttonProgress: {
+      position: 'absolute'
+    },
+    progressContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000,
+      background: 'lightgrey',
+      opacity: 0.5,
+      textAlign: 'center'
+    },
+    progressOverlay: {
+      position: 'absolute',
+      top: '50%',
+      margin: '-15px'
+    },
+    tabs: {
+      minHeight: 182,
+      marginTop: 5,
+      '&.empty': {
+        minHeight: 'fit-content'
+      }
+    },
+    tabRoot: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+      '& + $addViewButton': {
+        marginLeft: theme.spacing.unit * 4
+      },
+      width: 184
+    },
+    addViewButton: {
+      alignSelf: 'flex-start',
+      marginBottom: theme.spacing.unit
+    },
+    container: {
+      overflowX: 'visible',
+      overflowY: 'auto'
+    },
+    componentsContainer: {
+      paddingTop: theme.spacing.unit,
+      paddingBottom: theme.spacing.unit,
+      marginLeft: theme.spacing.unit,
+      marginRight: theme.spacing.unit
+    },
+    componentsScroller: {
+      display: 'flex'
+    },
+    optionsContainer: {
+      paddingTop: theme.spacing.unit,
+      paddingLeft: theme.spacing.unit,
+      marginLeft: theme.spacing.unit * 2,
+      flex: 1,
+      overflowX: 'auto',
+      overflowY: 'visible'
+    },
+    optionsScroller: {
+      display: 'inline-flex',
+      flexDirection: 'column'
+    },
+    optionRow: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      '& > *': {
+        marginRight: theme.spacing.unit * 2
+      },
+      minHeight: 218
+    },
+    itemTitle: {
+      alignSelf: 'flex-start',
+      marginBottom: theme.spacing.unit,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: 300,
+      '&.withViewImage': {
+        maxWidth: 220
+      }
+    },
+    itemTileViews: {
+      width: 220
+    },
+    imageList: {
+      flex: 1,
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, minmax(0%, 1fr))',
+      gridGap: '10px',
+      width: 150 * 2,
+      '&.withViewImage': {
+        gridTemplateColumns: 'repeat(1, minmax(0%, 1fr))',
+        width: 150
+      }
+    },
+    infoBox: {
+      background: 'rgba(0, 0, 0, 0.1)',
+      marginBottom: theme.spacing.unit * 2,
+      borderRadius: 4,
+      padding: theme.spacing.unit,
+      fontSize: '0.8em',
+      '& > p': {
+        margin: 0
+      }
+    },
+    infoLabel: {
+      fontSize: '0.8em',
+      padding: theme.spacing.unit
+    },
+    possibleNamingIssues: {
+      marginTop: theme.spacing.unit * 2,
+      '& > ul': {
+        margin: 0
+      },
+      overflowY: 'auto',
+      maxHeight: '15%'
+    },
+    noTabIndicator: {
+      display: 'none'
+    },
+    sortable: {
+      zIndex: 9999
+    }
+  };
+})(function (_ref4) {
+  var enabled = _ref4.enabled,
+      item = _ref4.item,
+      itemId = _ref4.itemId,
+      loadData = _ref4.loadData,
+      saveView = _ref4.saveView,
+      updateView = _ref4.updateView,
+      removeView = _ref4.removeView,
+      classes = _ref4.classes;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    viewMediaInfo: [],
+    componentMediaInfo: [],
+    possibleNamingIssues: []
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mediaEditData = _useState4[0],
+      setMediaEditData = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      loadingDialog = _useState8[0],
+      setLoadingDialog = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      editorMode = _useState10[0],
+      setEditorMode = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selectedDesignView = _useState12[0],
+      setSelectedDesignView = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      showAddView = _useState14[0],
+      setShowAddView = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      idToDelete = _useState16[0],
+      setIdToDelete = _useState16[1];
+
+  var currentDesignViewIdentifier = selectedDesignView && selectedDesignView.identifier;
+  var viewMediaInfo = mediaEditData.viewMediaInfo,
+      componentMediaInfo = mediaEditData.componentMediaInfo,
+      possibleNamingIssues = mediaEditData.possibleNamingIssues;
+
+  var _useState17 = (0, _react.useState)(viewMediaInfo),
+      _useState18 = _slicedToArray(_useState17, 2),
+      orderedViews = _useState18[0],
+      setOrderedViews = _useState18[1];
+
+  var refreshData = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var data;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoadingDialog(true);
+              _context.next = 4;
+              return loadData(itemId);
+
+            case 4:
+              data = _context.sent;
+              setMediaEditData(data);
+
+            case 6:
+              _context.prev = 6;
+              setLoadingDialog(false);
+              return _context.finish(6);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0,, 6, 9]]);
+    }));
+
+    return function refreshData() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    setOrderedViews(viewMediaInfo);
+  }, [viewMediaInfo]);
+  (0, _react.useEffect)(function () {
+    if (editorMode === editorModes.viewsAndVisualization) {
+      if (!selectedDesignView) {
+        setSelectedDesignView((0, _first["default"])(viewMediaInfo));
+      } else {
+        setSelectedDesignView((0, _find["default"])(viewMediaInfo, {
+          id: selectedDesignView.id
+        }));
+      }
+    } else {
+      setSelectedDesignView(false);
+    }
+  }, [viewMediaInfo, editorMode, selectedDesignView]);
+  (0, _react.useEffect)(function () {
+    _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!open) {
+                _context2.next = 11;
+                break;
+              }
+
+              setLoading(true);
+              _context2.prev = 2;
+              _context2.t0 = setMediaEditData;
+              _context2.next = 6;
+              return loadData(itemId);
+
+            case 6:
+              _context2.t1 = _context2.sent;
+              (0, _context2.t0)(_context2.t1);
+
+            case 8:
+              _context2.prev = 8;
+              setLoading(false);
+              return _context2.finish(8);
+
+            case 11:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2,, 8, 11]]);
+    }))();
+  }, [open, loadData, setMediaEditData, itemId]);
+
+  var handleViewSortEnd = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref7) {
+      var oldIndex, newIndex, views, refreshNeeded;
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              oldIndex = _ref7.oldIndex, newIndex = _ref7.newIndex;
+              views = (0, _arrayMove["default"])(orderedViews, oldIndex, newIndex).map(function (view, index) {
+                return _objectSpread(_objectSpread({}, view), {}, {
+                  sequenceNumber: (0, _padStart["default"])('' + (index + 1), 2, '0')
+                });
+              });
+              setOrderedViews(views);
+              refreshNeeded = false;
+              _context3.prev = 4;
+              setLoadingDialog(true);
+              _context3.next = 8;
+              return Promise.all(views.map(function (view) {
+                if (view.sequenceNumber !== orderedViews.sequenceNumber) {
+                  refreshNeeded = true;
+                  return updateView(_objectSpread(_objectSpread({}, view), {}, {
+                    itemId: itemId
+                  }));
+                }
+              }));
+
+            case 8:
+              _context3.prev = 8;
+
+              if (!refreshNeeded) {
+                _context3.next = 14;
+                break;
+              }
+
+              _context3.next = 12;
+              return refreshData();
+
+            case 12:
+              _context3.next = 15;
+              break;
+
+            case 14:
+              setLoadingDialog(false);
+
+            case 15:
+              return _context3.finish(8);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[4,, 8, 16]]);
+    }));
+
+    return function handleViewSortEnd(_x) {
+      return _ref8.apply(this, arguments);
+    };
+  }(); // an image is treated as missing if its src is empty, so finding empty src props gives the correct result
+
+
+  var showMissingImageNotice = (0, _react.useMemo)(function () {
+    return function findEmptySrc(obj) {
+      if (obj instanceof Array) {
+        return obj.some(findEmptySrc);
+      } else if (obj instanceof Object) {
+        return obj.hasOwnProperty('src') ? !obj.src : findEmptySrc(Object.values(obj));
+      }
+    }(componentMediaInfo);
+  }, [componentMediaInfo]);
+
+  if (!enabled) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "contained",
+    color: "primary",
+    size: "large",
+    onClick: function onClick() {
+      return setOpen(true);
+    },
+    disabled: loading
+  }, /*#__PURE__*/_react["default"].createElement(_i18n.T, null, "visualizationAndMediaData.openButtonLabel"), loading && /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
+    className: classes.buttonProgress,
+    size: 24
+  })), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+    title: (0, _i18n.T)('visualizationAndMediaData.dialogTitle', {
+      item: "".concat((0, _get["default"])(item, 'translated_title'), " (").concat((0, _get["default"])(item, 'identifier'), ")")
+    }),
+    modal: 'true',
+    open: !loading && open,
+    scroll: 'paper',
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    maxWidth: false,
+    classes: {
+      dialogContentTextRoot: classes.dialog
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.missingImageNotice
+  }, (0, _i18n.T)("visualizationAndMediaData.missingImageNotice.".concat(showMissingImageNotice ? 'imagesAreMissing' : 'noMissingImage'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.infoBox
+  }, (0, _i18n.T)('visualizationAndMediaData.infoBoxText')), /*#__PURE__*/_react["default"].createElement(_Tabs.Tabs, {
+    value: editorMode,
+    onChange: function onChange(evt, value) {
+      return setEditorMode(value);
+    }
+  }, Object.keys(editorModes).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_Tabs.Tab, {
+      key: key,
+      component: "div",
+      value: editorModes[key],
+      label: (0, _i18n.T)("visualizationAndMediaData.editorModes.".concat(key))
+    });
+  })), editorMode === editorModes.componentsAndOptions ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.infoLabel
+  }, (0, _i18n.T)('visualizationAndMediaData.infoBoxTextComponentsAndOptions')) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.infoLabel
+  }, (0, _i18n.T)('visualizationAndMediaData.infoBoxTextViewsAndVisualization')), editorMode === editorModes.viewsAndVisualization && /*#__PURE__*/_react["default"].createElement(SortableTabs, {
+    onSortEnd: handleViewSortEnd,
+    distance: 10,
+    axis: 'x',
+    lockAxis: 'x',
+    lockToContainerEdges: true,
+    helperClass: classes.sortable,
+    value: currentDesignViewIdentifier || 0,
+    onChange: function onChange(evt, value) {
+      return setSelectedDesignView(orderedViews.find(function (_ref9) {
+        var identifier = _ref9.identifier;
+        return identifier === value;
+      }));
+    },
+    className: classes.tabs + (selectedDesignView ? '' : ' empty'),
+    classes: {
+      indicator: !viewMediaInfo.length ? classes.noTabIndicator : ''
+    }
+  }, selectedDesignView && orderedViews && orderedViews.map(function (designView, index) {
+    var id = designView.id,
+        identifier = designView.identifier,
+        sequenceNumber = designView.sequenceNumber;
+    return /*#__PURE__*/_react["default"].createElement(SortableTab, {
+      key: identifier,
+      index: index,
+      component: "div",
+      label: /*#__PURE__*/_react["default"].createElement(TabTile, {
+        title: /*#__PURE__*/_react["default"].createElement(_EditableText["default"], {
+          "aria-label": 'identifier',
+          value: identifier,
+          onChange: /*#__PURE__*/function () {
+            var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(value) {
+              return regeneratorRuntime.wrap(function _callee4$(_context4) {
+                while (1) {
+                  switch (_context4.prev = _context4.next) {
+                    case 0:
+                      _context4.next = 2;
+                      return updateView({
+                        id: id,
+                        itemId: itemId,
+                        sequenceNumber: sequenceNumber,
+                        identifier: value
+                      });
+
+                    case 2:
+                      _context4.t0 = setMediaEditData;
+                      _context4.next = 5;
+                      return loadData(itemId);
+
+                    case 5:
+                      _context4.t1 = _context4.sent;
+                      (0, _context4.t0)(_context4.t1);
+
+                    case 7:
+                    case "end":
+                      return _context4.stop();
+                  }
+                }
+              }, _callee4);
+            }));
+
+            return function (_x2) {
+              return _ref10.apply(this, arguments);
+            };
+          }()
+        }),
+        onDeleteClick: function onDeleteClick() {
+          setIdToDelete(id);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(ImageTile, _extends({}, (0, _get["default"])(designView, 'thumbnail'), {
+        label: 'Thumbnail:',
+        uploadUrl: "/creator_views/".concat(id, "/upload/thumbnail"),
+        removeUrl: "/creator_views/".concat(id, "/thumbnail"),
+        onUpdate: refreshData
+      }))),
+      value: identifier,
+      classes: {
+        root: classes.tabRoot
+      }
+    });
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "contained",
+    color: "primary",
+    size: "large",
+    onClick: function onClick() {
+      return setShowAddView(true);
+    },
+    className: classes.addViewButton
+  }, /*#__PURE__*/_react["default"].createElement(_i18n.T, null, "visualizationAndMediaData.addViewButtonLabel"))), /*#__PURE__*/_react["default"].createElement(_ViewEdit["default"], {
+    item: item,
+    open: showAddView,
+    onClose: function onClose() {
+      return setShowAddView(false);
+    },
+    onSubmit: /*#__PURE__*/function () {
+      var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(data) {
+        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                _context5.prev = 0;
+                _context5.next = 3;
+                return saveView(_objectSpread(_objectSpread({}, data), {}, {
+                  itemId: itemId,
+                  sequenceNumber: '999'
+                }));
+
+              case 3:
+                _context5.next = 8;
+                break;
+
+              case 5:
+                _context5.prev = 5;
+                _context5.t0 = _context5["catch"](0);
+                // eslint-disable-next-line no-console
+                console.error(_context5.t0);
+
+              case 8:
+                refreshData();
+                setShowAddView(false);
+
+              case 10:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, null, [[0, 5]]);
+      }));
+
+      return function (_x3) {
+        return _ref11.apply(this, arguments);
+      };
+    }()
+  }), /*#__PURE__*/_react["default"].createElement(_ConfirmDelete["default"], {
+    id: 'confirmDeleteView',
+    open: !!idToDelete,
+    onCancel: function onCancel() {
+      return setIdToDelete(false);
+    },
+    onConfirm: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return removeView(idToDelete);
+
+            case 2:
+              setIdToDelete(false);
+              _context6.t0 = setMediaEditData;
+              _context6.next = 6;
+              return loadData(itemId);
+
+            case 6:
+              _context6.t1 = _context6.sent;
+              (0, _context6.t0)(_context6.t1);
+
+            case 8:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    })),
+    title: (0, _i18n.t)('visualizationAndMediaData.viewDeleteConfirm.title'),
+    message: (0, _i18n.t)('visualizationAndMediaData.viewDeleteConfirm.message')
+  }), componentMediaInfo && componentMediaInfo.length > 0 && (editorMode === editorModes.componentsAndOptions || orderedViews && orderedViews.length > 0) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.componentsScroller
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.componentsContainer
+  }, componentMediaInfo.map(function (oc) {
+    return /*#__PURE__*/_react["default"].createElement(ItemTile, {
+      key: oc.identifier,
+      title: "".concat(oc.translated_title),
+      subTitle: "(".concat(oc.identifier, ")"),
+      classes: {
+        titleSubtitle: classes.itemTitle
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ImageTile, _extends({}, (0, _get["default"])(oc, 'images.componentThumbnail'), {
+      label: editorMode === editorModes.componentsAndOptions ? 'Thumbnail:' : '',
+      uploadUrl: editorMode === editorModes.componentsAndOptions && "/optionclassifications/".concat(oc.id, "/upload/thumbnail"),
+      removeUrl: editorMode === editorModes.componentsAndOptions && "/optionclassifications/".concat(oc.id, "/thumbnail"),
+      onUpdate: refreshData
+    })));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.optionsContainer
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.optionsScroller
+  }, componentMediaInfo.map(function (oc) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: oc.identifier,
+      className: classes.optionRow
+    }, oc.options.map(function (option) {
+      return /*#__PURE__*/_react["default"].createElement(ItemTile, {
+        key: option.identifier,
+        title: "".concat(option.translated_title),
+        subTitle: "(".concat(option.identifier, ")"),
+        classes: {
+          root: currentDesignViewIdentifier && classes.itemTileViews,
+          titleSubtitle: classes.itemTitle + currentDesignViewIdentifier ? ' withViewImage' : ''
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: currentDesignViewIdentifier ? classes.imageList + ' withViewImage' : ''
+      }, currentDesignViewIdentifier && /*#__PURE__*/_react["default"].createElement(ImageTile, _extends({}, (0, _get["default"])(option, "images.visualizationImages.".concat(currentDesignViewIdentifier)), {
+        label: 'Visualization:',
+        uploadUrl: "/items/".concat(itemId, "/upload/layer_image/").concat(oc.id, "/").concat(option.id, "/").concat(selectedDesignView.id),
+        removeUrl: "/items/".concat(itemId, "/layer_image/").concat(oc.id, "/").concat(option.id, "/").concat(selectedDesignView.id),
+        onUpdate: refreshData
+      })), editorMode === editorModes.componentsAndOptions && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.imageList
+      }, /*#__PURE__*/_react["default"].createElement(ImageTile, _extends({}, (0, _get["default"])(option, 'images.optionThumbnail'), {
+        label: 'Thumbnail:',
+        uploadUrl: "/options/".concat(option.id, "/upload/thumbnail"),
+        removeUrl: "/options/".concat(option.id, "/thumbnail"),
+        onUpdate: refreshData
+      })), /*#__PURE__*/_react["default"].createElement(ImageTile, _extends({}, (0, _get["default"])(option, 'images.optionDetailImage'), {
+        label: 'Detail:',
+        uploadUrl: "/options/".concat(option.id, "/upload/detail_image"),
+        removeUrl: "/options/".concat(option.id, "/detail_image"),
+        onUpdate: refreshData
+      })))));
+    }));
+  }))))), possibleNamingIssues && possibleNamingIssues.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.possibleNamingIssues
+  }, (0, _i18n.T)('visualizationAndMediaData.possibleNamingIssuesNotice'), /*#__PURE__*/_react["default"].createElement("ul", null, possibleNamingIssues.map(function (fileName) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: fileName
+    }, fileName);
+  }))), loadingDialog && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.progressContainer
+  }, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
+    className: classes.progressOverlay,
+    size: 30
+  }))));
+});
+exports.VisualizationAndMediaData = VisualizationAndMediaData;
+VisualizationAndMediaData.displayName = 'VisualizationAndMediaData';
+
+function mapStateToProps() {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    loadData: function () {
+      var _loadData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(id) {
+        var _yield$Api$request, data;
+
+        return regeneratorRuntime.wrap(function _callee7$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                _context7.prev = 0;
+                _context7.next = 3;
+                return _Api["default"].request("/mediainfo/".concat(id));
+
+              case 3:
+                _yield$Api$request = _context7.sent;
+                data = _yield$Api$request.data;
+                return _context7.abrupt("return", _objectSpread(_objectSpread({
+                  componentMediaInfo: [],
+                  possibleNamingIssues: []
+                }, data), {}, {
+                  viewMediaInfo: (0, _sortBy["default"])(data.viewMediaInfo, ['sequenceNumber'])
+                }));
+
+              case 8:
+                _context7.prev = 8;
+                _context7.t0 = _context7["catch"](0);
+                dispatch((0, _Actions.networkError)('mediainfo', 'mediainfo', _context7.t0));
+                throw _context7.t0;
+
+              case 12:
+              case "end":
+                return _context7.stop();
+            }
+          }
+        }, _callee7, null, [[0, 8]]);
+      }));
+
+      function loadData(_x4) {
+        return _loadData.apply(this, arguments);
+      }
+
+      return loadData;
+    }(),
+    saveView: function () {
+      var _saveView = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(data) {
+        return regeneratorRuntime.wrap(function _callee8$(_context8) {
+          while (1) {
+            switch (_context8.prev = _context8.next) {
+              case 0:
+                _context8.prev = 0;
+                _context8.next = 3;
+                return _Api["default"].request({
+                  method: 'post',
+                  url: "/creator_views",
+                  data: data
+                });
+
+              case 3:
+                return _context8.abrupt("return", _context8.sent);
+
+              case 6:
+                _context8.prev = 6;
+                _context8.t0 = _context8["catch"](0);
+                dispatch((0, _Actions.networkError)('views', 'views', _context8.t0));
+                throw _context8.t0;
+
+              case 10:
+              case "end":
+                return _context8.stop();
+            }
+          }
+        }, _callee8, null, [[0, 6]]);
+      }));
+
+      function saveView(_x5) {
+        return _saveView.apply(this, arguments);
+      }
+
+      return saveView;
+    }(),
+    updateView: function () {
+      var _updateView = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(data) {
+        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+          while (1) {
+            switch (_context9.prev = _context9.next) {
+              case 0:
+                _context9.prev = 0;
+                _context9.next = 3;
+                return _Api["default"].request({
+                  method: 'post',
+                  url: "/creator_views",
+                  data: data
+                });
+
+              case 3:
+                return _context9.abrupt("return", _context9.sent);
+
+              case 6:
+                _context9.prev = 6;
+                _context9.t0 = _context9["catch"](0);
+                dispatch((0, _Actions.networkError)('views', 'views', _context9.t0));
+                throw _context9.t0;
+
+              case 10:
+              case "end":
+                return _context9.stop();
+            }
+          }
+        }, _callee9, null, [[0, 6]]);
+      }));
+
+      function updateView(_x6) {
+        return _updateView.apply(this, arguments);
+      }
+
+      return updateView;
+    }(),
+    removeView: function removeView(id) {
+      try {
+        return _Api["default"].request({
+          method: 'delete',
+          url: "/creator_views/".concat(id)
+        });
+      } catch (e) {
+        dispatch((0, _Actions.networkError)('views', 'views', e));
+        throw e;
+      }
+    }
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _AsyncProps.withAsyncProps)( /*#__PURE__*/function () {
+  var _ref14 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(_ref13) {
+    var itemId, _item, item;
+
+    return regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            itemId = _ref13.itemId, _item = _ref13.item;
+            _context10.t0 = _item;
+
+            if (_context10.t0) {
+              _context10.next = 9;
+              break;
+            }
+
+            _context10.t1 = itemId;
+
+            if (!_context10.t1) {
+              _context10.next = 8;
+              break;
+            }
+
+            _context10.next = 7;
+            return (0, _ApiCalls.loadItemById)(itemId);
+
+          case 7:
+            _context10.t1 = _context10.sent;
+
+          case 8:
+            _context10.t0 = _context10.t1;
+
+          case 9:
+            item = _context10.t0;
+            return _context10.abrupt("return", {
+              item: item
+            });
+
+          case 11:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  }));
+
+  return function (_x7) {
+    return _ref14.apply(this, arguments);
+  };
+}(), ['itemIdentifier'], {
+  renderError: function renderError() {
+    return (0, _i18n.T)('visualizationAndMediaData.failedToLoadData');
+  },
+  renderLoading: function renderLoading() {
+    return /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null);
+  }
+})((0, _RemappedProps.withRemappedProps)(function (_ref15) {
+  var item = _ref15.item;
+  return {
+    enabled: ['2dVariant', '2dLayer'].indexOf((0, _get["default"])(item, 'visualizationMode.identifier')) !== -1
+  };
+})(VisualizationAndMediaData)));
+
+exports["default"] = _default;