@rio-cloud/rio-uikit 0.16.2-beta.13 → 0.16.2-beta.15

package/Map.d.ts

@@ -3,9 +3,10 @@ import { MapProps } from './types';
 
 export { BoundingBox } from './types';
 
-export default class Map extends React.Component<MapProps> {
+export default class Map extends React.Component<React.PropsWithChildren<MapProps>> {
     static TYPE_DEFAULT = 'DEFAULT';
     static TYPE_FLEET_STYLE = 'FLEET_STYLE';
     static TYPE_SATELLITE = 'SATELLITE';
     static TYPE_TERRAIN = 'TERRAIN';
+    static TYPE_NIGHT = 'NIGHT';
 }

package/RuleConnector.d.ts

@@ -1,7 +1,8 @@
 declare module '@rio-cloud/rio-uikit/RuleConnector' {
     import React from 'react';
     import { RuleConnectorProps } from './types';
-    export default class RuleConnector extends React.Component<RuleConnectorProps> {
+
+    export default class RuleConnector extends React.Component<React.PropsWithChildren<RuleConnectorProps>> {
         static START = 'start';
         static CENTER = 'center';
         static END = 'end';

package/RuleContainer.d.ts

@@ -1,5 +1,6 @@
 declare module '@rio-cloud/rio-uikit/RuleContainer' {
     import React from 'react';
     import { RuleContainerProps } from './types';
-    export default class RuleContainer extends React.Component<RuleContainerProps> {}
-}
+
+    export default class RuleContainer extends React.Component<React.PropsWithChildren<RuleContainerProps>> {}
+}

package/RulesWrapper.d.ts

@@ -1,5 +1,6 @@
 declare module '@rio-cloud/rio-uikit/RulesWrapper' {
     import React from 'react';
     import { RulesWrapperProps } from './types';
+
     export default class RulesWrapper extends React.Component<RulesWrapperProps> {}
-}
+}

package/components/applicationHeader/ApplicationHeader.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"];
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/fp/debounce';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -16,7 +16,7 @@ import modulePropTypes from './modulePropTypes';
 import { MobileAppMenu } from './MobileAppMenu';
 var SCREEN_SM = 768; // @screen-sm: 768px;
 
-export var ApplicationHeader = function ApplicationHeader(props) {
+export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var homeRoute = props.homeRoute,
     showHomeIcon = props.showHomeIcon,
     label = props.label,
@@ -33,6 +33,9 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
     navRef = _useResizeObserver2[0],
     contentRect = _useResizeObserver2[1].contentRect;
+  useImperativeHandle(ref, function () {
+    return navRef;
+  }, []);
   var getContentRect = useCallback(function (key) {
     return contentRect && Math.round(contentRect[key]);
   }, [contentRect]);
@@ -81,7 +84,7 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     nodeRef: actionBarRef,
     items: actionBarItems
   })));
