@opengeoweb/webmap-react 9.16.0 → 9.17.0

package/index.esm.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
 import { CustomTooltip, CanvasComponent, ToolContainerDraggable, dateUtils, CustomIconButton } from '@opengeoweb/shared';
-import { useTranslation } from 'react-i18next';
 import 'i18next';
+import { useTranslation } from 'react-i18next';
 import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
 import _, { cloneDeep } from 'lodash';
 import proj4 from 'proj4';
@@ -24,19 +24,6 @@ var en = {
 	"webmap-react-expires": "Expires:",
 	"webmap-react-sender": "Sender:",
 	"webmap-react-identifier": "Identifier:",
-	"webmap-react-h5": "Query features along buffered line using WFS and CQL",
-	"webmap-react-wfs": "WFS JSON URL:",
-	"webmap-react-cql": "CQL expression:",
-	"webmap-react-delete": "Delete",
-	"webmap-react-feature-type": "Feature type",
-	"webmap-react-feature-number": "Feature number",
-	"webmap-react-intersection-shapes": "Intersection shapes",
-	"webmap-react-features": "Features",
-	"webmap-react-url": "URL:",
-	"webmap-react-get-feature-info-result": "GetFeatureInfo result:",
-	"webmap-react-view": "View",
-	"webmap-react-edit": "Edit",
-	"webmap-react-esc": "press ESC to exit draw mode",
 	"webmap-react-no-layers": "No layers",
 	"webmap-react-legend": "Legend",
 	"webmap-react-title": "Title",
@@ -52,7 +39,7 @@ var en = {
 	"webmap-react-zoom-in": "Zoom in",
 	"webmap-react-zoom-out": "Zoom out",
 	"webmap-react-show": "Show",
-	"webmap-react-click-diconnect": "Click to disconnect layer",
+	"webmap-react-click-disconnect": "Click to disconnect layer",
 	"webmap-react-click-connect": "Click to connect layer",
 	"webmap-react-layer-info": "Layer Info"
 };
@@ -63,17 +50,6 @@ var fi = {
 	"webmap-react-expires": "ei käännetty",
 	"webmap-react-sender": "ei käännetty",
 	"webmap-react-identifier": "ei käännetty",
-	"webmap-react-h5": "ei käännetty",
-	"webmap-react-wfs": "ei käännetty",
-	"webmap-react-cql": "ei käännetty",
-	"webmap-react-delete": "ei käännetty",
-	"webmap-react-feature-type": "ei käännetty",
-	"webmap-react-feature-number": "ei käännetty",
-	"webmap-react-intersection-shapes": "ei käännetty",
-	"webmap-react-get-feature-info-result": "ei käännetty",
-	"webmap-react-view": "ei käännetty",
-	"webmap-react-edit": "ei käännetty",
-	"webmap-react-esc": "ei käännetty",
 	"webmap-react-no-layers": "ei käännetty",
 	"webmap-react-legend": "ei käännetty",
 	"webmap-react-title": "ei käännetty",
@@ -89,83 +65,61 @@ var fi = {
 	"webmap-react-zoom-in": "ei käännetty",
 	"webmap-react-zoom-out": "ei käännetty",
 	"webmap-react-show": "ei käännetty",
-	"webmap-react-click-diconnect": "ei käännetty",
+	"webmap-react-click-disconnect": "ei käännetty",
 	"webmap-react-click-connect": "ei käännetty",
 	"webmap-react-layer-info": "ei käännetty"
 };
 var no = {
-	"webmap-react-event": "event:",
+	"webmap-react-event": "hendelse:",
 	"webmap-react-sent": "Sendt:",
 	"webmap-react-utc": "UTC",
 	"webmap-react-expires": "Utgår:",
 	"webmap-react-sender": "Avsender:",
-	"webmap-react-identifier": "ikke oversatt",
-	"webmap-react-h5": "ikke oversatt",
-	"webmap-react-wfs": "ikke oversatt",
-	"webmap-react-cql": "ikke oversatt",
-	"webmap-react-delete": "Slett",
-	"webmap-react-feature-type": "Feature type",
-	"webmap-react-feature-number": "Feature nummer",
-	"webmap-react-intersection-shapes": "ikke oversatt",
-	"webmap-react-get-feature-info-result": "GetFeatureInfo resultat:",
-	"webmap-react-view": "View",
-	"webmap-react-edit": "Endre",
-	"webmap-react-esc": "trykk ESC for å avslutte tegnemodus",
+	"webmap-react-identifier": "Identifikator:",
 	"webmap-react-no-layers": "Ingen lag",
 	"webmap-react-legend": "Legende",
 	"webmap-react-title": "Tittel",
 	"webmap-react-name": "Navn",
 	"webmap-react-service": "Service",
-	"webmap-react-abstract": "Abstract",
+	"webmap-react-abstract": "Abstrakt",
 	"webmap-react-dimensions": "Dimensjoner",
-	"webmap-react-styles": "Styles",
-	"webmap-react-bounding-box": "Bounding Box",
+	"webmap-react-styles": "Stiler",
+	"webmap-react-bounding-box": "Avgrensningsboks",
 	"webmap-react-groups": "Grupper",
 	"webmap-react-keywords": "Stikkord",
-	"webmap-react-zoom-reset": "Reset zoom",
+	"webmap-react-zoom-reset": "Tilbakestill zoom",
 	"webmap-react-zoom-in": "Zoom inn",
 	"webmap-react-zoom-out": "Zoom ut",
 	"webmap-react-show": "Vis",
-	"webmap-react-click-diconnect": "Trykk for å avkoble lag",
+	"webmap-react-click-disconnect": "Trykk for å avkoble lag",
 	"webmap-react-click-connect": "Trykk for å koble lag",
 	"webmap-react-layer-info": "Laginformasjon"
 };
 var nl = {
-	"webmap-react-event": "niet vertaald",
-	"webmap-react-sent": "niet vertaald",
-	"webmap-react-utc": "niet vertaald",
-	"webmap-react-expires": "niet vertaald",
-	"webmap-react-sender": "niet vertaald",
-	"workspce-search": "niet vertaald",
-	"webmap-react-h5": "niet vertaald",
-	"webmap-react-wfs": "niet vertaald",
-	"webmap-react-cql": "niet vertaald",
-	"webmap-react-delete": "niet vertaald",
-	"webmap-react-feature-type": "niet vertaald",
-	"webmap-react-feature-number": "niet vertaald",
-	"webmap-react-intersection-shapes": "niet vertaald",
-	"webmap-react-get-feature-info-result": "niet vertaald",
-	"webmap-react-view": "niet vertaald",
-	"webmap-react-edit": "niet vertaald",
-	"webmap-react-esc": "niet vertaald",
-	"webmap-react-no-layers": "niet vertaald",
-	"webmap-react-legend": "niet vertaald",
-	"webmap-react-title": "niet vertaald",
-	"webmap-react-name": "niet vertaald",
-	"webmap-react-service": "niet vertaald",
-	"webmap-react-abstract": "niet vertaald",
-	"webmap-react-dimensions": "niet vertaald",
-	"webmap-react-styles": "niet vertaald",
-	"webmap-react-bounding-box": "niet vertaald",
-	"webmap-react-groups": "niet vertaald",
-	"webmap-react-keywords": "niet vertaald",
-	"webmap-react-zoom-reset": "niet vertaald",
-	"webmap-react-zoom-in": "niet vertaald",
-	"webmap-react-zoom-out": "niet vertaald",
-	"webmap-react-show": "niet vertaald",
-	"webmap-react-click-diconnect": "niet vertaald",
-	"webmap-react-click-connect": "niet vertaald",
-	"webmap-react-layer-info": "niet vertaald"
+	"webmap-react-event": "event:",
+	"webmap-react-sent": "Verzonden:",
+	"webmap-react-utc": "UTC",
+	"webmap-react-expires": "Verloopt:",
+	"webmap-react-sender": "Afzender:",
+	"webmap-react-identifier": "Id:",
+	"webmap-react-no-layers": "Geen lagen",
+	"webmap-react-legend": "Legenda",
+	"webmap-react-title": "Titel",
+	"webmap-react-name": "Naam",
+	"webmap-react-service": "Service",
+	"webmap-react-abstract": "Abstract",
+	"webmap-react-dimensions": "Dimensies",
+	"webmap-react-styles": "Stijlen",
+	"webmap-react-bounding-box": "Begrenzend kader",
+	"webmap-react-groups": "Groepen",
+	"webmap-react-keywords": "Trefwoorden",
+	"webmap-react-zoom-reset": "Reset zoom",
+	"webmap-react-zoom-in": "Zoom in",
+	"webmap-react-zoom-out": "Zoom uit",
+	"webmap-react-show": "Open",
+	"webmap-react-click-disconnect": "Klik om laag los te koppelen",
+	"webmap-react-click-connect": "Klik om laag te koppelen",
+	"webmap-react-layer-info": "Laag Informatie"
 };
 var webmapReactTranslations = {
 	en: en,
@@ -1738,6 +1692,7 @@ handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 const WEBMAP_REACT_NAMESPACE = 'webmapreact';
+const useWebmapReactTranslation = () => useTranslation(WEBMAP_REACT_NAMESPACE);
 
 var DESCRIPTORS$4 = descriptors;
 var uncurryThis$f = functionUncurryThis;
@@ -1911,7 +1866,7 @@ const Legend = ({
   let imageHeight;
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   const legendPrefix = t('webmap-react-legend');
   /* Register callback to legendImagestore to trigger rerender when image is loaded. */
   useEffect(() => {
@@ -2020,7 +1975,7 @@ const LegendDialog = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -4866,9 +4821,6 @@ const FeatureLayers = ({
   activeFeatureLayerIndex,
   getToolIcon
 }) => {
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
   const featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(index => {
     var _a;
     return {
@@ -4888,7 +4840,7 @@ const FeatureLayers = ({
     }
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
     id: "demo-feature-number"
-  }, t('webmap-react-features')), /*#__PURE__*/React__default.createElement(Select, {
+  }, "Features"), /*#__PURE__*/React__default.createElement(Select, {
     labelId: "demo-feature-type",
     value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
     onChange: event => {
@@ -4933,19 +4885,16 @@ const EditModeButton = ({
   drawMode,
   onToggleEditMode
 }) => {
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Switch mode"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(FormLabel, null, t('webmap-react-view')), /*#__PURE__*/React__default.createElement(Switch, {
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(FormLabel, null, "View"), /*#__PURE__*/React__default.createElement(Switch, {
     "data-testid": "switchMode",
     checked: isInEditMode,
     onClick: () => onToggleEditMode(!isInEditMode)
-  }), /*#__PURE__*/React__default.createElement(FormLabel, null, t('webmap-react-edit')), drawMode && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(FormLabel, null, "Edit"), drawMode && ( /*#__PURE__*/React__default.createElement(Typography, {
     component: "span",
     sx: {
       display: 'inline-block',
@@ -4954,7 +4903,7 @@ const EditModeButton = ({
       position: 'relative',
       fontSize: 14
     }
-  }, t('webmap-react-esc'))))));
+  }, "press ESC to exit draw mode")))));
 };
 
 /* *
@@ -5460,9 +5409,6 @@ const IntersectionSelect = ({
   isDisabled: _isDisabled = false
 }) => {
   const [activeIntersection, setActiveIntersection] = React__default.useState(0);
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sm: 12
@@ -5473,7 +5419,7 @@ const IntersectionSelect = ({
     }
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
     id: "demo-intersection"
-  }, t('webmap-react-intersection-shapes')), /*#__PURE__*/React__default.createElement(Select, {
+  }, "Intersection shapes"), /*#__PURE__*/React__default.createElement(Select, {
     labelId: "demo-intersection",
     value: activeIntersection.toString(),
     onChange: event => {
@@ -8970,7 +8916,7 @@ const ZoomControls = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapControlButton, {
     title: t('webmap-react-zoom-reset'),
     "data-testid": "zoom-reset",
@@ -9418,7 +9364,7 @@ const MapWarningProperties = ({
   const newWidth = parentSize ? parentSize - 100 : 350;
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'fixed',
@@ -9445,9 +9391,9 @@ const MapWarningProperties = ({
     "data-testid": "map-warning-properties-row"
   }, t('webmap-react-event'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].event)), selectedFeatureProperties.onset && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-sent'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), 'dd MMM yyyy, HH:mm'), ' ', t('webmap-react-utc'))), selectedFeatureProperties.expires && ( /*#__PURE__*/React__default.createElement("pre", {
+  }, t('webmap-react-sent'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc'))), selectedFeatureProperties.expires && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-expires'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), 'dd MMM yyyy, HH:mm'), ' ', t('webmap-react-utc'))), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && ( /*#__PURE__*/React__default.createElement("pre", {
+  }, t('webmap-react-expires'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc'))), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
   }, t('webmap-react-sender'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName)), selectedFeatureProperties.identifier && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
@@ -9526,7 +9472,7 @@ const DimensionSelectButton = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   const showPrefix = t('webmap-react-show');
   const dimConfig = dimensionConfig.find(cnf => cnf.name === dimension);
   const Icon = getDimensionIcon$1(dimConfig && dimConfig.iconType || 'IconLevels');
@@ -9717,7 +9663,7 @@ const MapDimensionSelect = ({
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   const tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
   return /*#__PURE__*/React.createElement(Grid, {
     key: layerId,
@@ -9850,7 +9796,7 @@ const LayerInfoLegend = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "subtitle2",
     sx: textStyleWithMargin
@@ -10403,7 +10349,7 @@ const LayerInfoDialog = ({
   const dimensions = getDimensionsList(layer.dimensions);
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
     onClose: onClose,
     startSize: {
@@ -10442,9 +10388,7 @@ const LayerInfoDialog = ({
     label: t('webmap-react-styles'),
     value: styles
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-bounding-box', {
-      ns: WEBMAP_REACT_NAMESPACE
-    }),
+    label: t('webmap-react-bounding-box'),
     value: bbox
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: t('webmap-react-groups'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.16.0",
+  "version": "9.17.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/LayerInfo/LayerInfoDialog.stories.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
 export default _default;
 export declare const LayerInfoDialogLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -15,7 +15,7 @@ export declare const LayerInfoDialogLight: {
 };
 export declare const LayerInfoDialogDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/MapDimensionSelect/DimensionSelectDialog.stories.d.ts

@@ -5,25 +5,25 @@ declare const _default: {
 export default _default;
 export declare const DimensionSelectElevationLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectElevationDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectEnsembleMemberLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectEnsembleMemberDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectInvalidSyncLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectInvalidSyncDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };

package/src/lib/utils/i18n.d.ts

@@ -1,2 +1,5 @@
+import i18n from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
 export declare const WEBMAP_REACT_NAMESPACE = "webmapreact";
 export declare const initWebmapReactTestI18n: () => void;
+export declare const useWebmapReactTranslation: () => UseTranslationResponse<typeof WEBMAP_REACT_NAMESPACE, typeof i18n>;

package/src/lib/storyshots/Storyshots.spec.d.ts

@@ -1 +0,0 @@
-export {};