@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-3

package/lib/components/dropdown/ButtonDropdown.js

@@ -85,7 +85,8 @@ var ButtonDropdown = function ButtonDropdown(props) {
       onOpen = props.onOpen,
       onClose = props.onClose,
       onLabelButtonClick = props.onLabelButtonClick,
-      usePortal = props.usePortal;
+      usePortal = props.usePortal,
+      popperConfig = props.popperConfig;
 
   var _useState = (0, _react.useState)(open),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -102,17 +103,12 @@ var ButtonDropdown = function ButtonDropdown(props) {
       refDropdownMenu = _React$useState4[0],
       setRefDropdownMenu = _React$useState4[1];
 
-  var modifiers = [{
-    name: 'flip',
-    options: {
-      fallbackPlacements: ['top-start', 'top-end']
-    }
-  }];
-
-  var _usePopper = (0, _reactPopper.usePopper)(refDropdownToggle, refDropdownMenu, {
+  var defaultPopperConfig = {
     placement: getPlacement(pullRight, dropup),
-    modifiers: modifiers
-  }),
+    modifiers: []
+  };
+
+  var _usePopper = (0, _reactPopper.usePopper)(refDropdownToggle, refDropdownMenu, popperConfig || defaultPopperConfig),
       styles = _usePopper.styles,
       attributes = _usePopper.attributes;
 
@@ -229,6 +225,7 @@ ButtonDropdown.propTypes = {
   toggleClassName: _propTypes.default.string,
   onLabelButtonClick: _propTypes.default.func,
   customDropdown: _propTypes.default.node,
+  popperConfig: _propTypes.default.object,
   enableOnClickOutside: _propTypes.default.func,
   disableOnClickOutside: _propTypes.default.func,
   onOpen: _propTypes.default.func,

package/lib/components/filepicker/FilePicker.js

@@ -9,124 +9,90 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+var _reactDropzone = _interopRequireWildcard(require("react-dropzone"));
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["label", "accept", "multiple", "maxSize", "displayMode", "onPick", "className", "children"];
+
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-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; } }
-
-var FilePicker = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(FilePicker, _Component);
-
-  var _super = _createSuper(FilePicker);
-
-  function FilePicker() {
-    (0, _classCallCheck2.default)(this, FilePicker);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(FilePicker, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var dropzoneProps = {
-        accept: this.props.accept,
-        multiple: this.props.multiple,
-        ref: function ref(thisDropzone) {
-          _this.thisDropzone = thisDropzone;
-        },
-        onDrop: this.onPick.bind(this),
-        maxSize: this.props.maxSize
-      }; //let content;
-      // TODO Reactivate once the dropzone is available
-      // if (this.props.displayMode === 'dropzone') {
-      //     //Dropzone
-      //     // TODO className and activeClassName/rejectClassName are deprecated.
-      //     // TODO They will have to be replaced respectively with parent div styling and
-      //     // TODO child div styling with function.
-      //     // TODO This is not possible yet because this Dropzone version still contains a default styling.
-      //     dropzoneProps = {
-      //         className: classNames('react-dropzone', this.props.className),
-      //         activeClassName: 'react-dropzone-active',
-      //         rejectClassName: 'react-dropzone-rejected',
-      //         ...dropzoneProps,
-      //     };
-      //     content = <Dropzone {...dropzoneProps} />;
-      // } else {
-      // Button
-      // TODO className will be deprecated in the following major release.
-      // TODO It will have to be replaced with parent div styling,
-      // TODO This is not possible yet because this Dropzone version still contains a default styling.
-
-      dropzoneProps = _objectSpread({
-        className: (0, _classnames.default)('invisible')
-      }, dropzoneProps);
-
-      var content = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactDropzone.default, dropzoneProps), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        onClick: this.onOpenClick.bind(this),
-        className: this.props.className
-      }, this.props.label)); // }
-
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "FilePicker"
-      }, content);
-    }
-  }, {
-    key: "onPick",
-    value: function onPick(acceptedFiles, rejectedFiles) {
-      this.props.onPick(acceptedFiles, rejectedFiles);
-    }
-  }, {
-    key: "onOpenClick",
-    value: function onOpenClick() {
-      this.thisDropzone.open();
-    }
-  }]);
-  return FilePicker;
-}(_react.Component);
-
-exports.default = FilePicker;
+var FilePicker = function FilePicker(props) {
+  var label = props.label,
+      accept = props.accept,
+      multiple = props.multiple,
+      maxSize = props.maxSize,
+      displayMode = props.displayMode,
+      onPick = props.onPick,
+      className = props.className,
+      children = props.children,
+      remainigProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var dropzoneRef = (0, _react.useRef)();
+  var isButton = displayMode === 'button';
+  var isDropzone = displayMode === 'dropzone';
+  var isFull = displayMode === 'full';
+  var showButton = isButton || isFull;
+  var showDropzone = isDropzone || isFull;
+  var handleDrop = (0, _react.useCallback)(function (acceptedFiles, rejectedFiles) {
+    var files = accept.includes('image') ? acceptedFiles.map(function (file) {
+      return Object.assign(file, {
+        preview: URL.createObjectURL(file)
+      });
+    }) : acceptedFiles;
+    onPick(files, rejectedFiles);
+  }, [onPick, accept]);
+
+  var onOpenClick = function onOpenClick() {
+    return dropzoneRef.current.open();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "FilePicker"
+  }, showButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onOpenClick,
+    className: className
+  }, label), /*#__PURE__*/_react.default.createElement(_reactDropzone.default, (0, _extends2.default)({}, remainigProps, {
+    onDrop: handleDrop,
+    accept: accept,
+    multiple: multiple,
+    maxSize: maxSize,
+    ref: dropzoneRef
+  }), function (_ref) {
+    var getRootProps = _ref.getRootProps,
+        getInputProps = _ref.getInputProps,
+        isDragActive = _ref.isDragActive;
+    return showDropzone && /*#__PURE__*/_react.default.createElement("div", getRootProps(), /*#__PURE__*/_react.default.createElement("input", getInputProps()), children && children({
+      isDragActive: isDragActive
+    }));
+  }));
+};
+
+FilePicker.DISPLAY_MODE_BUTTON = 'button';
+FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
+FilePicker.DISPLAY_MODE_FULL = 'full';
 FilePicker.defaultProps = {
   displayMode: 'button',
   multiple: true,
-  label: 'Select file(s)',
+  label: 'Select Files',
   accept: '',
   onPick: function onPick() {},
   className: ''
 };
 FilePicker.propTypes = {
   displayMode: _propTypes.default.string
-  /* Display mode: 'dropzone' / 'button' */
+  /* Display mode: 'dropzone' / 'button' / 'full' */
   ,
   multiple: _propTypes.default.bool
   /* Allow multiple file selections or not */
@@ -145,5 +111,8 @@ FilePicker.propTypes = {
   ,
   className: _propTypes.default.string
   /* Custom className for the displayed component (dropzone/button) */
-
-};
+  ,
+  children: _propTypes.default.any
+};
+var _default = FilePicker;
+exports.default = _default;

