@rio-cloud/rio-uikit 0.16.2-beta.9 → 0.16.2

package/styles/mapping/spacings-map.less

@@ -1,5 +1,10 @@
 // These values must always be kept in sync with those of the demo page
 // uikit-demo/src/utils/spacings.js
+@spacings--px: {
+  -1: -1px;
+  -2: -2px;
+  -3: -3px;
+}
 
 @spacings-px: {
   1: 1px;

package/styles/rio-uikit-core.less

@@ -42,6 +42,8 @@
 @import (less) './design/aspect-ratio.less';
 @import (less) './design/colors.less';
 @import (less) './design/border.less';
+@import (less) './design/blur.less';
+@import (less) './design/divider.less';
 @import (less) './design/cursors.less';
 @import (less) './design/custom.less';
 @import (less) './design/ellipsis.less';

package/styles/variables/colors.json

@@ -33,6 +33,12 @@
 	"color-map-marker-geofence": "#5a4876",
 	"color-map-marker-route": "#3690ae",
 	"color-map-marker-text": "#ffffff",
+	"color-map-marker-active-night": "#ededed",
+	"color-map-marker-asset-night": "#6e757a",
+	"color-map-marker-poi-night": "#b23672",
+	"color-map-marker-geofence-night": "#79619f",
+	"color-map-marker-route-night": "#3b9fc1",
+	"color-map-marker-text-night": "#ededed",
 	"color-rating-1": "#d90000",
 	"color-rating-2": "#ff8e3c",
 	"color-rating-3": "#f8c575",

package/styles/variables/concated_css_variables.less

@@ -33,6 +33,12 @@
 @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
 @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
 @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
+@color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
+@color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
+@color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
+@color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
+@color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
 @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
 @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
 @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);

package/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #ededed;
+@color-map-marker-asset-night: #6e757a;
+@color-map-marker-poi-night: #b23672;
+@color-map-marker-geofence-night: #79619f;
+@color-map-marker-route-night: #3b9fc1;
+@color-map-marker-text-night: #ededed;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -1,24 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["homeRoute", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems"];
+import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/fp/isEmpty';
 import classname from 'classnames';
 import { ApplicationActionBar } from '../../../../components/applicationHeader/ApplicationActionBar';
 import useResizeObserver from '../../../../hooks/useResizeObserver';
 import modulePropTypes from './modulePropTypes';
-export var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
+export var VolkswagenApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var homeRoute = props.homeRoute,
     className = props.className,
     appNavigator = props.appNavigator,
     appNavigatorClassName = props.appNavigatorClassName,
     appMenuItems = props.appMenuItems,
     navItems = props.navItems,
-    actionBarItems = props.actionBarItems;
+    actionBarItems = props.actionBarItems,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var actionBarRef = useRef();
   var _useResizeObserver = useResizeObserver(),
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
     navRef = _useResizeObserver2[0],
     contentRect = _useResizeObserver2[1].contentRect;
+  useImperativeHandle(ref, function () {
+    return navRef;
+  }, []);
 
   // const getContentRect = useCallback(key => contentRect && Math.round(contentRect[key]), [contentRect]);
   // const containerWidth = getContentRect('width') || 0;
