react-spatial 1.5.2 → 1.5.3

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

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

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

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

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

package/src/components/Zoom/README.md

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

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

@@ -0,0 +1,141 @@
+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);
+});