package/lib/components/listMenu/ListMenu.js

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -29,6 +33,8 @@ var _ClearableInput = _interopRequireDefault(require("../clearableInput/Clearabl
 
 var _ExpanderPanel = _interopRequireDefault(require("../expander/ExpanderPanel"));
 
+var _excluded = ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey"];
+
 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; }
@@ -42,11 +48,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RESIZE_THROTTELING = 10;
 var MOBILE_MAX_WIDTH = 580;
 
-var filterMenuItems = function filterMenuItems(items, value) {
+var filterMenuItems = function filterMenuItems(items, value, filterKey) {
   return items.map(function (menuGroupItem) {
     var groupItems = menuGroupItem.navItems;
     var navItems = groupItems.filter(function (item) {
-      return item.key.toLowerCase().includes(value.toLowerCase());
+      var _item$filterKey;
+
+      return (_item$filterKey = item[filterKey]) === null || _item$filterKey === void 0 ? void 0 : _item$filterKey.toLowerCase().includes(value.toLowerCase());
     });
     return _objectSpread(_objectSpread({}, menuGroupItem), {}, {
       navItems: navItems
@@ -65,7 +73,7 @@ var ListMenuHeader = function ListMenuHeader(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: 'ListMenuHeader'
+    className: "ListMenuHeader"
   }, groupNavItem ? groupNavItem : /*#__PURE__*/_react.default.createElement("span", {
     className: className
   }, group));
@@ -73,9 +81,12 @@ var ListMenuHeader = function ListMenuHeader(_ref) {
 
 var ListMenuItem = function ListMenuItem(_ref2) {
   var disabled = _ref2.disabled,
+      _ref2$isSubItem = _ref2.isSubItem,
+      isSubItem = _ref2$isSubItem === void 0 ? false : _ref2$isSubItem,
       children = _ref2.children;
+  var classes = (0, _classnames.default)(disabled && 'disabled', isSubItem && 'subitem');
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: disabled ? 'disabled' : ''
+    className: classes
   }, children);
 };
 
@@ -92,7 +103,8 @@ var ListMenuGroup = function ListMenuGroup(_ref3) {
   }, /*#__PURE__*/_react.default.createElement(ListMenuHeader, menuGroup), menuGroup.navItems.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(ListMenuItem, {
       key: item.key,
-      disabled: item.disabled
+      disabled: item.disabled,
+      isSubItem: item.isSubItem
     }, item.item);
   }));
 };
@@ -100,7 +112,7 @@ var ListMenuGroup = function ListMenuGroup(_ref3) {
 var NotFoundMessage = function NotFoundMessage(_ref4) {
   var notFoundMessage = _ref4.notFoundMessage;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'padding-top-25 text-center text-color-gray'
+    className: "padding-top-25 text-center text-color-gray"
   }, notFoundMessage);
 };
 
