react-spatial 1.5.2 → 1.5.3

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

@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RouteSchedule matches snapshots. 1`] = `
+<div
+  className="rt-route-schedule"
+>
+  <div
+    className="rt-route-header"
+  >
+    <span
+      className="rt-route-icon"
+      style={
+        {
+          "backgroundColor": "#ffb400",
+          "color": "black",
+        }
+      }
+    >
+      3
+    </span>
+    <div
+      className="rt-route-title"
+    >
+      <span
+        className="rt-route-name"
+      >
+        Station name
+      </span>
+      <span>
+        T 3
+         (3634)
+      </span>
+    </div>
+    <div
+      className="rt-route-buttons"
+    >
+      <div>
+        Button
+      </div>
+    </div>
+  </div>
+  <div
+    className="rt-route-body"
+  >
+    <div
+      className="rt-route-station"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-departure green"
+        >
+          +1m
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        >
+          09:01
+        </span>
+        <span
+          className="rt-route-time-departure "
+        >
+          09:01
+        </span>
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        first stop
+      </div>
+    </div>
+    <div
+      className="rt-route-station"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-arrival green"
+        >
+          +0
+        </span>
+        <span
+          className="rt-route-delay-departure green"
+        >
+          +2m
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        >
+          09:01
+        </span>
+        <span
+          className="rt-route-time-departure "
+        >
+          09:01
+        </span>
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        second stop
+      </div>
+    </div>
+    <div
+      className="rt-route-station rt-no-stop"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-arrival green"
+        >
+          +0
+        </span>
+        <span
+          className="rt-route-delay-departure green"
+        >
+          +0
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        />
+        <span
+          className="rt-route-time-departure "
+        />
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        no stop
+      </div>
+    </div>
+    <div
+      className="rt-route-station"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-arrival orange"
+        >
+          +4m
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        >
+          09:01
+        </span>
+        <span
+          className="rt-route-time-departure "
+        />
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        third stop
+      </div>
+    </div>
+  </div>
+  <div
+    className="rt-route-footer"
+  >
+    <span
+      className="rt-route-copyright"
+    >
+      <div
+        className="rt-route-copyright-link"
+      >
+        <a
+          href="foo.ch"
+          rel="noreferrer"
+          target="_blank"
+        >
+          foo
+        </a>
+      </div>
+      <span>
+         - 
+      </span>
+      <div
+        className="rt-route-copyright-link"
+      >
+        <a
+          href="bar.ch"
+          rel="noreferrer"
+          target="_blank"
+        >
+          bar
+        </a>
+      </div>
+    </span>
+  </div>
+</div>
+`;

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;