react-spatial 1.4.0 → 1.4.1

package/src/components/RouteSchedule/index.js

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

package/src/components/ScaleLine/README.md

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

package/src/components/ScaleLine/ScaleLine.js

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import OLScaleLine from 'ol/control/ScaleLine';
+import OLMap from 'ol/Map';
+
+const propTypes = {
+  /**
+   * ol/map.
+   */
+  map: PropTypes.instanceOf(OLMap).isRequired,
+
+  /**
+   * Options for ol/control/ScaleLine.
+   * See https://openlayers.org/en/latest/apidoc/module-ol_control_ScaleLine-ScaleLine.html
+   */
+  options: PropTypes.object,
+};
+
+const defaultProps = {
+  options: {},
+};
+
+/**
+ * The ScaleLine component creates an
+ * [ol/control/ScaleLine](https://openlayers.org/en/latest/apidoc/module-ol_control_ScaleLine-ScaleLine.html)
+ * for an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+ */
+function ScaleLine({ map, options, ...other }) {
+  const ref = useRef();
+
+  useEffect(() => {
+    const control = new OLScaleLine({
+      ...options,
+      ...{ target: ref.current },
+    });
+
+    map.addControl(control);
+    return () => {
+      map.removeControl(control);
+    };
+  }, [map, options]);
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <div className="rs-scale-line" ref={ref} {...other} />;
+}
+
+ScaleLine.propTypes = propTypes;
+ScaleLine.defaultProps = defaultProps;
+
+export default React.memo(ScaleLine);

package/src/components/ScaleLine/ScaleLine.test.js

