@configuratorware/configurator-frontendgui 1.41.2 → 1.42.2

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

@@ -1,122 +1,70 @@
 "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 _isFunction = _interopRequireDefault(require("lodash/isFunction"));
-
 var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
-
 var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
-
 var _styles = require("@material-ui/core/styles");
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
-
-var _Card = _interopRequireDefault(require("@material-ui/core/Card/Card"));
-
-var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent/CardContent"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select/Select"));
-
-var _Input = _interopRequireDefault(require("@material-ui/core/Input/Input"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem/MenuItem"));
-
-var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText/ListItemText"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl/FormControl"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField/TextField"));
-
-var _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel/FormControlLabel"));
-
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch/Switch"));
-
-var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions/CardActions"));
-
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions"));
 var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
-
 var _withWidth = _interopRequireWildcard(require("@material-ui/core/withWidth"));
-
 var _i18n = require("../../../../../Framework/i18n");
-
 var _isMobileDevice = require("../../../../../Framework/Helpers/isMobileDevice");
-
 var _createSelectionRangeMemo = require("../../../../../Utils/Helper/createSelectionRangeMemo");
-
 var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
-
 var _ResizeDetect = require("../../../../../Shared/HOCs/ResizeDetect/ResizeDetect");
-
 var _AnalyticsWrapper = _interopRequireDefault(require("../../../../Shared/Components/Analytics/AnalyticsWrapper"));
-
 var _ColorPalettesSearch = require("./ColorPalettesSearch");
-
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-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 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 _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 _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, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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; }
-
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var styles = function styles(theme) {
   var _colorPaletteButton;
-
   return {
     container: {
       pointerEvents: 'all' // catch the pointer events again
-
     },
+
     containerInPortraitMode: {
       width: '40%',
       position: 'fixed',
@@ -174,8 +122,8 @@ var styles = function styles(theme) {
     },
     colorPaletteWrapper: function colorPaletteWrapper(_ref) {
       var heightColorPaletteWrapper = _ref.heightColorPaletteWrapper,
-          width = _ref.width,
-          isCustomColorChecked = _ref.isCustomColorChecked;
+        width = _ref.width,
+        isCustomColorChecked = _ref.isCustomColorChecked;
       return {
         maxHeight: (0, _withWidth.isWidthDown)('xs', width) ? isCustomColorChecked ? heightColorPaletteWrapper - 90 : heightColorPaletteWrapper : 290,
         padding: '0 16px',
@@ -338,155 +286,121 @@ var styles = function styles(theme) {
     }
   };
 };
-
-var selectionRangeMemo = (0, _createSelectionRangeMemo.createSelectionRangeMemo)(); // height of header footer = 283
+var selectionRangeMemo = (0, _createSelectionRangeMemo.createSelectionRangeMemo)();
+// height of header footer = 283
 // height of one color element = 58
-
 var heightColorPalette = function heightColorPalette() {
   return Math.floor((window.innerHeight - (225 + 58)) / 58) * 58;
 };
-
 var ColorPaletteColorsWrapper = (0, _styles.withStyles)(styles, {
   name: 'ColorPaletteColorsWrapper'
 })(function (_ref2) {
   var palette = _ref2.palette,
-      classes = _ref2.classes,
-      isSearchActive = _ref2.isSearchActive,
-      renderColors = _ref2.renderColors;
+    classes = _ref2.classes,
+    isSearchActive = _ref2.isSearchActive,
+    renderColors = _ref2.renderColors;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.colorPaletteWrapper
   }, !isSearchActive && renderColors(palette));
 });
-
 var ColorPalettes = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPalettes, _React$Component);
-
   var _super = _createSuper(ColorPalettes);
-
   function ColorPalettes(props) {
     var _this;
-
     _classCallCheck(this, ColorPalettes);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "textInputRef", /*#__PURE__*/_react["default"].createRef());
-
     _defineProperty(_assertThisInitialized(_this), "colorSelectChange", function (evt, color, paletteIdentifier, isCustomColorChecked) {
       if (isCustomColorChecked) {
         return;
       }
-
       if (!(0, _isMobileDevice.isMobileDevice)()) {
         // only for desktop to prevent losing the focus
         evt.preventDefault();
       }
-
       selectionRangeMemo.restore();
-
       if ((0, _isFunction["default"])(_this.props.colorSelectClick)) {
         _this.props.colorSelectClick(color.hex_value, color.identifier, paletteIdentifier, false);
       }
-
       selectionRangeMemo.save();
-
       if ((0, _isMobileDevice.isMobileDevice)()) {
         // on mobile the soft keyboard is opened by the selection restore step
         // so it has to be closed again by removing the ranges
         window.getSelection().removeAllRanges();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onColorPaletteChange", function (evt) {
       _this.props.colorPaletteChange(evt.target.value);
     });
-
     _defineProperty(_assertThisInitialized(_this), "onCustomColorChange", function (evt) {
       _this.setState({
         customColor: evt.target.value,
         customColorError: null
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "onApplyColor", function () {
       var customColor = _this.state.customColor;
-
       if (!customColor) {
         _this.setState({
           customColorError: (0, _i18n.t)('colorPalettes.emptyColorCode')
         });
-
         return;
       }
-
       _this.props.closeColorPalettes();
-
       selectionRangeMemo.restore();
-
       _this.props.colorSelectClick(customColor, customColor, null, true);
     });
-
     _defineProperty(_assertThisInitialized(_this), "toggleCustomColor", function (event) {
       _this.setState({
         isCustomColorChecked: event.target.checked
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "changeText", function (event) {
       _this.setState({
         searchText: event.target.value
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "activateSearch", function () {
       _this.setState({
         isSearchActive: true
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "closeSearch", function () {
       _this.setState({
         isSearchActive: false
       });
-
       _this.setState({
         searchText: ''
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "searchPaletteColors", function (palettes) {
       var _ref4;
-
       var colorsArray = palettes.map(function (_ref3) {
         var identifier = _ref3.identifier,
-            colors = _ref3.colors;
+          colors = _ref3.colors;
         return colors.map(function (color) {
           return _objectSpread(_objectSpread({}, color), {}, {
             paletteIdentifier: identifier
           });
         });
       });
-
       var searchColors = (_ref4 = []).concat.apply(_ref4, _toConsumableArray(colorsArray));
-
       return {
         colors: (0, _uniqBy["default"])(searchColors, 'identifier')
       };
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderColors", function (palette) {
       var _this$props = _this.props,
-          classes = _this$props.classes,
-          selectedColor = _this$props.selectedColor;
+        classes = _this$props.classes,
+        selectedColor = _this$props.selectedColor;
       var isCustomColorChecked = _this.state.isCustomColorChecked;
-
       var selectedColorData = _objectSpread({}, selectedColor);
-
       try {
         selectedColorData.identifier = JSON.parse(selectedColorData.identifier);
-      } catch (e) {//No action required
+      } catch (e) {
+        //No action required
       }
-
       var classesColorWrapSelected = classes.colorPaletteColors + ' ' + classes.selectedColorWrap;
       var classesDisabledColorWrap = classes.colorPaletteColors + ' ' + classes.disabledColorWrap;
       return palette && palette.colors && palette.colors.map(function (color, colorIndex) {
@@ -512,20 +426,15 @@ var ColorPalettes = /*#__PURE__*/function (_React$Component) {
         }));
       });
     });
-
     var _selectedColor = _this.props.selectedColor;
-
     var _selectedColorData = _selectedColor && _selectedColor.identifier ? _selectedColor.identifier : {};
-
     try {
       _selectedColorData = JSON.parse(_selectedColorData);
-    } catch (e) {//No action required
+    } catch (e) {
+      //No action required
     }
-
     var _customColor = _selectedColorData.custom ? _selectedColorData.color : '';
-
     var _isCustomColorChecked = !!_selectedColorData.custom;
-
     _this.state = {
       customColor: _customColor,
       customColorError: null,
@@ -537,30 +446,25 @@ var ColorPalettes = /*#__PURE__*/function (_React$Component) {
     selectionRangeMemo.save();
     return _this;
   }
-
   _createClass(ColorPalettes, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var selectedColor = this.props.selectedColor;
-
       if (selectedColor.identifier.custom !== prevProps.selectedColor.identifier.custom) {
         this.setState({
           isCustomColorChecked: selectedColor.identifier.custom
         });
-
         if (selectedColor.identifier.custom) {
           this.setState({
             customColor: selectedColor.identifier.color
           });
         }
       }
-
-      var isCustomColorChecked = this.state.isCustomColorChecked; // set focus to custom color field when toggling
-
+      var isCustomColorChecked = this.state.isCustomColorChecked;
+      // set focus to custom color field when toggling
       if (isCustomColorChecked && !prevState.isCustomColorChecked) {
         this.textInputRef.current.focus();
       }
-
       if (this.props.size !== prevProps.size) {
         this.setState({
           heightColorPaletteWrapper: heightColorPalette()
@@ -571,24 +475,23 @@ var ColorPalettes = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props2 = this.props,
-          boxed = _this$props2.boxed,
-          classes = _this$props2.classes,
-          colorPalettes = _this$props2.colorPalettes,
-          closeColorPalettes = _this$props2.closeColorPalettes,
-          selectedColor = _this$props2.selectedColor,
-          width = _this$props2.width,
-          palette = _this$props2.palette,
-          usedColors = _this$props2.usedColors,
-          isPortraitMode = _this$props2.isPortraitMode;
+        boxed = _this$props2.boxed,
+        classes = _this$props2.classes,
+        colorPalettes = _this$props2.colorPalettes,
+        closeColorPalettes = _this$props2.closeColorPalettes,
+        selectedColor = _this$props2.selectedColor,
+        width = _this$props2.width,
+        palette = _this$props2.palette,
+        usedColors = _this$props2.usedColors,
+        isPortraitMode = _this$props2.isPortraitMode;
       var _this$state = this.state,
-          customColor = _this$state.customColor,
-          customColorError = _this$state.customColorError,
-          isCustomColorChecked = _this$state.isCustomColorChecked,
-          isSearchActive = _this$state.isSearchActive,
-          searchText = _this$state.searchText,
-          heightColorPaletteWrapper = _this$state.heightColorPaletteWrapper;
+        customColor = _this$state.customColor,
+        customColorError = _this$state.customColorError,
+        isCustomColorChecked = _this$state.isCustomColorChecked,
+        isSearchActive = _this$state.isSearchActive,
+        searchText = _this$state.searchText,
+        heightColorPaletteWrapper = _this$state.heightColorPaletteWrapper;
       var multiplePalettes = colorPalettes.length > 1;
       var arrowVisible = !multiplePalettes ? classes.arrowNone : '';
       var classesColorWrap = classes.colorPaletteColors;
@@ -702,6 +605,7 @@ var ColorPalettes = /*#__PURE__*/function (_React$Component) {
         heightColorPaletteWrapper: isCustomColorChecked ? heightColorPaletteWrapper - 150 // 135 height of custom fields
         : heightColorPaletteWrapper - 50 // 35 height of search clear button
         ,
+
         onSearch: this.onSearch,
         closeSearch: this.closeSearch,
         isSearchActive: isSearchActive,
@@ -785,30 +689,10 @@ var ColorPalettes = /*#__PURE__*/function (_React$Component) {
       }, (0, _i18n.t)('colorPalettes.apply'))))))));
     }
   }]);
-
   return ColorPalettes;
 }(_react["default"].Component);
-
-_defineProperty(ColorPalettes, "propTypes", {
-  boxed: _propTypes["default"].bool,
-  classes: _propTypes["default"].object,
-  size: _propTypes["default"].object,
-  colorPaletteIdentifier: _propTypes["default"].string,
-  width: _propTypes["default"].string,
-  colorPalettes: _propTypes["default"].array,
-  closeColorPalettes: _propTypes["default"].func.isRequired,
-  selectedColor: _propTypes["default"].object,
-  colorSelectClick: _propTypes["default"].func,
-  colorPaletteChange: _propTypes["default"].func,
-  usedColors: _propTypes["default"].array,
-  palette: _propTypes["default"].object,
-  isPortraitMode: _propTypes["default"].bool
-});
-
-var _default = (0, _ResizeDetect.withResizeDetectWrapper)((0, _withWidth["default"])({
+var _default = exports["default"] = (0, _ResizeDetect.withResizeDetectWrapper)((0, _withWidth["default"])({
   initialWidth: 'lg'
 })((0, _styles.withStyles)(styles, {
   name: 'ColorPalettes'
-})(ColorPalettes)));
-
-exports["default"] = _default;
+})(ColorPalettes)));

package/App/Modules/Designer/Components/ColorPalettes/index.story.js

@@ -1,15 +1,10 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _index = _interopRequireDefault(require("./index"));
-
 var _storybookState = require("@sambego/storybook-state");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var colorPalettes = [{
   identifier: 'default HKS_colors',
   colors: [{
@@ -116,19 +111,16 @@ var store = new _storybookState.Store({
   customColor: '',
   colorPalette: 'default HKS_colors'
 });
-
 function onCustomColorChange(event) {
   store.set({
     customColor: event.target.value
   });
 }
-
 function onColorPaletteChange(event) {
   store.set({
     colorPalette: event.target.value
   });
 }
-
 (0, _react2.storiesOf)('ColorPalettes', module).add('boxed component with multiple color palettes', function () {
   return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
     store: store

package/App/Modules/Designer/Components/ColorPalettes/index.test.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-
-var _lodash = require("lodash");
-
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _enzyme = require("enzyme");
-
 var _index = _interopRequireDefault(require("./index"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /* eslint-env jest */
+
 var colorPalettes = {
   colorPalettes: [{
     identifier: 'default HKS_colors',
@@ -114,8 +110,8 @@ it('renders correctly', function () {
     colorPalettes: colorPalettes.colorPalettes,
     colorPalette: 'HKS',
     selectedColor: color,
-    colorSelectClick: _lodash.noop,
-    closeColorPalettes: _lodash.noop
+    colorSelectClick: _noop["default"],
+    closeColorPalettes: _noop["default"]
   }));
   expect(tree).toMatchSnapshot();
 });
@@ -125,8 +121,8 @@ it('renders a boxed component with the boxed prop', function () {
     colorPalettes: colorPalettes.colorPalettes,
     colorPalette: 'HKS',
     selectedColor: color,
-    colorSelectClick: _lodash.noop,
-    closeColorPalettes: _lodash.noop,
+    colorSelectClick: _noop["default"],
+    closeColorPalettes: _noop["default"],
     boxed: true
   }));
   expect(tree).toMatchSnapshot();
@@ -140,7 +136,7 @@ it('calls the colorSelectClick callback when the user changes the color', functi
     customColor: '',
     selectedColor: color,
     colorSelectClick: onChangeHandler,
-    closeColorPalettes: _lodash.noop,
+    closeColorPalettes: _noop["default"],
     usedColors: usedColors,
     palette: 'default'
   }));