@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.3

package/components/map/components/features/layers/baselayers/TerrainLayer.js

@@ -1,20 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../../constants';
-import BaseLayer from './BaseLayer';
-var createTerrainLayer = function createTerrainLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'aerial';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'terrain.day', TILE_SIZE, FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
+import { useBaseLayer } from './useBaseLayer';
 var TerrainLayer = function TerrainLayer(props) {
-  return /*#__PURE__*/React.createElement(BaseLayer, _extends({}, props, {
-    createBaseLayer: createTerrainLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapTileServiceType: 'aerial',
+    scheme: 'terrain.day',
+    additionalParameter: {
+      style: 'default'
+    }
+  });
+  return null;
 };
 export default TerrainLayer;

package/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
+import { useState, useEffect } from 'react';
+import { mapToLongLocale } from '../../../../utils/localization';
+import { FORMAT, TILE_SIZE } from '../../../constants';
+import { getPPI } from '../../../mapUtils';
+export var useBaseLayer = function useBaseLayer(props) {
+  var api = props.api,
+    _props$mapTileService = props.mapTileServiceType,
+    mapTileServiceType = _props$mapTileService === void 0 ? 'base' : _props$mapTileService,
+    _props$tileType = props.tileType,
+    tileType = _props$tileType === void 0 ? 'maptile' : _props$tileType,
+    scheme = props.scheme,
+    _props$additionalPara = props.additionalParameters,
+    additionalParameters = _props$additionalPara === void 0 ? {} : _props$additionalPara,
+    options = props.options,
+    language = props.language;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    baseLayer = _useState2[0],
+    setBaseLayer = _useState2[1];
+  useEffect(function () {
+    if (!baseLayer) {
+      var additionalParametersWithLocale = _objectSpread(_objectSpread({}, additionalParameters), {}, {
+        lg: mapToLongLocale(language),
+        ppi: getPPI()
+      });
+      var mapTiler = api.platform.getMapTileService({
+        type: mapTileServiceType
+      });
+
+      // Function signature: createTileLayer(tileType, scheme, tileSize, format, opt_additionalParameters, opt_opacity, opt_dark, opt_options)
+      // See: https://developer.here.com/documentation/maps/3.1.37.0/api_reference/H.service.MapTileService.html#createTileLayer
+      var newBaseLayer = mapTiler.createTileLayer(tileType, scheme, TILE_SIZE, FORMAT, additionalParametersWithLocale, 1, false, options);
+      api.map.setBaseLayer(newBaseLayer);
+      setBaseLayer(newBaseLayer);
+    }
+  });
+};

package/components/map/components/mapUtils.js

@@ -1,9 +1,12 @@
-/* eslint-disable no-undef */
+import { HIGH_RES_PPI } from './constants';
 import map from 'lodash/fp/map';
 import flatMap from 'lodash/fp/flatMap';
 import filter from 'lodash/fp/filter';
 import flow from 'lodash/fp/flow';
 import first from 'lodash/fp/first';
+export var getPPI = function getPPI() {
+  return window.devicePixelRatio > 1 ? HIGH_RES_PPI : undefined;
+};
 var latLngFilterFunction = function latLngFilterFunction(lat, lng) {
   return function (obj) {
     return obj.getGeometry && obj.getGeometry().lat === lat && obj.getGeometry().lng === lng;

package/components/mapMarker/ClusterMapMarker.js

@@ -26,9 +26,9 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
   var clusterClasses = classNames('rio-map-cluster-cirlce', colorClass);
   var baseColor = getColorMapping(colorClass) || markerColor;
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/mapMarker/SingleMapMarker.js

@@ -52,9 +52,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/sidebars/Sidebar.js

@@ -234,7 +234,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       var headerClassNames = classNames('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
       var titleClassNames = classNames('SidebarTitle', titleClassName && titleClassName);
       var bodyClassNames = classNames('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'bg-black opacity-50', backdropClassName && backdropClassName);
+      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
       var fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
       var resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');
       var isRight = position === Sidebar.RIGHT;
@@ -359,7 +359,7 @@ Sidebar.propTypes = {
   makeBackdropVisible: PropTypes.bool,
   onBackdropClick: PropTypes.func,
   backdropClassName: PropTypes.string,
-  bodyRef: PropTypes.elementType,
+  bodyRef: PropTypes.object,
   headerButtons: PropTypes.node
 };
 export default Sidebar;

package/hooks/useHereMap.ts

@@ -0,0 +1,23 @@
+import { useScripts } from './useScripts';
+
+const DEFAULT_BASE_URL = 'https://js.api.here.com/v3/3.1.20.0/';
+
+const HERE_EXTERNALS = [
+    'mapsjs-core.js',
+    'mapsjs-core-legacy.js',
+    'mapsjs-service.js',
+    'mapsjs-service-legacy.js',
+    'mapsjs-mapevents.js',
+    'mapsjs-ui.js',
+    'mapsjs-clustering.js',
+];
+
+const getExternals = (scriptList: string[], baseUrl: string): string[] =>
+    scriptList.map((script) => `${baseUrl}${script}`);
+
+const sanitizeBaseUrl = (url: string) => (url.endsWith('/') ? url : `${url}/`);
+
+export const useHereMap = (baseUrl?: string) => {
+    const hereScripts = getExternals(HERE_EXTERNALS, sanitizeBaseUrl(baseUrl || DEFAULT_BASE_URL));
+    return useScripts(hereScripts, false);
+};

package/hooks/useScripts.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+const hasScriptsInHead = (src: string) => document.head.querySelectorAll(`script[src*="${src}"]`).length > 0;
+
+export const useScripts = (scripts: string[], loadAsync: boolean = false) => {
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [hasLoaded, setHasLoaded] = useState<boolean>(false);
+    const [error, setError] = useState<Error | undefined>();
+
+    const promises = new Set();
+
+    useEffect(() => {
+        const [firstScript] = scripts;
+
+        if (hasScriptsInHead(firstScript)) {
+            setHasLoaded(true);
+            return;
+        }
+
+        setIsLoading(true);
+
+        scripts.map((external) => {
+            promises.add(
+                new Promise<void>((resolve, reject) => {
+                    const script = document.createElement('script');
+                    script.async = loadAsync;
+                    script.src = external;
+
+                    script.onload = () => {
+                        console.debug(`loaded ${external}`);
+                        resolve();
+                    };
+
+                    script.onerror = () => {
+                        console.debug(`failed to load ${external}`);
+                        setError(new Error(`failed to load ${external}`));
+                        reject();
+                    };
+
+                    document.head.appendChild(script);
+                })
+            );
+        });
+
+        Promise.all([...promises]).then(() => {
+            setIsLoading(false);
+            setHasLoaded(true);
+        });
+    }, []);
+
+    return { isLoading, error, hasLoaded };
+};

package/hooks/useScrollPosition.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+var getModuleContent = function getModuleContent() {
+  return document.getElementsByClassName('module-content')[0];
+};
+
+// "target" can be "window", "document.body", a "ref" or undefiend
+// where in later case the module-content is taken as default
+
+var useScrollPosition = function useScrollPosition(target) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollPosition = _useState4[0],
+    setScrollPosition = _useState4[1];
+  useEffect(function () {
+    var checkForModuleContent = null;
+
+    // In cae the target is undefined it might be that the module-content is not rendered yet,
+    // hence check periodically for the existence
+    if (!target) {
+      checkForModuleContent = setInterval(function () {
+        var element = getModuleContent();
+        if (element) {
+          setTargetElement(element);
+        }
+      }, 300);
+    } else if (target && checkForModuleContent) {
+      console.log('clearInterval');
+      clearInterval(checkForModuleContent);
+    }
+
+    // In case the target is a "ref" - set the targetElement when current is defined
+    else if (target !== null && target !== void 0 && target.current && !checkForModuleContent) {
+      setTargetElement(target.current);
+    }
+
+    // In case it's "wondow" or "document.body"
+    else {
+      setTargetElement(target);
+    }
+    return {
+      "if": function _if(checkForModuleContent) {
+        clearInterval(check);
+      }
+    };
+  }, [target]);
+  var handleScroll = function handleScroll() {
+    requestAnimationFrame(function () {
+      if (targetElement === window) {
+        setScrollPosition(targetElement.scrollY);
+      } else {
+        setScrollPosition(targetElement.scrollTop);
+      }
+    });
+  };
+  useEffect(function () {
+    if (targetElement) {
+      targetElement.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (targetElement) {
+        targetElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [targetElement]);
+  return scrollPosition;
+};
+export default useScrollPosition;

package/index.js

@@ -4,7 +4,7 @@ import versionJson from './version.json';
 var VERSION = versionJson.version;
 export { VERSION };
 export * from 'framer-motion';
-import _colors from './styles/shared/colors.json';
+import _colors from './styles/variables/colors.json';
 export { _colors as colors };
 import { default as _Button } from './components/button/Button';
 export { _Button as Button };
@@ -153,8 +153,11 @@ export { default as useInterval } from './hooks/useInterval';
 export { default as useClickOutside } from './hooks/useClickOutside';
 export { default as useClipboard } from './hooks/useClipboard';
 export { default as useElementSize } from './hooks/useElementSize';
+export { default as useScrollPosition } from './hooks/useScrollPosition';
 import { hasTouch as _hasTouch, inIframe as _inIframe, isDesktop as _isDesktop } from './utils/deviceUtils';
 export { _hasTouch as hasTouch, _inIframe as inIframe, _isDesktop as isDesktop };
+import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';
+export { _getColorScheme as getColorScheme, _setColorScheme as setColorScheme };
 import { getNewGroupedSelected as _getNewGroupedSelected } from './utils/GroupSelectionUtil';
 export { _getNewGroupedSelected as getNewGroupedSelected };
 import { default as _ExpanderPanel } from './components/expander/ExpanderPanel';

package/lib/es/ColorScheme.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/ColorScheme' {
+    export function getColorScheme(): string;
+    export function setColorScheme(scheme: 'dark' | 'light' | 'default' | 'system'): void;
+}

package/lib/es/ColorScheme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.getColorScheme;
+  }
+});
+Object.defineProperty(exports, "setColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.setColorScheme;
+  }
+});
+var _colorScheme = require("./utils/colorScheme");

package/lib/es/Colors.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
     return _colors2["default"];
   }
 });
