react-spatial 1.4.0 → 1.4.1

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);
+});

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

@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Zoom should match snapshot with custom attributes 1`] = `
+<div
+  className="foo"
+  tabIndex={-1}
+  title="bar"
+>
+  <button
+    className="rs-zoom-in"
+    disabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+    title="Zoom in"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      focusable={false}
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 448 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+      />
+    </svg>
+  </button>
+  <button
+    className="rs-zoom-out"
+    disabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+    title="Zoom out"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      focusable={false}
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 448 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Zoom should match snapshot with zoom slider 1`] = `
+<div
+  className="rs-zooms-bar"
+>
+  <button
+    className="rs-zoom-in"
+    disabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+    title="Zoom in"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      focusable={false}
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 448 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+      />
+    </svg>
+  </button>
+  <div
+    className="rs-zoomslider-wrapper"
+  />
+  <button
+    className="rs-zoom-out"
+    disabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+    title="Zoom out"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      focusable={false}
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 448 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Zoom should match snapshot. 1`] = `
+<div
+  className="rs-zooms-bar"
+>
+  <button
+    className="rs-zoom-in"
+    disabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+    title="Zoom in"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      focusable={false}
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 448 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+      />
+    </svg>
+  </button>
+  <button
+    className="rs-zoom-out"
+    disabled={false}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+    title="Zoom out"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      focusable={false}
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 448 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+      />
+    </svg>
+  </button>
+</div>
+`;

package/src/components/Zoom/index.js

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

package/{propTypes.js → src/propTypes.js}

@@ -1,22 +1,25 @@
-import PropTypes from "prop-types";
-const STATE_BOARDING = "BOARDING";
-const STATE_LEAVING = "LEAVING";
+import PropTypes from 'prop-types';
+
+const STATE_BOARDING = 'BOARDING';
+const STATE_LEAVING = 'LEAVING';
+
 const station = PropTypes.shape({
-  arrivalDelay: PropTypes.number,
-  aimedArrivalTime: PropTypes.number,
-  arrivalTime: PropTypes.number,
+  arrivalDelay: PropTypes.number, // time in milliseconds.
+  aimedArrivalTime: PropTypes.number, // time in milliseconds.
+  arrivalTime: PropTypes.number, // time in milliseconds with the delay included.
   cancelled: PropTypes.bool,
   coordinates: PropTypes.arrayOf(PropTypes.number),
-  aimedDepartureTime: PropTypes.number,
-  departureDelay: PropTypes.number,
-  departureTime: PropTypes.number,
+  aimedDepartureTime: PropTypes.number, // time in milliseconds.
+  departureDelay: PropTypes.number, // time in milliseconds.
+  departureTime: PropTypes.number, // time in milliseconds with the delay included
   noDropOff: PropTypes.bool,
   noPickUp: PropTypes.bool,
   stationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   stationName: PropTypes.string,
   wheelchairAccessible: PropTypes.bool,
-  state: PropTypes.oneOf([null, STATE_BOARDING, STATE_LEAVING])
+  state: PropTypes.oneOf([null, STATE_BOARDING, STATE_LEAVING]),
 });
+
 const lineInfos = PropTypes.shape({
   backgroundColor: PropTypes.string,
   bicyclesAllowed: PropTypes.bool,
@@ -39,11 +42,12 @@ const lineInfos = PropTypes.shape({
   shortName: PropTypes.string,
   stations: PropTypes.arrayOf(station),
   vehicleType: PropTypes.number,
-  wheelchairAccessible: PropTypes.bool
+  wheelchairAccessible: PropTypes.bool,
 });
+
 export default {
   lineInfos,
   station,
   STATE_BOARDING,
-  STATE_LEAVING
+  STATE_LEAVING,
 };

package/{setupTests.js → src/setupTests.js}

@@ -1,3 +1,3 @@
 global.URL.createObjectURL = jest.fn(() => {
-  return "fooblob";
+  return 'fooblob';
 });

package/src/styleguidist/ComponentsList.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// Import default implementation from react-styleguidist using the full path
+import ComponentsListRenderer from 'react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsListRenderer';
+import getUrl from 'react-styleguidist/lib/client/utils/getUrl';
+
+const propTypes = {
+  items: PropTypes.array.isRequired,
+  classes: PropTypes.object,
+  hashPath: PropTypes.array,
+  useRouterLinks: PropTypes.bool,
+  useHashId: PropTypes.bool,
+};
+
+const defaultProps = {
+  classes: null,
+  hashPath: [],
+  useRouterLinks: false,
+  useHashId: true,
+};
+
+function ComponentsList({
+  classes,
+  items,
+  useRouterLinks = false,
+  useHashId,
+  hashPath,
+}) {
+  const mappedItems = items.map((item) => {
+    return {
+      ...item,
+      href: item.href
+        ? item.href
+        : // Conflict with Permalink Component: Remove the first '/' to avoid page reload on click
+          getUrl({
+            name: item.name,
+            slug: item.slug,
+            anchor: !useRouterLinks,
+            hashPath: useRouterLinks ? hashPath : false,
+            id: useRouterLinks ? useHashId : false,
+          })
+            .replace(/^\/index.html+/g, '')
+            .replace(/^\/+/g, ''),
+    };
+  });
+  return <ComponentsListRenderer classes={classes} items={mappedItems} />;
+}
+
+ComponentsList.propTypes = propTypes;
+ComponentsList.defaultProps = defaultProps;
+
+export default ComponentsList;