react-spatial 1.5.2 → 1.5.3

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

@@ -1,138 +1,233 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { MdClose } from "react-icons/md";
-import OLMap from "ol/Map";
-import Feature from "ol/Feature";
-import { getCenter } from "ol/extent";
-import { unByKey } from "ol/Observable";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { MdClose } from 'react-icons/md';
+import OLMap from 'ol/Map';
+import Feature from 'ol/Feature';
+import { getCenter } from 'ol/extent';
+import { unByKey } from 'ol/Observable';
+
 const propTypes = {
+  /**
+   * React Children.
+   */
   children: PropTypes.node.isRequired,
+
+  /**
+   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   */
   map: PropTypes.instanceOf(OLMap).isRequired,
+
+  /**
+   * An [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
+   */
   feature: PropTypes.instanceOf(Feature),
+
+  /**
+   * Popup title.
+   */
   header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * If true, the popup is panned in the map's viewport.
+   */
   panIntoView: PropTypes.bool,
+
+  /**
+   * Custom BoundingClientRect to fit popup into.
+   * Use if panIntoView is true. Default is the map's BoundingClientRect.
+   */
   panRect: PropTypes.objectOf(PropTypes.number),
+
+  /**
+   * Coordinate position of the popup.
+   */
   popupCoordinate: PropTypes.arrayOf(PropTypes.number),
+
+  /**
+   * Class name of the popup.
+   */
   className: PropTypes.string,
+
+  /**
+   * Title HTML attributes.
+   */
   titles: PropTypes.shape({
-    closeButton: PropTypes.string
+    closeButton: PropTypes.string,
   }),
+
+  /**
+   * Function triggered on close button click.
+   */
   onCloseClick: PropTypes.func,
+
+  /**
+   * HTML tabIndex attribute.
+   */
   tabIndex: PropTypes.string,
+
+  /**
+   * Render the header
+   */
   renderHeader: PropTypes.func,
+
+  /**
+   * Render the close button
+   */
   renderCloseButton: PropTypes.func,
-  renderFooter: PropTypes.func
+
+  /**
+   * Render the footer
+   */
+  renderFooter: PropTypes.func,
 };
+
 const defaultProps = {
   header: null,
   feature: null,
   panIntoView: false,
   panRect: null,
   popupCoordinate: null,
-  className: "rs-popup",
-  tabIndex: "",
-  titles: { closeButton: "Close" },
-  onCloseClick: () => {
-  },
+  className: 'rs-popup',
+  tabIndex: '',
+  titles: { closeButton: 'Close' },
+  onCloseClick: () => {},
   renderHeader: null,
   renderCloseButton: null,
   renderFooter: () => {
     return null;
-  }
+  },
 };
+
+/**
+ * The Popup component renders a popup over an
+ * [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html)
+ * on click.
+ */
 class Popup extends PureComponent {
   static renderHeader(props) {
     const { header, renderCloseButton } = props;
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "rs-popup-header"
-    }, header, (renderCloseButton || Popup.renderCloseButton)(props));
+    return (
+      <div className="rs-popup-header">
+        {header}
+        {(renderCloseButton || Popup.renderCloseButton)(props)}
+      </div>
+    );
   }
+
   static renderCloseButton({ onCloseClick, titles }) {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "button",
-      tabIndex: 0,
-      className: "rs-popup-close-bt",
-      title: titles.closeButton,
-      "aria-label": titles.closeButton,
-      onClick: () => {
-        return onCloseClick();
-      },
-      onKeyPress: (evt) => {
-        return evt.which === 13 && onCloseClick();
-      }
-    }, /* @__PURE__ */ React.createElement(MdClose, {
-      focusable: false
-    }));
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        className="rs-popup-close-bt"
+        title={titles.closeButton}
+        aria-label={titles.closeButton}
+        onClick={() => {
+          return onCloseClick();
+        }}
+        onKeyPress={(evt) => {
+          return evt.which === 13 && onCloseClick();
+        }}
+      >
+        <MdClose focusable={false} />
+      </div>
+    );
   }
+
   constructor(props) {
     super(props);
     this.state = {
       popupElement: null,
       top: 0,
-      left: 0
+      left: 0,
     };
     this.postrenderKey = null;
   }