-var _colors2 = _interopRequireDefault(require("./styles/shared/colors.json"));
+var _colors2 = _interopRequireDefault(require("./styles/variables/colors.json"));

package/lib/es/TruckLayer.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _TruckLayer2["default"];
+    return _RoadRestrictionLayer["default"];
   }
 });
-var _TruckLayer2 = _interopRequireDefault(require("./components/map/components/features/layers/TruckLayer"));
+var _RoadRestrictionLayer = _interopRequireDefault(require("./components/map/components/features/layers/RoadRestrictionLayer"));

package/lib/es/components/assetTree/Tree.js

@@ -653,7 +653,7 @@ Tree.propTypes = {
       firstName: _propTypes["default"].string,
       lastName: _propTypes["default"].string.isRequired
     })]).isRequired,
-    info: _propTypes["default"].string,
+    info: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
     type: _propTypes["default"].string.isRequired,
     groupIds: _propTypes["default"].arrayOf(_propTypes["default"].string),
     className: _propTypes["default"].string

package/lib/es/components/charts/chartHelper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mapGridOptions = exports.getFromDefaultColors = exports.getColor = exports.defaultChartColors = exports.CURSOR_BACKGROUND_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _colors = _interopRequireDefault(require("../../styles/shared/colors.json"));
+var _colors = _interopRequireDefault(require("../../styles/variables/colors.json"));
 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; }
 var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];