@@ -113,7 +125,9 @@ var ListMenu = function ListMenu(props) {
       className = props.className,
       groupClassName = props.groupClassName,
       responsive = props.responsive,
-      autoClose = props.autoClose;
+      autoClose = props.autoClose,
+      filterKey = props.filterKey,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -145,9 +159,9 @@ var ListMenu = function ListMenu(props) {
           activeElement = _listRef$current$getE2[0];
 
       setMobileHeader( /*#__PURE__*/_react.default.createElement("div", {
-        className: 'display-flex align-items-center'
+        className: "display-flex align-items-center"
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: 'rioglyph rioglyph-menu-hamburger margin-right-10'
+        className: "rioglyph rioglyph-menu-hamburger margin-right-10"
       }), /*#__PURE__*/_react.default.createElement("span", null, activeElement && activeElement.innerText)));
     }
   };
@@ -201,27 +215,27 @@ var ListMenu = function ListMenu(props) {
     });
   };
 
-  var filteredMenuItems = filterMenuItems(menuItems, filterValue);
+  var filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
 
   var handleExpanderBodyClick = function handleExpanderBodyClick(event) {
     var isListItem = event.target.parentElement.tagName.toLowerCase() === 'li';
     autoClose && isListItem && setIsExpanderOpen(false);
   };
 
-  var formClassNames = (0, _classnames.default)('from-group', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+  var formClassNames = (0, _classnames.default)('form-group margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
 
-  var listMenu = /*#__PURE__*/_react.default.createElement("div", {
+  var listMenu = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
     className: "ListMenu ".concat(className),
     ref: listRef
-  }, enableFilter && /*#__PURE__*/_react.default.createElement("div", {
+  }), enableFilter && /*#__PURE__*/_react.default.createElement("div", {
     className: formClassNames
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'input-group width-100pct'
+    className: "input-group width-100pct"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'input-group-addon'
+    className: "input-group-addon"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-search',
-    "aria-hidden": 'true'
+    className: "rioglyph rioglyph-search",
+    "aria-hidden": "true"
   })), /*#__PURE__*/_react.default.createElement(_ClearableInput.default, {
     value: filterValue,
     inputRef: inputRef,
@@ -232,23 +246,23 @@ var ListMenu = function ListMenu(props) {
     notFoundMessage: notFoundMessage
   }), filteredMenuItems.map(function (menuGroup, index) {
     return /*#__PURE__*/_react.default.createElement(ListMenuGroup, {
+      key: index,
       className: groupClassName,
-      menuGroup: menuGroup,
-      key: index
+      menuGroup: menuGroup
     });
   }));
 
   if (responsive && isMobileMode) {
     return /*#__PURE__*/_react.default.createElement(_ExpanderPanel.default, {
       title: mobileHeader,
-      bsStyle: 'default',
+      bsStyle: "default",
       open: isExpanderOpen,
       onToggle: function onToggle() {
         return setIsExpanderOpen(!isExpanderOpen);
       },
       mountOnEnter: false,
       unmountOnExit: false,
-      className: 'shadow-default'
+      className: "shadow-default"
     }, /*#__PURE__*/_react.default.createElement("div", {
       onClick: handleExpanderBodyClick
     }, listMenu));
@@ -264,7 +278,8 @@ ListMenu.defaultProps = {
   className: '',
   groupClassName: '',
   responsive: true,
-  autoClose: true
+  autoClose: true,
+  filterKey: 'key'
 };
 ListMenu.propTypes = {
   menuItems: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -274,10 +289,12 @@ ListMenu.propTypes = {
       key: _propTypes.default.string.isRequired,
       item: _propTypes.default.node.isRequired,
       disabled: _propTypes.default.bool
-    })).isRequired
+    })).isRequired,
+    isSubItem: _propTypes.default.bool
   })).isRequired,
   enableFilter: _propTypes.default.bool,
   focusFilter: _propTypes.default.bool,
