@configuratorware/configurator-frontendgui 1.29.2 → 1.30.0

package/App/Modules/Creator/Components/Option/index.js

@@ -409,7 +409,7 @@ var Option = function Option(_ref) {
       className: classes.iconWithText,
       onClick: onDetailsClicked
     }, /*#__PURE__*/_react["default"].createElement(_InfoRounded["default"], {
-      className: classes.materialIcon
+      className: (0, _clsx["default"])(classes.materialIcon, (0, _customClassName["default"])('rule-info-icon-option'))
     }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
       variant: 'body2',
       className: classes.iconWithText
@@ -417,7 +417,7 @@ var Option = function Option(_ref) {
       className: classes.iconWithText,
       onClick: onIncompatibilityClicked
     }, /*#__PURE__*/_react["default"].createElement(_WarningRounded["default"], {
-      className: classes.materialIcon
+      className: (0, _clsx["default"])(classes.materialIcon, (0, _customClassName["default"])('rule-alert-icon-option'))
     }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
       variant: 'body2'
     }, translations.incompatibility))), renderStockStatus(), renderOptionGroup());

package/App/Modules/Creator/Components/Optiondetail/index.js

@@ -149,6 +149,9 @@ var styles = function styles(theme) {
     },
     dialogContentRootWithZoom: {
       overflow: 'hidden'
+    },
+    detailDialogContentRoot: {
+      overflowY: 'auto'
     }
   };
 };
@@ -359,8 +362,7 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
           onClose = _this$props5.onClose,
           details = _this$props5.details,
           classes = _this$props5.classes,
-          width = _this$props5.width,
-          isTabletDevice = _this$props5.isTabletDevice;
+          width = _this$props5.width;
       var _this$state = this.state,
           loading = _this$state.loading,
           loadingContainerHeight = _this$state.loadingContainerHeight;
@@ -385,7 +387,7 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         className: classes.detailsTypography
       }, details.description));
 
-      var showFullScreenModal = ['xs', 'sm'].includes(width) && !isTabletDevice;
+      var showFullScreenModal = ['xs', 'sm'].includes(width);
       var maxZoomedWidth = this.getMaxZoomedWidth(width);
       var isLandscapeFormat = false;
 
@@ -415,8 +417,10 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         fullScreen: showFullScreenModal
       }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
         classes: this.state.hasZoom ? {
-          root: classes.dialogContentRootWithZoom
-        } : null
+          root: (0, _clsx2["default"])(classes.detailDialogContentRoot, classes.dialogContentRootWithZoom)
+        } : {
+          root: classes.detailDialogContentRoot
+        }
       }, loading ? /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           height: loadingContainerHeight,
@@ -479,7 +483,6 @@ _defineProperty(Optiondetail, "propTypes", {
   onClose: _propTypes["default"].func,
   LoadingComponent: _propTypes["default"].elementType,
   width: _propTypes["default"].string,
-  isTabletDevice: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool
 });
 

package/App/Modules/Creator/Components/OptionsList/index.js