-};
+});
 var Divider = function Divider() {
   return /*#__PURE__*/React.createElement("div", {
     className: "divider display-flex align-items-center"

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -1,20 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "buttonAlignment", "useBodyPaddings", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export var ApplicationLayoutBodyBottomBar = function ApplicationLayoutBodyBottomBar(_ref) {
+export var ApplicationLayoutBodyBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     buttonAlignment = _ref.buttonAlignment,
     useBodyPaddings = _ref.useBodyPaddings,
     children = _ref.children,
     remainigProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ApplicationLayoutBodyBottomBar', buttonAlignment === 'left' && 'justify-content-start', buttonAlignment === 'right' && 'justify-content-end', buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between', useBodyPaddings && 'use-body-padding', className && className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, remainigProps, {
     className: classes
   }), children);
-};
+});
 ApplicationLayoutBodyBottomBar.LEFT = 'left';
 ApplicationLayoutBodyBottomBar.RIGHT = 'right';
 ApplicationLayoutBodyBottomBar.defaultProps = {

package/components/map/components/Map.js

@@ -10,6 +10,7 @@ import isFunction from 'lodash/fp/isFunction';
 import map from 'lodash/fp/map';
 import isEmpty from 'lodash/fp/isEmpty';
 import throttle from 'lodash/fp/throttle';
+import cloneDeep from 'lodash/fp/cloneDeep';
 import mapProps from '../utils/proptypes';
 import addEventListener from '../../../utils/addEventListener';
 import '../herePolyfill';
@@ -197,19 +198,6 @@ var Map = function Map(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     showCluster = _useState10[0],
     setShowCluster = _useState10[1];
-  var isDarkMode = useDarkMode();
-  useEffect(function () {
-    // Toggle night map only if current map type is default
-    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
-      setBaseLayer(MAP_TYPE_NIGHT);
-      onMapTypeChange(MAP_TYPE_NIGHT);
-    }
-    // Toggle back to default map only if current map type is night
-    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
-      setBaseLayer(MAP_TYPE_DEFAULT);
-      onMapTypeChange(MAP_TYPE_DEFAULT);
-    }
-  }, [isDarkMode]);
   var devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
   useEffect(function () {
     console.debug('initialize here map');
@@ -238,10 +226,12 @@ var Map = function Map(props) {
     var hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
     var hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
     addEventListenerMap(hereMap, eventListenerMap, hereMap);
+
+    // The api will be passed to services when using a render function.
+    // This allows the service to access the map internals
     setApi({
       credentials: credentials,
       defaultLayers: defaultLayers,
-      group: hereMap,
       map: hereMap,
       mapEvents: hereMapEvents,
       behavior: hereBehavior,
@@ -270,6 +260,17 @@ var Map = function Map(props) {
       }
     };
   }, [enableWebGL, enableDevicePixelRatio]);
+  var isDarkMode = useDarkMode();
+  useEffect(function () {
+    // Toggle night map only if current map type is default
+    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
+      handleMapTypeChange(MAP_TYPE_NIGHT);
+    }
+    // Toggle back to default map only if current map type is night
+    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
+      handleMapTypeChange(MAP_TYPE_DEFAULT);
+    }
+  }, [isDarkMode]);
 
   // Update BoundingBox from outside
   useEffect(function () {
@@ -308,7 +309,7 @@ var Map = function Map(props) {
 
   // Update MapType from outside
   useEffect(function () {
-    return setBaseLayer(mapType);
+    return handleMapTypeChange(mapType);
   }, [mapType]);
 
   // Update MapLayer from outside
@@ -323,11 +324,13 @@ var Map = function Map(props) {
   var handleMapTypeChange = function handleMapTypeChange(newMapType) {
     setBaseLayer(newMapType);
     onMapTypeChange(newMapType, mapType);
-    setApi(_objectSpread(_objectSpread({}, api), {}, {
-      settings: _objectSpread(_objectSpread({}, api.settings), {}, {
-        baseLayer: newMapType
-      })
-    }));
+    if (api) {
+      setApi(_objectSpread(_objectSpread({}, api), {}, {
+        settings: _objectSpread(_objectSpread({}, api.settings), {}, {
+          baseLayer: newMapType
+        })
+      }));
+    }
   };
   var handleMapLayerChange = function handleMapLayerChange(layer) {
     var removeLayer = function removeLayer(layerToRemove) {
@@ -373,7 +376,9 @@ var Map = function Map(props) {
     style: style,
     ref: mapRef
   }, isMapInitialized && /*#__PURE__*/React.createElement(MapContext.Provider, {
-    value: api
+    value: {
+      api: api
+    }
   }, !hideZoomButtons && /*#__PURE__*/React.createElement(ZoomButtons, {
     onZoomIn: handleZoomIn,
     onZoomOut: handleZoomOut

package/components/map/components/features/ContextMenu.js

@@ -80,7 +80,7 @@ var ContextMenu = function ContextMenu(props) {
     contextMenuEvent = props.contextMenuEvent,
     targetPosition = props.targetPosition;
   var mapContext = useContext(MapContext);
-  var _ref = api || mapContext,
+  var _ref = api || mapContext.api,
     hereMap = _ref.map;
 
   // Use a ref to store the target position used when a map object was clicked with a fixed

package/components/map/components/features/Route.js

@@ -23,14 +23,6 @@ var defaultStyle = {
   borderColor: 'rgba(54, 144, 174, 1)',
   isBorderIncludedInWidth: false
 };
-var defaultArrowStyle = {
-  // lineWidth: 12,
-  // strokeColor: 'rgba(0, 0, 0, 0.8)',
-  // lineDash: [0, 3],
-  // lineDashOffset: 2,
-  // lineTailCap: 'arrow-tail',
-  // lineHeadCap: 'arrow-head',
-};
 var alternativeRouteStyle = _objectSpread(_objectSpread({}, defaultStyle), {}, {
   color: 'rgb(218,253,255)'
 });
@@ -143,7 +135,7 @@ var Route = function Route(props) {
 };
 Route.defaultProps = {
   hasArrows: true,
-  arrowStyle: defaultArrowStyle,
+  arrowStyle: {},
   isReduced: false,
   isRouteAlternative: false,
   markers: []

package/components/map/components/features/basics/Circle.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable no-undef */
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import mapProps from '../../../utils/proptypes';
 import { MapContext } from '../../context';
@@ -13,25 +13,30 @@ var Circle = function Circle(_ref) {
     precision = _ref$precision === void 0 ? 60 : _ref$precision,
     style = _ref.style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     circle = _useState2[0],
     setCircle = _useState2[1];
+
+  // Create a new circle and check for changes on the map itself.
+  // The map instance may change due to rendering changes like webgl vs raster.
+  // In this case, add the circle to the new map instance otherwise it will be gone.
   useEffect(function () {
     var newCircle = new H.map.Circle(position, radius, {
       style: style,
       precision: parseFloat(precision)
     });
     setCircle(newCircle);
-    context.group.addObject(newCircle);
+    api.map.addObject(newCircle);
     return function () {
-      if (context.group.getObjects().includes(newCircle)) {
-        context.group.removeObject(newCircle);
+      if (api.map.getObjects().includes(newCircle)) {
+        api.map.removeObject(newCircle);
       }
       newCircle.dispose();
     };
-  }, []);
+  }, [api.map]);
   useUpdateProp(circle, 'setCenter', position);
   useUpdateProp(circle, 'setStyle', style);
   useUpdateProp(circle, 'setRadius', radius);

package/components/map/components/features/basics/MapLayerGroup.js

@@ -26,19 +26,21 @@ var MapLayerGroup = function MapLayerGroup(_ref) {
       max: parseFloat(maxZoom)
     });
     newGroup.setVisibility(isVisible);
-    context.group.addObject(newGroup);
+    context.api.map.addObject(newGroup);
     setGroup(newGroup);
     var newChildApi = _objectSpread(_objectSpread({}, context), {}, {
-      group: newGroup
+      api: _objectSpread(_objectSpread({}, context.api), {}, {
+        group: newGroup
+      })
     });
     setChildApi(newChildApi);
     return function () {
-      if (context.group.getObjects().includes(newGroup)) {
-        context.group.removeObject(newGroup);
+      if (context.api.map.getObjects().includes(newGroup)) {
+        context.api.map.removeObject(newGroup);
       }
       newGroup.dispose();
     };
-  }, []);
+  }, [api.map]);
   useEffect(function () {
     if (group) {
       group.setVisibility(isVisible);

package/components/map/components/features/basics/Polygon.js

@@ -21,7 +21,8 @@ var Polygon = function Polygon(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? H.map.SpatialStyle.DEFAULT_STYLE : _ref$style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     polygon = _useState2[0],
@@ -30,15 +31,15 @@ var Polygon = function Polygon(_ref) {
     var newPolygon = new H.map.Polygon(createGeometry(points), {
       style: style
     });
-    context.group.addObject(newPolygon);
+    api.map.addObject(newPolygon);
     setPolygon(newPolygon);
     return function () {
-      if (context.group.getObjects().includes(newPolygon)) {
-        context.group.removeObject(newPolygon);
+      if (api.map.getObjects().includes(newPolygon)) {
+        api.map.removeObject(newPolygon);
       }
       newPolygon.dispose();
     };
-  }, []);
+  }, [api.map]);
   useEffect(function () {
     if (polygon) {
       polygon.setGeometry(createGeometry(points));

package/components/map/components/features/basics/Polyline.js

@@ -18,7 +18,8 @@ var Polyline = function Polyline(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? H.map.SpatialStyle.DEFAULT_STYLE : _ref$style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     polyline = _useState2[0],
@@ -35,9 +36,7 @@ var Polyline = function Polyline(_ref) {
       style: style
     });
     if (hasArrows) {
-      // Create a patterned polyline:
-
-      // Non-legacy version:
+      // Create a patterned polyline
       var arrowLineStyle = new H.map.SpatialStyle(_objectSpread(_objectSpread({}, arrowStyle), {}, {
         lineWidth: 10,
         strokeColor: 'rgba(0, 0, 0, 0.8)',
@@ -56,43 +55,20 @@ var Polyline = function Polyline(_ref) {
     } else {
       lineGroup.addObjects([line]);
     }
-    context.group.addObject(lineGroup);
+    api.map.addObject(lineGroup);
     setPolyline(lineGroup);
     return function () {
-      // cleanup
-      //console.log('cleanup polyline');
-
       removeEventListenerMap(lineGroup);
       lineGroup.forEach(function (singleLine) {
         lineGroup.removeObject(singleLine);
         singleLine.dispose();
       });
-      if (context.group.getObjects().includes(lineGroup)) {
-        context.group.removeObject(lineGroup);
+      if (api.map.getObjects().includes(lineGroup)) {
+        api.map.removeObject(lineGroup);
       }
       lineGroup.dispose();
     };
-  }, [geometry, style, hasArrows, arrowStyle]);
-
-  /*useEffect(() => {
-      if (polyline) {
-          polyline.forEach((line, index) => {
-              if (index === 0) {
-                  line.setStyle(style);
-              } else {
-                  line.setStyle(arrowStyle);
-              }
-          });
-      }
-  }, [style, arrowStyle]);*/
-
-  /*useEffect(() => {
-      if (polyline) {
-          polyline.forEach(line => line.setGeometry(geometry));
-      }
-  }, [geometry]);*/
-
-  //useUpdateProp(polyline, 'setStyle', style);
+  }, [api.map, geometry, style, hasArrows, arrowStyle]);
   useUpdateEventListenerMap(polyline, eventListenerMap);
   return null;
 };

package/components/map/components/features/basics/marker/DomMarker.js

@@ -10,6 +10,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import mapProps from '../../../../utils/proptypes';
 import { addEventListenerMap, removeEventListenerMap, checkAndUpdateEventListenerMap } from '../../../../utils/eventHandling';
+
+// Should be deprecated...
+// Here Documentation:
+//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed 
+//     on the map (for example animated interactive SVG). Otherwise a H.map.Marker should be preferred for performance reasons.
+//
 var DomMarker = /*#__PURE__*/function (_React$Component) {
   _inherits(DomMarker, _React$Component);
   var _super = _createSuper(DomMarker);
@@ -21,7 +27,7 @@ var DomMarker = /*#__PURE__*/function (_React$Component) {
     _this.marker = new H.map.DomMarker(_this.convertPosition(props.position), {
       icon: icon
     });
-    context.api.group.addObject(_this.marker);
+    context.api.map.addObject(_this.marker);
     addEventListenerMap(_this.marker, props.eventListenerMap, _this.context.api.map);
     return _this;
   }
@@ -48,8 +54,8 @@ var DomMarker = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       removeEventListenerMap(this.marker);
-      if (this.context.api.group.includes(this.marker)) {
-        this.context.api.group.removeObject(this.marker);
+      if (this.context.api.map.includes(this.marker)) {
+        this.context.api.map.removeObject(this.marker);
       }
       this.marker.dispose();
     }