@@ -27,9 +34,11 @@ export var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(pr
   // const hasActionBarItems = !isEmpty(actionBarItems);
 
   var classNames = classname('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/React.createElement("nav", _extends({}, remainingProps, {
     className: classNames,
     ref: navRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "width-100pct"
   }, /*#__PURE__*/React.createElement("div", {
     className: "brand"
   }, /*#__PURE__*/React.createElement("div", {
@@ -47,8 +56,8 @@ export var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(pr
   })), /*#__PURE__*/React.createElement(ApplicationActionBar, {
     nodeRef: actionBarRef,
     items: actionBarItems
-  }));
-};
+  })));
+});
 export default VolkswagenApplicationHeader;
 VolkswagenApplicationHeader.defaultProps = {
   homeRoute: '',

package/types.ts

@@ -74,8 +74,7 @@ export interface ApplicationHeaderProps {
     appMenuItems?: ModulePropTypes[];
     navItems?: ModulePropTypes[];
     actionBarItems: React.ReactNode[];
-    onMount?: Function;
-    onUnmount?: Function;
+    onToggleAppMenu?: (isOpen: boolean) => void;
     className?: string;
 }
 
@@ -155,6 +154,13 @@ export interface AreaGradient {
     color?: string;
 }
 
+export interface AspectRatioPlaceholderProps {
+    height?: number;
+    width?: number;
+    className?: string;
+    children?: React.ReactNode | string;
+}
+
 export interface AssetTreeProps {
     fly?: boolean;
     resizable?: boolean;
@@ -412,6 +418,8 @@ export interface ClusterLayerProps {
     maxZoom?: string | number;
     clusterTheme?: ClusterTheme;
     eventListenerMap: EventListenerMap;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface ClusterMapMarkerProps {
@@ -420,8 +428,7 @@ export interface ClusterMapMarkerProps {
     exceptionCount?: number;
     active?: boolean;
     clickable?: boolean;
-    iconNames?: string;
-    colorClass?: string;
+    iconName?: string;
     markerColor?: markerColor;
 }
 
@@ -832,6 +839,7 @@ export enum MapType {
     TYPE_FLEET_STYLE = 'FLEET_STYLE',
     TYPE_SATELLITE = 'SATELLITE',
     TYPE_TERRAIN = 'TERRAIN',
+    TYPE_NIGHT = 'NIGHT',
 }
 
 export interface MapProps {
@@ -857,10 +865,12 @@ export interface MapProps {
         | MapType.TYPE_FLEET_STYLE
         | MapType.TYPE_SATELLITE
         | MapType.TYPE_TERRAIN
+        | MapType.TYPE_NIGHT
         | 'DEFAULT'
         | 'FLEET_STYLE'
         | 'SATELLITE'
-        | 'TERRAIN';
+        | 'TERRAIN'
+        | 'NIGHT';
     mapLayer?: string[];
     showCluster?: boolean;
     showScaleBar?: boolean;
@@ -872,6 +882,9 @@ export interface MapProps {
     getApi?: Function;
     mapSettingsTooltip?: string | React.ReactNode;
     mapSettings?: React.ReactNode;
+    enableWebGL?: boolean;
+    enableDevicePixelRatio?: boolean;
+    children?: any;
 }
 
 export interface MapBoundingBoxButtonProps {
@@ -965,6 +978,7 @@ export interface MapSettingsTileProps {
 
 export interface MapTypeSettingsProps {
     mapType?: string;
+    enableNightMap?: boolean;
     onMapTypeChange?: () => string;
 }
 
@@ -984,6 +998,8 @@ export interface MarkerProps {
 export interface MarkerLayerProps {
     simpleTheme?: ClusterTheme;
     clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface MenuItem {
@@ -1084,6 +1100,7 @@ export interface NumberControlProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
@@ -1100,12 +1117,14 @@ export interface NumberInputProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
     placeholder?: string;
+    digitPrecision?: number;
     ref?: React.MutableRefObject<object>;
 }
 
@@ -1355,6 +1374,22 @@ export interface RangeSliderProps {
     disabled?: boolean;
 }
 
+export interface ResponsiveColumnStripeProps {
+    minColumnWith?: number;
+    minColumns?: number;
+    maxColumns?: number;
+    className?: string;
+    buttonClassName?: string;
+    columnsWrapperClassName?: string;
+    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;
+    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;
+    stretchLastItems?: boolean;
+    asType?: string;
+    activePage?: number;
+    disableAnimation?: boolean;
+    children?: React.ReactNode;
+}
+
 export interface ReleaseNotesProps {
     releaseNotes: {
         [key: string]: {
@@ -1459,25 +1494,25 @@ export interface RouteProps {
 export interface RulesWrapperProps {}
 
 export interface RuleContainerProps {
-    show: boolean;
-    unchecked: boolean;
-    background: string;
-    borderColor: string;
-    hideConnector: boolean;
-    customConnector: string | JSX.Element;
-    className: string;
+    show?: boolean;
+    unchecked?: boolean;
+    background?: string;
+    borderColor?: string;
+    hideConnector?: boolean;
+    customConnector?: string | JSX.Element;
+    className?: string;
 }
 
 export interface RuleConnectorProps {
-    placement: 'start' | 'center' | 'end';
-    icon: string;
-    hidden: boolean;
-    background: string;
-    pageBackground: string;
-    contentClassName: string;
-    hasBorder: boolean;
-    borderColor: string;
-    className: string;
+    placement?: 'start' | 'center' | 'end';
+    icon?: string;
+    hidden?: boolean;
+    background?: string;
+    pageBackground?: string;
+    contentClassName?: string;
+    hasBorder?: boolean;
+    borderColor?: string;
+    className?: string;
 }
 
 // S --------------------------------------------------------------------------------------------------
@@ -1594,7 +1629,6 @@ export interface SingleMapMarkerProps {
     moving?: boolean;
     clickable?: boolean;
     iconNames?: string[];
-    colorClass?: string;
     markerColor?: markerColor;
 }
 
@@ -2200,6 +2234,18 @@ export type UseTimeout = (callback: () => void, delay?: number) => React.Mutable
 
 export type UseWindowResize = (callback: () => void, timeout?: number) => void;
 
+export type UseDarkMode = () => boolean;
+
+export type UseMutationObserver = (
+    targetElement: HTMLElement | React.MutableRefObject<object> | null | undefined,
+    callback: MutationCallback | undefined,
+    options?: {
+        attributes?: boolean;
+        childList?: boolean;
+        subtree?: boolean;
+    }
+) => void;
+
 export type UseScrollPosition = (
     target: Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined
-) => number;
+) => number;

package/useDarkMode.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/useDarkMode' {
+    import { UseDarkMode } from './types';
+    export default UseDarkMode;
+}

package/useDarkMode.js

@@ -0,0 +1,2 @@
+import { default as _useDarkMode } from './hooks/useDarkMode';
+export { _useDarkMode as default };

package/useMutationObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/useMutationObserver' {
+    import { UseMutationObserver } from './types';
+    export default UseMutationObserver;
+}

package/useMutationObserver.js

@@ -0,0 +1,2 @@
+import { default as _useMutationObserver } from './hooks/useMutationObserver';
+export { _useMutationObserver as default };

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.9"
+    "version": "0.16.2"
 }

package/components/map/components/features/layers/TruckLayer.js

@@ -1,20 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable camelcase */
-
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../constants';
-import Layer from './Layer';
-var createTruckLayer = function createTruckLayer(api, language) {
-  return api.platform.getMapTileService({
-    type: 'base'
-  }).createTileLayer('truckonlytile', 'normal.day', TILE_SIZE, FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
-var TruckLayer = function TruckLayer(props) {
-  return /*#__PURE__*/React.createElement(Layer, _extends({}, props, {
-    createLayer: createTruckLayer
-  }));
-};
-export default TruckLayer;

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

@@ -1,33 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import mapProps from '../../../../utils/proptypes';
-import { mapToLongLocale } from '../../../../utils/localization';
-var BaseLayer = function BaseLayer(props) {
-  var api = props.api,
-    createBaseLayer = props.createBaseLayer,
-    language = props.language,
-    showTraffic = props.showTraffic;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    baseLayer = _useState2[0],
-    setBaseLayer = _useState2[1];
-  useEffect(function () {
-    if (!baseLayer) {
-      var lang = mapToLongLocale(language);
-      var newBaseLayer = createBaseLayer(api, lang, showTraffic);
-      setBaseLayer(newBaseLayer);
-      setTimeout(function () {
-        return api.map.setBaseLayer(newBaseLayer);
-      }, 100);
-    }
-  });
-  return null;
-};
-BaseLayer.propTypes = {
-  api: mapProps.api,
-  createBaseLayer: PropTypes.func.isRequired,
-  showTraffic: PropTypes.bool,
-  language: PropTypes.string
-};
-export default BaseLayer;

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

@@ -1,23 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../../constants';
-import BaseLayer from './BaseLayer';
-
-// old Fleetadmin map type = 'normal.day.grey'
-
-var createDefaultLayer = function createDefaultLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'base';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'normal.day', TILE_SIZE, FORMAT, {
-    style: 'alps',
-    lg: language
-  });
-};
-var DefaultLayer = function DefaultLayer(props) {
-  return /*#__PURE__*/React.createElement(BaseLayer, _extends({}, props, {
-    createBaseLayer: createDefaultLayer
-  }));
-};
-export default DefaultLayer;

package/hooks/useHereMap.ts

@@ -1,23 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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/lib/es/components/map/components/features/layers/TruckLayer.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
-var _Layer = _interopRequireDefault(require("./Layer"));
-/* eslint-disable camelcase */
-
-var createTruckLayer = function createTruckLayer(api, language) {
-  return api.platform.getMapTileService({
-    type: 'base'
-  }).createTileLayer('truckonlytile', 'normal.day', _constants.TILE_SIZE, _constants.FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
-var TruckLayer = function TruckLayer(props) {
-  return /*#__PURE__*/_react["default"].createElement(_Layer["default"], (0, _extends2["default"])({}, props, {
-    createLayer: createTruckLayer
-  }));
-};
-var _default = TruckLayer;
-exports["default"] = _default;

package/lib/es/components/map/components/features/layers/baselayers/BaseLayer.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _proptypes = _interopRequireDefault(require("../../../../utils/proptypes"));
-var _localization = require("../../../../utils/localization");
-var BaseLayer = function BaseLayer(props) {
-  var api = props.api,
-    createBaseLayer = props.createBaseLayer,
-    language = props.language,
-    showTraffic = props.showTraffic;
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    baseLayer = _useState2[0],
-    setBaseLayer = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (!baseLayer) {
-      var lang = (0, _localization.mapToLongLocale)(language);
-      var newBaseLayer = createBaseLayer(api, lang, showTraffic);
-      setBaseLayer(newBaseLayer);
-      setTimeout(function () {
-        return api.map.setBaseLayer(newBaseLayer);
-      }, 100);
-    }
-  });
-  return null;
-};
-BaseLayer.propTypes = {
-  api: _proptypes["default"].api,
-  createBaseLayer: _propTypes["default"].func.isRequired,
-  showTraffic: _propTypes["default"].bool,
-  language: _propTypes["default"].string
-};
-var _default = BaseLayer;
-exports["default"] = _default;