@@ -25,14 +25,24 @@ var _customClassName = _interopRequireDefault(require("../../../../Utils/customC
 
 var _Option = _interopRequireDefault(require("../Option"));
 
+var _excluded = ["render"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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; }
 
 var useStyles = (0, _core.makeStyles)(function (theme) {
@@ -68,20 +78,23 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
 });
 
 var OptionsList = function OptionsList(_ref2) {
-  var addCheckedOptionclassification = _ref2.addCheckedOptionclassification,
-      children = _ref2.children,
-      isLoading = _ref2.isLoading,
-      onClose = _ref2.onClose,
-      onSelect = _ref2.onSelect,
-      onToggle = _ref2.onToggle,
-      optionclassification = _ref2.optionclassification,
-      options = _ref2.options,
-      show = _ref2.show,
-      viewDetails = _ref2.viewDetails,
-      viewStockInformation = _ref2.viewStockInformation,
-      LoadingComponent = _ref2.LoadingComponent,
-      OptionComponent = _ref2.OptionComponent,
-      isAdminMode = _ref2.isAdminMode;
+  var render = _ref2.render,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var addCheckedOptionclassification = props.addCheckedOptionclassification,
+      children = props.children,
+      isLoading = props.isLoading,
+      onClose = props.onClose,
+      onSelect = props.onSelect,
+      onToggle = props.onToggle,
+      optionclassification = props.optionclassification,
+      options = props.options,
+      show = props.show,
+      viewDetails = props.viewDetails,
+      viewStockInformation = props.viewStockInformation,
+      LoadingComponent = props.LoadingComponent,
+      OptionComponent = props.OptionComponent,
+      isAdminMode = props.isAdminMode;
   var classes = useStyles();
 
   var createOptions = function createOptions() {
@@ -143,20 +156,32 @@ var OptionsList = function OptionsList(_ref2) {
     }));
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
-    className: (0, _clsx["default"])(classes.dialogStyle, (0, _customClassName["default"])('options')),
-    dialogTitle: optionclassification.title,
-    onCancel: onClose,
-    onClose: onClose,
-    open: show && !!optionclassification.identifier,
-    BackdropProps: {
-      classes: {
-        root: classes.backDrop
+  var renderOptionsList = function renderOptionsList() {
+    return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+      className: (0, _clsx["default"])(classes.dialogStyle, (0, _customClassName["default"])('options')),
+      dialogTitle: optionclassification.title,
+      onCancel: onClose,
+      onClose: onClose,
+      open: show && !!optionclassification.identifier,
+      BackdropProps: {
+        classes: {
+          root: classes.backDrop
+        }
       }
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
-    className: classes.contentStyle
-  }, renderOptions()));
+    }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+      className: classes.contentStyle
+    }, renderOptions()));
+  };
+
+  var getRenderProps = function getRenderProps() {
+    return _objectSpread(_objectSpread({}, props), {}, {
+      renderOptions: renderOptions,
+      createOptions: createOptions,
+      renderOptionsList: renderOptionsList
+    });
+  };
+
+  return typeof render === 'function' ? render(getRenderProps()) : renderOptionsList();
 };
 
 OptionsList.defaultProps = {
@@ -187,7 +212,8 @@ OptionsList.propTypes = {
   viewStockInformation: _propTypes["default"].func,
   LoadingComponent: _propTypes["default"].elementType,
   OptionComponent: _propTypes["default"].elementType,
-  isAdminMode: _propTypes["default"].bool
+  isAdminMode: _propTypes["default"].bool,
+  render: _propTypes["default"].func
 };
 var _default = OptionsList;
 exports["default"] = _default;

package/App/Modules/Designer/Components/ImageColorPicker/ImageColorPicker.js

@@ -342,17 +342,16 @@ var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
 
       var ow = img.width,
           oh = img.height;
-      var pa = pw / ph;
       var oa = ow / oh;
 
-      if (pa >= oa) {
-        var height = Math.min(ph, oh);
-        var width = height * ow / oh;
+      if (oa <= 1) {
+        var height = ph;
+        var width = height * (ow / oh);
         this.updateCanvasDimensionsAndContent(canvas, img, width, height);
       } else {
-        var _width = Math.min(pw, ow);
+        var _width = pw;
 
-        var _height = _width * oh / ow;
+        var _height = _width * (oh / ow);
 
         this.updateCanvasDimensionsAndContent(canvas, img, _width, _height);
       }

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

@@ -106,7 +106,7 @@ var ImageThumbnail = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!image.displayColorPreview && !image.gallery) {
-        return (0, _Transformers.getRasterURL)(image.preview.url);
+        return (0, _Transformers.getRasterURL)((0, _Selectors.getPreviewUrlFromImageData)(image.thumbnail));
       }
 
       this.downloadSvg(image);

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

@@ -73,6 +73,8 @@ var _baseline_colorize_black_24dp = _interopRequireDefault(require("./res/baseli
 
 var _checkers_tile = _interopRequireDefault(require("./res/checkers_tile.png"));
 
+var _Transformers = require("../../Utils/Transformers");
+
 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; }
@@ -500,7 +502,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
       }, 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,
+        src: [0, 2].includes(activeTabIndex) && !displayColorPreview && !image.gallery && !(0, _Transformers.isOriginalVector)(image) ? originalImagePreview : preview,
         wrapperClassName: activeTabIndex === 1 ? classes.PreviewDialogImage : classes.PreviewDialogImageColorize,
         onChange: this.onChangeColor,
         enabled: activeTabIndex === 1