react-spatial 1.4.0 → 1.4.1

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

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Geolocation should match snapshot minimum props 1`] = `
+<div
+  className="rs-geolocation "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex="0"
+>
+  <svg
+    fill="currentColor"
+    focusable={false}
+    height="1em"
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      {
+        "color": undefined,
+      }
+    }
+    viewBox="0 0 512 512"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Geolocation should match snapshot with class name 1`] = `
+<div
+  className="my-class-name "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex="0"
+>
+  <svg
+    fill="currentColor"
+    focusable={false}
+    height="1em"
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      {
+        "color": undefined,
+      }
+    }
+    viewBox="0 0 512 512"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Geolocation should match snapshot with title 1`] = `
+<div
+  className="rs-geolocation "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex="0"
+  title="Lokalisieren"
+>
+  <svg
+    fill="currentColor"
+    focusable={false}
+    height="1em"
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      {
+        "color": undefined,
+      }
+    }
+    viewBox="0 0 512 512"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
+    />
+  </svg>
+</div>
+`;

package/src/components/Geolocation/index.js

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

package/src/components/LayerTree/LayerTree.js

@@ -0,0 +1,487 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Layer, getLayersAsFlatArray } from 'mobility-toolbox-js/ol';
+import { unByKey } from 'ol/Observable';
+
+const propTypes = {
+  /**
+   * Layers provider.
+   */
+  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
+
+  /**
+   * CSS class to apply on the container.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Padding left to apply on each level.
+   */
+  padding: PropTypes.number,
+
+  /**
+   * Determine if the item is hidden in the tree or not.
+   *
+   * @param {object} item The item to hide or not.
+   *
+   * @return {bool} true if the item is not displayed in the tree
+   */
+  isItemHidden: PropTypes.func,
+
+  /**
+   * Determine the className used by the div containing the parent and its children.
+   */
+  getParentClassName: PropTypes.func,
+
+  /**
+   * Custom function to render an item in the tree.
+   *
+   * @param {object} item The item to render.
+   *
+   * @return {node} A jsx node.
+   */
+  renderItem: PropTypes.func,
+
+  /**
+   * Custom function to render only the content of an item in the tree.
+   * inputProps und toggleProps can be used when calling the default renderItemContent function
+   * (comp.renderItemContent(layer, inputProps, toggleProps)) to overwrite the default input and label props
+   *
+   * @param {Layer} layer The layer the item content is created for
+   * @param {LayerTree} comp The LayerTree component.
+   *
+   * @return {node} A jsx node.
+   */
+  renderItemContent: PropTypes.func,
+
+  /**
+   * Custom function to render custom content before the list of children of an item.
+   *
+   * @param {object} item The item to render.
+   *
+   * @return {node} A jsx node.
+   */
+  renderBeforeItem: PropTypes.func,
+
+  /**
+   * Custom function to render custom content after the list of children of an item.
+   *
+   * @param {object} item The item to render.
+   *
+   * @return {node} A jsx node.
+   */
+  renderAfterItem: PropTypes.func,
+
+  /**
+   * Custom function to render the label.
+   *
+   * @param {string} item The label to render.
+   * @param {LayerTree} comp The LayerTree component.
+   *
+   * @return {node} A jsx node.
+   */
+  renderLabel: PropTypes.func,
+
+  /**
+   * Object holding title for the layer tree's buttons.
+   */
+  titles: PropTypes.shape({
+    /**
+     * aria-label on checkbox to show layer.
+     */
+    layerShow: PropTypes.string,
+    /**
+     * aria-label on checkbox to hide layer.
+     */
+    layerHide: PropTypes.string,
+    /**
+     * title on button to show sublayers.
+     */
+    subLayerShow: PropTypes.string,
+    /**
+     * title on button to show sublayers.
+     */
+    subLayerHide: PropTypes.string,
+  }),
+
+  /**
+   * Boolean determining whether children collapse/expand when their parent is toggled
+   * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.
+   * @return {boolean} True or false
+   */
+  expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+
+  /**
+   * Translation function.
+   * @param {function} Translation function returning the translated string.
+   */
+  t: PropTypes.func,
+};
+
+const defaultProps = {
+  layers: [],
+  className: 'rs-layer-tree',
+  padding: 30,
+  isItemHidden: () => {
+    return false;
+  },
+  getParentClassName: () => {
+    return undefined;
+  },
+  renderItem: null,
+  renderItemContent: null,
+  renderBeforeItem: null,
+  renderAfterItem: null,
+  renderLabel: (layer, layerComp) => {
+    const { t } = layerComp.props;
+    return t(layer.name);
+  },
+  titles: {
+    layerShow: 'Show layer',
+    layerHide: 'Hide layer',
+    subLayerShow: 'Show sublayer',
+    subLayerHide: 'Hide sublayer',
+  },
+  t: (s) => {
+    return s;
+  },
+  expandChildren: false,
+};
+
+/**
+ * The LayerTree component renders an interface for toggling
+ * [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)
+ * and their corresponding child layers.
+ */
+
+class LayerTree extends Component {
+  constructor(props) {
+    super(props);
+
+    const { layers, isItemHidden } = this.props;
+    const initialExpandedLayers = layers
+      ? this.getExpandedLayers(
+          layers.filter((l) => {
+            return (
+              !isItemHidden(l) &&
+              (l.children || [])
+                .filter((child) => {
+                  return child.visible;
+                })
+                .filter((c) => {
+                  return !isItemHidden(c);
+                }).length
+            );
+          }),
+        )
+      : [];
+
+    this.state = {
+      rootLayer: new Layer(),
+      expandedLayers: initialExpandedLayers,
+      revision: 0,
+    };
+    // this.updateLayers = this.updateLayers.bind(this);
+    this.olKeys = [];
+  }
+
+  componentDidMount() {
+    this.updateLayers();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { layers } = this.props;
+
+    if (layers !== prevProps.layers) {
+      this.updateLayers();
+    }
+  }
+
+  componentWillUnmount() {
+    unByKey(this.olKeys);
+    this.olKeys = [];
+  }
+
+  onInputClick(layer, toggle = false) {
+    if (toggle) {
+      this.onToggle(layer);
+    } else if (layer.setVisible) {
+      layer.setVisible(!layer.visible);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      layer.visible = !layer.visible;
+    }
+  }
+
+  onToggle(layer) {
+    const { expandedLayers } = this.state;
+    const pos = expandedLayers.indexOf(layer);
+    if (pos > -1) {
+      expandedLayers.splice(pos, 1);
+    } else {
+      expandedLayers.push(...this.getExpandedLayers([layer]));
+    }
+    this.setState({ expandedLayers });
+  }
+
+  /**
+   * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers
+   * together with the (given) initially expanded layers
+   *
+   * @param  {Layer} layers Initially expanded layers
+   * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors
+   */
+  getExpandedLayers(layers) {
+    const { isItemHidden } = this.props;
+    const children = layers.flatMap((l) => {
+      return l.children.filter((c) => {
+        return !isItemHidden(c) && c.get('isAlwaysExpanded');
+      });
+    });
+
+    if (!children.length) {
+      return layers;
+    }
+    return [...layers, this.getExpandedLayers(children)].flat();
+  }
+
+  updateLayers() {
+    const { layers, expandChildren } = this.props;
+
+    // Update the root layer
+    let rootLayer = new Layer();
+    if (Array.isArray(layers)) {
+      if (layers.length === 1) {
+        [rootLayer] = layers;
+      }
+      rootLayer = new Layer({ children: layers });
+    } else {
+      rootLayer = layers;
+    }
+
+    getLayersAsFlatArray(rootLayer).forEach((layer) => {
+      this.olKeys.push(
+        layer.on('propertychange', () => {
+          const { revision } = this.state;
+          this.setState({ revision: revision + 1 });
+        }),
+      );
+    });
+
+    const state = { rootLayer };
+    if (
+      typeof expandChildren === 'function'
+        ? expandChildren(layers)
+        : expandChildren
+    ) {
+      state.expandedLayers = rootLayer.children.flatMap((l) => {
+        return this.expandLayer(l);
+      });
+    }
+
+    this.setState(state);
+  }
+
+  expandLayer(layer, expLayers = []) {
+    const { isItemHidden } = this.props;
+    if (layer.visible && !isItemHidden(layer)) {
+      const children = layer.children
+        .filter((c) => {
+          return !isItemHidden(c) && !c.get('isAlwaysExpanded');
+        })
+        .flatMap((c) => {
+          return this.expandLayer(c, expLayers);
+        });
+      return [...expLayers, ...children, layer];
+    }
+    return expLayers;
+  }
+
+  renderInput(layer, inputProps) {
+    const { titles, isItemHidden } = this.props;
+    let tabIndex = 0;
+
+    if (
+      !(layer.children || []).filter((c) => {
+        return !isItemHidden(c);
+      }).length
+    ) {
+      // We forbid focus on keypress event for first level layers and layers without children.
+      tabIndex = -1;
+    }
+
+    const inputType = layer.get('group') ? 'radio' : 'checkbox';
+    return (
+      // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions
+      <label
+        className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}
+        tabIndex={tabIndex}
+        title={layer.visible ? titles.layerHide : titles.layerShow}
+        aria-label={layer.visible ? titles.layerHide : titles.layerShow}
+        onKeyPress={(e) => {
+          if (e.which === 13) {
+            this.onInputClick(layer);
+          }
+        }}
+      >
+        <input
+          type={inputType}
+          tabIndex={-1}
+          checked={layer.visible}
+          readOnly
+          onClick={() => {
+            return this.onInputClick(layer);
+          }}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...inputProps}
+        />
+        <span />
+      </label>
+    );
+  }
+
+  renderArrow(layer) {
+    const { isItemHidden } = this.props;
+    const { expandedLayers } = this.state;
+
+    if (
+      !(layer.children || []).filter((c) => {
+        return !isItemHidden(c);
+      }).length ||
+      layer.get('isAlwaysExpanded')
+    ) {
+      return null;
+    }
+
+    return (
+      <div
+        className={`rs-layer-tree-arrow rs-layer-tree-arrow-${
+          !expandedLayers.includes(layer) ? 'collapsed' : 'expanded'
+        }`}
+      />
+    );
+  }
+
+  // Render a button which expands/collapse the layer if there is children
+  // or simulate a click on the input otherwise.
+  renderToggleButton(layer, toggleProps) {
+    const { t, titles, isItemHidden, renderLabel } = this.props;
+    const { expandedLayers } = this.state;
+
+    const onInputClick = () => {
+      this.onInputClick(
+        layer,
+        (layer.children || []).filter((c) => {
+          return !isItemHidden(c);
+        }).length && !layer.get('isAlwaysExpanded'),
+      );
+    };
+    const title = `${t(layer.name)} ${
+      expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow
+    }`;
+
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        className="rs-layer-tree-toggle"
+        title={title}
+        aria-expanded={expandedLayers.includes(layer)}
+        aria-label={title}
+        onClick={onInputClick}
+        onKeyPress={onInputClick}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...toggleProps}
+      >
+        <div>{renderLabel(layer, this)}</div>
+        {this.renderArrow(layer)}
+      </div>
+    );
+  }
+
+  renderItemContent(layer, inputProps = {}, toggleProps = {}) {
+    return (
+      <>
+        {this.renderInput(layer, inputProps)}
+        {this.renderToggleButton(layer, toggleProps)}
+      </>
+    );
+  }
+
+  renderItem(layer, level) {
+    const { isItemHidden } = this.props;
+    const { expandedLayers } = this.state;
+    const {
+      renderItem,
+      renderItemContent,
+      renderBeforeItem,
+      renderAfterItem,
+      padding,
+      getParentClassName,
+    } = this.props;
+
+    const children = expandedLayers.includes(layer)
+      ? [
+          ...(layer.children || []).filter((c) => {
+            return !isItemHidden(c);
+          }),
+        ]
+      : [];
+
+    if (renderItem) {
+      return renderItem(layer, this.onInputClick, this.onToggle);
+    }
+
+    return (
+      <div className={getParentClassName()} key={layer.key}>
+        <div
+          className={`rs-layer-tree-item ${layer.visible ? 'rs-visible' : ''}`}
+          style={{
+            paddingLeft: `${padding * level}px`,
+          }}
+        >
+          {renderItemContent
+            ? renderItemContent(layer, this)
+            : this.renderItemContent(layer)}
+        </div>
+        {renderBeforeItem && renderBeforeItem(layer, level, this)}
+        {[...children].reverse().map((child) => {
+          return this.renderItem(child, level + 1);
+        })}
+        {renderAfterItem && renderAfterItem(layer, level, this)}
+      </div>
+    );
+  }
+
+  renderTree() {
+    const { isItemHidden } = this.props;
+    const { rootLayer } = this.state;
+
+    if (!rootLayer?.children?.length) {
+      return null;
+    }
+
+    return (
+      <>
+        {rootLayer.children
+          .filter((l) => {
+            return !isItemHidden(l);
+          })
+          .reverse()
+          .map((l) => {
+            return this.renderItem(l, 0);
+          })}
+      </>
+    );
+  }
+
+  render() {
+    const { className } = this.props;
+    return <div className={className}>{this.renderTree()}</div>;
+  }
+}
+
+LayerTree.propTypes = propTypes;
+LayerTree.defaultProps = defaultProps;
+
+export default LayerTree;