@configuratorware/configurator-frontendgui 1.28.0-beta.1 → 1.28.1

package/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -1,716 +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"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _i18n = require("../../../../../Framework/i18n");
-
-var _withWidth = _interopRequireWildcard(require("@material-ui/core/withWidth/withWidth"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
-
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup/RadioGroup"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel/FormControlLabel"));
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio/Radio"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl/FormControl"));
-
-var _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
-
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions/DialogActions"));
-
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent/DialogContent"));
-
-var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
-
-var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
-
-var _Loop = _interopRequireDefault(require("@material-ui/icons/Loop"));
-
-var _Colorize = _interopRequireDefault(require("@material-ui/icons/Colorize"));
-
-var _FormatPaint = _interopRequireDefault(require("@material-ui/icons/FormatPaint"));
-
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var _PhotoLibrary = _interopRequireDefault(require("@material-ui/icons/PhotoLibrary"));
-
-var _AddBox = _interopRequireDefault(require("@material-ui/icons/AddBox"));
-
-var _ArrowBackIos = _interopRequireDefault(require("@material-ui/icons/ArrowBackIos"));
-
-var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
-
-var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
-
-var _AnalyticsWrapper = _interopRequireDefault(require("../../../../Shared/Components/Analytics/AnalyticsWrapper"));
-
-var _MessageBox = _interopRequireDefault(require("../../../../Shared/Components/MessageBox"));
-
-var _Dialog = _interopRequireDefault(require("../Dialog"));
-
-var _ImageColorPicker = _interopRequireDefault(require("../ImageColorPicker/ImageColorPicker"));
-
-var _ImageThumbnail = _interopRequireDefault(require("./ImageThumbnail"));
-
-var _baseline_colorize_black_24dp = _interopRequireDefault(require("./res/baseline_colorize_black_24dp.png"));
-
-var _checkers_tile = _interopRequireDefault(require("./res/checkers_tile.png"));
-
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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; }
-
-var styles = function styles(theme) {
-  var _dialogContent, _imageUploadSpacing, _TabContent, _imageEditDialogItem, _alignGrid, _rootContainerWrapper, _previewImageWrapper;
-
-  return {
-    dialogContent: (_dialogContent = {}, _defineProperty(_dialogContent, theme.breakpoints.down('md'), {
-      marginBottom: 40,
-      padding: '8px 0 8px 24px',
-      '&.color-preview-block': {
-        marginBottom: 0
-      }
-    }), _defineProperty(_dialogContent, theme.breakpoints.down('xs'), {
-      marginBottom: 24,
-      padding: 0
-    }), _dialogContent),
-    dialogWrapper: _defineProperty({
-      maxWidth: '1000px',
-      borderTop: '7px solid ' + theme.palette.primary.main,
-      padding: '0px 24px 16px 8px',
-      overflowX: 'hidden'
-    }, theme.breakpoints.down('xs'), {
-      padding: 0,
-      '& .MuiDialogTitle-root': {
-        padding: theme.smallScreen.padding
-      }
-    }),
-    imageUploadSpacing: (_imageUploadSpacing = {
-      backgroundColor: 'white'
-    }, _defineProperty(_imageUploadSpacing, theme.breakpoints.down('sm'), {
-      bottom: 24,
-      left: 0,
-      right: 0,
-      padding: '0 24px 8px',
-      position: 'absolute'
-    }), _defineProperty(_imageUploadSpacing, theme.breakpoints.down('xs'), {
-      bottom: 4,
-      padding: 0
-    }), _imageUploadSpacing),
-    PreviewDialogButton: _defineProperty({
-      fontSize: 15,
-      minWidth: 140,
-      height: 40,
-      '&:disabled': {
-        backgroundColor: '#DDDDDD',
-        '& span': {
-          color: '#C4C4C4'
-        }
-      },
-      '& input': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        opacity: 0,
-        '&:hover': {
-          cursor: 'pointer'
-        }
-      }
-    }, theme.breakpoints.down('xs'), {
-      height: 56,
-      margin: theme.smallScreen.padding
-    }),
-    imageTabOptions: {
-      '& button': {
-        minWidth: '33%',
-        minHeight: 64,
-        textTransform: 'none',
-        fontSize: 15,
-        color: '#757575'
-      }
-    },
-    colorizeCaption: {
-      color: '#757575',
-      display: 'flex',
-      alignItems: 'center',
-      marginTop: 24,
-      '& i': {
-        marginLeft: 8
-      }
-    },
-    PreviewDialogImage: {
-      '& canvas': {
-        // use the colorize icon as cursor directly
-        cursor: "url(".concat(_baseline_colorize_black_24dp["default"], ") 2 21, auto")
-      }
-    },
-    PreviewDialogImageColorize: {
-      '& canvas': {
-        cursor: "default"
-      }
-    },
-    TabContent: (_TabContent = {
-      padding: 12,
-      maxHeight: 330,
-      overflow: 'hidden'
-    }, _defineProperty(_TabContent, theme.breakpoints.down('xs'), {
-      padding: '10px 2px',
-      maxHeight: '100%'
-    }), _defineProperty(_TabContent, theme.breakpoints.down('sm'), {
-      padding: '12px 0px'
-    }), _TabContent),
-    PreviewDialogGridAlign: _defineProperty({
-      padding: '20px 24px'
-    }, theme.breakpoints.down('xs'), {
-      padding: 10
-    }),
-    selectedBackgroundFields: {
-      display: 'block'
-    },
-    imageEditDialogItem: (_imageEditDialogItem = {
-      maxWidth: 475
-    }, _defineProperty(_imageEditDialogItem, theme.breakpoints.down('sm'), {
-      width: '100%',
-      maxWidth: '100%'
-    }), _defineProperty(_imageEditDialogItem, theme.breakpoints.down('xs'), {
-      padding: '16px 16px 8px'
-    }), _imageEditDialogItem),
-    alignGrid: (_alignGrid = {
-      paddingLeft: 40
-    }, _defineProperty(_alignGrid, theme.breakpoints.down('sm'), {
-      paddingLeft: 0
-    }), _defineProperty(_alignGrid, theme.breakpoints.down('xs'), {
-      paddingLeft: theme.smallScreen.padding,
-      paddingRight: theme.smallScreen.padding
-    }), _alignGrid),
-    rootContainerWrapper: (_rootContainerWrapper = {
-      flexWrap: 'nowrap'
-    }, _defineProperty(_rootContainerWrapper, theme.breakpoints.down('sm'), {
-      flexWrap: 'wrap'
-    }), _defineProperty(_rootContainerWrapper, theme.breakpoints.down('xs'), {
-      overflowY: 'auto',
-      marginBottom: 100
-    }), _rootContainerWrapper),
-    previewImageWrapper: (_previewImageWrapper = {
-      backgroundSize: '24px 24px',
-      marginBottom: 82,
-      background: "#bebebe url(".concat(_checkers_tile["default"], ")"),
-      display: 'flex',
-      height: 360,
-      width: 450,
-      '&.color-preview-block': {
-        marginBottom: 8
-      }
-    }, _defineProperty(_previewImageWrapper, theme.breakpoints.down('sm'), {
-      width: 'auto',
-      marginBottom: 0
-    }), _defineProperty(_previewImageWrapper, theme.breakpoints.down('xs'), {
-      overflowY: 'auto',
-      flexWrap: 'wrap',
-      height: 220
-    }), _defineProperty(_previewImageWrapper, '& div:first-child', {
-      margin: '5%',
-      flex: 1,
-      maxHeight: '100%',
-      width: '90%',
-      '& canvas': {
-        display: 'block',
-        margin: '0 auto'
-      }
-    }), _previewImageWrapper),
-    hideTabs: {
-      display: 'none'
-    },
-    imageSelectTab: _defineProperty({
-      padding: '24px 16px'
-    }, theme.breakpoints.down('xs'), {
-      padding: '30px 8px'
-    }),
-    imageSelectTitle: {
-      fontWeight: 'bold'
-    },
-    imageSelectArrowButton: {
-      fontSize: 14,
-      "float": 'left',
-      height: 70,
-      lineHeight: 70,
-      cursor: 'pointer',
-      margin: 8
-    },
-    imageSelectUploadedImage: _defineProperty({
-      '&:first-child': {
-        marginLeft: 0
-      },
-      width: 70,
-      height: 70,
-      "float": 'left',
-      margin: ' 0 10px',
-      borderRadius: 8,
-      background: '#eee',
-      cursor: 'pointer',
-      overflow: 'hidden'
-    }, theme.breakpoints.down('xs'), {
-      margin: 4
-    }),
-    imageSelectUploadedImageActive: _defineProperty({
-      margin: '0 8px',
-      border: '2px solid red'
-    }, theme.breakpoints.down('xs'), {
-      margin: 4
-    }),
-    imageSelectButton: _defineProperty({
-      textTransform: 'none',
-      fontWeight: 'bold',
-      width: 250,
-      padding: '7px 15px'
-    }, theme.breakpoints.down('xs'), {
-      height: 56,
-      width: '98%'
-    }),
-    iconButton: {
-      paddingRight: 8,
-      color: theme.palette.primary.darkText
-    },
-    imageSelectGrid: _defineProperty({}, theme.breakpoints.down('xs'), {
-      padding: '8px 0 !important',
-      display: 'flex',
-      justifyContent: 'space-between'
-    }),
-    imageTab: _defineProperty({}, theme.breakpoints.down('xs'), {
-      fontWeight: 'bold',
-      fontSize: '13px !important'
-    }),
-    colorPreviewToggleContainer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'baseline',
-      marginBottom: 8,
-      '&.align-container': _defineProperty({
-        marginBottom: 75
-      }, theme.breakpoints.down('sm'), {
-        marginBottom: 0
-      })
-    },
-    colorSwitchBase: {
-      color: theme.designer.imageEditDialog.errorColor,
-      '&$colorChecked': {
-        color: theme.designer.imageEditDialog.errorColor
-      }
-    },
-    colorBar: {
-      backgroundColor: theme.designer.imageEditDialog.errorColor
-    },
-    colorChecked: {},
-    errorContainer: {
-      color: theme.designer.imageEditDialog.errorColor
-    },
-    buttonContent: {
-      color: theme.palette.primary.darkText
-    }
-  };
-};
-
-var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageEditDialog, _React$Component);
-
-  var _super = _createSuper(ImageEditDialog);
-
-  function ImageEditDialog(props) {
-    var _this;
-
-    _classCallCheck(this, ImageEditDialog);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "onChangeColor", function (color) {
-      var _this$props = _this.props,
-          onChangeColor = _this$props.onChangeColor,
-          activeTabIndex = _this$props.activeTabIndex;
-      onChangeColor && activeTabIndex === 1 && onChangeColor(color);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onActiveTabChange", function (e, newActiveTabIndex) {
-      var onActiveTabChange = _this.props.onActiveTabChange;
-      onActiveTabChange && onActiveTabChange(newActiveTabIndex);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onSelectedBackgroundChange", function (e, value) {
-      var changeSelectedBackground = _this.props.changeSelectedBackground;
-      var selectedBackground = value ? 'replace' : null;
-      changeSelectedBackground && changeSelectedBackground(selectedBackground);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "changeSelectedBackground", function (e, value) {
-      var changeSelectedBackground = _this.props.changeSelectedBackground;
-      changeSelectedBackground && changeSelectedBackground(value);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setUserImagesIndexPrev", function () {
-      var userImagesIndex = _this.state.userImagesIndex;
-      var newIndex = userImagesIndex - 1;
-
-      if (newIndex < 0) {
-        return;
-      }
-
-      _this.setState({
-        userImagesIndex: newIndex
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setUserImagesIndexNext", function () {
-      var userImages = _this.props.userImages;
-      var userImagesIndex = _this.state.userImagesIndex;
-      var newIndex = userImagesIndex + 1;
-      var lastAvailableIndex = userImages.length - 3;
-
-      if (newIndex > lastAvailableIndex) {
-        return;
-      }
-
-      _this.setState({
-        userImagesIndex: newIndex
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getWarningMessageText", function () {
-      return (0, _i18n.t)('imageEditDialog.warningMessage');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "galleryClick", function () {
-      var onGalleryClick = _this.props.onGalleryClick;
-      onGalleryClick && onGalleryClick();
-    });
-
-    _this.state = {
-      userImagesIndex: 0
-    };
-    return _this;
-  }
-
-  _createClass(ImageEditDialog, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          backgroundSelected = _this$props2.backgroundSelected,
-          preview = _this$props2.preview,
-          errorFeedback = _this$props2.errorFeedback,
-          open = _this$props2.open,
-          closePreviewDialog = _this$props2.closePreviewDialog,
-          continueClick = _this$props2.continueClick,
-          loaderComponent = _this$props2.loaderComponent,
-          colorPickerEnabled = _this$props2.colorPickerEnabled,
-          imageColorizeElement = _this$props2.imageColorizeElement,
-          activeTabIndex = _this$props2.activeTabIndex,
-          width = _this$props2.width,
-          colorDisabled = _this$props2.colorDisabled,
-          image = _this$props2.image,
-          userImages = _this$props2.userImages,
-          galleryHasImages = _this$props2.galleryHasImages,
-          showWarningMessage = _this$props2.showWarningMessage,
-          displayColorPreview = _this$props2.displayColorPreview,
-          onOriginalImageAndColorPreviewToggleClick = _this$props2.onOriginalImageAndColorPreviewToggleClick,
-          originalImagePreview = _this$props2.originalImagePreview,
-          embroideryNoticeRef = _this$props2.embroideryNoticeRef,
-          colorPreviewBlockActive = _this$props2.colorPreviewBlockActive,
-          colorPreviewRequirementFulfilled = _this$props2.colorPreviewRequirementFulfilled,
-          uploadDisabled = _this$props2.uploadDisabled,
-          imageUploadElement = _this$props2.imageUploadElement,
-          onNewUploadClick = _this$props2.onNewUploadClick,
-          uploadImage = _this$props2.uploadImage,
-          selectUserImage = _this$props2.selectUserImage,
-          showUploadPanel = _this$props2.showUploadPanel;
-      var userImagesIndex = this.state.userImagesIndex;
-      var userImagesIndexes = [];
-
-      for (var i = userImagesIndex; i < userImages.length && i < userImagesIndex + 3; i++) {
-        userImagesIndexes.push(i);
-      }
-
-      var showNewUploadArea = showUploadPanel || !image;
-      var colorPreviewErrorContainer = classes.colorPreviewToggleContainer + ' ' + classes.errorContainer;
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
-        paperClassName: classes.dialogWrapper,
-        open: open,
-        onClose: closePreviewDialog,
-        dialogTitle: showUploadPanel ? (0, _i18n.t)('fileUpload.uploadLogo') : (0, _i18n.t)('fileUpload.logoPreview'),
-        maxWidth: "lg",
-        fullWidth: true,
-        fullScreen: (0, _withWidth.isWidthDown)('sm', width),
-        scroll: "paper"
-      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
-        className: "".concat(classes.dialogContent, " ").concat(colorPreviewBlockActive ? 'color-preview-block' : '')
-      }, loaderComponent, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        container: true,
-        className: classes.rootContainerWrapper
-      }, showNewUploadArea && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        sm: 12,
-        className: classes.imageEditDialogItem
-      }, imageUploadElement), !showNewUploadArea && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        sm: 12,
-        className: classes.imageEditDialogItem
-      }, errorFeedback, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.previewImageWrapper, " ").concat(colorPreviewBlockActive ? 'color-preview-block' : '')
-      }, /*#__PURE__*/_react["default"].createElement(_ImageColorPicker["default"], {
-        src: [0, 2].includes(activeTabIndex) && !displayColorPreview && !image.gallery ? originalImagePreview : preview,
-        wrapperClassName: activeTabIndex === 1 ? classes.PreviewDialogImage : classes.PreviewDialogImageColorize,
-        onChange: this.onChangeColor,
-        enabled: activeTabIndex === 1
-      })), colorPreviewBlockActive && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        ref: embroideryNoticeRef,
-        className: "".concat(!colorPreviewRequirementFulfilled ? colorPreviewErrorContainer : classes.colorPreviewToggleContainer, " ").concat(displayColorPreview && !showWarningMessage ? 'align-container' : '')
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, (0, _i18n.t)('imageEditDialog.originalPicture')), /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-        classes: {
-          switchBase: !colorPreviewRequirementFulfilled ? classes.colorSwitchBase : '',
-          checked: !colorPreviewRequirementFulfilled ? classes.colorChecked : '',
-          track: !colorPreviewRequirementFulfilled ? classes.colorBar : ''
-        },
-        checked: displayColorPreview,
-        onChange: onOriginalImageAndColorPreviewToggleClick,
-        color: "primary"
-      }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, (0, _i18n.t)('imageEditDialog.colorPreview'))), displayColorPreview ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showWarningMessage && /*#__PURE__*/_react["default"].createElement(_MessageBox["default"], {
-        text: this.getWarningMessageText(),
-        type: "warning"
-      })) : /*#__PURE__*/_react["default"].createElement(_MessageBox["default"], {
-        text: !colorPreviewRequirementFulfilled ? (0, _i18n.t)('imageEditDialog.pictureEmbroideryHint') : (0, _i18n.t)('imageEditDialog.pictureToggleHint'),
-        type: !colorPreviewRequirementFulfilled ? 'error' : 'warning'
-      }))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        sm: 12,
-        className: classes.alignGrid + (showUploadPanel && width === 'xs' ? ' ' + classes.hideTabs : '')
-      }, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
-        targetId: "image_edit_options"
-      }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
-        className: classes.imageTabOptions,
-        value: activeTabIndex,
-        onChange: this.onActiveTabChange,
-        indicatorColor: "primary",
-        textColor: "primary",
-        variant: (0, _withWidth.isWidthDown)('xs', width) ? 'fullWidth' : 'standard'
-      }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-        icon: /*#__PURE__*/_react["default"].createElement(_Loop["default"], null),
-        className: classes.imageTab,
-        label: (0, _i18n.t)('imageEditDialog.changeFile')
-      }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-        icon: /*#__PURE__*/_react["default"].createElement(_Colorize["default"], null),
-        className: classes.imageTab,
-        label: (0, _i18n.t)('imageEditDialog.background'),
-        disabled: image && image.gallery
-      }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-        icon: /*#__PURE__*/_react["default"].createElement(_FormatPaint["default"], null),
-        className: classes.imageTab,
-        label: (0, _i18n.t)('imageEditDialog.colorize'),
-        disabled: colorDisabled
-      }))), activeTabIndex === 0 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.TabContent, " ").concat(classes.imageSelectTab)
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        container: true,
-        spacing: 2
-      }, !showNewUploadArea && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        className: classes.imageSelectGrid
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.imageSelectTitle
-      }, (0, _i18n.t)('imageEditDialog.selectFromMyUploads'))), !showNewUploadArea && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        className: classes.imageSelectGrid,
-        style: {
-          justifyContent: userImages.length > 3 ? 'space-between' : 'start'
-        }
-      }, userImages.length > 3 && /*#__PURE__*/_react["default"].createElement(_ArrowBackIos["default"], {
-        className: classes.imageSelectArrowButton,
-        onClick: this.setUserImagesIndexPrev
-      }), userImagesIndexes.map(function (imageIndex, index) {
-        var isActive = image && userImages[imageIndex].identifier === image.identifier;
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          key: index,
-          className: classes.imageSelectUploadedImage + (isActive ? ' ' + classes.imageSelectUploadedImageActive : ''),
-          onClick: function onClick() {
-            return selectUserImage(imageIndex);
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_ImageThumbnail["default"], {
-          image: userImages[imageIndex]
-        }));
-      }), userImages.length > 3 && /*#__PURE__*/_react["default"].createElement(_ArrowForwardIos["default"], {
-        className: classes.imageSelectArrowButton,
-        onClick: this.setUserImagesIndexNext
-      })), galleryHasImages && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        className: classes.imageSelectGrid
-      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        onClick: this.galleryClick,
-        variant: "outlined",
-        className: classes.imageSelectButton,
-        fullWidth: (0, _withWidth.isWidthDown)('sm', width)
-      }, /*#__PURE__*/_react["default"].createElement(_PhotoLibrary["default"], {
-        className: classes.iconButton
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.buttonContent
-      }, (0, _i18n.t)('imageEditDialog.selectFromGallery')))), !showNewUploadArea && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12,
-        className: classes.imageSelectGrid
-      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        onClick: onNewUploadClick,
-        variant: "outlined",
-        className: classes.imageSelectButton,
-        fullWidth: (0, _withWidth.isWidthDown)('sm', width)
-      }, /*#__PURE__*/_react["default"].createElement(_AddBox["default"], {
-        className: classes.iconButton
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.buttonContent
-      }, (0, _i18n.t)('imageEditDialog.uploadNewImage')))))), activeTabIndex === 1 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.TabContent + ' ' + classes.PreviewDialogGridAlign
-      }, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
-        component: "fieldset",
-        className: classes.selectedBackgroundFields
-      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-          checked: backgroundSelected !== null,
-          onChange: this.onSelectedBackgroundChange,
-          color: "primary"
-        }),
-        label: (0, _i18n.t)('fileUpload.removeBackground')
-      }), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
-        targetId: "image_background"
-      }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-        "aria-label": "background removement",
-        name: "backgroundRemovement",
-        value: backgroundSelected ? backgroundSelected : '',
-        onChange: this.changeSelectedBackground
-      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-        value: 'flood',
-        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-          color: "primary"
-        }),
-        label: (0, _i18n.t)('fileUpload.removeBackgroundFromBorder'),
-        disabled: backgroundSelected === null
-      }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-        value: 'replace',
-        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-          color: "primary"
-        }),
-        label: (0, _i18n.t)('fileUpload.removeBackgroundEverywhere'),
-        disabled: backgroundSelected === null
-      })))), colorPickerEnabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        variant: "caption",
-        className: classes.colorizeCaption
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "colorize"), /*#__PURE__*/_react["default"].createElement("i", null, (0, _i18n.t)((0, _withWidth.isWidthDown)('xs', width) ? 'fileUpload.tabColorForRemove' : 'fileUpload.chooseColorForRemove')))), activeTabIndex === 2 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.TabContent
-      }, imageColorizeElement)))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], {
-        className: classes.imageUploadSpacing
-      }, !showUploadPanel && /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
-        onClick: continueClick,
-        variant: "contained",
-        className: classes.PreviewDialogButton,
-        disabled: userImages.length === 0 && !image,
-        fullWidth: (0, _withWidth.isWidthDown)('xs', width)
-      }, (0, _i18n.t)('fileUpload.continue')), showUploadPanel && /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
-        fullWidth: (0, _withWidth.isWidthDown)('xs', width),
-        onClick: uploadImage,
-        variant: "contained",
-        className: classes.PreviewDialogButton,
-        disabled: uploadDisabled
-      }, (0, _i18n.t)('fileUpload.continue'))));
-    }
-  }]);
-
-  return ImageEditDialog;
-}(_react["default"].Component);
-
-_defineProperty(ImageEditDialog, "propTypes", {
-  classes: _propTypes["default"].object,
-  width: _propTypes["default"].string,
-  backgroundSelected: _propTypes["default"].string,
-  changeSelectedBackground: _propTypes["default"].func,
-  preview: _propTypes["default"].string,
-  open: _propTypes["default"].bool,
-  closePreviewDialog: _propTypes["default"].func,
-  continueClick: _propTypes["default"].func,
-  onChangeColor: _propTypes["default"].func,
-  colorPickerEnabled: _propTypes["default"].bool,
-  imageColorizeElement: _propTypes["default"].element,
-  activeTabIndex: _propTypes["default"].number,
-  onActiveTabChange: _propTypes["default"].func,
-  colorDisabled: _propTypes["default"].bool,
-  errorFeedback: _propTypes["default"].element,
-  loaderComponent: _propTypes["default"].element,
-  continueButtonDisabled: _propTypes["default"].bool,
-  image: _propTypes["default"].object,
-  userImages: _propTypes["default"].array,
-  setSelectedImage: _propTypes["default"].func.isRequired,
-  onGalleryClick: _propTypes["default"].func,
-  galleryHasImages: _propTypes["default"].bool,
-  showWarningMessage: _propTypes["default"].bool,
-  displayColorPreview: _propTypes["default"].bool,
-  onOriginalImageAndColorPreviewToggleClick: _propTypes["default"].func,
-  originalImagePreview: _propTypes["default"].string,
-  embroideryNoticeRef: _propTypes["default"].object,
-  colorPreviewBlockActive: _propTypes["default"].bool.isRequired,
-  colorPreviewRequirementFulfilled: _propTypes["default"].bool.isRequired,
-  showUploadPanel: _propTypes["default"].bool.isRequired,
-  uploadDisabled: _propTypes["default"].bool.isRequired,
-  setUpload: _propTypes["default"].func.isRequired,
-  imageUploadElement: _propTypes["default"].element,
-  onNewUploadClick: _propTypes["default"].func.isRequired,
-  uploadImage: _propTypes["default"].func.isRequired,
-  selectUserImage: _propTypes["default"].func.isRequired
-});
-
-var _default = (0, _styles.withStyles)(styles, {
-  name: 'ImageEditDialog'
-})((0, _withWidth["default"])()(ImageEditDialog));
-
-exports["default"] = _default;