+  filterKey: _propTypes.default.string,
   filterPlaceholder: _propTypes.default.string,
   notFoundMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   groupClassName: _propTypes.default.string,

package/lib/components/map/components/features/old/MapSettings.js

@@ -29,9 +29,9 @@ var _isString = _interopRequireDefault(require("lodash/fp/isString"));
 
 var _map = _interopRequireDefault(require("lodash/fp/map"));
 
-var _icon_map_settings_active = _interopRequireDefault(require("./assets/icon_map_settings_active.svg"));
+var _icon_map_settings_active = require("./assets/icon_map_settings_active.svg");
 
-var _icon_map_settings_inactive = _interopRequireDefault(require("./assets/icon_map_settings_inactive.svg"));
+var _icon_map_settings_inactive = require("./assets/icon_map_settings_inactive.svg");
 
 var _MapTypeSettings = _interopRequireDefault(require("./settings/MapTypeSettings"));
 
@@ -90,12 +90,12 @@ var MapSettings = /*#__PURE__*/function (_React$Component) {
 
       var getMapSettingsTile = function getMapSettingsTile() {
         var mapSettingsTile = /*#__PURE__*/_react.default.createElement("div", {
-          className: 'MapSettingsTile MapSettingsToggle bg-white padding-5 shadow-smooth cursor-pointer',
+          className: "MapSettingsTile MapSettingsToggle bg-white padding-5 shadow-smooth cursor-pointer",
           onClick: _this2.handleToggleSettingsMenu,
           title: (0, _isString.default)(mapSettingsTooltip) ? mapSettingsTooltip : null
-        }, /*#__PURE__*/_react.default.createElement(_icon_map_settings_active.default, {
+        }, /*#__PURE__*/_react.default.createElement(_icon_map_settings_active.ReactComponent, {
           className: mapSettingsIconClasses
-        }), /*#__PURE__*/_react.default.createElement(_icon_map_settings_inactive.default, {
+        }), /*#__PURE__*/_react.default.createElement(_icon_map_settings_inactive.ReactComponent, {
           className: mapSettingsIconInactiveClasses
         }));
 

package/lib/components/map/components/features/old/settings/MapClusterSettings.js

@@ -15,13 +15,13 @@ var _MapSettingsPanel = _interopRequireDefault(require("./MapSettingsPanel"));
 
 var _MapSettingsButton = _interopRequireDefault(require("./MapSettingsButton"));
 
-var _icon_map_settings_no_cluster_active = _interopRequireDefault(require("../assets/icon_map_settings_no_cluster_active.svg"));
+var _icon_map_settings_no_cluster_active = require("../assets/icon_map_settings_no_cluster_active.svg");
 
-var _icon_map_settings_no_cluster_inactive = _interopRequireDefault(require("../assets/icon_map_settings_no_cluster_inactive.svg"));
+var _icon_map_settings_no_cluster_inactive = require("../assets/icon_map_settings_no_cluster_inactive.svg");
 
-var _icon_map_settings_cluster_active = _interopRequireDefault(require("../assets/icon_map_settings_cluster_active.svg"));
+var _icon_map_settings_cluster_active = require("../assets/icon_map_settings_cluster_active.svg");
 
-var _icon_map_settings_cluster_inactive = _interopRequireDefault(require("../assets/icon_map_settings_cluster_inactive.svg"));
+var _icon_map_settings_cluster_inactive = require("../assets/icon_map_settings_cluster_inactive.svg");
 
 var MapClusterSettings = function MapClusterSettings(props) {
   var showCluster = props.showCluster,
@@ -32,28 +32,28 @@ var MapClusterSettings = function MapClusterSettings(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_MapSettingsPanel.default, {
-    className: 'MapSettingsCluster'
+    className: "MapSettingsCluster"
   }, /*#__PURE__*/_react.default.createElement(_MapSettingsButton.default, {
     onClick: function onClick() {
       return handleShowCluster(false);
     },
     isActive: !showCluster,
-    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_no_cluster_active.default, {
-      className: 'MapNoClusterIcon'
+    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_no_cluster_active.ReactComponent, {
+      className: "MapNoClusterIcon"
     }),
-    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_no_cluster_inactive.default, {
-      className: 'MapNoClusterIconInactive'
+    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_no_cluster_inactive.ReactComponent, {
+      className: "MapNoClusterIconInactive"
     })
   }), /*#__PURE__*/_react.default.createElement(_MapSettingsButton.default, {
     onClick: function onClick() {
       return handleShowCluster(true);
     },
     isActive: showCluster,
-    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_cluster_active.default, {
-      className: 'MapClusterIcon'
+    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_cluster_active.ReactComponent, {
+      className: "MapClusterIcon"
     }),
-    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_cluster_inactive.default, {
-      className: 'MapClusterIconInactive'
+    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_cluster_inactive.ReactComponent, {
+      className: "MapClusterIconInactive"
     })
   }));
 };

package/lib/components/map/components/features/old/settings/MapLayerSettings.js

@@ -17,45 +17,45 @@ var _MapSettingsPanel = _interopRequireDefault(require("./MapSettingsPanel"));
 
 var _MapSettingsButton = _interopRequireDefault(require("./MapSettingsButton"));
 
-var _icon_map_settings_construction_active = _interopRequireDefault(require("../assets/icon_map_settings_construction_active.svg"));
+var _icon_map_settings_construction_active = require("../assets/icon_map_settings_construction_active.svg");
 
-var _icon_map_settings_construction_inactive = _interopRequireDefault(require("../assets/icon_map_settings_construction_inactive.svg"));
+var _icon_map_settings_construction_inactive = require("../assets/icon_map_settings_construction_inactive.svg");
 
-var _icon_map_settings_traffic_active = _interopRequireDefault(require("../assets/icon_map_settings_traffic_active.svg"));
+var _icon_map_settings_traffic_active = require("../assets/icon_map_settings_traffic_active.svg");
 
-var _icon_map_settings_traffic_inactive = _interopRequireDefault(require("../assets/icon_map_settings_traffic_inactive.svg"));
+var _icon_map_settings_traffic_inactive = require("../assets/icon_map_settings_traffic_inactive.svg");
 
-var _icon_map_settings_road_restrictions_active = _interopRequireDefault(require("../assets/icon_map_settings_road_restrictions_active.svg"));
+var _icon_map_settings_road_restrictions_active = require("../assets/icon_map_settings_road_restrictions_active.svg");
 
-var _icon_map_settings_road_restrictions_inactive = _interopRequireDefault(require("../assets/icon_map_settings_road_restrictions_inactive.svg"));
+var _icon_map_settings_road_restrictions_inactive = require("../assets/icon_map_settings_road_restrictions_inactive.svg");
 
 var MapLayerSettings = function MapLayerSettings(props) {
   var mapLayer = props.mapLayer,
       onMapLayerChange = props.onMapLayerChange;
   return /*#__PURE__*/_react.default.createElement(_MapSettingsPanel.default, null, /*#__PURE__*/_react.default.createElement(_MapSettingsButton.default, {
-    className: 'MapLayerIncidents',
+    className: "MapLayerIncidents",
     onClick: function onClick() {
       return onMapLayerChange(_constants.MAP_LAYER_INCIDENTS);
     },
     isActive: mapLayer.includes(_constants.MAP_LAYER_INCIDENTS),
-    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_construction_active.default, null),
-    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_construction_inactive.default, null)
+    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_construction_active.ReactComponent, null),
+    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_construction_inactive.ReactComponent, null)
   }), /*#__PURE__*/_react.default.createElement(_MapSettingsButton.default, {
-    className: 'MapLayerTraffic',
+    className: "MapLayerTraffic",
     onClick: function onClick() {
       return onMapLayerChange(_constants.MAP_LAYER_TRAFFIC);
     },
     isActive: mapLayer.includes(_constants.MAP_LAYER_TRAFFIC),
-    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_traffic_active.default, null),
-    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_traffic_inactive.default, null)
+    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_traffic_active.ReactComponent, null),
+    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_traffic_inactive.ReactComponent, null)
   }), /*#__PURE__*/_react.default.createElement(_MapSettingsButton.default, {
-    className: 'MapLayerRoadRestrictions',
+    className: "MapLayerRoadRestrictions",
     onClick: function onClick() {
       return onMapLayerChange(_constants.MAP_LAYER_ROAD_RESTRICTIONS);
     },
     isActive: mapLayer.includes(_constants.MAP_LAYER_ROAD_RESTRICTIONS),
-    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_road_restrictions_active.default, null),
-    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_road_restrictions_inactive.default, null)
+    activeIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_road_restrictions_active.ReactComponent, null),
+    inactiveIcon: /*#__PURE__*/_react.default.createElement(_icon_map_settings_road_restrictions_inactive.ReactComponent, null)
   }));
 };