@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

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

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