react-spatial 1.5.3 → 1.5.4

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

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

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

package/src/components/ScaleLine/README.md

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

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

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

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

package/src/components/ScaleLine/index.js

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

package/src/components/StopsFinder/README.md

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

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