react-spatial 1.2.2 → 1.2.3-beta.3

package/components/LayerTree/LayerTree.js

@@ -1,482 +1,276 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-var propTypes = {
-  /**
-   * Layers provider.
-   */
-  layerService: PropTypes.object,
-
-  /**
-   * CSS class to apply on the container.
-   */
+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: PropTypes.arrayOf(Layer),
   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.
-   *
-   * @param {object} item The item to render.
-   *
-   * @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,
+    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,
+  t: PropTypes.func
 };
-
-var defaultProps = {
-  layerService: undefined,
-  className: 'rs-layer-tree',
+const defaultProps = {
+  layers: [],
+  className: "rs-layer-tree",
   padding: 30,
-  isItemHidden: function () {
+  isItemHidden: () => {
     return false;
   },
-  getParentClassName: function () {
-    return undefined;
+  getParentClassName: () => {
+    return void 0;
   },
   renderItem: null,
   renderItemContent: null,
   renderBeforeItem: null,
   renderAfterItem: null,
-  renderLabel: function (layer, layerComp) {
-    var ref = layerComp.props;
-    var t = ref.t;
+  renderLabel: (layer, layerComp) => {
+    const { t } = layerComp.props;
     return t(layer.name);
   },
   titles: {
-    layerShow: 'Show layer',
-    layerHide: 'Hide layer',
-    subLayerShow: 'Show sublayer',
-    subLayerHide: 'Hide sublayer',
+    layerShow: "Show layer",
+    layerHide: "Hide layer",
+    subLayerShow: "Show sublayer",
+    subLayerHide: "Hide sublayer"
   },
-  t: function (s) {
+  t: (s) => {
     return s;
   },
-  expandChildren: false,
+  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.
- */
-
-var LayerTree = /*@__PURE__*/(function (Component) {
-  function LayerTree(props) {
-    Component.call(this, props);
-    var ref = this.props;
-    var layerService = ref.layerService;
-    var isItemHidden = ref.isItemHidden;
-    var initialExpandedLayers =
-      layerService && layerService.getLayers()
-        ? this.getExpandedLayers(
-            layerService.getLayers().filter(function (l) {
-              return (
-                !isItemHidden(l) &&
-                l.getVisibleChildren().filter(function (c) {
-                  return !isItemHidden(c);
-                }).length
-              );
-            })
-          )
-        : [];
-
+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 = {
-      layers: layerService ? layerService.getLayers() : [],
+      rootLayer: new Layer(),
       expandedLayers: initialExpandedLayers,
+      revision: 0
     };
-    this.updateLayers = this.updateLayers.bind(this);
     this.olKeys = [];
   }
-
-  if ( Component ) LayerTree.__proto__ = Component;
-  LayerTree.prototype = Object.create( Component && Component.prototype );
-  LayerTree.prototype.constructor = LayerTree;
-
-  LayerTree.prototype.componentDidMount = function componentDidMount () {
-    this.updateLayerService();
-  };
-
-  LayerTree.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
-    var ref = this.props;
-    var layerService = ref.layerService;
-
-    if (layerService !== prevProps.layerService) {
-      this.updateLayerService();
+  componentDidMount() {
+    this.updateLayers();
+  }
+  componentDidUpdate(prevProps) {
+    const { layers } = this.props;
+    if (layers !== prevProps.layers) {
+      this.updateLayers();
     }
-  };
-
-  LayerTree.prototype.componentWillUnmount = function componentWillUnmount () {
-    var ref = this.props;
-    var layerService = ref.layerService;
-    layerService.un('change:visible', this.updateLayers);
-  };
-
-  LayerTree.prototype.onInputClick = function onInputClick (layer, toggle) {
-    if ( toggle === void 0 ) toggle = false;
-
+  }
+  componentWillUnmount() {
+    unByKey(this.olKeys);
+    this.olKeys = [];
+  }
+  onInputClick(layer, toggle = false) {
     if (toggle) {
       this.onToggle(layer);
-    } else {
+    } else if (layer.setVisible) {
       layer.setVisible(!layer.visible);
+    } else {
+      layer.visible = !layer.visible;
     }
-  };
-
-  LayerTree.prototype.onToggle = function onToggle (layer) {
-    var ref = this.state;
-    var expandedLayers = ref.expandedLayers;
-    var pos = expandedLayers.indexOf(layer);
+  }
+  onToggle(layer) {
+    const { expandedLayers } = this.state;
+    const pos = expandedLayers.indexOf(layer);
     if (pos > -1) {
       expandedLayers.splice(pos, 1);
     } else {
-      expandedLayers.push.apply(expandedLayers, this.getExpandedLayers([layer]));
+      expandedLayers.push(...this.getExpandedLayers([layer]));
     }
-
-    this.setState({ expandedLayers: 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
-   */
-  LayerTree.prototype.getExpandedLayers = function getExpandedLayers (layers) {
-    var ref = this.props;
-    var isItemHidden = ref.isItemHidden;
-    var children = layers.flatMap(function (l) {
-      return l.children.filter(function (c) {
-        return !isItemHidden(c) && c.get('isAlwaysExpanded');
+    this.setState({ expandedLayers });
+  }
+  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.concat( [this.getExpandedLayers(children)]).flat();
-  };
-
-  LayerTree.prototype.updateLayerService = function updateLayerService () {
-    var ref = this.props;
-    var layerService = ref.layerService;
-    if (layerService) {
-      layerService.un('change:visible', this.updateLayers);
-      this.updateLayers();
-      layerService.on('change:visible', this.updateLayers);
+    return [...layers, this.getExpandedLayers(children)].flat();
+  }
+  updateLayers() {
+    const { layers, expandChildren } = this.props;
+    let rootLayer = new Layer();
+    if (Array.isArray(layers)) {
+      if (layers.length === 1) {
+        [rootLayer] = layers;
+      }
+      rootLayer = new Layer({ children: layers });
+    } else {
+      rootLayer = layers;
     }
-  };
-
-  LayerTree.prototype.updateLayers = function updateLayers () {
-    var this$1 = this;
-
-    var ref = this.props;
-    var layerService = ref.layerService;
-    var expandChildren = ref.expandChildren;
-    var layers = layerService.getLayers();
-    if (
-      typeof expandChildren === 'function'
-        ? expandChildren(layers)
-        : expandChildren
-    ) {
-      this.setState({
-        expandedLayers: layers.flatMap(function (l) {
-          return this$1.expandLayer(l);
-        }),
+    getLayersAsFlatArray(rootLayer).forEach((layer) => {
+      this.olKeys.push(
+        layer.on("propertychange", (evt) => {
+          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({
-      layers: layers,
-    });
-  };
-
-  LayerTree.prototype.expandLayer = function expandLayer (layer, expLayers) {
-    var this$1 = this;
-    if ( expLayers === void 0 ) expLayers = [];
-
-    var ref = this.props;
-    var isItemHidden = ref.isItemHidden;
+    this.setState(state);
+  }
+  expandLayer(layer, expLayers = []) {
+    const { isItemHidden } = this.props;
     if (layer.visible && !isItemHidden(layer)) {
-      var children = layer.children
-        .filter(function (c) {
-          return !isItemHidden(c) && !c.get('isAlwaysExpanded');
-        })
-        .flatMap(function (c) {
-          return this$1.expandLayer(c, expLayers);
-        });
-      return expLayers.concat( children, [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;
-  };
-
-  LayerTree.prototype.renderInput = function renderInput (layer) {
-    var this$1 = this;
-
-    var ref = this.props;
-    var titles = ref.titles;
-    var isItemHidden = ref.isItemHidden;
-    var tabIndex = 0;
-
-    if (
-      !layer.children.filter(function (c) {
-        return !isItemHidden(c);
-      }).length
-    ) {
-      // We forbid focus on keypress event for first level layers and layers without children.
+  }
+  renderInput(layer) {
+    const { titles, isItemHidden } = this.props;
+    let tabIndex = 0;
+    if (!(layer.children || []).filter((c) => {
+      return !isItemHidden(c);
+    }).length) {
       tabIndex = -1;
     }
-
-    var inputType = layer.get('radioGroup') ? 'radio' : 'checkbox';
-    return (
-      // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions
-      React.createElement( '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: function (e) {
-          if (e.which === 13) {
-            this$1.onInputClick(layer);
-          }
-        } },
-        React.createElement( 'input', {
-          type: inputType, tabIndex: -1, checked: layer.visible, readOnly: true, onClick: function () {
-            return this$1.onInputClick(layer);
-          } }),
-        React.createElement( 'span', null )
-      )
-    );
-  };
-
-  LayerTree.prototype.renderArrow = function renderArrow (layer) {
-    var ref = this.props;
-    var isItemHidden = ref.isItemHidden;
-    var ref$1 = this.state;
-    var expandedLayers = ref$1.expandedLayers;
-
-    if (
-      !layer.children.filter(function (c) {
-        return !isItemHidden(c);
-      }).length ||
-      layer.get('isAlwaysExpanded')
-    ) {
+    const inputType = layer.get("group") ? "radio" : "checkbox";
+    return /* @__PURE__ */ React.createElement("label", {
+      className: `rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`,
+      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);
+        }
+      }
+    }, /* @__PURE__ */ React.createElement("input", {
+      type: inputType,
+      tabIndex: -1,
+      checked: layer.visible,
+      readOnly: true,
+      onClick: () => {
+        return this.onInputClick(layer);
+      }
+    }), /* @__PURE__ */ React.createElement("span", null));
+  }
+  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 (
-      React.createElement( '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.
-  LayerTree.prototype.renderToggleButton = function renderToggleButton (layer) {
-    var this$1 = this;
-
-    var ref = this.props;
-    var t = ref.t;
-    var titles = ref.titles;
-    var isItemHidden = ref.isItemHidden;
-    var renderLabel = ref.renderLabel;
-    var ref$1 = this.state;
-    var expandedLayers = ref$1.expandedLayers;
-    var onInputClick = function () {
-      this$1.onInputClick(
+    return /* @__PURE__ */ React.createElement("div", {
+      className: `rs-layer-tree-arrow rs-layer-tree-arrow-${!expandedLayers.includes(layer) ? "collapsed" : "expanded"}`
+    });
+  }
+  renderToggleButton(layer) {
+    const { t, titles, isItemHidden, renderLabel } = this.props;
+    const { expandedLayers } = this.state;
+    const onInputClick = () => {
+      this.onInputClick(
         layer,
-        layer.children.filter(function (c) {
+        (layer.children || []).filter((c) => {
           return !isItemHidden(c);
-        }).length && !layer.get('isAlwaysExpanded')
+        }).length && !layer.get("isAlwaysExpanded")
       );
     };
-    var title = (t(layer.name)) + " " + (!expandedLayers.includes(layer)
-        ? titles.subLayerShow
-        : titles.subLayerHide);
-    return (
-      React.createElement( 'div', {
-        role: "button", tabIndex: 0, className: "rs-layer-tree-toggle", title: title, 'aria-expanded': expandedLayers.includes(layer), 'aria-label': title, onClick: onInputClick, onKeyPress: onInputClick },
-        React.createElement( 'div', null, renderLabel(layer, this) ),
-        this.renderArrow(layer)
-      )
-    );
-  };
-
-  LayerTree.prototype.renderItemContent = function renderItemContent (layer) {
-    return (
-      React.createElement( React.Fragment, null,
-        this.renderInput(layer),
-        this.renderToggleButton(layer)
-      )
-    );
-  };
-
-  LayerTree.prototype.renderItem = function renderItem (layer, level) {
-    var this$1 = this;
-
-    var ref = this.props;
-    var isItemHidden = ref.isItemHidden;
-    var ref$1 = this.props;
-    var renderItem = ref$1.renderItem;
-    var renderItemContent = ref$1.renderItemContent;
-    var renderBeforeItem = ref$1.renderBeforeItem;
-    var renderAfterItem = ref$1.renderAfterItem;
-    var padding = ref$1.padding;
-    var getParentClassName = ref$1.getParentClassName;
-    var ref$2 = this.state;
-    var expandedLayers = ref$2.expandedLayers;
-
-    var children = expandedLayers.includes(layer)
-      ? [].concat( layer.children.filter(function (c) {
-            return !isItemHidden(c);
-          }) )
-      : [];
-
+    const title = `${t(layer.name)} ${expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow}`;
+    return /* @__PURE__ */ React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "rs-layer-tree-toggle",
+      title,
+      "aria-expanded": expandedLayers.includes(layer),
+      "aria-label": title,
+      onClick: onInputClick,
+      onKeyPress: onInputClick
+    }, /* @__PURE__ */ React.createElement("div", null, renderLabel(layer, this)), this.renderArrow(layer));
+  }
+  renderItemContent(layer) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderInput(layer), this.renderToggleButton(layer));
+  }
+  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 (
-      React.createElement( 'div', { className: getParentClassName(), key: layer.key },
-        React.createElement( 'div', {
-          className: ("rs-layer-tree-item " + (layer.visible ? 'rs-visible' : '')), style: {
-            paddingLeft: ((padding * level) + "px"),
-          } },
-          renderItemContent
-            ? renderItemContent(layer, this)
-            : this.renderItemContent(layer)
-        ),
-        renderBeforeItem && renderBeforeItem(layer, level, this),
-        [].concat( children ).reverse().map(function (child) {
-          return this$1.renderItem(child, level + 1);
-        }),
-        renderAfterItem && renderAfterItem(layer, level, this)
-      )
-    );
-  };
-
-  LayerTree.prototype.renderTree = function renderTree () {
-    var this$1 = this;
-
-    var ref = this.props;
-    var isItemHidden = ref.isItemHidden;
-    var ref$1 = this.state;
-    var layers = ref$1.layers;
-
-    if (!layers) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: getParentClassName(),
+      key: layer.key
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `rs-layer-tree-item ${layer.visible ? "rs-visible" : ""}`,
+      style: {
+        paddingLeft: `${padding * level}px`
+      }
+    }, renderItemContent ? renderItemContent(layer, this) : this.renderItemContent(layer)), renderBeforeItem && renderBeforeItem(layer, level, this), [...children].reverse().map((child) => {
+      return this.renderItem(child, level + 1);
+    }), renderAfterItem && renderAfterItem(layer, level, this));
+  }
+  renderTree() {
+    const { isItemHidden } = this.props;
+    const { rootLayer } = this.state;
+    if (!rootLayer?.children?.length) {
       return null;
     }
-
-    return (
-      React.createElement( React.Fragment, null,
-        layers
-          .filter(function (l) {
-            return !isItemHidden(l);
-          })
-          .reverse()
-          .map(function (l) {
-            return this$1.renderItem(l, 0);
-          })
-      )
-    );
-  };
-
-  LayerTree.prototype.render = function render () {
-    var ref = this.props;
-    var className = ref.className;
-    return React.createElement( 'div', { className: className }, this.renderTree());
-  };
-
-  return LayerTree;
-}(Component));
-
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, rootLayer.children.filter((l) => {
+      return !isItemHidden(l);
+    }).reverse().map((l) => {
+      return this.renderItem(l, 0);
+    }));
+  }
+  render() {
+    const { className } = this.props;
+    return /* @__PURE__ */ React.createElement("div", {
+      className
+    }, this.renderTree());
+  }
+}
 LayerTree.propTypes = propTypes;
 LayerTree.defaultProps = defaultProps;
-
 export default LayerTree;
-
-//# sourceMappingURL=LayerTree.js.map