react-spatial 1.5.3 → 1.5.5

package/src/components/FeatureExportButton/README.md

@@ -1,76 +0,0 @@
-
-The following example demonstrates the use of FeatureExportButton.
-
-```jsx
-import React from 'react';
-import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import { Icon, Style } from 'ol/style';
-import GPX from 'ol/format/GPX';
-import { geopsTheme, Header, Footer } from '@geops/geops-ui';
-import { ThemeProvider } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import BasicMap from 'react-spatial/components/BasicMap';
-import FeatureExportButton from 'react-spatial/components/FeatureExportButton';
-
-
-const vectorLayer = new Layer({
-  olLayer: new VectorLayer({
-    style: new Style({
-      image: new Icon({
-        anchor: [0.5, 46],
-        anchorXUnits: 'fraction',
-        anchorYUnits: 'pixels',
-        src: 'https://openlayers.org/en/latest/examples/data/icon.png',
-        imgSize: [32, 48]
-      })
-    }),
-    source: new VectorSource({
-      features: [
-        new Feature({
-          geometry: new Point([819103.972418, 6120013.078324]),
-        }),
-        new Feature({
-          geometry: new Point([873838.856313, 6106009.575876]),
-        }),
-      ],
-    }),
-  }),
-});
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
-  }),
-  vectorLayer,
-];
-
-<ThemeProvider theme={geopsTheme}>
-  <div className="rs-feature-export-example">
-    <BasicMap
-      center={[843119.531243, 6111943.000197]}
-      zoom={9}
-      layers={layers}
-      tabIndex={0}
-    />
-    <div className="rs-feature-export-example-btns">
-      <FeatureExportButton layer={vectorLayer}>
-        <Button>
-          Export as KML
-        </Button>
-      </FeatureExportButton>
-      <FeatureExportButton
-        format={GPX}
-        layer={vectorLayer}
-      >
-        <Button>
-          Export as GPX
-        </Button>
-      </FeatureExportButton>
-    </div>
-  </div>
-</ThemeProvider>
-```

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

@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FeatureExportButton should match snapshot should match snapshot with children passed. 1`] = `
-<div
-  className="rs-feature-export-button"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
->
-  <div>
-    Foo
-  </div>
-</div>
-`;
-
-exports[`FeatureExportButton should match snapshot should match snapshot with cutom attributes. 1`] = `
-<div
-  className="foo"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={2}
-  title="bar"
-/>
-`;
-
-exports[`FeatureExportButton should match snapshot with default attributes. 1`] = `
-<div
-  className="rs-feature-export-button"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
-/>
-`;
-
-exports[`FeatureExportButton triggers onClick #createFeatureString() using KMLFormat should export kml by default. 1`] = `
-<kml xmlns="http://www.opengis.net/kml/2.2"
-     xmlns:gx="http://www.google.com/kml/ext/2.2"
-     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-     xsi:schemalocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd"
->
-  <Document>
-    <name>
-      ExportLayer
-    </name>
-    <Placemark>
-      <Style>
-        <IconStyle>
-        <scale>2
-        </scale>
-        <Icon>
-        <href>https://openlayers.org/en/latest/examples/data/icon.png
-        </href>
-        </Icon>
-        </IconStyle>
-      </Style>
-      <Point>
-        <coordinates>
-          7.358136177061042,48.07903229472336
-        </coordinates>
-      </Point>
-    </Placemark>
-  </Document>
-</kml>
-`;

package/src/components/FeatureExportButton/index.js

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

package/src/components/FitExtent/FitExtent.test.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { configure, shallow } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import OLView from 'ol/View';
-import OLMap from 'ol/Map';
-import FitExtent from './FitExtent';
-
-configure({ adapter: new Adapter() });
-
-const extent = [1, 2, 3, 4];
-
-test('Button should match snapshot.', () => {
-  const map = new OLMap({});
-  const component = renderer.create(
-    <FitExtent map={map} extent={extent}>
-      FitExtent
-    </FitExtent>,
-  );
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-test('Should fit the extent.', () => {
-  const map = new OLMap({ view: new OLView({ zoom: 7, center: [0, 0] }) });
-  const wrapper = shallow(
-    <FitExtent map={map} extent={extent} className="fit-ext">
-      FitExtent
-    </FitExtent>,
-  );
-  wrapper.find('.fit-ext').first().simulate('click', {});
-  const calculatedExtent = map.getView().calculateExtent(map.getSize());
-
-  expect(calculatedExtent).toStrictEqual([1, 2, 3, 4]);
-});
-
-test('Should fit the extent on return.', () => {
-  const map = new OLMap({ view: new OLView({ zoom: 7, center: [0, 0] }) });
-  const wrapper = shallow(
-    <FitExtent map={map} extent={extent} className="fit-ext">
-      FitExtent
-    </FitExtent>,
-  );
-  wrapper.find('.fit-ext').first().simulate('click', { which: 13 });
-  const calculatedExtent = map.getView().calculateExtent(map.getSize());
-
-  expect(calculatedExtent).toStrictEqual([1, 2, 3, 4]);
-});

package/src/components/FitExtent/README.md

@@ -1,34 +0,0 @@
-
-The following example demonstrates the use of FitExtent.
-
-```jsx
-import React from 'react';
-import { MapboxLayer } from 'mobility-toolbox-js/ol';
-import Tile from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
-import Map from 'ol/Map';
-import { geopsTheme, Header, Footer } from '@geops/geops-ui';
-import { ThemeProvider } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import FitExtent from 'react-spatial/components/FitExtent';
-import BasicMap from 'react-spatial/components/BasicMap';
-
-const extent = [-15380353.1391, 2230738.2886, -6496535.908, 6927029.2369];
-
-const map = new Map({ controls: [] });
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
-  }),
-];
-
-<ThemeProvider theme={geopsTheme}>
-  <BasicMap map={map} layers={layers} tabIndex={0} />
-  <FitExtent map={map} extent={extent}>
-    <Button>
-      Fit to US
-    </Button>
-  </FitExtent>
-</ThemeProvider>
-```

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

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button should match snapshot. 1`] = `
-<div
-  className="rs-fit-extent"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex="0"
->
-  FitExtent
-</div>
-`;

