@configuratorware/configurator-admingui 1.28.0-beta.2 → 1.28.2

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

@@ -1,1098 +0,0 @@
-"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;