react-spatial 1.12.0-beta.0 → 1.12.1

package/components/BaseLayerSwitcher/BaseLayerSwitcher.js

@@ -1,43 +1,30 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { FaChevronLeft } from "react-icons/fa";
 import { Layer } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { FaChevronLeft } from "react-icons/fa";
 const propTypes = {
-  /**
-   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).
-   */
-  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
-  /**
-   * Object containing relative paths to the base layer images. Object
-   * keys need to correspond to layer keys
-   */
-  layerImages: PropTypes.objectOf(PropTypes.string),
-  /**
-   * CSS class to apply on the container.
-   */
-  className: PropTypes.string,
   /**
    * Alternative text rendered if layer images can't be loaded
    */
   altText: PropTypes.string,
   /**
-   * Button titles.
+   * CSS class to apply on the container.
    */
-  titles: PropTypes.shape({
-    button: PropTypes.string,
-    openSwitcher: PropTypes.string,
-    closeSwitcher: PropTypes.string
-  }),
+  className: PropTypes.string,
   /**
    * Image (node) rendered in the switcher close button.
    */
   closeButtonImage: PropTypes.node,
   /**
-   * Translation function.
-   * @param {function} Translation function returning the translated string.
+   * Object containing relative paths to the base layer images. Object
+   * keys need to correspond to layer keys
    */
-  t: PropTypes.func,
+  layerImages: PropTypes.objectOf(PropTypes.string),
+  /**
+   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).
+   */
+  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
   /**
    * Callback function on close button click.
    * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
@@ -52,7 +39,20 @@ const propTypes = {
    * Callback function on main switcher button click.
    * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
    */
-  onSwitcherButtonClick: PropTypes.func
+  onSwitcherButtonClick: PropTypes.func,
+  /**
+   * Translation function.
+   * @param {function} Translation function returning the translated string.
+   */
+  t: PropTypes.func,
+  /**
+   * Button titles.
+   */
+  titles: PropTypes.shape({
+    button: PropTypes.string,
+    closeSwitcher: PropTypes.string,
+    openSwitcher: PropTypes.string
+  })
 };
 const getVisibleLayer = (layers) => {
   return layers.find((layer) => {
@@ -71,49 +71,49 @@ const getNextImage = (currentLayer, layers, layerImages) => {
 const getImageStyle = (url) => {
   return url ? {
     backgroundImage: `url(${url})`,
-    backgroundSize: "cover",
+    backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
-    backgroundPosition: "center"
+    backgroundSize: "cover"
   } : null;
 };
-function CloseButton({ onClick, tabIndex, title, children }) {
+function CloseButton({ children, onClick, tabIndex, title }) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      "aria-label": title,
       className: "rs-base-layer-switcher-close-btn",
-      role: "button",
       onClick,
       onKeyPress: (e) => {
         return e.which === 13 && onClick();
       },
+      role: "button",
       tabIndex,
-      "aria-label": title,
       title
     },
     children
   );
 }
 CloseButton.propTypes = {
+  children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,
   tabIndex: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
+  title: PropTypes.string.isRequired
 };
 function BaseLayerSwitcher({
-  layers,
-  layerImages = void 0,
-  className = "rs-base-layer-switcher",
   altText = "Source not found",
-  titles = {
-    button: "Base layers",
-    openSwitcher: "Open Baselayer-Switcher",
-    closeSwitcher: "Close Baselayer-Switcher"
-  },
+  className = "rs-base-layer-switcher",
   closeButtonImage = /* @__PURE__ */ React.createElement(FaChevronLeft, null),
+  layerImages = void 0,
+  layers,
   onCloseButtonClick = null,
   onLayerButtonClick = null,
   onSwitcherButtonClick = null,
-  t = (s) => s
+  t = (s) => s,
+  titles = {
+    button: "Base layers",
+    closeSwitcher: "Close Baselayer-Switcher",
+    openSwitcher: "Open Baselayer-Switcher"
+  }
 }) {
   const [switcherOpen, setSwitcherOpen] = useState(false);
   const [isClosed, setIsClosed] = useState(true);
@@ -215,18 +215,18 @@ function BaseLayerSwitcher({
   return /* @__PURE__ */ React.createElement("div", { className: `${className}${openClass}` }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `rs-base-layer-switcher-button rs-opener${openClass}`,
-      role: "button",
-      title: titles.openSwitcher,
       "aria-label": titles.openSwitcher,
+      className: `rs-base-layer-switcher-button rs-opener${openClass}`,
       onClick: handleSwitcherClick,
       onKeyPress: (e) => {
         if (e.which === 13) {
           handleSwitcherClick();
         }
       },
+      role: "button",
       style: getImageStyle(nextImage),
-      tabIndex: "0"
+      tabIndex: "0",
+      title: titles.openSwitcher
     },
     /* @__PURE__ */ React.createElement("div", { className: "rs-base-layer-switcher-title" }, layers.length !== 2 ? titles.button : layers.find((layer) => {
       return !layer.visible;
@@ -245,8 +245,8 @@ function BaseLayerSwitcher({
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        key: layer.key,
         className: "rs-base-layer-switcher-btn-wrapper",
+        key: layer.key,
         style: {
           /* stylelint-disable-next-line value-keyword-case */
           overflow: hiddenStyle,
@@ -257,10 +257,8 @@ function BaseLayerSwitcher({
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `rs-base-layer-switcher-button${openClass}`,
-          role: "button",
-          title: t(layerName),
           "aria-label": t(layerName),
+          className: `rs-base-layer-switcher-button${openClass}`,
           onClick: (evt) => {
             return onLayerSelect(layer, evt);
           },
@@ -269,8 +267,10 @@ function BaseLayerSwitcher({
               onLayerSelect(layer, evt);
             }
           },
+          role: "button",
           style: imageStyle,
-          tabIndex: switcherOpen ? "0" : "-1"
+          tabIndex: switcherOpen ? "0" : "-1",
+          title: t(layerName)
         },
         /* @__PURE__ */ React.createElement("div", { className: `rs-base-layer-switcher-title${activeClass}` }, t(layerName)),
         imageStyle ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, t(altText))

package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/BaseLayerSwitcher/BaseLayerSwitcher.js"],
-  "sourcesContent": ["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FaChevronLeft } from \"react-icons/fa\";\nimport { Layer } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n  /**\n   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n  /**\n   * Object containing relative paths to the base layer images. Object\n   * keys need to correspond to layer keys\n   */\n  layerImages: PropTypes.objectOf(PropTypes.string),\n\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Alternative text rendered if layer images can't be loaded\n   */\n  altText: PropTypes.string,\n\n  /**\n   * Button titles.\n   */\n  titles: PropTypes.shape({\n    button: PropTypes.string,\n    openSwitcher: PropTypes.string,\n    closeSwitcher: PropTypes.string,\n  }),\n\n  /**\n   * Image (node) rendered in the switcher close button.\n   */\n  closeButtonImage: PropTypes.node,\n\n  /**\n   * Translation function.\n   * @param {function} Translation function returning the translated string.\n   */\n  t: PropTypes.func,\n\n  /**\n   * Callback function on close button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n   */\n  onCloseButtonClick: PropTypes.func,\n\n  /**\n   * Callback function on layer button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.\n   */\n  onLayerButtonClick: PropTypes.func,\n\n  /**\n   * Callback function on main switcher button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n   */\n  onSwitcherButtonClick: PropTypes.func,\n};\n\nconst getVisibleLayer = (layers) => {\n  return layers.find((layer) => {\n    return layer.visible;\n  });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n  const currentIndex = layers.indexOf(\n    layers.find((layer) => {\n      return layer === currentLayer;\n    }),\n  );\n  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n  return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n  return url\n    ? {\n        backgroundImage: `url(${url})`,\n        backgroundSize: \"cover\",\n        backgroundRepeat: \"no-repeat\",\n        backgroundPosition: \"center\",\n      }\n    : null;\n};\n\nfunction CloseButton({ onClick, tabIndex, title, children }) {\n  return (\n    <div\n      className=\"rs-base-layer-switcher-close-btn\"\n      role=\"button\"\n      onClick={onClick}\n      onKeyPress={(e) => {\n        return e.which === 13 && onClick();\n      }}\n      tabIndex={tabIndex}\n      aria-label={title}\n      title={title}\n    >\n      {children}\n    </div>\n  );\n}\n\nCloseButton.propTypes = {\n  onClick: PropTypes.func.isRequired,\n  tabIndex: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  children: PropTypes.node.isRequired,\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n  layers,\n  layerImages = undefined,\n  className = \"rs-base-layer-switcher\",\n  altText = \"Source not found\",\n  titles = {\n    button: \"Base layers\",\n    openSwitcher: \"Open Baselayer-Switcher\",\n    closeSwitcher: \"Close Baselayer-Switcher\",\n  },\n  closeButtonImage = <FaChevronLeft />,\n  onCloseButtonClick = null,\n  onLayerButtonClick = null,\n  onSwitcherButtonClick = null,\n  t = (s) => s,\n}) {\n  const [switcherOpen, setSwitcherOpen] = useState(false);\n  const [isClosed, setIsClosed] = useState(true);\n  const [currentLayer, setCurrentLayer] = useState(\n    getVisibleLayer(layers) || layers[0],\n  );\n\n  /* Images are loaded from props if provided, fallback from layer */\n  const images = layerImages\n    ? Object.keys(layerImages).map((layerImage) => {\n        return layerImages[layerImage];\n      })\n    : layers.map((layer) => {\n        return layer.get(\"previewImage\");\n      });\n\n  const openClass = switcherOpen ? \" rs-open\" : \"\";\n  const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n  const handleSwitcherClick = (evt) => {\n    const nextLayer = layers.find((layer) => {\n      return !layer.visible;\n    });\n    const onButtonClick =\n      layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;\n    if (onButtonClick) {\n      onButtonClick(evt, nextLayer);\n    }\n    if (layers.length === 2) {\n      /* On only two layer options the opener becomes a layer toggle button */\n      if (currentLayer.setVisible) {\n        currentLayer.setVisible(false);\n      } else {\n        currentLayer.visible = false;\n      }\n      setCurrentLayer(nextLayer);\n      if (nextLayer.setVisible) {\n        nextLayer.setVisible(true);\n      } else {\n        nextLayer.visible = true;\n      }\n      return;\n    }\n    // eslint-disable-next-line consistent-return\n    return setSwitcherOpen(true) && setIsClosed(false);\n  };\n\n  const onLayerSelect = (layer, evt) => {\n    if (onLayerButtonClick) {\n      onLayerButtonClick(evt, layer);\n    }\n    if (!switcherOpen) {\n      setSwitcherOpen(true);\n      return;\n    }\n    setCurrentLayer(layer);\n    if (layer.setVisible) {\n      layer.setVisible(true);\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      layer.visible = true;\n    }\n    layers\n      .filter((l) => {\n        return l !== layer;\n      })\n      .forEach((l) => {\n        if (l.setVisible) {\n          l.setVisible(false);\n        } else {\n          // eslint-disable-next-line no-param-reassign\n          l.visible = false;\n        }\n      });\n    setSwitcherOpen(false);\n  };\n\n  /* Get next image for closed button */\n  const nextImage = getNextImage(currentLayer, layers, images);\n\n  useEffect(() => {\n    /* Ensure correct layer is active on app load */\n    if (currentLayer !== getVisibleLayer(layers)) {\n      setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n    }\n  }, [currentLayer, layers]);\n\n  useEffect(() => {\n    /* Used for correct layer image render with animation */\n    let timeout;\n    if (!switcherOpen) {\n      timeout = setTimeout(() => {\n        setIsClosed(true);\n      }, 200);\n    } else {\n      timeout = setTimeout(() => {\n        setIsClosed(false);\n      }, 800);\n    }\n    return () => {\n      return clearTimeout(timeout);\n    };\n  }, [switcherOpen]);\n\n  useEffect(() => {\n    // Update the layer selected when a visibility changes.\n    const olKeys = (layers || []).map((layer) => {\n      return layer.on(\"change:visible\", (evt) => {\n        if (evt.target.visible && currentLayer !== evt.target) {\n          setCurrentLayer(evt.target);\n        }\n      });\n    });\n    return () => {\n      unByKey(olKeys);\n    };\n  }, [currentLayer, layers]);\n\n  if (!layers || layers.length < 2 || !currentLayer) {\n    return null;\n  }\n\n  return (\n    <div className={`${className}${openClass}`}>\n      <div\n        className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n        role=\"button\"\n        title={titles.openSwitcher}\n        aria-label={titles.openSwitcher}\n        onClick={handleSwitcherClick}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            handleSwitcherClick();\n          }\n        }}\n        style={getImageStyle(nextImage)}\n        tabIndex=\"0\"\n      >\n        <div className=\"rs-base-layer-switcher-title\">\n          {layers.length !== 2\n            ? titles.button\n            : layers.find((layer) => {\n                return !layer.visible;\n              }) &&\n              t(\n                layers.find((layer) => {\n                  return !layer.visible;\n                }).name,\n              )}\n        </div>\n        {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n      </div>\n      {layers.map((layer, idx) => {\n        const layerName = layer.name;\n        const activeClass = layerName === currentLayer.name ? \" rs-active\" : \"\";\n        const imageStyle = getImageStyle(\n          layerImages ? layerImages[`${layer.key}`] : layer.get(\"previewImage\"),\n        );\n        return (\n          <div\n            key={layer.key}\n            className=\"rs-base-layer-switcher-btn-wrapper\"\n            style={{\n              /* stylelint-disable-next-line value-keyword-case */\n              overflow: hiddenStyle,\n              /* stylelint-disable-next-line value-keyword-case */\n              zIndex: layers.length - idx,\n            }}\n          >\n            <div\n              className={`rs-base-layer-switcher-button${openClass}`}\n              role=\"button\"\n              title={t(layerName)}\n              aria-label={t(layerName)}\n              onClick={(evt) => {\n                return onLayerSelect(layer, evt);\n              }}\n              onKeyPress={(evt) => {\n                if (evt.which === 13) {\n                  onLayerSelect(layer, evt);\n                }\n              }}\n              style={imageStyle}\n              tabIndex={switcherOpen ? \"0\" : \"-1\"}\n            >\n              <div className={`rs-base-layer-switcher-title${activeClass}`}>\n                {t(layerName)}\n              </div>\n              {imageStyle ? null : (\n                <span className=\"rs-alt-text\">{t(altText)}</span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n      <CloseButton\n        onClick={(evt) => {\n          if (onCloseButtonClick) {\n            onCloseButtonClick(evt);\n          }\n          setSwitcherOpen(false);\n        }}\n        tabIndex={switcherOpen ? \"0\" : \"-1\"}\n        title={titles.closeSwitcher}\n      >\n        {closeButtonImage}\n      </CloseButton>\n    </div>\n  );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\n\nexport default BaseLayerSwitcher;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport { Layer } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\nimport PropTypes from \"prop-types\";\nimport React, { useEffect, useState } from \"react\";\nimport { FaChevronLeft } from \"react-icons/fa\";\n\nconst propTypes = {\n  /**\n   * Alternative text rendered if layer images can't be loaded\n   */\n  altText: PropTypes.string,\n\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Image (node) rendered in the switcher close button.\n   */\n  closeButtonImage: PropTypes.node,\n\n  /**\n   * Object containing relative paths to the base layer images. Object\n   * keys need to correspond to layer keys\n   */\n  layerImages: PropTypes.objectOf(PropTypes.string),\n\n  /**\n   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n  /**\n   * Callback function on close button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n   */\n  onCloseButtonClick: PropTypes.func,\n\n  /**\n   * Callback function on layer button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.\n   */\n  onLayerButtonClick: PropTypes.func,\n\n  /**\n   * Callback function on main switcher button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n   */\n  onSwitcherButtonClick: PropTypes.func,\n\n  /**\n   * Translation function.\n   * @param {function} Translation function returning the translated string.\n   */\n  t: PropTypes.func,\n\n  /**\n   * Button titles.\n   */\n  titles: PropTypes.shape({\n    button: PropTypes.string,\n    closeSwitcher: PropTypes.string,\n    openSwitcher: PropTypes.string,\n  }),\n};\n\nconst getVisibleLayer = (layers) => {\n  return layers.find((layer) => {\n    return layer.visible;\n  });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n  const currentIndex = layers.indexOf(\n    layers.find((layer) => {\n      return layer === currentLayer;\n    }),\n  );\n  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n  return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n  return url\n    ? {\n        backgroundImage: `url(${url})`,\n        backgroundPosition: \"center\",\n        backgroundRepeat: \"no-repeat\",\n        backgroundSize: \"cover\",\n      }\n    : null;\n};\n\nfunction CloseButton({ children, onClick, tabIndex, title }) {\n  return (\n    <div\n      aria-label={title}\n      className=\"rs-base-layer-switcher-close-btn\"\n      onClick={onClick}\n      onKeyPress={(e) => {\n        return e.which === 13 && onClick();\n      }}\n      role=\"button\"\n      tabIndex={tabIndex}\n      title={title}\n    >\n      {children}\n    </div>\n  );\n}\n\nCloseButton.propTypes = {\n  children: PropTypes.node.isRequired,\n  onClick: PropTypes.func.isRequired,\n  tabIndex: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n  altText = \"Source not found\",\n  className = \"rs-base-layer-switcher\",\n  closeButtonImage = <FaChevronLeft />,\n  layerImages = undefined,\n  layers,\n  onCloseButtonClick = null,\n  onLayerButtonClick = null,\n  onSwitcherButtonClick = null,\n  t = (s) => s,\n  titles = {\n    button: \"Base layers\",\n    closeSwitcher: \"Close Baselayer-Switcher\",\n    openSwitcher: \"Open Baselayer-Switcher\",\n  },\n}) {\n  const [switcherOpen, setSwitcherOpen] = useState(false);\n  const [isClosed, setIsClosed] = useState(true);\n  const [currentLayer, setCurrentLayer] = useState(\n    getVisibleLayer(layers) || layers[0],\n  );\n\n  /* Images are loaded from props if provided, fallback from layer */\n  const images = layerImages\n    ? Object.keys(layerImages).map((layerImage) => {\n        return layerImages[layerImage];\n      })\n    : layers.map((layer) => {\n        return layer.get(\"previewImage\");\n      });\n\n  const openClass = switcherOpen ? \" rs-open\" : \"\";\n  const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n  const handleSwitcherClick = (evt) => {\n    const nextLayer = layers.find((layer) => {\n      return !layer.visible;\n    });\n    const onButtonClick =\n      layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;\n    if (onButtonClick) {\n      onButtonClick(evt, nextLayer);\n    }\n    if (layers.length === 2) {\n      /* On only two layer options the opener becomes a layer toggle button */\n      if (currentLayer.setVisible) {\n        currentLayer.setVisible(false);\n      } else {\n        currentLayer.visible = false;\n      }\n      setCurrentLayer(nextLayer);\n      if (nextLayer.setVisible) {\n        nextLayer.setVisible(true);\n      } else {\n        nextLayer.visible = true;\n      }\n      return;\n    }\n    // eslint-disable-next-line consistent-return\n    return setSwitcherOpen(true) && setIsClosed(false);\n  };\n\n  const onLayerSelect = (layer, evt) => {\n    if (onLayerButtonClick) {\n      onLayerButtonClick(evt, layer);\n    }\n    if (!switcherOpen) {\n      setSwitcherOpen(true);\n      return;\n    }\n    setCurrentLayer(layer);\n    if (layer.setVisible) {\n      layer.setVisible(true);\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      layer.visible = true;\n    }\n    layers\n      .filter((l) => {\n        return l !== layer;\n      })\n      .forEach((l) => {\n        if (l.setVisible) {\n          l.setVisible(false);\n        } else {\n          // eslint-disable-next-line no-param-reassign\n          l.visible = false;\n        }\n      });\n    setSwitcherOpen(false);\n  };\n\n  /* Get next image for closed button */\n  const nextImage = getNextImage(currentLayer, layers, images);\n\n  useEffect(() => {\n    /* Ensure correct layer is active on app load */\n    if (currentLayer !== getVisibleLayer(layers)) {\n      setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n    }\n  }, [currentLayer, layers]);\n\n  useEffect(() => {\n    /* Used for correct layer image render with animation */\n    let timeout;\n    if (!switcherOpen) {\n      timeout = setTimeout(() => {\n        setIsClosed(true);\n      }, 200);\n    } else {\n      timeout = setTimeout(() => {\n        setIsClosed(false);\n      }, 800);\n    }\n    return () => {\n      return clearTimeout(timeout);\n    };\n  }, [switcherOpen]);\n\n  useEffect(() => {\n    // Update the layer selected when a visibility changes.\n    const olKeys = (layers || []).map((layer) => {\n      return layer.on(\"change:visible\", (evt) => {\n        if (evt.target.visible && currentLayer !== evt.target) {\n          setCurrentLayer(evt.target);\n        }\n      });\n    });\n    return () => {\n      unByKey(olKeys);\n    };\n  }, [currentLayer, layers]);\n\n  if (!layers || layers.length < 2 || !currentLayer) {\n    return null;\n  }\n\n  return (\n    <div className={`${className}${openClass}`}>\n      <div\n        aria-label={titles.openSwitcher}\n        className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n        onClick={handleSwitcherClick}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            handleSwitcherClick();\n          }\n        }}\n        role=\"button\"\n        style={getImageStyle(nextImage)}\n        tabIndex=\"0\"\n        title={titles.openSwitcher}\n      >\n        <div className=\"rs-base-layer-switcher-title\">\n          {layers.length !== 2\n            ? titles.button\n            : layers.find((layer) => {\n                return !layer.visible;\n              }) &&\n              t(\n                layers.find((layer) => {\n                  return !layer.visible;\n                }).name,\n              )}\n        </div>\n        {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n      </div>\n      {layers.map((layer, idx) => {\n        const layerName = layer.name;\n        const activeClass = layerName === currentLayer.name ? \" rs-active\" : \"\";\n        const imageStyle = getImageStyle(\n          layerImages ? layerImages[`${layer.key}`] : layer.get(\"previewImage\"),\n        );\n        return (\n          <div\n            className=\"rs-base-layer-switcher-btn-wrapper\"\n            key={layer.key}\n            style={{\n              /* stylelint-disable-next-line value-keyword-case */\n              overflow: hiddenStyle,\n              /* stylelint-disable-next-line value-keyword-case */\n              zIndex: layers.length - idx,\n            }}\n          >\n            <div\n              aria-label={t(layerName)}\n              className={`rs-base-layer-switcher-button${openClass}`}\n              onClick={(evt) => {\n                return onLayerSelect(layer, evt);\n              }}\n              onKeyPress={(evt) => {\n                if (evt.which === 13) {\n                  onLayerSelect(layer, evt);\n                }\n              }}\n              role=\"button\"\n              style={imageStyle}\n              tabIndex={switcherOpen ? \"0\" : \"-1\"}\n              title={t(layerName)}\n            >\n              <div className={`rs-base-layer-switcher-title${activeClass}`}>\n                {t(layerName)}\n              </div>\n              {imageStyle ? null : (\n                <span className=\"rs-alt-text\">{t(altText)}</span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n      <CloseButton\n        onClick={(evt) => {\n          if (onCloseButtonClick) {\n            onCloseButtonClick(evt);\n          }\n          setSwitcherOpen(false);\n        }}\n        tabIndex={switcherOpen ? \"0\" : \"-1\"}\n        title={titles.closeSwitcher}\n      >\n        {closeButtonImage}\n      </CloseButton>\n    </div>\n  );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\n\nexport default BaseLayerSwitcher;\n"],
+  "mappings": "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",
   "names": []
 }

package/components/BasicMap/BasicMap.js

@@ -1,13 +1,13 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { defaults as defaultInteractions } from "ol/interaction";
+import { Layer } from "mobility-toolbox-js/ol";
+import OLCollection from "ol/Collection";
 import { equals } from "ol/extent";
+import { defaults as defaultInteractions } from "ol/interaction";
+import Interaction from "ol/interaction/Interaction";
 import OLMap from "ol/Map";
-import OLCollection from "ol/Collection";
-import View from "ol/View";
 import { unByKey } from "ol/Observable";
-import Interaction from "ol/interaction/Interaction";
-import { Layer } from "mobility-toolbox-js/ol";
+import View from "ol/View";
+import PropTypes from "prop-types";
+import React, { PureComponent } from "react";
 const propTypes = {
   /** Map animation options */
   animationOptions: PropTypes.shape({
@@ -15,12 +15,23 @@ const propTypes = {
     resolution: PropTypes.number,
     zoom: PropTypes.number
   }),
+  /** HTML aria-label. */
+  ariaLabel: PropTypes.string,
   /** Center of the [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html). */
   center: PropTypes.arrayOf(PropTypes.number),
   /** Class name of the map container */
   className: PropTypes.string,
   /** Map extent */
   extent: PropTypes.arrayOf(PropTypes.number),
+  /**
+   * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.
+   * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel
+   */
+  featuresClickOptions: PropTypes.shape({
+    checkWrapped: PropTypes.bool,
+    hitTolerance: PropTypes.number,
+    layerFilter: PropTypes.func
+  }),
   /** Openlayers [fit options](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit) when extent is updated */
   fitOptions: PropTypes.object,
   /** Array of [ol/interaction](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Interaction-Interaction.html). */
@@ -38,15 +49,6 @@ const propTypes = {
    * @param {ol.MapBrowserEvent} event The singleclick [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:singleclick).
    */
   onFeaturesClick: PropTypes.func,
-  /**
-   * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.
-   * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel
-   */
-  featuresClickOptions: PropTypes.shape({
-    layerFilter: PropTypes.func,
-    hitTolerance: PropTypes.number,
-    checkWrapped: PropTypes.bool
-  }),
   /**
    * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is hovered.
    * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
@@ -60,17 +62,15 @@ const propTypes = {
   onMapMoved: PropTypes.func,
   /** Map resolution */
   resolution: PropTypes.number,
-  /** The tabIndex of the map. */
-  tabIndex: PropTypes.number,
   /** The style of the map. */
   style: PropTypes.object,
-  /** HTML aria-label. */
-  ariaLabel: PropTypes.string,
+  /** The tabIndex of the map. */
+  tabIndex: PropTypes.number,
   /** [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html) constructor options */
   viewOptions: PropTypes.shape({
-    minZoom: PropTypes.number,
-    maxZoom: PropTypes.number,
     extent: PropTypes.array,
+    maxZoom: PropTypes.number,
+    minZoom: PropTypes.number,
     projection: PropTypes.string
   }),
   /** Map zoom level */
@@ -78,31 +78,31 @@ const propTypes = {
 };
 const defaultProps = {
   animationOptions: void 0,
+  ariaLabel: "map",
   center: [0, 0],
   className: "rs-map",
   extent: void 0,
+  featuresClickOptions: {
+    hitTolerance: 0
+  },
   fitOptions: {
     duration: 1e3,
-    padding: [20, 20, 20, 20],
-    maxZoom: 23
+    maxZoom: 23,
+    padding: [20, 20, 20, 20]
   },
-  style: void 0,
   interactions: null,
   layers: [],
   map: null,
   onFeaturesClick: void 0,
-  featuresClickOptions: {
-    hitTolerance: 0
-  },
   onFeaturesHover: void 0,
   onMapMoved: void 0,
   resolution: void 0,
+  style: void 0,
   tabIndex: void 0,
-  ariaLabel: "map",
   viewOptions: {
-    minZoom: 0,
-    maxZoom: 22,
     extent: void 0,
+    maxZoom: 22,
+    minZoom: 0,
     projection: "EPSG:3857"
   },
   zoom: 1
@@ -110,7 +110,7 @@ const defaultProps = {
 class BasicMap extends PureComponent {
   constructor(props) {
     super(props);
-    const { map, interactions } = this.props;
+    const { interactions, map } = this.props;
     this.map = map || new OLMap({
       controls: [],
       interactions: interactions || defaultInteractions({
@@ -127,10 +127,10 @@ class BasicMap extends PureComponent {
     this.setNode = this.setNode.bind(this);
   }
   componentDidMount() {
-    const { layers, extent, viewOptions, center, zoom, resolution } = this.props;
+    const { center, extent, layers, resolution, viewOptions, zoom } = this.props;
     const { node } = this.state;
     this.map.setTarget(node);
-    this.map.setView(new View({ ...viewOptions, center, zoom, resolution }));
+    this.map.setView(new View({ ...viewOptions, center, resolution, zoom }));
     const viewPort = this.map.getViewport();
     viewPort.style.touchAction = "none";
     viewPort.style.msTouchAction = "none";
@@ -150,12 +150,12 @@ class BasicMap extends PureComponent {
       extent,
       fitOptions,
       layers,
+      onFeaturesClick,
+      onFeaturesHover,
+      onMapMoved,
       resolution,
       viewOptions,
-      zoom,
-      onMapMoved,
-      onFeaturesClick,
-      onFeaturesHover
+      zoom
     } = this.props;
     const { node } = this.state;
     if (prevState.node !== node) {
@@ -212,17 +212,6 @@ class BasicMap extends PureComponent {
   componentWillUnmount() {
     unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);
   }
-  setNode(node) {
-    this.setState({ node });
-  }
-  setLayers(layers = [], prevLayers = []) {
-    for (let i = 0; i < prevLayers.length; i += 1) {
-      this.terminateLayer(prevLayers[i]);
-    }
-    for (let i = 0; i < layers.length; i += 1) {
-      this.initLayer(layers[i]);
-    }
-  }
   initLayer(layer) {
     if (layer.attachToMap) {
       layer.attachToMap(this.map);
@@ -238,21 +227,6 @@ class BasicMap extends PureComponent {
       this.initLayer(layers[i]);
     }
   }
-  terminateLayer(layer) {
-    const layers = layer.children || [];
-    for (let i = 0; i < layers.length; i += 1) {
-      this.terminateLayer(layers[i]);
-    }
-    if (layer.olLayer && this.map.getLayers() && this.map.getLayers().getArray().includes(layer.olLayer)) {
-      this.map.removeLayer(layer.olLayer);
-    }
-    if (layer.terminate) {
-      layer.terminate(this.map);
-    }
-    if (layer.detachFromMap) {
-      layer.detachFromMap(this.map);
-    }
-  }
   listenMoveEnd() {
     const { onMapMoved } = this.props;
     unByKey(this.moveEndRef);
@@ -263,8 +237,19 @@ class BasicMap extends PureComponent {
       return onMapMoved(evt);
     });
   }
+  listenPointerMove() {
+    const { onFeaturesHover } = this.props;
+    unByKey(this.pointerMoveRef);
+    if (!onFeaturesHover) {
+      return;
+    }
+    this.pointerMoveRef = this.map.on("pointermove", (evt) => {
+      const features = evt.map.getFeaturesAtPixel(evt.pixel);
+      onFeaturesHover(features || [], evt);
+    });
+  }
   listenSingleClick() {
-    const { onFeaturesClick, featuresClickOptions } = this.props;
+    const { featuresClickOptions, onFeaturesClick } = this.props;
     unByKey(this.singleClickRef);
     if (!onFeaturesClick) {
       return;
@@ -277,31 +262,46 @@ class BasicMap extends PureComponent {
       onFeaturesClick(features || [], evt);
     });
   }
-  listenPointerMove() {
-    const { onFeaturesHover } = this.props;
-    unByKey(this.pointerMoveRef);
-    if (!onFeaturesHover) {
-      return;
-    }
-    this.pointerMoveRef = this.map.on("pointermove", (evt) => {
-      const features = evt.map.getFeaturesAtPixel(evt.pixel);
-      onFeaturesHover(features || [], evt);
-    });
-  }
   render() {
-    const { className, tabIndex, ariaLabel, style } = this.props;
+    const { ariaLabel, className, style, tabIndex } = this.props;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
+        "aria-label": ariaLabel,
         className,
         ref: this.setNode,
         role: "presentation",
-        "aria-label": ariaLabel,
-        tabIndex,
-        style
+        style,
+        tabIndex
       }
     );
   }
+  setLayers(layers = [], prevLayers = []) {
+    for (let i = 0; i < prevLayers.length; i += 1) {
+      this.terminateLayer(prevLayers[i]);
+    }
+    for (let i = 0; i < layers.length; i += 1) {
+      this.initLayer(layers[i]);
+    }
+  }
+  setNode(node) {
+    this.setState({ node });
+  }
+  terminateLayer(layer) {
+    const layers = layer.children || [];
+    for (let i = 0; i < layers.length; i += 1) {
+      this.terminateLayer(layers[i]);
+    }
+    if (layer.olLayer && this.map.getLayers() && this.map.getLayers().getArray().includes(layer.olLayer)) {
+      this.map.removeLayer(layer.olLayer);
+    }
+    if (layer.terminate) {
+      layer.terminate(this.map);
+    }
+    if (layer.detachFromMap) {
+      layer.detachFromMap(this.map);
+    }
+  }
 }
 BasicMap.propTypes = propTypes;
 BasicMap.defaultProps = defaultProps;