react-spatial 1.5.3 → 1.5.4

package/src/components/StopsFinder/StopsFinder.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { Map } from 'ol';
-import StopsFinder from '.';
-
-describe('StopsFinder', () => {
-  let map;
-
-  beforeEach(() => {
-    map = new Map({});
-  });
-
-  test('matches snapshots.', () => {
-    const component = renderer.create(<StopsFinder map={map} />);
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-});

package/src/components/StopsFinder/StopsFinderOption.js

@@ -1,61 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core';
-
-const ext = '_round-blue-01.svg';
-const iconForMot = {};
-[
-  'bus',
-  'ferry',
-  'gondola',
-  'tram',
-  'rail',
-  'funicular',
-  'cable_car',
-  'subway',
-].forEach((mot) => {
-  iconForMot[mot] = lazy(() => {
-    return import(`../../images/mots/${mot}${ext}`);
-  });
-});
-
-const useStyles = makeStyles((theme) => {
-  return {
-    flex: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    icon: {
-      marginRight: theme.spacing(2),
-    },
-  };
-});
-
-function StopsFinderOption({ option }) {
-  const classes = useStyles();
-
-  return (
-    <Suspense fallback={<div />}>
-      <div className={classes.flex}>
-        {Object.entries(option.properties.mot).map(([key, value]) => {
-          if (value) {
-            const MotIcon = iconForMot[key];
-            return (
-              <span className={classes.icon} key={key}>
-                <MotIcon />
-              </span>
-            );
-          }
-          return <></>;
-        })}
-        <span>{option.properties.name}</span>
-      </div>
-    </Suspense>
-  );
-}
-
-StopsFinderOption.propTypes = {
-  option: PropTypes.object.isRequired,
-};
-
-export default React.memo(StopsFinderOption);

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

@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StopsFinder matches snapshots. 1`] = `
-<div
-  aria-expanded={false}
-  aria-owns={null}
-  className="MuiAutocomplete-root MuiAutocomplete-fullWidth MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  role="combobox"
->
-  <div
-    className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-  >
-    <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-      data-shrink={false}
-      id="undefined-label"
-    >
-      Search stops
-    </label>
-    <div
-      className="MuiInputBase-root MuiInput-root MuiInput-underline MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
-      onClick={[Function]}
-    >
-      <input
-        aria-activedescendant={null}
-        aria-autocomplete="both"
-        aria-controls={null}
-        aria-invalid={false}
-        autoCapitalize="none"
-        autoComplete="off"
-        autoFocus={false}
-        className="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd"
-        disabled={false}
-        onAnimationStart={[Function]}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        required={false}
-        spellCheck="false"
-        type="text"
-        value=""
-      />
-      <div
-        className="MuiAutocomplete-endAdornment"
-      >
-        <button
-          aria-label="Clear"
-          className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-clearIndicator"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragLeave={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          tabIndex={-1}
-          title="Clear"
-          type="button"
-        >
-          <span
-            className="MuiIconButton-label"
-          >
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <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>
-          </span>
-        </button>
-        <button
-          aria-label="Open"
-          className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-popupIndicator"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onDragLeave={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          tabIndex={-1}
-          title="Open"
-          type="button"
-        >
-          <span
-            className="MuiIconButton-label"
-          >
-            <svg
-              fill="currentColor"
-              focusable={false}
-              height={15}
-              stroke="currentColor"
-              strokeWidth="0"
-              style={
-                {
-                  "color": undefined,
-                }
-              }
-              viewBox="0 0 512 512"
-              width={15}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/StopsFinder/index.js

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

package/src/components/Zoom/README.md

@@ -1,25 +0,0 @@
-
-The following example demonstrates the use of Zoom.
-
-```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 BasicMap from 'react-spatial/components/BasicMap';
-import Zoom from 'react-spatial/components/Zoom';
-
-const map = new Map({ controls: [] });
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
-  })
-];
-
-<div className="rs-zoom-example">
-  <BasicMap map={map} layers={layers} tabIndex={0} />
-  <Zoom map={map} zoomSlider />
-</div>
-```

package/src/components/Zoom/Zoom.js

@@ -1,180 +0,0 @@
-import React, {
-  useEffect,
-  useRef,
-  useCallback,
-  useState,
-  useMemo,
-} from 'react';
-import PropTypes from 'prop-types';
-import { FaPlus, FaMinus } from 'react-icons/fa';
-import { ZoomSlider } from 'ol/control';
-import OLMap from 'ol/Map';
-import { easeOut } from 'ol/easing';
-import { unByKey } from 'ol/Observable';
-
-const propTypes = {
-  /**
-   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
-   */
-  map: PropTypes.instanceOf(OLMap).isRequired,
-
-  /**
-   * The zoom delta applied on each click.
-   */
-  delta: PropTypes.number,
-
-  /**
-   * Titles HTML attribtues for button.
-   */
-  titles: PropTypes.shape({
-    zoomIn: PropTypes.string,
-    zoomOut: PropTypes.string,
-  }),
-
-  /**
-   * Children content of the zoom in button.
-   */
-  zoomInChildren: PropTypes.node,
-
-  /**
-   * Children content of the zoom out button.
-   */
-  zoomOutChildren: PropTypes.node,
-
-  /**
-   * Display a slider to zoom.
-   */
-  zoomSlider: PropTypes.bool,
-};
-
-const defaultProps = {
-  titles: {
-    zoomIn: 'Zoom in',
-    zoomOut: 'Zoom out',
-  },
-  zoomInChildren: <FaPlus focusable={false} />,
-  zoomOutChildren: <FaMinus focusable={false} />,
-  zoomSlider: false,
-  delta: 1,
-};
-
-const updateZoom = (map, delta) => {
-  const view = map.getView();
-  const currentZoom = view.getZoom();
-  const newZoom = currentZoom + delta;
-  const constrainedZoom = view.getConstrainedZoom(newZoom);
-  if (view.getAnimating()) {
-    view.cancelAnimations();
-  }
-  view.animate({
-    zoom: constrainedZoom,
-    duration: 250,
-    easing: easeOut,
-  });
-};
-
-/**
- * The Zoom component creates a zoom wrapper containing zoom-in and zoom-out buttons
- * and an optional [ol/ZoomSlider](https://openlayers.org/en/latest/apidoc/module-ol_control_ZoomSlider-ZoomSlider.html).
- */
-function Zoom({
-  map,
-  titles,
-  zoomInChildren,
-  zoomOutChildren,
-  zoomSlider,
-  delta,
-  ...other
-}) {
-  const ref = useRef();
-  const [currentZoom, setZoom] = useState();
-
-  const zoomIn = useCallback(
-    (evt) => {
-      if (!evt.which || evt.which === 13) {
-        updateZoom(map, delta);
-      }
-    },
-    [delta, map],
-  );
-
-  const zoomOut = useCallback(
-    (evt) => {
-      if (!evt.which || evt.which === 13) {
-        updateZoom(map, -delta);
-      }
-    },
-    [delta, map],
-  );
-
-  const zoomInDisabled = useMemo(() => {
-    return (
-      currentZoom >=
-      map.getView().getConstrainedZoom(map.getView().getMaxZoom())
-    );
-  }, [currentZoom, map]);
-
-  const zoomOutDisabled = useMemo(() => {
-    return (
-      currentZoom <=
-      map.getView().getConstrainedZoom(map.getView().getMinZoom())
-    );
-  }, [currentZoom, map]);
-
-  useEffect(() => {
-    // Trigger zoom update to disable zooms on max and min
-    const listenerKey = map.on('moveend', () => {
-      setZoom(map.getView().getZoom());
-    });
-
-    let control;
-    if (zoomSlider && ref.current) {
-      control = new ZoomSlider();
-      // We don't want to navigate to the zoom slider using TAB navigation.
-      control.element.firstElementChild.tabIndex = -1;
-      // Set the zoom slider in the custom control wrapper.
-      control.setTarget(ref.current);
-      map.addControl(control);
-    }
-    return () => {
-      unByKey(listenerKey);
-      if (control) {
-        map.removeControl(control);
-      }
-    };
-  }, [map, zoomSlider]);
-
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div className="rs-zooms-bar" {...other}>
-      <button
-        type="button"
-        tabIndex={0}
-        className="rs-zoom-in"
-        title={titles.zoomIn}
-        onClick={zoomIn}
-        onKeyPress={zoomIn}
-        disabled={zoomInDisabled}
-      >
-        {zoomInChildren}
-      </button>
-      {zoomSlider ? <div className="rs-zoomslider-wrapper" ref={ref} /> : null}
-      <button
-        type="button"
-        tabIndex={0}
-        className="rs-zoom-out"
-        title={titles.zoomOut}
-        onClick={zoomOut}
-        onKeyPress={zoomOut}
-        disabled={zoomOutDisabled}
-      >
-        {zoomOutChildren}
-      </button>
-    </div>
-  );
-}
-
-Zoom.propTypes = propTypes;
-Zoom.defaultProps = defaultProps;
-
-export default React.memo(Zoom);

package/src/components/Zoom/Zoom.test.js

@@ -1,141 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { configure, shallow, mount } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import { act } from 'react-dom/test-utils';
-import MapEvent from 'ol/MapEvent';
-import OLView from 'ol/View';
-import OLMap from 'ol/Map';
-import Zoom from './Zoom';
-
-configure({ adapter: new Adapter() });
-
-describe('Zoom', () => {
-  test('should match snapshot.', () => {
-    const map = new OLMap({});
-    const component = renderer.create(<Zoom map={map} />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with custom attributes', () => {
-    const map = new OLMap({});
-    const component = renderer.create(
-      <Zoom map={map} className="foo" tabIndex={-1} title="bar" />,
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with zoom slider', () => {
-    const map = new OLMap({});
-    const component = renderer.create(<Zoom map={map} zoomSlider />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  [
-    ['click', {}],
-    ['keypress', { which: 13 }],
-  ].forEach((evt) => {
-    test(`should zoom in on ${evt[0]}.`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} />);
-      zooms
-        .find('.rs-zoom-in')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(6);
-    });
-
-    test(`should zoom in on ${evt[0]} (delta: 0.3).`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} delta={0.3} />);
-      zooms
-        .find('.rs-zoom-in')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(5.3);
-    });
-
-    test(`should zoom out on ${evt[0]}.`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} />);
-      zooms
-        .find('.rs-zoom-out')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(4);
-    });
-
-    test(`should zoom out on ${evt[0]} (delta: 0.3).`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} delta={0.3} />);
-      zooms
-        .find('.rs-zoom-out')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(4.7);
-    });
-  });
-
-  test('should remove zoomSlider control on unmount.', () => {
-    const map = new OLMap({});
-    const spy = jest.spyOn(map, 'removeControl');
-    const spy2 = jest.spyOn(map, 'addControl');
-    const wrapper = mount(<Zoom map={map} zoomSlider />);
-    expect(spy).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy.mock.calls[0][0]).toBe(spy2.mock.calls[0][0]);
-  });
-
-  test('should disable zoom-in button on mount with max zoom..', () => {
-    const map = new OLMap({
-      view: new OLView({ maxZoom: 20, zoom: 20 }),
-    });
-    const spy = jest.spyOn(map.getView(), 'setZoom');
-    const wrapper = mount(<Zoom map={map} />);
-    act(() => {
-      map.dispatchEvent(new MapEvent('moveend', map));
-    });
-    wrapper.update();
-    expect(wrapper.find('.rs-zoom-in').prop('disabled')).toEqual(true);
-    wrapper.find('.rs-zoom-in').first().simulate('click');
-    expect(spy).toHaveBeenCalledTimes(0);
-  });
-
-  test('should disable zoom-out button on mount with min zoom.', () => {
-    const map = new OLMap({
-      view: new OLView({ minZoom: 2, zoom: 2 }),
-    });
-    const spy = jest.spyOn(map.getView(), 'setZoom');
-    const wrapper = mount(<Zoom map={map} />);
-    act(() => {
-      map.dispatchEvent(new MapEvent('moveend', map));
-    });
-    wrapper.update();
-    expect(wrapper.find('.rs-zoom-out').prop('disabled')).toEqual(true);
-    wrapper.find('.rs-zoom-out').first().simulate('click');
-    expect(spy).toHaveBeenCalledTimes(0);
-  });
-});
-
-test('should disable zoom-out button when reaching min zoom.', () => {
-  const map = new OLMap({
-    view: new OLView({ minZoom: 2, zoom: 3 }),
-  });
-  const spy = jest.spyOn(map.getView(), 'setZoom');
-  const wrapper = mount(<Zoom map={map} />);
-  wrapper.find('.rs-zoom-out').first().simulate('click');
-  expect(spy).toHaveBeenCalledTimes(1);
-  act(() => {
-    map.dispatchEvent(new MapEvent('moveend', map));
-  });
-  wrapper.update();
-  expect(wrapper.find('.rs-zoom-out').prop('disabled')).toEqual(true);
-});