+
   componentDidMount() {
     const { map } = this.props;
     this.updatePixelPosition();
-    this.postrenderKey = map.on("postrender", () => {
+
+    this.postrenderKey = map.on('postrender', () => {
       this.updatePixelPosition();
     });
   }
+
   componentDidUpdate(prevProps, prevState) {
     const { feature, panIntoView, popupCoordinate } = this.props;
     const { popupElement } = this.state;
-    if (feature !== prevProps.feature || popupCoordinate !== prevProps.popupCoordinate) {
+    if (
+      feature !== prevProps.feature ||
+      popupCoordinate !== prevProps.popupCoordinate
+    ) {
       this.updatePixelPosition();
     }
-    if (panIntoView && popupElement && popupElement !== prevState.popupElement) {
+
+    if (
+      panIntoView &&
+      popupElement &&
+      popupElement !== prevState.popupElement
+    ) {
       this.panIntoView();
     }
   }
+
   componentWillUnmount() {
     unByKey(this.postrenderKey);
   }
+
   panIntoView() {
     const { map, panRect } = this.props;
     const { popupElement } = this.state;
+
     const mapRect = panRect || map.getTarget().getBoundingClientRect();
     const popupRect = popupElement.getBoundingClientRect();
     const [x, y] = map.getView().getCenter();
     const res = map.getView().getResolution();
     const newCenter = [x, y];
+
     if (mapRect.top > popupRect.top) {
       newCenter[1] = y + (mapRect.top - popupRect.top) * res;
     }
+
     if (mapRect.left > popupRect.left) {
       newCenter[0] = x - (mapRect.left - popupRect.left) * res;
     }
+
     if (mapRect.right < popupRect.right) {
       newCenter[0] = x + (popupRect.right - mapRect.right) * res;
     }
+
     if (mapRect.bottom < popupRect.bottom) {
       newCenter[1] = y - (popupRect.bottom - mapRect.bottom) * res;
     }
+
     if (newCenter[0] !== x || newCenter[1] !== y) {
       map.getView().animate({ center: newCenter, duration: 500 });
     }
   }
+
   updatePixelPosition() {
     const { map, feature, popupCoordinate } = this.props;
     let coord = popupCoordinate;
+
     if (feature && !coord) {
       coord = getCenter(feature.getGeometry().getExtent());
     }
+
     if (coord) {
       const pos = map.getPixelFromCoordinate(coord);
+
       if (pos && pos.length === 2) {
         this.setState({
           left: pos[0],
-          top: pos[1]
+          top: pos[1],
         });
       }
     }
   }
+
   render() {
     const {
       feature,
@@ -145,36 +240,51 @@ class Popup extends PureComponent {
       renderFooter,
       ...other
     } = this.props;
+
     if (!feature && !popupCoordinate) {
       return null;
     }
+
     delete other.panIntoView;
     delete other.panRect;
     delete other.map;
     delete other.header;
     delete other.onCloseClick;
     delete other.renderCloseButton;
+
     const { top, left } = this.state;
+
+    // force re-render if the feature or the coordinate changes.
+    // this is needed to update the popupElement ref
     const key = feature ? feature.getId() : popupCoordinate.join();
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "rs-popup",
-      style: {
-        left,
-        top
-      },
-      ...other
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "rs-popup-container",
-      tabIndex,
-      key,
-      ref: (popupElement) => {
-        this.setState({ popupElement });
-      }
-    }, (renderHeader || Popup.renderHeader)(this.props), /* @__PURE__ */ React.createElement("div", {
-      className: "rs-popup-body"
-    }, children), renderFooter(this.props)));
+    return (
+      <div
+        className="rs-popup"
+        style={{
+          left,
+          top,
+        }}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...other}
+      >
+        <div
+          className="rs-popup-container"
+          tabIndex={tabIndex}
+          key={key}
+          ref={(popupElement) => {
+            this.setState({ popupElement });
+          }}
+        >
+          {(renderHeader || Popup.renderHeader)(this.props)}
+          <div className="rs-popup-body">{children}</div>
+          {renderFooter(this.props)}
+        </div>
+      </div>
+    );
   }
 }
+
 Popup.propTypes = propTypes;
 Popup.defaultProps = defaultProps;
+
 export default Popup;

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

