react-spatial 1.5.3 → 1.5.5

package/src/components/Overlay/README.md

@@ -1,59 +0,0 @@
-
-The following example demonstrates the use of Overlay.
-
-```jsx
-import React, { useState, useEffect, useRef } from 'react';
-import Overlay from 'react-spatial/components/Overlay';
-
-function OverlayExample() {
-  const [open, setOpen] = useState(true);
-  const [ref, setRef] = useState(null);
-  const refDiv = useRef(null);
-
-  useEffect(() => {
-    setRef(refDiv);
-  }, [refDiv]);
-  
-  return (
-    <div
-      className="tm-overlay-example"
-      ref={refDiv}
-    >
-      <div
-        role="button"
-        className="tm-clickable-feature"
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
-        Toggle Overlay
-      </div>
-      {open && ref ? (
-        <Overlay
-          observe={ref.current}
-          className="tm-overlay-container"
-          mobileSize={{
-              minimalHeight: '25%',
-              maximalHeight: '80%',
-              defaultSize: {
-                height: '40%',
-                width: '100%',
-              },
-            }}
-        >
-          <div
-            role="button"
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            Close Overlay
-          </div>
-        </Overlay>
-      ) : null}
-    </div>
-  );
-}
-
-<OverlayExample />;
-```

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

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Overlay should match snapshot. 1`] = `
-<div
-  className="tm-overlay"
->
-  Test content
-</div>
-`;

package/src/components/Overlay/index.js

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

package/src/components/Permalink/Permalink.test.js

@@ -1,285 +0,0 @@
-import 'jest-canvas-mock';
-import React from 'react';
-import MapEvent from 'ol/MapEvent';
-import OLMap from 'ol/Map';
-import View from 'ol/View';
-import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
-import { act, render } from '@testing-library/react';
-import Permalink from './Permalink';
-
-const defaultIsLayerHidden = (l) => {
-  let isParentHidden = false;
-  let { parent } = l;
-  while (!isParentHidden && parent) {
-    isParentHidden = parent.get('hideInLegend');
-    parent = parent.parent;
-  }
-
-  return l.get('hideInLegend') || isParentHidden;
-};
-
-describe('Permalink', () => {
-  let layers;
-  beforeEach(() => {
-    // Ensure default empty url.
-    window.history.pushState({}, undefined, '/');
-    layers = [
-      new Layer({
-        name: 'Ultimate layer',
-        key: 'ultimate.layer',
-        visible: true,
-        properties: {
-          hideInLegend: true,
-        },
-      }),
-      new Layer({
-        name: 'Swiss boundaries',
-        key: 'swiss.boundaries',
-        visible: false,
-        properties: {
-          hideInLegend: true,
-        },
-      }),
-      new MapboxLayer({
-        name: 'Base - Bright',
-        key: 'basebright.baselayer',
-        group: 'baseLayer',
-        properties: {
-          isBaseLayer: true,
-        },
-      }),
-      new MapboxLayer({
-        name: 'Base - Dark',
-        key: 'basedark.baselayer',
-        visible: false,
-        group: 'baseLayer',
-        properties: {
-          isBaseLayer: true,
-        },
-      }),
-      new Layer({
-        name: 'Layer with children that are hidden',
-        key: 'children.hidden.layer',
-        visible: true,
-        children: [
-          new Layer({
-            name: 'Child 1 hidden',
-            key: 'child.hidden.1',
-            visible: true,
-            properties: {
-              hideInLegend: true,
-            },
-          }),
-          new Layer({
-            name: 'Childr 2 hidden',
-            key: 'child.hidden.2',
-            visible: false,
-            properties: {
-              hideInLegend: true,
-            },
-          }),
-        ],
-      }),
-    ];
-  });
-
-  test('should initialize x, y & z with history.', () => {
-    const history = {
-      replace: jest.fn((v) => {
-        return v;
-      }),
-    };
-
-    const params = {
-      x: 1000,
-      y: 1000,
-      z: 7,
-    };
-
-    const { rerender } = render(
-      <Permalink params={params} history={history} />,
-    );
-
-    act(() => {
-      rerender(
-        <Permalink
-          params={{
-            x: 1001,
-            y: 1002,
-            z: 7,
-          }}
-          history={history}
-        />,
-      );
-    });
-    const search = '?x=1001&y=1002&z=7';
-
-    expect(history.replace.mock.results[1].value.search).toEqual(search);
-  });
-
-  test('should initialize x, y & z Permalink without history.', () => {
-    const params = {
-      x: 1000,
-      y: 1000,
-      z: 7,
-    };
-
-    const { rerender } = render(<Permalink params={params} />);
-    act(() => {
-      rerender(
-        <Permalink
-          params={{
-            x: 1001,
-            y: 1002,
-            z: 7,
-          }}
-        />,
-      );
-    });
-    const search = '?x=1001&y=1002&z=7';
-
-    expect(window.location.search).toEqual(search);
-  });
-
-  test('should initialize Permalink with layers.', () => {
-    expect(window.location.search).toEqual('');
-    render(<Permalink layers={layers} />);
-    const search =
-      '?baselayers=basebright.baselayer,basedark.baselayer&layers=ultimate.layer,child.hidden.1';
-    expect(window.location.search).toEqual(search);
-  });
-
-  test('should initialize Permalink with isLayerHidden.', () => {
-    expect(window.location.search).toEqual('');
-    render(<Permalink layers={layers} isLayerHidden={defaultIsLayerHidden} />);
-    const search =
-      '?baselayers=basebright.baselayer,basedark.baselayer&layers=children.hidden.layer';
-    expect(window.location.search).toEqual(search);
-  });
-
-  test('should initialize Permalink with map.', () => {
-    expect(window.location.search).toEqual('');
-    const olMap = new OLMap({
-      controls: [],
-      view: new View({
-        center: [1001, 1002],
-        zoom: 5,
-      }),
-    });
-    render(<Permalink map={olMap} />);
-    act(() => {
-      olMap.dispatchEvent(new MapEvent('moveend', olMap));
-    });
-    const search = '?x=1001&y=1002&z=5';
-
-    expect(window.location.search).toEqual(search);
-  });
-
-  test('should limit 2 decimals by default for x, y.', () => {
-    expect(window.location.search).toEqual('');
-    const olMap = new OLMap({
-      controls: [],
-      view: new View({
-        center: [10010.555555, 10010.5555555],
-        zoom: 5,
-      }),
-    });
-    render(<Permalink map={olMap} />);
-
-    act(() => {
-      olMap.dispatchEvent(new MapEvent('moveend', olMap));
-    });
-
-    const search = '?x=10010.56&y=10010.56&z=5';
-
-    expect(window.location.search).toEqual(search);
-  });
-
-  test('should round values x & y ".00" for readability.', () => {
-    expect(window.location.search).toEqual('');
-    const olMap = new OLMap({
-      controls: [],
-      view: new View({
-        center: [10010.99999, 1001.000001],
-        zoom: 5,
-      }),
-    });
-    render(<Permalink map={olMap} />);
-    act(() => {
-      olMap.dispatchEvent(new MapEvent('moveend', olMap));
-    });
-    expect(window.location.search).toEqual('?x=10011&y=1001&z=5');
-  });
-
-  test('should limit 4 decimals with props "coordinateDecimals".', () => {
-    expect(window.location.search).toEqual('');
-    const olMap = new OLMap({
-      controls: [],
-      view: new View({
-        center: [10010.555555, 10010.5555555],
-        zoom: 5,
-      }),
-    });
-    render(<Permalink map={olMap} coordinateDecimals={4} />);
-    act(() => {
-      olMap.dispatchEvent(new MapEvent('moveend', olMap));
-    });
-
-    expect(window.location.search).toEqual('?x=10010.5556&y=10010.5556&z=5');
-  });
-
-  test('should react on layers change.', () => {
-    expect(window.location.search).toEqual('');
-    const { rerender } = render(<Permalink layers={layers} />);
-    let layersParam = new URLSearchParams(window.location.search).get('layers');
-    expect(layersParam).toBe('ultimate.layer,child.hidden.1');
-    rerender(
-      <Permalink
-        layers={[
-          new Layer({
-            name: 'foo',
-            key: 'foo.layer',
-          }),
-        ]}
-      />,
-    );
-
-    layersParam = new URLSearchParams(window.location.search).get('layers');
-    expect(layersParam).toBe('foo.layer');
-  });
-
-  test('should react on layer visiblity change.', () => {
-    expect(window.location.search).toEqual('');
-    render(<Permalink layers={layers} />);
-    let layersParam = new URLSearchParams(window.location.search).get('layers');
-    expect(layersParam).toBe('ultimate.layer,child.hidden.1');
-
-    act(() => {
-      layers.find((l) => {
-        return l.name === 'Swiss boundaries';
-      }).visible = true;
-    });
-
-    layersParam = new URLSearchParams(window.location.search).get('layers');
-    expect(layersParam).toBe('ultimate.layer,swiss.boundaries,child.hidden.1');
-  });
-
-  test('should react on base layer visiblity change.', () => {
-    expect(window.location.search).toEqual('');
-    render(<Permalink layers={layers} />);
-
-    let baseLayers = new URLSearchParams(window.location.search).get(
-      'baselayers',
-    );
-    expect(baseLayers).toBe('basebright.baselayer,basedark.baselayer');
-
-    act(() => {
-      layers.find((l) => {
-        return l.name === 'Base - Dark';
-      }).visible = true;
-    });
-
-    baseLayers = new URLSearchParams(window.location.search).get('baselayers');
-    expect(baseLayers).toBe('basedark.baselayer,basebright.baselayer');
-  });
-});

package/src/components/Permalink/README.md

@@ -1,105 +0,0 @@
-
-The following example demonstrates the use of Permalink.
-
-```jsx
-import React from 'react';
-import VectorSource from 'ol/source/Vector';
-import VectorLayer from 'ol/layer/Vector';
-import { Style, Circle, Stroke, Fill } from 'ol/style';
-import GeoJSONFormat from 'ol/format/GeoJSON';
-import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
-import Button from '@material-ui/core/Button';
-import Permalink from 'react-spatial/components/Permalink';
-import BasicMap from 'react-spatial/components/BasicMap';
-import Map from 'ol/Map';
-
-const map = new Map({ controls: [] });
-
-const swissBoundries = new Layer({
-  name: 'Swiss boundaries',
-  key: 'swiss.boundaries',
-  visible: true,
-  olLayer: new VectorLayer({
-    source: new VectorSource({
-      url: 'https://raw.githubusercontent.com/openlayers/openlayers/' +
-            '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' +
-            'switzerland.geojson',
-      format: new GeoJSONFormat(),
-    }),
-    style: new Style({
-      image: new Circle({
-        radius: 5,
-        fill: new Fill({
-          color: '#ff0000',
-        }),
-      }),
-      stroke: new Stroke({
-          color: '#ffcc33',
-          width: 2,
-        }),
-      }),
-    })
-});
-
-const baseLayers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`,
-    name: 'Base - Bright',
-    key: 'basebright.baselayer',
-  }),
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${apiKey}`,
-    name: 'Base - Dark',
-    key: 'basedark.baselayer',
-    visible: false,
-  }),
-];
-
-const layers = [...baseLayers, swissBoundries];
-
-<div className="rs-permalink-example">
-  <BasicMap center={[876887.69, 5928515.41]} map={map} layers={layers} tabIndex={0} zoom={5} />
-  <Permalink
-    map={map}
-    layers={layers}
-    params={{
-      mode: 'custom',
-    }}
-    isBaseLayer={l=>{
-      return baseLayers.includes(l);
-    }}
-    isLayerHidden={l => {
-        let hasParentHidden = false;
-        let { parent } = l;
-        while (!hasParentHidden && parent) {
-          hasParentHidden = parent.get('hideInLegend');
-          parent = parent.parent;
-        }        
-        return l.get('hideInLegend') || hasParentHidden;
-    }}
-  />
-  <div className="rs-permalink-example-btns">
-    <Button
-      onClick={() => {
-        swissBoundries.visible = !swissBoundries.visible;
-      }}
-    >
-      Toggle Switzerland layer
-    </Button>
-    <Button
-      onClick={() => {
-      if (baseLayers[1].visible) {
-        baseLayers[0].visible = true;
-        baseLayers[1].visible = false;
-      } else {
-        baseLayers[0].visible = false;
-        baseLayers[1].visible = true;
-      }
-      map.updateSize();
-    }}
-    >
-      Change base layer
-    </Button>
-  </div>
-</div>;
-```

package/src/components/Permalink/index.js

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