react-spatial 1.5.2 → 1.5.3

package/src/components/Popup/README.md

@@ -0,0 +1,93 @@
+
+The following example demonstrates the use of Popup.
+
+```jsx
+import React, { useState, useMemo, useCallback } from 'react';
+import { Layer, MapboxLayer} from 'mobility-toolbox-js/ol';
+import VectorLayer from 'ol/layer/Vector';
+import { Map, Feature } from 'ol';
+import Point from 'ol/geom/Point';
+import OSM from 'ol/source/OSM';
+import VectorSource from 'ol/source/Vector';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import { getCenter } from 'ol/extent';
+import { Style, Circle, Fill, Icon } from 'ol/style';
+import BasicMap from 'react-spatial/components/BasicMap';
+import Popup from 'react-spatial/components/Popup';
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${apiKey}`,
+  }),
+  new Layer({
+    olLayer: new VectorLayer({
+      source: new VectorSource({
+        features: [
+          new Feature({
+            geometry: new Point([874105.13, 6106172.77]),
+          }),
+          new Feature({
+            geometry: new Point([873105.13, 6106172.77]),
+          }),
+        ],
+      }),
+      style: new Style({
+        image: new Icon({
+          anchor: [0.5, 46],
+          anchorXUnits: 'fraction',
+          anchorYUnits: 'pixels',
+          src: 'https://openlayers.org/en/latest/examples/data/icon.png',
+          imgSize: [32, 48]
+        }),
+      }),
+    }),
+  }),
+];
+
+
+function PopupExample() {
+  const [featureClicked, setFeatureClicked] = useState();
+
+  const content = useMemo(() => {
+    return featureClicked &&
+    featureClicked
+      .getGeometry()
+      .getCoordinates()
+      .toString();
+  }, [featureClicked]);
+
+  const onFeaturesClick = useCallback((features) => {
+    setFeatureClicked(features.length ? features[0] : null);
+  }, []);
+
+  const onCloseClick = useCallback(()=> {
+    setFeatureClicked(null);
+  }, []);
+
+  return (
+    <div className="rs-popup-example">
+      <BasicMap
+        map={map}
+        center={[874105.13, 6106172.77]}
+        zoom={17}
+        layers={layers}
+        onFeaturesClick={onFeaturesClick}
+        tabIndex={0}
+      />
+      <Popup
+        map={map}
+        header="Geometry"
+        feature={featureClicked}
+        onCloseClick={onCloseClick}
+        panIntoView
+      >
+        <div>{content}</div>
+      </Popup>
+    </div>
+  );
+}
+
+<PopupExample />;
+```

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

@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popup should match snapshot with default values. 1`] = `
+<div
+  className="rs-popup"
+  style={
+    {
+      "left": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    className="rs-popup-container"
+    tabIndex=""
+  >
+    <div
+      className="rs-popup-header"
+    >
+      <div
+        aria-label="Close"
+        className="rs-popup-close-bt"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="Close"
+      >
+        <svg
+          fill="currentColor"
+          focusable={false}
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <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>
+      </div>
+    </div>
+    <div
+      className="rs-popup-body"
+    >
+      <div
+        id="foo"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Popup should match snapshot with tabIndex defined. 1`] = `
+<div
+  className="rs-popup"
+  style={
+    {
+      "left": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    className="rs-popup-container"
+    tabIndex="0"
+  >
+    <div
+      className="rs-popup-header"
+    >
+      <div
+        aria-label="Close"
+        className="rs-popup-close-bt"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="Close"
+      >
+        <svg
+          fill="currentColor"
+          focusable={false}
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <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>
+      </div>
+    </div>
+    <div
+      className="rs-popup-body"
+    >
+      <div
+        id="bar"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Popup should match snapshot without close button. 1`] = `
+<div
+  className="rs-popup"
+  style={
+    {
+      "left": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    className="rs-popup-container"
+    tabIndex=""
+  >
+    <div
+      className="rs-popup-header"
+    />
+    <div
+      className="rs-popup-body"
+    >
+      <div
+        id="bar"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Popup should match snapshot without feature 1`] = `null`;
+
+exports[`Popup should match snapshot without header. 1`] = `
+<div
+  className="rs-popup"
+  style={
+    {
+      "left": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    className="rs-popup-container"
+    tabIndex=""
+  >
+    <div
+      className="rs-popup-body"
+    >
+      <div
+        id="bar"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/Popup/index.js

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

package/src/components/README.md

@@ -0,0 +1,41 @@
+# Components
+
+This folder contains all the components.
+
+## Create a new component
+
+Each component must have this structure:
+
+```bash
+src/
+    components/
+        MyCategory/
+            MyComponent/
+                index.js            // ES module export.
+                MyComponent.js      // The JSX component WITHOUT hardcoded classNames !!!!
+                MyComponent.test.js // The test file with at least snapshots tests.
+                MyComponent.scss    // A sass file with default CSS when the main html element of MyComponent uses rs-mycomponent CSS class.
+                README.md           // The MyComponentExample component of use to display in the doc.
+                MyComponent.md.scss // A sass file for the MyComponentExample component used in README.md
+```
+
+Some rules must be followed:
+
+- a component must allow to provide a className to the main html element of the component.
+- a component must be controlled by his parent via props.
+- a component must use `children` property instead of `renderXXX` functions when possible.
+- a component must propagate basic props `<NewComp {...this.props}>` when possible.
+- a component must have tests.
+- a component can provide a translation function using a `t` property.
+- default props must have a value or `undefined` (no `null` otherwise the attribute is created in the snapshot).
+- no redux stuff.
+- no hardcoded `className`, only in default props.
+- no translation library specific stuff.
+
+## Create a new component from another
+
+```bash
+yarn cp
+```
+
+then follow the guide.

package/{components → src/components}/ResizeHandler/ResizeHandler.js

@@ -1,25 +1,30 @@
-import ReactDOM from "react-dom";
-import { PureComponent, Component } from "react";
-import PropTypes from "prop-types";
-import ResizeObserver from "resize-observer-polyfill";
+import ReactDOM from 'react-dom';
+import { PureComponent, Component } from 'react';
+import PropTypes from 'prop-types';
+import ResizeObserver from 'resize-observer-polyfill';
+
 const propTypes = {
   observe: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
     PropTypes.instanceOf(Component),
     PropTypes.shape({ current: PropTypes.node }),
-    PropTypes.shape({ current: PropTypes.instanceOf(Component) })
+    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
   ]),
   maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),
   maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
   stylePropHeight: PropTypes.string,
   onResize: PropTypes.func,
+
+  // This property is used to re-apply the classes, for example when the className of the observed node changes.
   forceUpdate: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-    PropTypes.bool
-  ])
+    PropTypes.bool,
+  ]),
 };
+
+// Same as bootstrap
 const defaultProps = {
   observe: null,
   maxHeightBrkpts: {
@@ -27,19 +32,22 @@ const defaultProps = {
     s: 768,
     m: 992,
     l: 1200,
-    xl: Infinity
+    xl: Infinity,
   },
   maxWidthBrkpts: {
     xs: 576,
     s: 768,
     m: 992,
     l: 1200,
-    xl: Infinity
+    xl: Infinity,
   },
   stylePropHeight: null,
   onResize: null,
-  forceUpdate: null
+  forceUpdate: null,
 };
+/**
+ * This component adds css class to an element depending on his size.
+ */
 class ResizeHandler extends PureComponent {
   static applyBreakpoints(entry, breakpoints, size, direction) {
     let found = false;
@@ -55,6 +63,7 @@ class ResizeHandler extends PureComponent {
     });
     return screenSize;
   }
+
   constructor(props) {
     super(props);
     this.observer = new ResizeObserver((entries) => {
@@ -62,40 +71,54 @@ class ResizeHandler extends PureComponent {
     });
     this.nodes = [];
   }
+
   componentDidMount() {
     this.observe();
   }
+
   componentDidUpdate(prevProps) {
     const { observe, forceUpdate } = this.props;
-    if (observe !== prevProps.observe || forceUpdate !== prevProps.forceUpdate) {
+
+    if (
+      observe !== prevProps.observe ||
+      forceUpdate !== prevProps.forceUpdate
+    ) {
       this.observe();
     }
   }
+
   componentWillUnmount() {
     this.observer.disconnect();
   }
+
   onResize(entries) {
-    const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } = this.props;
+    const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } =
+      this.props;
+
     if (stylePropHeight) {
       const vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);
     }
+
     if (!maxWidthBrkpts && !maxHeightBrkpts) {
       onResize(entries);
       return;
     }
+
     let newScreenWidth;
     let newScreenHeight;
+
     for (let i = 0; i < entries.length; i += 1) {
       const entry = entries[i];
       const rect = entry.contentRect;
       const { height, width } = rect;
+
       if (maxWidthBrkpts) {
         newScreenWidth = ResizeHandler.applyBreakpoints(
           entry,
           maxWidthBrkpts,
           width,
-          "w"
+          'w',
         );
       }
       if (maxHeightBrkpts) {
@@ -103,41 +126,53 @@ class ResizeHandler extends PureComponent {
           entry,
           maxHeightBrkpts,
           height,
-          "h"
+          'h',
         );
       }
     }
+
     if (onResize) {
       onResize(entries, newScreenWidth, newScreenHeight);
     }
   }
+
   observe() {
     this.observer.disconnect();
     const { observe } = this.props;
+
     if (!observe) {
       return;
     }
-    if (typeof observe === "string" || observe instanceof String) {
+
+    if (typeof observe === 'string' || observe instanceof String) {
       this.nodes = document.querySelectorAll(observe);
     } else if (observe instanceof Component) {
+      // eslint-disable-next-line react/no-find-dom-node
       this.nodes.push(ReactDOM.findDOMNode(observe));
     } else if (observe instanceof Element) {
       this.nodes.push(observe);
     } else if (observe.current instanceof Element) {
+      // observe value created with React.createRef() on a html node.
       this.nodes.push(observe.current);
     } else if (observe.current instanceof Component) {
+      // observe value created with React.createRef() on a React component.
+      // eslint-disable-next-line react/no-find-dom-node
       this.nodes.push(ReactDOM.findDOMNode(observe.current));
     }
+
     if (this.nodes.length) {
       this.nodes.forEach((node) => {
         return this.observer.observe(node);
       });
     }
   }
+
   render() {
     return null;
   }
 }
+
 ResizeHandler.propTypes = propTypes;
 ResizeHandler.defaultProps = defaultProps;
+
 export default ResizeHandler;