react-spatial 1.5.2 → 1.5.3

package/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js

@@ -0,0 +1,322 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+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';
+
+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.
+   */
+  titles: PropTypes.shape({
+    button: PropTypes.string,
+    openSwitcher: PropTypes.string,
+    closeSwitcher: PropTypes.string,
+  }),
+
+  /**
+   * Image (node) rendered in the switcher close button.
+   */
+  closeButtonImage: PropTypes.node,
+
+  /**
+   * Translation function.
+   * @param {function} Translation function returning the translated string.
+   */
+  t: PropTypes.func,
+};
+
+const defaultProps = {
+  className: 'rs-base-layer-switcher',
+  altText: 'Source not found',
+  titles: {
+    button: 'Base layers',
+    openSwitcher: 'Open Baselayer-Switcher',
+    closeSwitcher: 'Close Baselayer-Switcher',
+  },
+  closeButtonImage: <FaChevronLeft />,
+  layerImages: undefined,
+  t: (s) => {
+    return s;
+  },
+};
+
+const getVisibleLayer = (layers) => {
+  return layers.find((layer) => {
+    return layer.visible;
+  });
+};
+
+const getNextImage = (currentLayer, layers, layerImages) => {
+  const currentIndex = layers.indexOf(
+    layers.find((layer) => {
+      return layer === currentLayer;
+    }),
+  );
+  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;
+  return layerImages[nextIndex];
+};
+
+const getImageStyle = (url) => {
+  return url
+    ? {
+        backgroundImage: `url(${url})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+      }
+    : null;
+};
+
+/**
+ * The BaseLayerSwitcher component renders a button interface for switching the visible
+ * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)
+ * when defined as base layer.
+ */
+
+function BaseLayerSwitcher({
+  layers,
+  layerImages,
+  className,
+  altText,
+  titles,
+  closeButtonImage,
+  t,
+}) {
+  const [switcherOpen, setSwitcherOpen] = useState(false);
+  const [isClosed, setIsClosed] = useState(true);
+  const [currentLayer, setCurrentLayer] = useState(
+    getVisibleLayer(layers) || layers[0],
+  );
+
+  useEffect(() => {
+    // Update the layer selected when a visibility changes.
+    const olKeys = (layers || []).map((layer) => {
+      return layer.on('change:visible', (evt) => {
+        if (evt.target.visible && currentLayer !== evt.target) {
+          setCurrentLayer(evt.target);
+        }
+      });
+    });
+    return () => {
+      unByKey(olKeys);
+    };
+  }, [currentLayer, layers]);
+
+  /* Images are loaded from props if provided, fallback from layer */
+  const images = layerImages
+    ? Object.keys(layerImages).map((layerImage) => {
+        return layerImages[layerImage];
+      })
+    : layers.map((layer) => {
+        return layer.get('previewImage');
+      });
+
+  const openClass = switcherOpen ? ' rs-open' : '';
+  const hiddenStyle = switcherOpen && !isClosed ? 'visible' : 'hidden';
+
+  const handleSwitcherClick = () => {
+    if (layers.length === 2) {
+      /* On only two layer options the opener becomes a layer toggle button */
+      const nextLayer = layers.find((layer) => {
+        return !layer.visible;
+      });
+      if (currentLayer.setVisible) {
+        currentLayer.setVisible(false);
+      } else {
+        currentLayer.visible = false;
+      }
+      setCurrentLayer(nextLayer);
+      if (nextLayer.setVisible) {
+        nextLayer.setVisible(true);
+      } else {
+        nextLayer.visible = true;
+      }
+      return;
+    }
+    // eslint-disable-next-line consistent-return
+    return setSwitcherOpen(true) && setIsClosed(false);
+  };
+
+  const onLayerSelect = (layer) => {
+    if (!switcherOpen) {
+      setSwitcherOpen(true);
+      return;
+    }
+    setCurrentLayer(layer);
+    if (layer.setVisible) {
+      layer.setVisible(true);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      layer.visible = true;
+    }
+    layers
+      .filter((l) => {
+        return l !== layer;
+      })
+      .forEach((l) => {
+        if (l.setVisible) {
+          l.setVisible(false);
+        } else {
+          // eslint-disable-next-line no-param-reassign
+          l.visible = false;
+        }
+      });
+    setSwitcherOpen(false);
+  };
+
+  /* Get next image for closed button */
+  const nextImage = getNextImage(currentLayer, layers, images);
+
+  useEffect(() => {
+    /* Ensure correct layer is active on app load */
+    if (currentLayer !== getVisibleLayer(layers)) {
+      setCurrentLayer(getVisibleLayer(layers) || layers[0]);
+    }
+  }, [currentLayer, layers]);
+
+  useEffect(() => {
+    /* Used for correct layer image render with animation */
+    let timeout;
+    if (!switcherOpen) {
+      timeout = setTimeout(() => {
+        setIsClosed(true);
+      }, 200);
+    } else {
+      timeout = setTimeout(() => {
+        setIsClosed(false);
+      }, 800);
+    }
+    return () => {
+      return clearTimeout(timeout);
+    };
+  }, [switcherOpen]);
+
+  if (!layers || layers.length < 2 || !currentLayer) {
+    return null;
+  }
+
+  const toggleBtn = (
+    <div className="rs-base-layer-switcher-btn-wrapper">
+      <div
+        className="rs-base-layer-switcher-close-btn"
+        role="button"
+        onClick={() => {
+          return setSwitcherOpen(false);
+        }}
+        onKeyPress={(e) => {
+          return e.which === 13 && setSwitcherOpen(false);
+        }}
+        tabIndex={switcherOpen ? '0' : '-1'}
+        aria-label={titles.closeSwitcher}
+        title={titles.closeSwitcher}
+      >
+        {closeButtonImage}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={`${className}${openClass}`}>
+      <div
+        className={`rs-base-layer-switcher-button rs-opener${openClass}`}
+        role="button"
+        title={titles.openSwitcher}
+        aria-label={titles.openSwitcher}
+        onClick={handleSwitcherClick}
+        onKeyPress={(e) => {
+          if (e.which === 13) {
+            handleSwitcherClick();
+          }
+        }}
+        style={getImageStyle(nextImage)}
+        tabIndex="0"
+      >
+        <div className="rs-base-layer-switcher-title">
+          {layers.length !== 2
+            ? titles.button
+            : layers.find((layer) => {
+                return !layer.visible;
+              }) &&
+              t(
+                layers.find((layer) => {
+                  return !layer.visible;
+                }).name,
+              )}
+        </div>
+        {nextImage ? null : <span className="rs-alt-text">{t(altText)}</span>}
+      </div>
+      {layers.map((layer, idx) => {
+        const layerName = layer.name;
+        const activeClass = layerName === currentLayer.name ? ' rs-active' : '';
+        const imageStyle = getImageStyle(
+          layerImages ? layerImages[`${layer.key}`] : layer.get('previewImage'),
+        );
+        return (
+          <div
+            key={layer.key}
+            className="rs-base-layer-switcher-btn-wrapper"
+            style={{
+              /* stylelint-disable-next-line value-keyword-case */
+              overflow: hiddenStyle,
+              /* stylelint-disable-next-line value-keyword-case */
+              zIndex: layers.length - idx,
+            }}
+          >
+            <div
+              className={`rs-base-layer-switcher-button${openClass}`}
+              role="button"
+              title={t(layerName)}
+              aria-label={t(layerName)}
+              onClick={() => {
+                return onLayerSelect(layer);
+              }}
+              onKeyPress={(e) => {
+                if (e.which === 13) {
+                  onLayerSelect(layer);
+                }
+              }}
+              style={imageStyle}
+              tabIndex={switcherOpen ? '0' : '-1'}
+            >
+              <div className={`rs-base-layer-switcher-title${activeClass}`}>
+                {t(layerName)}
+              </div>
+              {imageStyle ? null : (
+                <span className="rs-alt-text">{t(altText)}</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      {toggleBtn}
+    </div>
+  );
+}
+
+BaseLayerSwitcher.propTypes = propTypes;
+BaseLayerSwitcher.defaultProps = defaultProps;
+
+export default BaseLayerSwitcher;

package/src/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Layer } from 'mobility-toolbox-js/ol';
+import { fireEvent, render } from '@testing-library/react';
+import BaseLayerSwitcher from './BaseLayerSwitcher';
+
+describe('BaseLayerSwitcher', () => {
+  let layers;
+  const layerImages = {
+    layerFoo: 'foo',
+    layerBar: 'bar',
+    layerFoobar: 'foobar',
+  };
+
+  beforeEach(() => {
+    layers = [
+      new Layer({
+        name: 'bl1',
+      }),
+      new Layer({
+        name: 'bl2',
+        visible: false,
+      }),
+      new Layer({
+        name: 'bl3',
+        visible: false,
+      }),
+    ];
+  });
+
+  describe('matches snapshots', () => {
+    test('using default properties.', () => {
+      const { container } = render(
+        <BaseLayerSwitcher layers={layers} layerImages={layerImages} />,
+      );
+      expect(container.innerHTML).toMatchSnapshot();
+    });
+  });
+
+  test('the correct baselayer is visible on mount', () => {
+    render(<BaseLayerSwitcher layers={layers} layerImages={layerImages} />);
+    expect(layers[0].visible).toBe(true);
+  });
+
+  test('removes open class and switches layer on click', async () => {
+    const { container } = render(
+      <BaseLayerSwitcher layers={layers} layerImages={layerImages} />,
+    );
+    await fireEvent.click(container.querySelector('.rs-opener'));
+    await fireEvent.click(
+      container.querySelectorAll('.rs-base-layer-switcher-button')[3],
+    );
+    expect(layers[2].visible).toBe(true);
+    expect(!!container.querySelector('.rs-base-layer-switcher rs-open')).toBe(
+      false,
+    );
+  });
+
+  test('toggles base map instead of opening when only two base layers', async () => {
+    const { container } = render(
+      <BaseLayerSwitcher layers={layers.slice(0, 2)} />,
+    );
+    expect(layers[0].visible).toBe(true);
+    await fireEvent.click(container.querySelector('.rs-opener'));
+    expect(layers[1].visible).toBe(true);
+    expect(!!container.querySelector('.rs-base-layer-switcher rs-open')).toBe(
+      false,
+    );
+  });
+});

package/src/components/BaseLayerSwitcher/README.md

@@ -0,0 +1,61 @@
+The following example demonstrates the use of BaseLayerSwitcher:
+
+```jsx
+import React from 'react';
+import Map from 'ol/Map';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import { MapboxLayer, Layer } from 'mobility-toolbox-js/ol';
+import BaseLayerSwitcher from 'react-spatial/components/BaseLayerSwitcher';
+import BasicMap from 'react-spatial/components/BasicMap';
+import osmImage from 'react-spatial/images/baselayer/baselayer.osm.png';
+import travicImage from 'react-spatial/images/baselayer/baselayer.travic.png';
+import basebrightImage from 'react-spatial/images/baselayer/baselayer.basebright.png';
+
+const center = [1149722.7037660484, 6618091.313553318];
+const map = new Map({ controls: [] });
+const travicLayer = new MapboxLayer({
+  url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
+  name: 'Travic',
+  key: 'travic.baselayer',
+  visible: true,
+});
+
+const basebrightLayer = new MapboxLayer({
+  url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`,
+  name: 'Base - Bright',
+  key: 'basebright.baselayer',
+  visible: false,
+});
+
+const osmLayer = new Layer({
+  olLayer: new TileLayer({
+    source: new OSM(),
+  }),
+  name: 'OSM',
+  key: 'osm.baselayer',
+  visible: false,
+});
+
+const layerImages = {
+  'travic.baselayer': travicImage,
+  'basebright.baselayer': basebrightImage,
+  'osm.baselayer': osmImage,
+};
+
+const layers = [travicLayer, basebrightLayer, osmLayer];
+
+<div className="rs-base-layer-example">
+  <BasicMap
+    map={map}
+    center={center}
+    zoom={6}
+    layers={layers}
+    tabIndex={0}
+  />
+  <BaseLayerSwitcher
+    layers={layers}
+    layerImages={layerImages}
+  />
+</div>;
+```

package/src/components/BaseLayerSwitcher/__snapshots__/BaseLayerSwitcher.test.js.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseLayerSwitcher matches snapshots using default properties. 1`] = `
+<div class="rs-base-layer-switcher">
+  <div class="rs-base-layer-switcher-button rs-opener"
+       role="button"
+       title="Open Baselayer-Switcher"
+       aria-label="Open Baselayer-Switcher"
+       style="background-image: url(bar); background-size: cover; background-repeat: no-repeat; background-position: center;"
+       tabindex="0"
+  >
+    <div class="rs-base-layer-switcher-title">
+      Base layers
+    </div>
+  </div>
+  <div class="rs-base-layer-switcher-btn-wrapper"
+       style="overflow: hidden; z-index: 3;"
+  >
+    <div class="rs-base-layer-switcher-button"
+         role="button"
+         title="bl1"
+         aria-label="bl1"
+         tabindex="-1"
+    >
+      <div class="rs-base-layer-switcher-title rs-active">
+        bl1
+      </div>
+      <span class="rs-alt-text">
+        Source not found
+      </span>
+    </div>
+  </div>
+  <div class="rs-base-layer-switcher-btn-wrapper"
+       style="overflow: hidden; z-index: 2;"
+  >
+    <div class="rs-base-layer-switcher-button"
+         role="button"
+         title="bl2"
+         aria-label="bl2"
+         tabindex="-1"
+    >
+      <div class="rs-base-layer-switcher-title">
+        bl2
+      </div>
+      <span class="rs-alt-text">
+        Source not found
+      </span>
+    </div>
+  </div>
+  <div class="rs-base-layer-switcher-btn-wrapper"
+       style="overflow: hidden; z-index: 1;"
+  >
+    <div class="rs-base-layer-switcher-button"
+         role="button"
+         title="bl3"
+         aria-label="bl3"
+         tabindex="-1"
+    >
+      <div class="rs-base-layer-switcher-title">
+        bl3
+      </div>
+      <span class="rs-alt-text">
+        Source not found
+      </span>
+    </div>
+  </div>
+  <div class="rs-base-layer-switcher-btn-wrapper">
+    <div class="rs-base-layer-switcher-close-btn"
+         role="button"
+         tabindex="-1"
+         aria-label="Close Baselayer-Switcher"
+         title="Close Baselayer-Switcher"
+    >
+      <svg stroke="currentColor"
+           fill="currentColor"
+           stroke-width="0"
+           viewbox="0 0 320 512"
+           height="1em"
+           width="1em"
+           xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z">
+        </path>
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/BaseLayerSwitcher/index.js

@@ -0,0 +1 @@
+export { default } from './BaseLayerSwitcher';