react-spatial 1.4.1 → 1.5.2-beta.6

package/src/components/Popup/Popup.test.js

@@ -1,307 +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 OLMap from 'ol/Map';
-import View from 'ol/View';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import Line from 'ol/geom/LineString';
-import Popup from './Popup';
-
-let map;
-
-configure({ adapter: new Adapter() });
-
-const feat = new Feature({
-  geometry: new Point([1000, 1000]),
-});
-
-const featLine = new Feature({
-  geometry: new Line([
-    [1000, 1000],
-    [2000, 2000],
-  ]),
-});
-
-describe('Popup', () => {
-  beforeEach(() => {
-    map = new OLMap({});
-  });
-
-  describe('should match snapshot', () => {
-    test('without feature', () => {
-      const component = renderer.create(
-        <Popup map={map}>
-          <div id="foo" />
-        </Popup>,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('with default values.', () => {
-      const component = renderer.create(
-        <Popup map={map} feature={feat}>
-          <div id="foo" />
-        </Popup>,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('without close button.', () => {
-      const component = renderer.create(
-        <Popup
-          map={map}
-          feature={feat}
-          renderCloseButton={() => {
-            return null;
-          }}
-        >
-          <div id="bar" />
-        </Popup>,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('without header.', () => {
-      const component = renderer.create(
-        <Popup
-          map={map}
-          feature={feat}
-          renderHeader={() => {
-            return null;
-          }}
-        >
-          <div id="bar" />
-        </Popup>,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('with tabIndex defined.', () => {
-      const component = renderer.create(
-        <Popup map={map} feature={feat} tabIndex="0">
-          <div id="bar" />
-        </Popup>,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  [
-    ['click', {}],
-    ['keypress', { which: 13 }],
-  ].forEach((evt) => {
-    test(`should trigger onCloseClick function on ${evt[0]} event.`, () => {
-      const spy = jest.fn(() => {});
-
-      const component = mount(
-        <Popup map={map} feature={feat} onCloseClick={spy}>
-          <div id="gux" />
-        </Popup>,
-      );
-
-      component
-        .find('div')
-        .at(3)
-        .simulate(...evt);
-      expect(spy).toHaveBeenCalled();
-    });
-
-    test(`should trigger default onCloseClick function on ${evt[0]} event without errors.`, () => {
-      const component = mount(
-        <Popup map={map} feature={feat}>
-          <div id="gux" />
-        </Popup>,
-      );
-      // test if no js error triggered by the default value
-      try {
-        component
-          .find('div')
-          .at(3)
-          .simulate(...evt);
-        expect(true).toBe(true);
-      } catch (e) {
-        expect(false).toBe(true);
-      }
-    });
-  });
-
-  describe(`init position`, () => {
-    test(`using popupCoordinate.`, () => {
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10010, 100200];
-      });
-      const component = mount(
-        <Popup map={map} popupCoordinate={[1001, 1002]}>
-          <div id="gux" />
-        </Popup>,
-      );
-      expect(component.state().left).toBe(10010);
-      expect(component.state().top).toBe(100200);
-      component.setProps({ feature: featLine });
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10011, 100100];
-      });
-      component.setProps({ popupCoordinate: [1009, 1009] });
-      expect(component.state().left).toBe(10011);
-      expect(component.state().top).toBe(100100);
-    });
-
-    test(`using feature.`, () => {
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10010, 100200];
-      });
-      const component = mount(
-        <Popup map={map} feature={feat}>
-          <div id="gux" />
-        </Popup>,
-      );
-      expect(component.state().left).toBe(10010);
-      expect(component.state().top).toBe(100200);
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10011, 100100];
-      });
-      component.setProps({ feature: featLine });
-      expect(component.state().left).toBe(10011);
-      expect(component.state().top).toBe(100100);
-    });
-  });
-
-  describe(`updates position`, () => {
-    test(`on map postrender event.`, () => {
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10, 200];
-      });
-      const component = shallow(
-        <Popup map={map} feature={feat}>
-          <div id="gux" />
-        </Popup>,
-      );
-      const spy = jest.spyOn(component.instance(), 'updatePixelPosition');
-      map.dispatchEvent({ type: 'postrender' });
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe(`#panIntoView`, () => {
-    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 OLMap({
-        target,
-        view: new View({
-          center: [1000, 1000],
-          resolutions: [1],
-          zoom: 0,
-        }),
-      });
-      map.renderSync();
-    });
-
-    afterEach(() => {
-      const target = map.getTarget();
-      map.setTarget(null);
-      if (target && target.parentNode) {
-        target.parentNode.removeChild(target);
-      }
-      map.dispose();
-    });
-
-    test(`animate the map.`, () => {
-      map.getTarget().getBoundingClientRect = jest.fn(() => {
-        return {
-          bottom: -10,
-          left: 5,
-          right: -5,
-          top: 5,
-        };
-      });
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10, 20];
-      });
-      const spy = jest.spyOn(map.getView(), 'animate');
-      mount(
-        <Popup map={map} feature={feat} panIntoView>
-          <div id="gux" />
-        </Popup>,
-      );
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({
-        center: [1005, 990],
-        duration: 500,
-      });
-    });
-
-    test(`using panRect`, () => {
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10, 200];
-      });
-      const spy = jest.spyOn(map.getView(), 'animate');
-      mount(
-        <Popup
-          map={map}
-          feature={feat}
-          panIntoView
-          panRect={{ top: 0, left: 0, bottom: -10, right: 0 }}
-        >
-          <div id="gux" />
-        </Popup>,
-      );
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({
-        center: [1000, 990],
-        duration: 500,
-      });
-    });
-
-    test(`doesn't animate the map`, () => {
-      map.getPixelFromCoordinate = jest.fn(() => {
-        return [10, 200];
-      });
-      const spy = jest.spyOn(map.getView(), 'animate');
-      mount(
-        <Popup
-          map={map}
-          feature={feat}
-          panIntoView
-          panRect={{ top: 0, left: 0, bottom: 0, right: 0 }}
-        >
-          <div id="gux" />
-        </Popup>,
-      );
-      expect(spy).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  test(`deregisters postrender on unmount.`, () => {
-    map.getPixelFromCoordinate = jest.fn(() => {
-      return [10, 200];
-    });
-    const component = shallow(
-      <Popup map={map} feature={featLine}>
-        <div id="gux" />
-      </Popup>,
-    );
-    const spy = jest.spyOn(component.instance(), 'updatePixelPosition');
-    map.dispatchEvent({ type: 'postrender' });
-    expect(spy).toHaveBeenCalledTimes(1);
-    component.unmount();
-    map.dispatchEvent({ type: 'postrender' });
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/Popup/README.md

@@ -1,93 +0,0 @@
-
-The following example demonstrates the use of Popup.
-
-```jsx
-import React, { useState, useMemo, useCallback } from 'react';
-import { Layer, MapboxLayer} from 'mobility-toolbox-js/ol';
-import VectorLayer from 'ol/layer/Vector';
-import { Map, Feature } from 'ol';
-import Point from 'ol/geom/Point';
-import OSM from 'ol/source/OSM';
-import VectorSource from 'ol/source/Vector';
-import TileGrid from 'ol/tilegrid/TileGrid';
-import { getCenter } from 'ol/extent';
-import { Style, Circle, Fill, Icon } from 'ol/style';
-import BasicMap from 'react-spatial/components/BasicMap';
-import Popup from 'react-spatial/components/Popup';
-
-const map = new Map({ controls: [] });
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${apiKey}`,
-  }),
-  new Layer({
-    olLayer: new VectorLayer({
-      source: new VectorSource({
-        features: [
-          new Feature({
-            geometry: new Point([874105.13, 6106172.77]),
-          }),
-          new Feature({
-            geometry: new Point([873105.13, 6106172.77]),
-          }),
-        ],
-      }),
-      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]
-        }),
-      }),
-    }),
-  }),
-];
-
-
-function PopupExample() {
-  const [featureClicked, setFeatureClicked] = useState();
-
-  const content = useMemo(() => {
-    return featureClicked &&
-    featureClicked
-      .getGeometry()
-      .getCoordinates()
-      .toString();
-  }, [featureClicked]);
-
-  const onFeaturesClick = useCallback((features) => {
-    setFeatureClicked(features.length ? features[0] : null);
-  }, []);
-
-  const onCloseClick = useCallback(()=> {
-    setFeatureClicked(null);
-  }, []);
-
-  return (
-    <div className="rs-popup-example">
-      <BasicMap
-        map={map}
-        center={[874105.13, 6106172.77]}
-        zoom={17}
-        layers={layers}
-        onFeaturesClick={onFeaturesClick}
-        tabIndex={0}
-      />
-      <Popup
-        map={map}
-        header="Geometry"
-        feature={featureClicked}
-        onCloseClick={onCloseClick}
-        panIntoView
-      >
-        <div>{content}</div>
-      </Popup>
-    </div>
-  );
-}
-
-<PopupExample />;
-```

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

@@ -1,180 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popup should match snapshot with default values. 1`] = `
-<div
-  className="rs-popup"
-  style={
-    {
-      "left": 0,
-      "top": 0,
-    }
-  }
->
-  <div
-    className="rs-popup-container"
-    tabIndex=""
-  >
-    <div
-      className="rs-popup-header"
-    >
-      <div
-        aria-label="Close"
-        className="rs-popup-close-bt"
-        onClick={[Function]}
-        onKeyPress={[Function]}
-        role="button"
-        tabIndex={0}
-        title="Close"
-      >
-        <svg
-          fill="currentColor"
-          focusable={false}
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          />
-        </svg>
-      </div>
-    </div>
-    <div
-      className="rs-popup-body"
-    >
-      <div
-        id="foo"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Popup should match snapshot with tabIndex defined. 1`] = `
-<div
-  className="rs-popup"
-  style={
-    {
-      "left": 0,
-      "top": 0,
-    }
-  }
->
-  <div
-    className="rs-popup-container"
-    tabIndex="0"
-  >
-    <div
-      className="rs-popup-header"
-    >
-      <div
-        aria-label="Close"
-        className="rs-popup-close-bt"
-        onClick={[Function]}
-        onKeyPress={[Function]}
-        role="button"
-        tabIndex={0}
-        title="Close"
-      >
-        <svg
-          fill="currentColor"
-          focusable={false}
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          />
-        </svg>
-      </div>
-    </div>
-    <div
-      className="rs-popup-body"
-    >
-      <div
-        id="bar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Popup should match snapshot without close button. 1`] = `
-<div
-  className="rs-popup"
-  style={
-    {
-      "left": 0,
-      "top": 0,
-    }
-  }
->
-  <div
-    className="rs-popup-container"
-    tabIndex=""
-  >
-    <div
-      className="rs-popup-header"
-    />
-    <div
-      className="rs-popup-body"
-    >
-      <div
-        id="bar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Popup should match snapshot without feature 1`] = `null`;
-
-exports[`Popup should match snapshot without header. 1`] = `
-<div
-  className="rs-popup"
-  style={
-    {
-      "left": 0,
-      "top": 0,
-    }
-  }
->
-  <div
-    className="rs-popup-container"
-    tabIndex=""
-  >
-    <div
-      className="rs-popup-body"
-    >
-      <div
-        id="bar"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/Popup/index.js

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

package/src/components/README.md

@@ -1,41 +0,0 @@
-# Components
-
-This folder contains all the components.
-
-## Create a new component
-
-Each component must have this structure:
-
-```bash
-src/
-    components/
-        MyCategory/
-            MyComponent/
-                index.js            // ES module export.
-                MyComponent.js      // The JSX component WITHOUT hardcoded classNames !!!!
-                MyComponent.test.js // The test file with at least snapshots tests.
-                MyComponent.scss    // A sass file with default CSS when the main html element of MyComponent uses rs-mycomponent CSS class.
-                README.md           // The MyComponentExample component of use to display in the doc.
-                MyComponent.md.scss // A sass file for the MyComponentExample component used in README.md
-```
-
-Some rules must be followed:
-
-- a component must allow to provide a className to the main html element of the component.
-- a component must be controlled by his parent via props.
-- a component must use `children` property instead of `renderXXX` functions when possible.
-- a component must propagate basic props `<NewComp {...this.props}>` when possible.
-- a component must have tests.
-- a component can provide a translation function using a `t` property.
-- default props must have a value or `undefined` (no `null` otherwise the attribute is created in the snapshot).
-- no redux stuff.
-- no hardcoded `className`, only in default props.
-- no translation library specific stuff.
-
-## Create a new component from another
-
-```bash
-yarn cp
-```
-
-then follow the guide.