@@ -0,0 +1,30 @@
+import 'jest-canvas-mock';
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import OLMap from 'ol/Map';
+import OLView from 'ol/View';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import renderer from 'react-test-renderer';
+import ScaleLine from './ScaleLine';
+
+configure({ adapter: new Adapter() });
+
+describe('ScaleLine', () => {
+  test('matches snapshot', () => {
+    const map = new OLMap({ view: new OLView({ zoom: 7, center: [0, 0] }) });
+    const component = renderer.create(<ScaleLine map={map} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('remove control on unmount.', () => {
+    const map = new OLMap({});
+    const spy = jest.spyOn(map, 'removeControl');
+    const spy2 = jest.spyOn(map, 'addControl');
+    const wrapper = mount(<ScaleLine map={map} />);
+    expect(spy).toHaveBeenCalledTimes(0);
+    wrapper.unmount();
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy.mock.calls[0][0]).toBe(spy2.mock.calls[0][0]);
+  });
+});

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScaleLine matches snapshot 1`] = `
+<div
+  className="rs-scale-line"
+/>
+`;

package/src/components/ScaleLine/index.js

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

package/src/components/StopsFinder/README.md

@@ -0,0 +1,50 @@
+
+This demonstrates the use of the StopsFinder component.
+
+```jsx
+import React from 'react';
+import { Layer } from 'mobility-toolbox-js/ol';
+import Map from 'ol/Map';
+import Tile from 'ol/layer/Tile';
+import { fromLonLat } from 'ol/proj';
+import OSM from 'ol/source/OSM';
+import BasicMap from 'react-spatial/components/BasicMap';
+import StopsFinder from 'react-spatial/components/StopsFinder';
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new Layer({
+    olLayer: new Tile({
+      source: new OSM(),
+    }),
+  }),
+];
+
+// The `apiKey` used here is for demonstration purposes only.
+// Please get your own api key at https://developer.geops.io/.
+const { apiKey } = window;
+
+<>
+  <BasicMap
+    map={map}
+    center={[951560, 6002550]}
+    zoom={14}
+    layers={layers}
+    tabIndex={0}
+  />
+
+  <StopsFinder
+    map={map}
+    apiKey={apiKey}
+    onSelect={({ geometry }) => {
+      map.getView().setCenter(fromLonLat(geometry.coordinates));
+    }}
+    autocompleteProps={{
+      textFieldProps: {
+        label: 'Search for stops',
+      },
+    }}
+  />
+</>
+```

package/src/components/StopsFinder/StopsFinder.js

@@ -0,0 +1,284 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Autocomplete } from '@material-ui/lab';
+import { FaSearch } from 'react-icons/fa';
+import TextField from '@material-ui/core/TextField';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { StopFinderControl } from 'mobility-toolbox-js/ol';
+import { Map } from 'ol';
+import { makeStyles } from '@material-ui/core';
+import StopsFinderOptions from './StopsFinderOption';
+
+const useStyles = makeStyles(() => {
+  return {
+    popupIndicatorOpen: {
+      transform: 'rotate(0)',
+    },
+  };
+});
+
+function StopsFinder({
+  agencies,
+  apiKey,
+  autocompleteProps,
+  bbox,
+  field,
+  limit,
+  map,
+  mots,
+  onSelect,
+  radius,
+  refLocation,
+  renderAutocomplete,
+  url,
+}) {
+  const classes = useStyles();
+  const [inputValue, setInputValue] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+  const [isLoading, setLoading] = useState(false);
+  const [isOpen, setOpen] = useState(false);
+
+  const control = useMemo(() => {
+    return new StopFinderControl({
+      url,
+      apiKey,
+      target: document.createElement('div'),
+      element: document.createElement('div'),
+      render(newSuggestions = { features: [] }) {
+        setSuggestions(newSuggestions.features);
+        setLoading(false);
+      },
+    });
+  }, [apiKey, url]);
+
+  useEffect(() => {
+    if (!inputValue) {
+      setSuggestions([]);
+      setLoading(false);
+      return () => {};
+    }
+    const abortController = new AbortController();
+    setLoading(true);
+    control.apiParams = {
+      prefAgencies: agencies && agencies.toString(),
+      bbox: bbox && bbox.toString(),
+      field: field && field.toString(),
+      limit,
+      mots: mots && mots.toString(),
+      radius,
+      ref_location: refLocation && refLocation.toString(),
+    };
+    control.search(inputValue, abortController);
+    return () => {
+      abortController.abort();
+    };
+  }, [
+    agencies,
+    bbox,
+    control,
+    field,
+    inputValue,
+    limit,
+    mots,
+    radius,
+    refLocation,
+  ]);
+
+  // Ensure the control is not associated to the wrong map
+  useEffect(() => {
+    if (!control) {
+      return () => {};
+    }
+
+    control.map = map;
+
+    return () => {
+      control.map = null;
+    };
+  }, [map, control]);
+
+  if (!control) {
+    return null;
+  }
+
+  if (renderAutocomplete) {
+    return renderAutocomplete(
+      suggestions,
+      inputValue,
+      setInputValue,
+      isOpen,
+      setOpen,
+      isLoading,
+      setLoading,
+    );
+  }
+  const textFieldProps = {
+    ...((autocompleteProps || {}).textFieldProps || {}),
+  };
+  const autocProps = { ...autocompleteProps };
+  delete autocProps.textFieldProps;
+
+  return (
+    <Autocomplete
+      fullWidth
+      autoComplete
+      autoHighlight
+      selectOnFocus
+      getOptionLabel={(option) => {
+        return option.properties.name;
+      }}
+      onChange={(evt, value, reason) => {
+        if (onSelect && reason === 'select-option') {
+          onSelect(value, evt);
+        }
+      }}
+      popupIcon={<FaSearch focusable={false} size={15} />}
+      renderInput={(params) => {
+        return (
+          <TextField
+            label="Search stops"
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...{
+              ...params,
+              ...textFieldProps,
+            }}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {isLoading && <CircularProgress size={20} />}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+        );
+      }}
+      renderOption={(option) => {
+        return <StopsFinderOptions option={option} />;
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...autocProps}
+      classes={{ ...classes, ...autocompleteProps.classes }}
+      inputValue={inputValue}
+      open={isOpen}
+      options={suggestions}
+      loading={isLoading}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onInputChange={(evt, val) => {
+        setInputValue(val);
+      }}
+    />
+  );
+}
+
+StopsFinder.propTypes = {
+  /**
+   * Array or a comma separated list of agencies which should be available.
+   * Order of these agencies chooses which agency will be preferred.
+   * Available values : sbb, db
+   */
+  agencies: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+
+  /**
+   * geOps api key to access the StopsFinder service.
+   */
+  apiKey: PropTypes.string,
+
+  /**
+   * Properties apply to the default [MUI Autocomplete component](https://material-ui.com/api/autocomplete/).
+   * We add a custom properties textFieldProps for the default [MUI TextField component](https://material-ui.com/api/text-field/) used by the Autocomplete.
+   */
+  autocompleteProps: PropTypes.object,
+
+  /**
+   * minX,minY,maxX,maxY coordinates in WGS84 wherein the station should lie.
+   */
+  bbox: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+
+  /**
+   * Array or a comma separated list of fields which should be used for look up.
+   * Available values : id, name, coords
+   */
+  field: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+
+  /**
+   * Control how many matches will be returned.
+   */
+  limit: PropTypes.number,
+
+  /**
+   * A map.
+   */
+  map: PropTypes.instanceOf(Map).isRequired,
+
+  /**
+   * Array or a comma separated list of mode of transpaorts which should be available.
+   * Available values : bus, ferry, gondola, tram, rail, funicular, cable_car, subway
+   */
+  mots: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+
+  /**
+   * Function called when a suggestion is selected.
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Radius around refLocation in meters that is most relevant.
+   * Used as granularity for location rank.
+   */
+  radius: PropTypes.number,
+
+  /**
+   * Coordinates in WGS84 (in lat,lon order) used to rank stops close to this position higher.
+   * Available values : id, name, coords
+   */
+  refLocation: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+
+  /**
+   * Function to render a different autocomplete input than the default one.
+   */
+  renderAutocomplete: PropTypes.func,
+
+  /**
+   * Url of the geOps StopsFinder service.
+   */
+  url: PropTypes.string,
+};
+
+StopsFinder.defaultProps = {
+  agencies: null,
+  apiKey: null,
+  autocompleteProps: {},
+  bbox: null,
+  field: null,
+  limit: null,
+  mots: null,
+  onSelect: null,
+  radius: null,
+  refLocation: null,
+  url: null,
+  renderAutocomplete: null,
+};
+
+export default StopsFinder;

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>
+```