react-spatial 1.4.1 → 1.5.2-beta.6

package/pull_request_template.md

@@ -1,16 +0,0 @@
-# How to
-
-<!--  Please provide a test link and quick description how to see the change -->
-
-# Others
-
-<!-- Thanks for the PR! Feel free to add or remove items if there are not necessary. -->
-
-- [ ] It's not a hack or at least an unauthorized hack :).
-- [ ] The images added are optimized.
-- [ ] Everything in ticket description has been fixed.
-- [ ] The author of the MR has made its own review before assigning the reviewer.
-- [ ] The title means something for a human being and follows the [conventional commits](https://www.conventionalcommits.org/) specification.
-- [ ] The title contains [WIP] if it's necessary.
-- [ ] Labels applied. if it's a release? a hotfix?
-- [ ] Tests added.

package/renovate.json

@@ -1,4 +0,0 @@
-{
-  "extends": ["config:js-lib", "schedule:monthly"],
-  "assignees": ["@friedjoff"]
-}

package/scripts/read-pkg-json.js

@@ -1,17 +0,0 @@
-const pjson = require('../package.json');
-
-const { peerDependencies } = pjson;
-
-const packageKeys = Object.keys(peerDependencies);
-
-const arg = process.argv[2];
-
-if (arg === 'add') {
-  console.log(`yarn install --force`);
-} else if (arg === 'remove') {
-  console.log(
-    `rm -rf ${packageKeys.map((p) => `node_modules/${p}`).join(' ')}`,
-  );
-} else {
-  console.log('echo "wrong argument."');
-}

package/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js

@@ -1,322 +0,0 @@
-/* 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

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

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

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

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