@@ -0,0 +1,307 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import 'jest-canvas-mock';
+
+import OLMap from 'ol/Map';
+import View from 'ol/View';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import Line from 'ol/geom/LineString';
+import Popup from './Popup';
+
+let map;
+
+configure({ adapter: new Adapter() });
+
+const feat = new Feature({
+  geometry: new Point([1000, 1000]),
+});
+
+const featLine = new Feature({
+  geometry: new Line([
+    [1000, 1000],
+    [2000, 2000],
+  ]),
+});
+
+describe('Popup', () => {
+  beforeEach(() => {
+    map = new OLMap({});
+  });
+
+  describe('should match snapshot', () => {
+    test('without feature', () => {
+      const component = renderer.create(
+        <Popup map={map}>
+          <div id="foo" />
+        </Popup>,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('with default values.', () => {
+      const component = renderer.create(
+        <Popup map={map} feature={feat}>
+          <div id="foo" />
+        </Popup>,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('without close button.', () => {
+      const component = renderer.create(
+        <Popup
+          map={map}
+          feature={feat}
+          renderCloseButton={() => {
+            return null;
+          }}
+        >
+          <div id="bar" />
+        </Popup>,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('without header.', () => {
+      const component = renderer.create(
+        <Popup
+          map={map}
+          feature={feat}
+          renderHeader={() => {
+            return null;
+          }}
+        >
+          <div id="bar" />
+        </Popup>,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('with tabIndex defined.', () => {
+      const component = renderer.create(
+        <Popup map={map} feature={feat} tabIndex="0">
+          <div id="bar" />
+        </Popup>,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  [
+    ['click', {}],
+    ['keypress', { which: 13 }],
+  ].forEach((evt) => {
+    test(`should trigger onCloseClick function on ${evt[0]} event.`, () => {
+      const spy = jest.fn(() => {});
+
+      const component = mount(
+        <Popup map={map} feature={feat} onCloseClick={spy}>
+          <div id="gux" />
+        </Popup>,
+      );
+
+      component
+        .find('div')
+        .at(3)
+        .simulate(...evt);
+      expect(spy).toHaveBeenCalled();
+    });
+
+    test(`should trigger default onCloseClick function on ${evt[0]} event without errors.`, () => {
+      const component = mount(
+        <Popup map={map} feature={feat}>
+          <div id="gux" />
+        </Popup>,
+      );
+      // test if no js error triggered by the default value
+      try {
+        component
+          .find('div')
+          .at(3)
+          .simulate(...evt);
+        expect(true).toBe(true);
+      } catch (e) {
+        expect(false).toBe(true);
+      }
+    });
+  });
+
+  describe(`init position`, () => {
+    test(`using popupCoordinate.`, () => {
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10010, 100200];
+      });
+      const component = mount(
+        <Popup map={map} popupCoordinate={[1001, 1002]}>
+          <div id="gux" />
+        </Popup>,
+      );
+      expect(component.state().left).toBe(10010);
+      expect(component.state().top).toBe(100200);
+      component.setProps({ feature: featLine });
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10011, 100100];
+      });
+      component.setProps({ popupCoordinate: [1009, 1009] });
+      expect(component.state().left).toBe(10011);
+      expect(component.state().top).toBe(100100);
+    });
+
+    test(`using feature.`, () => {
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10010, 100200];
+      });
+      const component = mount(
+        <Popup map={map} feature={feat}>
+          <div id="gux" />
+        </Popup>,
+      );
+      expect(component.state().left).toBe(10010);
+      expect(component.state().top).toBe(100200);
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10011, 100100];
+      });
+      component.setProps({ feature: featLine });
+      expect(component.state().left).toBe(10011);
+      expect(component.state().top).toBe(100100);
+    });
+  });
+
+  describe(`updates position`, () => {
+    test(`on map postrender event.`, () => {
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10, 200];
+      });
+      const component = shallow(
+        <Popup map={map} feature={feat}>
+          <div id="gux" />
+        </Popup>,
+      );
+      const spy = jest.spyOn(component.instance(), 'updatePixelPosition');
+      map.dispatchEvent({ type: 'postrender' });
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe(`#panIntoView`, () => {
+    beforeEach(() => {
+      const target = document.createElement('div');
+      const { style } = target;
+      style.position = 'absolute';
+      style.left = '-1000px';
+      style.top = '-1000px';
+      style.width = '100px';
+      style.height = '100px';
+      document.body.appendChild(target);
+
+      map = new OLMap({
+        target,
+        view: new View({
+          center: [1000, 1000],
+          resolutions: [1],
+          zoom: 0,
+        }),
+      });
+      map.renderSync();
+    });
+
+    afterEach(() => {
+      const target = map.getTarget();
+      map.setTarget(null);
+      if (target && target.parentNode) {
+        target.parentNode.removeChild(target);
+      }
+      map.dispose();
+    });
+
+    test(`animate the map.`, () => {
+      map.getTarget().getBoundingClientRect = jest.fn(() => {
+        return {
+          bottom: -10,
+          left: 5,
+          right: -5,
+          top: 5,
+        };
+      });
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10, 20];
+      });
+      const spy = jest.spyOn(map.getView(), 'animate');
+      mount(
+        <Popup map={map} feature={feat} panIntoView>
+          <div id="gux" />
+        </Popup>,
+      );
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({
+        center: [1005, 990],
+        duration: 500,
+      });
+    });
+
+    test(`using panRect`, () => {
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10, 200];
+      });
+      const spy = jest.spyOn(map.getView(), 'animate');
+      mount(
+        <Popup
+          map={map}
+          feature={feat}
+          panIntoView
+          panRect={{ top: 0, left: 0, bottom: -10, right: 0 }}
+        >
+          <div id="gux" />
+        </Popup>,
+      );
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({
+        center: [1000, 990],
+        duration: 500,
+      });
+    });
+
+    test(`doesn't animate the map`, () => {
+      map.getPixelFromCoordinate = jest.fn(() => {
+        return [10, 200];
+      });
+      const spy = jest.spyOn(map.getView(), 'animate');
+      mount(
+        <Popup
+          map={map}
+          feature={feat}
+          panIntoView
+          panRect={{ top: 0, left: 0, bottom: 0, right: 0 }}
+        >
+          <div id="gux" />
+        </Popup>,
+      );
+      expect(spy).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  test(`deregisters postrender on unmount.`, () => {
+    map.getPixelFromCoordinate = jest.fn(() => {
+      return [10, 200];
+    });
+    const component = shallow(
+      <Popup map={map} feature={featLine}>
+        <div id="gux" />
+      </Popup>,
+    );
+    const spy = jest.spyOn(component.instance(), 'updatePixelPosition');
+    map.dispatchEvent({ type: 'postrender' });
+    expect(spy).toHaveBeenCalledTimes(1);
+    component.unmount();
+    map.dispatchEvent({ type: 'postrender' });
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});