package/src/components/FitExtent/index.js

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

package/src/components/Geolocation/Geolocation.test.js

@@ -1,267 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { configure, mount, shallow } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-
-import 'jest-canvas-mock';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import MapEvent from 'ol/MapEvent';
-import Geolocation from './Geolocation';
-
-configure({ adapter: new Adapter() });
-
-const geolocationBackup = global.navigator.geolocation;
-
-const mockGeolocation = () => {
-  const mock = {
-    clearWatch: jest.fn(),
-    getCurrentPosition: jest.fn(),
-    watchPosition: (onSuccess) => {
-      onSuccess({
-        coords: {
-          latitude: 47.9913611,
-          longitude: 7.84868,
-          accuracy: 55,
-        },
-        timestamp: 1552660077044,
-      });
-    },
-  };
-
-  global.navigator.geolocation = mock;
-};
-
-const mockMissingGeolocation = () => {
-  delete global.navigator.geolocation;
-};
-
-const restoreGeolocation = () => {
-  global.navigator.geolocation = geolocationBackup;
-};
-
-class CallbackHandler {
-  static onError() {}
-
-  static onSuccess() {}
-
-  static onActivate() {}
-
-  static onDeactivate() {}
-}
-
-describe('Geolocation', () => {
-  let map;
-
-  beforeEach(() => {
-    const target = document.createElement('div');
-    const { style } = target;
-    style.position = 'absolute';
-    style.left = '-1000px';
-    style.top = '-1000px';
-    style.width = '100px';
-    style.height = '100px';
-    document.body.appendChild(target);
-
-    map = new Map({
-      target,
-      view: new View({
-        center: [0, 0],
-        resolutions: [1],
-        zoom: 0,
-      }),
-    });
-    map.renderSync();
-  });
-
-  afterEach(() => {
-    const target = map.getTarget();
-    map.setTarget(null);
-    if (target && target.parentNode) {
-      target.parentNode.removeChild(target);
-    }
-    map.dispose();
-  });
-
-  describe('should match snapshot', () => {
-    test('minimum props', () => {
-      const component = renderer.create(<Geolocation map={map} />);
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('with title', () => {
-      const component = renderer.create(
-        <Geolocation map={map} title="Lokalisieren" />,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('with class name', () => {
-      const component = renderer.create(
-        <Geolocation map={map} className="my-class-name" />,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  test('should use children', () => {
-    mockGeolocation();
-
-    const wrapper = mount(<Geolocation map={map}>test</Geolocation>);
-
-    const text = wrapper.find('.rs-geolocation').first().text();
-
-    expect(text).toBe('test');
-
-    restoreGeolocation();
-  });
-
-  describe('button classes', () => {
-    test('class should be active', () => {
-      mockGeolocation();
-
-      const wrapper = mount(<Geolocation map={map} />);
-      const basic = wrapper.getDOMNode();
-
-      wrapper.find('.rs-geolocation').first().simulate('click');
-
-      expect(basic.className).toBe('rs-geolocation rs-active');
-
-      restoreGeolocation();
-    });
-
-    test('class should not be active', () => {
-      mockGeolocation();
-
-      const wrapper = mount(<Geolocation map={map} />);
-      const basic = wrapper.getDOMNode();
-
-      wrapper
-        .find('.rs-geolocation')
-        .first()
-        .simulate('click')
-        .simulate('click');
-
-      expect(basic.className).toBe('rs-geolocation ');
-
-      restoreGeolocation();
-    });
-  });
-
-  test(`highlight on first toggle`, () => {
-    mockGeolocation();
-
-    const component = shallow(<Geolocation map={map} />);
-    const instance = component.instance();
-    const spy = jest.spyOn(instance, 'highlight');
-    instance.toggle();
-    expect(spy).toHaveBeenCalled();
-
-    restoreGeolocation();
-  });
-
-  test(`success/activate/deactivate callback functions should be called`, () => {
-    mockGeolocation();
-    const spyOnSuccess = jest.spyOn(CallbackHandler, 'onSuccess');
-    const spyOnActivate = jest.spyOn(CallbackHandler, 'onActivate');
-    const spyOnDeactivate = jest.spyOn(CallbackHandler, 'onDeactivate');
-
-    const wrapper = mount(
-      <Geolocation
-        map={map}
-        onSuccess={() => {
-          return CallbackHandler.onSuccess();
-        }}
-        onActivate={() => {
-          return CallbackHandler.onActivate();
-        }}
-        onDeactivate={() => {
-          return CallbackHandler.onDeactivate();
-        }}
-      />,
-    );
-
-    wrapper.find('.rs-geolocation').first().simulate('click');
-
-    expect(spyOnActivate).toHaveBeenCalled();
-    expect(spyOnSuccess).toHaveBeenCalled();
-
-    wrapper.find('.rs-geolocation').first().simulate('click');
-
-    expect(spyOnDeactivate).toHaveBeenCalled();
-
-    restoreGeolocation();
-  });
-
-  test(`error function should be called`, () => {
-    mockMissingGeolocation();
-
-    const spy = jest.spyOn(CallbackHandler, 'onError');
-
-    const wrapper = mount(
-      <Geolocation
-        map={map}
-        onError={() => {
-          return CallbackHandler.onError();
-        }}
-      />,
-    );
-
-    wrapper.find('.rs-geolocation').first().simulate('click');
-
-    expect(spy).toHaveBeenCalled();
-
-    restoreGeolocation();
-  });
-
-  describe('map centering', () => {
-    test('centers map', () => {
-      mockGeolocation();
-
-      const center1 = [742952.8821531708, 6330118.608483334];
-      map.getView().setCenter(center1);
-
-      const component = shallow(<Geolocation map={map} />);
-      component.instance().toggle();
-
-      const center2 = map.getView().getCenter();
-      expect(center1).not.toEqual(center2);
-
-      restoreGeolocation();
-    });
-
-    test('sets isRecenteringToPosition=false after pointerdrag event with the noCenterAfterDrag prop', () => {
-      mockGeolocation();
-
-      const component = shallow(<Geolocation map={map} noCenterAfterDrag />);
-      component.instance().toggle();
-
-      expect(component.instance().isRecenteringToPosition).toEqual(true);
-
-      map.dispatchEvent(new MapEvent('pointerdrag', map));
-      expect(component.instance().isRecenteringToPosition).toEqual(false);
-
-      restoreGeolocation();
-    });
-  });
-
-  test('custom style function', () => {
-    mockGeolocation();
-
-    const styleFunc = jest.fn();
-
-    const component = shallow(
-      <Geolocation map={map} colorOrStyleFunc={styleFunc} />,
-    );
-    const instance = component.instance();
-    instance.toggle();
-    const style = instance.layer.getSource().getFeatures()[0].getStyle();
-
-    expect(style).toBe(styleFunc);
-
-    restoreGeolocation();
-  });
-});

package/src/components/Geolocation/README.md

@@ -1,25 +0,0 @@
-
-The following example demonstrates the use of Geolocation.
-
-```jsx
-import React from 'react';
-import { MapboxLayer } from 'mobility-toolbox-js/ol';
-import Tile from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
-import Map from 'ol/Map';
-import Geolocation from 'react-spatial/components/Geolocation';
-import BasicMap from 'react-spatial/components/BasicMap';
-
-const map = new Map({ controls: [] });
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
-  }),
-];
-
-<div className="rs-geolocation-example">
-  <BasicMap map={map} layers={layers} tabIndex={0} />
-  <Geolocation map={map} />
-</div>
-```

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

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Geolocation should match snapshot minimum props 1`] = `
-<div
-  className="rs-geolocation "
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex="0"
->
-  <svg
-    fill="currentColor"
-    focusable={false}
-    height="1em"
-    stroke="currentColor"
-    strokeWidth="0"
-    style={
-      {
-        "color": undefined,
-      }
-    }
-    viewBox="0 0 512 512"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Geolocation should match snapshot with class name 1`] = `
-<div
-  className="my-class-name "
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex="0"
->
-  <svg
-    fill="currentColor"
-    focusable={false}
-    height="1em"
-    stroke="currentColor"
-    strokeWidth="0"
-    style={
-      {
-        "color": undefined,
-      }
-    }
-    viewBox="0 0 512 512"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Geolocation should match snapshot with title 1`] = `
-<div
-  className="rs-geolocation "
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex="0"
-  title="Lokalisieren"
->
-  <svg
-    fill="currentColor"
-    focusable={false}
-    height="1em"
-    stroke="currentColor"
-    strokeWidth="0"
-    style={
-      {
-        "color": undefined,
-      }
-    }
-    viewBox="0 0 512 512"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
-    />
-  </svg>
-</div>
-`;

package/src/components/Geolocation/index.js

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