react-spatial 1.2.3-beta.4 → 1.2.3-beta.8

package/README.md

@@ -4,7 +4,7 @@
 [![build](https://github.com/geops/react-spatial/workflows/main/badge.svg)](https://github.com/geops/react-spatial/actions?query=workflow%3Amain)
 [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/8f7b7082-8998-4e1f-9a34-4d8cd18e6003/deploy-status)](https://app.netlify.com/sites/react-spatial/deploys)
+![Vercel](https://vercelbadge.vercel.app/api/geops/react-spatial)
 
 This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/api/).
 

package/components/LayerTree/LayerTree.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
 const propTypes = {
-  layers: PropTypes.arrayOf(Layer),
+  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
   className: PropTypes.string,
   padding: PropTypes.number,
   isItemHidden: PropTypes.func,
@@ -128,7 +128,7 @@ class LayerTree extends Component {
     }
     getLayersAsFlatArray(rootLayer).forEach((layer) => {
       this.olKeys.push(
-        layer.on("propertychange", (evt) => {
+        layer.on("propertychange", () => {
           const { revision } = this.state;
           this.setState({ revision: revision + 1 });
         })

package/components/LayerTree/LayerTree.js.map

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

package/components/RouteSchedule/RouteSchedule.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {
   RealtimeLayer as TrackerLayer,
-  trackerConfig
+  realtimeConfig
 } from "mobility-toolbox-js/ol";
 import { getHoursAndMinutes, getDelayString } from "../../utils/timeUtils";
 import ReactTransitPropTypes from "../../propTypes";
@@ -10,7 +10,7 @@ import firstStation from "../../images/RouteSchedule/firstStation.png";
 import station from "../../images/RouteSchedule/station.png";
 import lastStation from "../../images/RouteSchedule/lastStation.png";
 import line from "../../images/RouteSchedule/line.png";
-const { getBgColor } = trackerConfig;
+const { getBgColor } = realtimeConfig;
 const getDelayColor = (time) => {
   const secs = Math.round(time / 1800 / 2 * 3600 / 1e3);
   if (secs >= 3600) {

package/components/RouteSchedule/RouteSchedule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/RouteSchedule/RouteSchedule.js"],
-  "sourcesContent": ["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  RealtimeLayer as TrackerLayer,\n  trackerConfig,\n} from 'mobility-toolbox-js/ol';\nimport { getHoursAndMinutes, getDelayString } from '../../utils/timeUtils';\nimport ReactTransitPropTypes from '../../propTypes';\nimport firstStation from '../../images/RouteSchedule/firstStation.png';\nimport station from '../../images/RouteSchedule/station.png';\nimport lastStation from '../../images/RouteSchedule/lastStation.png';\nimport line from '../../images/RouteSchedule/line.png';\n\nconst { getBgColor } = trackerConfig;\n\n/**\n * Returns a color class to display the delay.\n * @param {Number} time Delay time in milliseconds.\n */\nconst getDelayColor = (time) => {\n  const secs = Math.round(((time / 1800 / 2) * 3600) / 1000);\n  if (secs >= 3600) {\n    return 'dark-red';\n  }\n  if (secs >= 500) {\n    return 'middle-red';\n  }\n  if (secs >= 300) {\n    return 'light-red';\n  }\n  if (secs >= 180) {\n    return 'orange';\n  }\n  return 'green';\n};\n\n/**\n * Returns true if the train doesn't stop to the station.\n * @param {Object} stop Station information.\n */\nconst isNotStop = (stop) => {\n  return !stop.arrivalTime && !stop.departureTime;\n};\n\n/**\n * Returns if the station has already been passed by the vehicule.\n * @param {Object} stop Station information.\n * @param {number} time The current time to test in ms.\n * @param {Array<Object>} stops the list of all stops of the train.\n * @param {idx} idx The index of the stop object in the stops array.\n */\nconst isPassed = (stop, time, stops, idx) => {\n  // If the train doesn't stop to the stop object, we test if the stop just before has been passed or not.\n  // if yes the current stop is considered as passed.\n  if (isNotStop(stop)) {\n    if (stops[idx - 1] && idx > 0) {\n      return isPassed(stops[idx - 1], time, stops, idx);\n    }\n    return true;\n  }\n\n  // Sometimes stop.departureDelay is undefined.\n  const timeToCompare = stop.departureTime || stop.arrivalTime || 0;\n  const delayToCompare = stop.departureDelay || stop.arrivalDelay || 0;\n  return timeToCompare + delayToCompare <= time;\n};\n\n/**\n * Returns an image for first, middle or last stations.\n * @param {Number} stations The stations list.\n * @param {Number} index Index of the station in the list.\n * @param {Boolean} isStationPassed If the train is already passed at this station.\n * @param {Boolean} isNotStation If the train doesn't stop to this station.\n */\nconst defaultRenderStationImg = (\n  stations,\n  index,\n  isStationPassed,\n  isNotStation,\n) => {\n  const { length } = stations;\n  let src = station.src || station;\n  if (index === 0) {\n    src = firstStation.src || firstStation;\n  } else if (index === length - 1) {\n    src = lastStation.src || lastStation;\n  } else if (isNotStation) {\n    src = line.src || line;\n  }\n  return <img src={src} alt=\"routeScheduleLine\" className=\"rt-route-icon\" />;\n};\n\nconst defaultRenderStation = ({\n  lineInfos,\n  onStationClick,\n  trackerLayer,\n  renderStationImg,\n  stop,\n  idx,\n}) => {\n  const {\n    stationId,\n    arrivalDelay,\n    departureDelay,\n    arrivalTime,\n    departureTime,\n    state,\n    stationName,\n  } = stop;\n  const cancelled = state === 'JOURNEY_CANCELLED' || state === 'STOP_CANCELLED';\n  const { stations } = lineInfos;\n  const isFirstStation = idx === 0;\n  const isLastStation = idx === stations.length - 1;\n  const isStationPassed = isPassed(stop, trackerLayer.time, stations, idx);\n  const isNotStation = isNotStop(stop);\n  return (\n    <div\n      // Train line can go in circle so begin and end have the same id,\n      // using the time in the key should fix the issue.\n      key={(stationId || stationName) + arrivalTime + departureTime}\n      role=\"button\"\n      className={[\n        'rt-route-station',\n        isStationPassed ? ' rt-passed' : '',\n        isNotStation ? ' rt-no-stop' : '',\n      ].join('')}\n      onClick={(e) => {\n        return onStationClick(stop, e);\n      }}\n      tabIndex={0}\n      onKeyPress={(e) => {\n        return e.which === 13 && onStationClick(stop, e);\n      }}\n    >\n      <div className=\"rt-route-delay\">\n        {typeof arrivalDelay === 'undefined' || isFirstStation || cancelled ? (\n          ''\n        ) : (\n          <span\n            className={`rt-route-delay-arrival${` ${getDelayColor(\n              arrivalDelay,\n            )}`}`}\n          >\n            {`+${getDelayString(arrivalDelay)}`}\n          </span>\n        )}\n        {typeof departureDelay === 'undefined' || isLastStation || cancelled ? (\n          ''\n        ) : (\n          <span\n            className={`rt-route-delay-departure${` ${getDelayColor(\n              departureDelay,\n            )}`}`}\n          >\n            {`+${getDelayString(departureDelay)}`}\n          </span>\n        )}\n      </div>\n      <div className=\"rt-route-times\">\n        <span\n          className={`rt-route-time-arrival ${\n            cancelled ? 'rt-route-cancelled' : ''\n          }`}\n        >\n          {getHoursAndMinutes(arrivalTime)}\n        </span>\n        <span\n          className={`rt-route-time-departure ${\n            cancelled ? 'rt-route-cancelled' : ''\n          }`}\n        >\n          {getHoursAndMinutes(departureTime)}\n        </span>\n      </div>\n      {renderStationImg(stations, idx, isStationPassed, isNotStation)}\n      <div className={cancelled ? 'rt-route-cancelled' : ''}>{stationName}</div>\n    </div>\n  );\n};\n\nconst renderRouteIdentifier = ({ routeIdentifier, longName }) => {\n  if (routeIdentifier) {\n    // first part of the id, without leading zeros.\n    const id = parseInt(routeIdentifier.split('.')[0], 10);\n    if (!longName.includes(id)) {\n      return ` (${id})`;\n    }\n  }\n  return null;\n};\n\nconst defaultRenderHeader = ({ lineInfos, renderHeaderButtons }) => {\n  const {\n    type,\n    vehicleType,\n    shortName,\n    longName,\n    stroke,\n    destination,\n    routeIdentifier,\n    text_color: textColor,\n  } = lineInfos;\n  return (\n    <div className=\"rt-route-header\">\n      <span\n        className=\"rt-route-icon\"\n        style={{\n          /* stylelint-disable-next-line value-keyword-case */\n          backgroundColor: stroke || getBgColor(type || vehicleType),\n          color: textColor || 'black',\n        }}\n      >\n        {shortName}\n      </span>\n      <div className=\"rt-route-title\">\n        <span className=\"rt-route-name\">{destination}</span>\n        <span>\n          {longName}\n          {renderRouteIdentifier(lineInfos)}\n        </span>\n      </div>\n      <div className=\"rt-route-buttons\">\n        {renderHeaderButtons(routeIdentifier)}\n      </div>\n    </div>\n  );\n};\n\nconst defaultRenderFooter = (props) => {\n  const { lineInfos, renderCopyright } = props;\n  if (!lineInfos.operator && !lineInfos.publisher) {\n    return null;\n  }\n  return <div className=\"rt-route-footer\">{renderCopyright({ ...props })}</div>;\n};\n\nconst defaultRenderLink = (text, url) => {\n  return (\n    <div className=\"rt-route-copyright-link\">\n      {url ? (\n        <a href={url} target=\"_blank\" rel=\"noreferrer\">\n          {text}\n        </a>\n      ) : (\n        <>{text}</>\n      )}\n    </div>\n  );\n};\n\nconst defaultRenderCopyright = ({ lineInfos }) => {\n  return (\n    <span className=\"rt-route-copyright\">\n      {lineInfos.operator &&\n        defaultRenderLink(lineInfos.operator, lineInfos.operatorUrl)}\n      {lineInfos.operator && lineInfos.publisher && <span>&nbsp;-&nbsp;</span>}\n      {lineInfos.publisher &&\n        defaultRenderLink(lineInfos.publisher, lineInfos.publisherUrl)}\n      {lineInfos.license && <span>&nbsp;(</span>}\n      {lineInfos.license &&\n        defaultRenderLink(lineInfos.license, lineInfos.licenseUrl)}\n      {lineInfos.license && ')'}\n    </span>\n  );\n};\n\nconst propTypes = {\n  /**\n   * CSS class of the route schedule wrapper.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Trajectory stations informations.\n   */\n  lineInfos: ReactTransitPropTypes.lineInfos,\n\n  /**\n   * Trackerlayer.\n   */\n  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,\n\n  /**\n   * Render Header of the route scheduler.\n   */\n  renderHeader: PropTypes.func,\n\n  /**\n   * Render Footer of the route scheduler.\n   */\n  renderFooter: PropTypes.func,\n\n  /**\n   * Render Copyright of the route scheduler.\n   */\n  renderCopyright: PropTypes.func,\n\n  /**\n   * Render the status of the station image.\n   */\n  renderStationImg: PropTypes.func,\n\n  /**\n   * Render a station.\n   */\n  renderStation: PropTypes.func,\n\n  /**\n   * Function triggered on station's click event.\n   */\n  onStationClick: PropTypes.func,\n\n  /**\n   * Function to render header buttons.\n   */\n  renderHeaderButtons: PropTypes.func,\n};\n\nconst defaultProps = {\n  className: 'rt-route-schedule',\n  lineInfos: null,\n  renderHeader: defaultRenderHeader,\n  renderStation: defaultRenderStation,\n  renderStationImg: defaultRenderStationImg,\n  renderCopyright: defaultRenderCopyright,\n  renderFooter: defaultRenderFooter,\n  renderHeaderButtons: () => {\n    return null;\n  },\n  onStationClick: () => {},\n};\n\n/**\n * RouteSchedule displays information, stops and punctuality about the clicked route.\n */\nfunction RouteSchedule(props) {\n  const { lineInfos, className, renderStation, renderHeader, renderFooter } =\n    props;\n\n  if (!lineInfos) {\n    return null;\n  }\n\n  return (\n    <div className={className}>\n      {renderHeader({ ...props })}\n      <div className=\"rt-route-body\">\n        {lineInfos.stations.map((stop, idx) => {\n          return renderStation({ ...props, stop, idx });\n        })}\n      </div>\n      {renderFooter({ ...props })}\n    </div>\n  );\n}\n\nRouteSchedule.propTypes = propTypes;\nRouteSchedule.defaultProps = defaultProps;\n\nexport default React.memo(RouteSchedule);\n"],
+  "sourcesContent": ["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  RealtimeLayer as TrackerLayer,\n  realtimeConfig,\n} from 'mobility-toolbox-js/ol';\nimport { getHoursAndMinutes, getDelayString } from '../../utils/timeUtils';\nimport ReactTransitPropTypes from '../../propTypes';\nimport firstStation from '../../images/RouteSchedule/firstStation.png';\nimport station from '../../images/RouteSchedule/station.png';\nimport lastStation from '../../images/RouteSchedule/lastStation.png';\nimport line from '../../images/RouteSchedule/line.png';\n\nconst { getBgColor } = realtimeConfig;\n\n/**\n * Returns a color class to display the delay.\n * @param {Number} time Delay time in milliseconds.\n */\nconst getDelayColor = (time) => {\n  const secs = Math.round(((time / 1800 / 2) * 3600) / 1000);\n  if (secs >= 3600) {\n    return 'dark-red';\n  }\n  if (secs >= 500) {\n    return 'middle-red';\n  }\n  if (secs >= 300) {\n    return 'light-red';\n  }\n  if (secs >= 180) {\n    return 'orange';\n  }\n  return 'green';\n};\n\n/**\n * Returns true if the train doesn't stop to the station.\n * @param {Object} stop Station information.\n */\nconst isNotStop = (stop) => {\n  return !stop.arrivalTime && !stop.departureTime;\n};\n\n/**\n * Returns if the station has already been passed by the vehicule.\n * @param {Object} stop Station information.\n * @param {number} time The current time to test in ms.\n * @param {Array<Object>} stops the list of all stops of the train.\n * @param {idx} idx The index of the stop object in the stops array.\n */\nconst isPassed = (stop, time, stops, idx) => {\n  // If the train doesn't stop to the stop object, we test if the stop just before has been passed or not.\n  // if yes the current stop is considered as passed.\n  if (isNotStop(stop)) {\n    if (stops[idx - 1] && idx > 0) {\n      return isPassed(stops[idx - 1], time, stops, idx);\n    }\n    return true;\n  }\n\n  // Sometimes stop.departureDelay is undefined.\n  const timeToCompare = stop.departureTime || stop.arrivalTime || 0;\n  const delayToCompare = stop.departureDelay || stop.arrivalDelay || 0;\n  return timeToCompare + delayToCompare <= time;\n};\n\n/**\n * Returns an image for first, middle or last stations.\n * @param {Number} stations The stations list.\n * @param {Number} index Index of the station in the list.\n * @param {Boolean} isStationPassed If the train is already passed at this station.\n * @param {Boolean} isNotStation If the train doesn't stop to this station.\n */\nconst defaultRenderStationImg = (\n  stations,\n  index,\n  isStationPassed,\n  isNotStation,\n) => {\n  const { length } = stations;\n  let src = station.src || station;\n  if (index === 0) {\n    src = firstStation.src || firstStation;\n  } else if (index === length - 1) {\n    src = lastStation.src || lastStation;\n  } else if (isNotStation) {\n    src = line.src || line;\n  }\n  return <img src={src} alt=\"routeScheduleLine\" className=\"rt-route-icon\" />;\n};\n\nconst defaultRenderStation = ({\n  lineInfos,\n  onStationClick,\n  trackerLayer,\n  renderStationImg,\n  stop,\n  idx,\n}) => {\n  const {\n    stationId,\n    arrivalDelay,\n    departureDelay,\n    arrivalTime,\n    departureTime,\n    state,\n    stationName,\n  } = stop;\n  const cancelled = state === 'JOURNEY_CANCELLED' || state === 'STOP_CANCELLED';\n  const { stations } = lineInfos;\n  const isFirstStation = idx === 0;\n  const isLastStation = idx === stations.length - 1;\n  const isStationPassed = isPassed(stop, trackerLayer.time, stations, idx);\n  const isNotStation = isNotStop(stop);\n  return (\n    <div\n      // Train line can go in circle so begin and end have the same id,\n      // using the time in the key should fix the issue.\n      key={(stationId || stationName) + arrivalTime + departureTime}\n      role=\"button\"\n      className={[\n        'rt-route-station',\n        isStationPassed ? ' rt-passed' : '',\n        isNotStation ? ' rt-no-stop' : '',\n      ].join('')}\n      onClick={(e) => {\n        return onStationClick(stop, e);\n      }}\n      tabIndex={0}\n      onKeyPress={(e) => {\n        return e.which === 13 && onStationClick(stop, e);\n      }}\n    >\n      <div className=\"rt-route-delay\">\n        {typeof arrivalDelay === 'undefined' || isFirstStation || cancelled ? (\n          ''\n        ) : (\n          <span\n            className={`rt-route-delay-arrival${` ${getDelayColor(\n              arrivalDelay,\n            )}`}`}\n          >\n            {`+${getDelayString(arrivalDelay)}`}\n          </span>\n        )}\n        {typeof departureDelay === 'undefined' || isLastStation || cancelled ? (\n          ''\n        ) : (\n          <span\n            className={`rt-route-delay-departure${` ${getDelayColor(\n              departureDelay,\n            )}`}`}\n          >\n            {`+${getDelayString(departureDelay)}`}\n          </span>\n        )}\n      </div>\n      <div className=\"rt-route-times\">\n        <span\n          className={`rt-route-time-arrival ${\n            cancelled ? 'rt-route-cancelled' : ''\n          }`}\n        >\n          {getHoursAndMinutes(arrivalTime)}\n        </span>\n        <span\n          className={`rt-route-time-departure ${\n            cancelled ? 'rt-route-cancelled' : ''\n          }`}\n        >\n          {getHoursAndMinutes(departureTime)}\n        </span>\n      </div>\n      {renderStationImg(stations, idx, isStationPassed, isNotStation)}\n      <div className={cancelled ? 'rt-route-cancelled' : ''}>{stationName}</div>\n    </div>\n  );\n};\n\nconst renderRouteIdentifier = ({ routeIdentifier, longName }) => {\n  if (routeIdentifier) {\n    // first part of the id, without leading zeros.\n    const id = parseInt(routeIdentifier.split('.')[0], 10);\n    if (!longName.includes(id)) {\n      return ` (${id})`;\n    }\n  }\n  return null;\n};\n\nconst defaultRenderHeader = ({ lineInfos, renderHeaderButtons }) => {\n  const {\n    type,\n    vehicleType,\n    shortName,\n    longName,\n    stroke,\n    destination,\n    routeIdentifier,\n    text_color: textColor,\n  } = lineInfos;\n  return (\n    <div className=\"rt-route-header\">\n      <span\n        className=\"rt-route-icon\"\n        style={{\n          /* stylelint-disable-next-line value-keyword-case */\n          backgroundColor: stroke || getBgColor(type || vehicleType),\n          color: textColor || 'black',\n        }}\n      >\n        {shortName}\n      </span>\n      <div className=\"rt-route-title\">\n        <span className=\"rt-route-name\">{destination}</span>\n        <span>\n          {longName}\n          {renderRouteIdentifier(lineInfos)}\n        </span>\n      </div>\n      <div className=\"rt-route-buttons\">\n        {renderHeaderButtons(routeIdentifier)}\n      </div>\n    </div>\n  );\n};\n\nconst defaultRenderFooter = (props) => {\n  const { lineInfos, renderCopyright } = props;\n  if (!lineInfos.operator && !lineInfos.publisher) {\n    return null;\n  }\n  return <div className=\"rt-route-footer\">{renderCopyright({ ...props })}</div>;\n};\n\nconst defaultRenderLink = (text, url) => {\n  return (\n    <div className=\"rt-route-copyright-link\">\n      {url ? (\n        <a href={url} target=\"_blank\" rel=\"noreferrer\">\n          {text}\n        </a>\n      ) : (\n        <>{text}</>\n      )}\n    </div>\n  );\n};\n\nconst defaultRenderCopyright = ({ lineInfos }) => {\n  return (\n    <span className=\"rt-route-copyright\">\n      {lineInfos.operator &&\n        defaultRenderLink(lineInfos.operator, lineInfos.operatorUrl)}\n      {lineInfos.operator && lineInfos.publisher && <span>&nbsp;-&nbsp;</span>}\n      {lineInfos.publisher &&\n        defaultRenderLink(lineInfos.publisher, lineInfos.publisherUrl)}\n      {lineInfos.license && <span>&nbsp;(</span>}\n      {lineInfos.license &&\n        defaultRenderLink(lineInfos.license, lineInfos.licenseUrl)}\n      {lineInfos.license && ')'}\n    </span>\n  );\n};\n\nconst propTypes = {\n  /**\n   * CSS class of the route schedule wrapper.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Trajectory stations informations.\n   */\n  lineInfos: ReactTransitPropTypes.lineInfos,\n\n  /**\n   * Trackerlayer.\n   */\n  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,\n\n  /**\n   * Render Header of the route scheduler.\n   */\n  renderHeader: PropTypes.func,\n\n  /**\n   * Render Footer of the route scheduler.\n   */\n  renderFooter: PropTypes.func,\n\n  /**\n   * Render Copyright of the route scheduler.\n   */\n  renderCopyright: PropTypes.func,\n\n  /**\n   * Render the status of the station image.\n   */\n  renderStationImg: PropTypes.func,\n\n  /**\n   * Render a station.\n   */\n  renderStation: PropTypes.func,\n\n  /**\n   * Function triggered on station's click event.\n   */\n  onStationClick: PropTypes.func,\n\n  /**\n   * Function to render header buttons.\n   */\n  renderHeaderButtons: PropTypes.func,\n};\n\nconst defaultProps = {\n  className: 'rt-route-schedule',\n  lineInfos: null,\n  renderHeader: defaultRenderHeader,\n  renderStation: defaultRenderStation,\n  renderStationImg: defaultRenderStationImg,\n  renderCopyright: defaultRenderCopyright,\n  renderFooter: defaultRenderFooter,\n  renderHeaderButtons: () => {\n    return null;\n  },\n  onStationClick: () => {},\n};\n\n/**\n * RouteSchedule displays information, stops and punctuality about the clicked route.\n */\nfunction RouteSchedule(props) {\n  const { lineInfos, className, renderStation, renderHeader, renderFooter } =\n    props;\n\n  if (!lineInfos) {\n    return null;\n  }\n\n  return (\n    <div className={className}>\n      {renderHeader({ ...props })}\n      <div className=\"rt-route-body\">\n        {lineInfos.stations.map((stop, idx) => {\n          return renderStation({ ...props, stop, idx });\n        })}\n      </div>\n      {renderFooter({ ...props })}\n    </div>\n  );\n}\n\nRouteSchedule.propTypes = propTypes;\nRouteSchedule.defaultProps = defaultProps;\n\nexport default React.memo(RouteSchedule);\n"],
   "mappings": "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",
   "names": []
 }

package/components/RouteSchedule/RouteSchedule.scss

@@ -21,6 +21,13 @@
     .rt-route-buttons {
       margin-left: auto;
       display: flex;
+
+      button {
+        width: 35px;
+        height: 35px;
+        margin: 10px 5px 15px 5px;
+        color: black;
+      }
     }
 
     .rt-route-icon {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-spatial",
   "description": "Components to build React map apps.",
-  "version": "1.2.3-beta.4",
+  "version": "1.2.3-beta.8",
   "license": "MIT",
   "dependencies": {
     "@geops/geops-ui": "0.1.13",
@@ -14,7 +14,7 @@
     "re-resizable": "6.9.1",
     "react-autosuggest": "10.1.0",
     "react-draggable": "4.4.4",
-    "react-icons": "4.3.1",
+    "react-icons": "4.4.0",
     "resize-observer-polyfill": "1.5.1"
   },
   "peerDependencies": {
@@ -70,7 +70,7 @@
     "lint-staged": "11.2.0",
     "mapbox-gl": "1.13.1",
     "maplibre-gl": "2.4.0",
-    "mobility-toolbox-js": "2.0.0-beta.39",
+    "mobility-toolbox-js": "2.0.0-beta.53",
     "ol": "6.14.1",
     "prettier": "2.4.1",
     "proj4": "2.7.5",
@@ -96,7 +96,7 @@
     "xml-beautifier": "0.5.0"
   },
   "scripts": {
-    "esbuild": "esbuild src/*.js src/**/*.js src/**/**/*.js src/**/**/**/*.js --target=chrome100 --outdir=build/ --loader:.js=jsx --sourcemap=external",
+    "esbuild": "esbuild src/*.js src/**/*.js src/**/**/*.js --target=chrome100 --outdir=build/ --loader:.js=jsx --sourcemap=external",
     "buble": "buble --no modules,asyncAwait -i src -o build --objectAssign Object.assign --sourcemap",
     "build": "yarn esbuild && find build -type f -name '*.test.*' -delete && rm -rf build/styleguidist && cp package.json README.md LICENSE build && cp -rf src/images build && cp -rf src/themes build",
     "coverage": "yarn test --coverage --coverageDirectory=coverage",

package/themes/default/components.scss

@@ -1,8 +1,6 @@
 /**
 * This file load the css of components.
 */
-@import '../../components/FilterButton/FilterButton.scss';
-@import '../../components/FollowButton/FollowButton.scss';
 @import '../../components/BaseLayerSwitcher/BaseLayerSwitcher.scss';
 @import '../../components/Geolocation/Geolocation.scss';
 @import '../../components/LayerTree/LayerTree.scss';
@@ -11,6 +9,4 @@
 @import '../../components/ScaleLine/ScaleLine.scss';
 @import '../../components/Zoom/Zoom.scss';
 @import '../../components/RouteSchedule/RouteSchedule.scss';
-@import '../../components/TrackerControl/TrackerControl.scss';
-@import '../../components/Search/Search.scss';
 @import '../../components/Overlay/Overlay.scss';

package/themes/default/examples.scss

@@ -15,7 +15,6 @@
 @import '../../components/Zoom/Zoom.md.scss';
 @import '../../components/RouteSchedule/RouteSchedule.md.scss';
 @import '../../components/Copyright/Copyright.md.scss';
-@import '../../components/Search/Search.md.scss';
 @import '../../components/Overlay/Overlay.md.scss';
 
 $link-color: #000;

package/LayerService.js

@@ -1,108 +0,0 @@
-import { unByKey } from "ol/Observable";
-export default class LayerService {
-  constructor(layers) {
-    this.layers = layers;
-    this.callbacks = {};
-    this.keys = [];
-    this.listenChangeEvt();
-  }
-  addLayer(layer) {
-    this.layers.push(layer);
-  }
-  getLayers() {
-    return this.layers;
-  }
-  setLayers(layers) {
-    this.layers = layers;
-    this.listenChangeEvt();
-    (this.callbacks["change:layers"] || []).forEach((cb) => {
-      return cb(layers);
-    });
-  }
-  getLayersAsFlatArray(optLayers) {
-    let layers = [];
-    (optLayers || this.getLayers() || []).forEach((l) => {
-      layers.push(l);
-      const { children } = l;
-      layers = layers.concat(this.getLayersAsFlatArray(children || []));
-    });
-    return layers;
-  }
-  getLayer(name) {
-    return this.getLayersAsFlatArray().find((l) => {
-      return l.name === name;
-    });
-  }
-  getParent(child) {
-    return this.getLayersAsFlatArray().find((l) => {
-      return !!l.children.includes(child);
-    });
-  }
-  getParents(child) {
-    let layer = child;
-    const parents = [];
-    let parentLayer;
-    do {
-      parentLayer = this.getParent(layer);
-      if (parentLayer) {
-        parents.push(parentLayer);
-        layer = parentLayer;
-      }
-    } while (parentLayer);
-    return parents;
-  }
-  getRadioGroupLayers(radioGroupName) {
-    if (radioGroupName) {
-      return this.getLayersAsFlatArray().filter((l) => {
-        return l.get("radioGroup") === radioGroupName;
-      });
-    }
-    return null;
-  }
-  getBaseLayers() {
-    return this.getLayersAsFlatArray().filter((l) => {
-      return l.isBaseLayer;
-    });
-  }
-  getQueryableLayers() {
-    return this.getLayersAsFlatArray().filter((layer) => {
-      return layer.visible && layer.isQueryable;
-    });
-  }
-  getFeatureInfoAtCoordinate(coordinate, layers) {
-    const promises = (layers || this.getQueryableLayers()).map((layer) => {
-      return layer.getFeatureInfoAtCoordinate(coordinate).then((featureInfo) => {
-        return featureInfo;
-      });
-    });
-    return Promise.all(promises);
-  }
-  on(evt, callback) {
-    this.un(evt, callback);
-    this.callbacks[evt] = this.callbacks[evt] || [];
-    this.callbacks[evt].push(callback);
-  }
-  un(evt, callback) {
-    for (let i = 0; i < (this.callbacks[evt] || []).length; i += 1) {
-      if (callback === this.callbacks[evt][i]) {
-        this.callbacks[evt].splice(i, 1);
-        break;
-      }
-    }
-  }
-  listenChangeEvt() {
-    if (this.keys) {
-      unByKey(this.keys);
-      this.keys = [];
-    }
-    this.getLayersAsFlatArray().forEach((layer) => {
-      this.keys.push(
-        layer.on("change:copyright", (evt) => {
-          (this.callbacks["change:copyright"] || []).forEach((cb) => {
-            return cb(evt.target);
-          });
-        })
-      );
-    });
-  }
-}

package/LayerService.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/LayerService.js"],
-  "sourcesContent": ["import { unByKey } from 'ol/Observable';\n\n/**\n * A layer service class to handle layer adding, removing and visiblity.\n */\nexport default class LayerService {\n  constructor(layers) {\n    this.layers = layers;\n    this.callbacks = {};\n    this.keys = [];\n    this.listenChangeEvt();\n  }\n\n  addLayer(layer) {\n    this.layers.push(layer);\n  }\n\n  getLayers() {\n    return this.layers;\n  }\n\n  setLayers(layers) {\n    this.layers = layers;\n    this.listenChangeEvt();\n    // When we change the layers we trigger an change:layers event\n    (this.callbacks['change:layers'] || []).forEach((cb) => {\n      return cb(layers);\n    });\n  }\n\n  getLayersAsFlatArray(optLayers) {\n    let layers = [];\n    (optLayers || this.getLayers() || []).forEach((l) => {\n      layers.push(l);\n      const { children } = l;\n      layers = layers.concat(this.getLayersAsFlatArray(children || []));\n    });\n    return layers;\n  }\n\n  getLayer(name) {\n    return this.getLayersAsFlatArray().find((l) => {\n      return l.name === name;\n    });\n  }\n\n  getParent(child) {\n    return this.getLayersAsFlatArray().find((l) => {\n      return !!l.children.includes(child);\n    });\n  }\n\n  getParents(child) {\n    let layer = child;\n    const parents = [];\n\n    let parentLayer;\n    do {\n      parentLayer = this.getParent(layer);\n      if (parentLayer) {\n        parents.push(parentLayer);\n        layer = parentLayer;\n      }\n    } while (parentLayer);\n\n    return parents;\n  }\n\n  getRadioGroupLayers(radioGroupName) {\n    if (radioGroupName) {\n      return this.getLayersAsFlatArray().filter((l) => {\n        return l.get('radioGroup') === radioGroupName;\n      });\n    }\n\n    return null;\n  }\n\n  getBaseLayers() {\n    return this.getLayersAsFlatArray().filter((l) => {\n      return l.isBaseLayer;\n    });\n  }\n\n  getQueryableLayers() {\n    return this.getLayersAsFlatArray().filter((layer) => {\n      return layer.visible && layer.isQueryable;\n    });\n  }\n\n  getFeatureInfoAtCoordinate(coordinate, layers) {\n    const promises = (layers || this.getQueryableLayers()).map((layer) => {\n      return layer\n        .getFeatureInfoAtCoordinate(coordinate)\n        .then((featureInfo) => {\n          return featureInfo;\n        });\n    });\n    return Promise.all(promises);\n  }\n\n  on(evt, callback) {\n    this.un(evt, callback);\n    this.callbacks[evt] = this.callbacks[evt] || [];\n    this.callbacks[evt].push(callback);\n  }\n\n  un(evt, callback) {\n    for (let i = 0; i < (this.callbacks[evt] || []).length; i += 1) {\n      if (callback === this.callbacks[evt][i]) {\n        this.callbacks[evt].splice(i, 1);\n        break;\n      }\n    }\n  }\n\n  listenChangeEvt() {\n    if (this.keys) {\n      unByKey(this.keys);\n      this.keys = [];\n    }\n    this.getLayersAsFlatArray().forEach((layer) => {\n      this.keys.push(\n        layer.on('change:copyright', (evt) => {\n          (this.callbacks['change:copyright'] || []).forEach((cb) => {\n            return cb(evt.target);\n          });\n        }),\n        // layer.on('change:visible', (evt) => {\n        //   const { visible } = evt.target;\n\n        //   // Apply to siblings only if it's a radio group.\n        //   if (\n        //     !evt.stopPropagationSiblings &&\n        //     layer.get('radioGroup') &&\n        //     visible\n        //   ) {\n        //     const siblings = this.getRadioGroupLayers(\n        //       layer.get('radioGroup'),\n        //     ).filter((l) => {\n        //       return l !== layer;\n        //     });\n\n        //     siblings.forEach((s) => {\n        //       if (\n        //         visible &&\n        //         s.get('radioGroup') &&\n        //         evt.target.get('radioGroup') === s.get('radioGroup')\n        //       ) {\n        //         // eslint-disable-next-line no-param-reassign\n        //         s.visible = false;\n        //       }\n        //     });\n        //   }\n\n        //   // Apply to children\n        //   if (!evt.stopPropagationDown && layer.children) {\n        //     layer.children.forEach((child) => {\n        //       // eslint-disable-next-line no-param-reassign\n        //       child.visible = visible;\n        //     });\n        //   }\n\n        //   // Apply to parent only if:\n        //   //   - a child is visible\n        //   //   - all children are hidden\n        //   const parentLayer = this.getParent(layer);\n\n        //   if (\n        //     !evt.stopPropagationUp &&\n        //     parentLayer &&\n        //     (visible ||\n        //       (!visible &&\n        //         !parentLayer.children.find((c) => {\n        //           return c.visible;\n        //         })))\n        //   ) {\n        //     parentLayer.visible = visible;\n        //   }\n\n        //   (this.callbacks['change:visible'] || []).forEach((cb) => {\n        //     return cb(evt.target);\n        //   });\n        // }),\n      );\n    });\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/components/FilterButton/FilterButton.js

@@ -1,66 +0,0 @@
-import React, { PureComponent } from "react";
-import qs from "query-string";
-import PropTypes from "prop-types";
-import { RealtimeLayer as TrackerLayer } from "mobility-toolbox-js/ol";
-const propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.string,
-  routeIdentifier: PropTypes.string.isRequired,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,
-  children: PropTypes.element.isRequired
-};
-const defaultProps = {
-  className: "rt-route-filter",
-  title: "Filter"
-};
-class FilterButton extends PureComponent {
-  updatePermalink(isRemoving) {
-    const { routeIdentifier } = this.props;
-    const parameters = qs.parse(window.location.search.toLowerCase());
-    if (isRemoving) {
-      delete parameters.tripnumber;
-    } else {
-      parameters.tripnumber = parseInt(routeIdentifier.split(".")[0], 10);
-    }
-    const qStr = qs.stringify(parameters, { encode: false });
-    const search = `?${qStr}`;
-    const { hash } = window.location;
-    window.history.replaceState(void 0, void 0, `${search}${hash || ""}`);
-  }
-  toggleFilter(routeIdentifier) {
-    const { trackerLayer, active, onClick } = this.props;
-    const activated = !active;
-    if (trackerLayer) {
-      if (activated) {
-        this.updatePermalink(false);
-        [trackerLayer.tripNumber] = routeIdentifier.split(".");
-      } else {
-        this.updatePermalink(true);
-        trackerLayer.tripNumber = null;
-      }
-    }
-    onClick(activated);
-  }
-  render() {
-    const { className, title, routeIdentifier, active, children } = this.props;
-    const toggle = () => {
-      return this.toggleFilter(routeIdentifier);
-    };
-    return /* @__PURE__ */ React.createElement("div", {
-      "aria-label": title,
-      className: `${className}${active ? " rt-active" : ""}`,
-      title,
-      onClick: toggle,
-      onKeyPress: (e) => {
-        return e.which === 13 && toggle();
-      },
-      role: "button",
-      tabIndex: 0
-    }, children);
-  }
-}
-FilterButton.propTypes = propTypes;
-FilterButton.defaultProps = defaultProps;
-export default FilterButton;

package/components/FilterButton/FilterButton.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/FilterButton/FilterButton.js"],
-  "sourcesContent": ["import React, { PureComponent } from 'react';\nimport qs from 'query-string';\nimport PropTypes from 'prop-types';\nimport { RealtimeLayer as TrackerLayer } from 'mobility-toolbox-js/ol';\n\nconst propTypes = {\n  /**\n   * CSS class of the filter button.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Title.\n   */\n  title: PropTypes.string,\n\n  /**\n   * Line info route identifer.\n   */\n  routeIdentifier: PropTypes.string.isRequired,\n\n  /**\n   * Button is active.\n   */\n  active: PropTypes.bool.isRequired,\n\n  /**\n   * Function triggered on button click.\n   */\n  onClick: PropTypes.func.isRequired,\n\n  /**\n   * Trackerlayer.\n   */\n  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,\n\n  /**\n   * Children content of the button.\n   */\n  children: PropTypes.element.isRequired,\n};\n\nconst defaultProps = {\n  className: 'rt-route-filter',\n  title: 'Filter',\n};\n\n/**\n * Button enables the filtering of a selected train.\n */\nclass FilterButton extends PureComponent {\n  updatePermalink(isRemoving) {\n    const { routeIdentifier } = this.props;\n\n    const parameters = qs.parse(window.location.search.toLowerCase());\n    if (isRemoving) {\n      delete parameters.tripnumber;\n    } else {\n      parameters.tripnumber = parseInt(routeIdentifier.split('.')[0], 10);\n    }\n\n    const qStr = qs.stringify(parameters, { encode: false });\n    const search = `?${qStr}`;\n    const { hash } = window.location;\n    window.history.replaceState(undefined, undefined, `${search}${hash || ''}`);\n  }\n\n  toggleFilter(routeIdentifier) {\n    const { trackerLayer, active, onClick } = this.props;\n    const activated = !active;\n\n    if (trackerLayer) {\n      if (activated) {\n        this.updatePermalink(false);\n        [trackerLayer.tripNumber] = routeIdentifier.split('.');\n      } else {\n        this.updatePermalink(true);\n        trackerLayer.tripNumber = null;\n      }\n    }\n\n    onClick(activated);\n  }\n\n  render() {\n    const { className, title, routeIdentifier, active, children } = this.props;\n    const toggle = () => {\n      return this.toggleFilter(routeIdentifier);\n    };\n\n    return (\n      <div\n        aria-label={title}\n        className={`${className}${active ? ' rt-active' : ''}`}\n        title={title}\n        onClick={toggle}\n        onKeyPress={(e) => {\n          return e.which === 13 && toggle();\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {children}\n      </div>\n    );\n  }\n}\n\nFilterButton.propTypes = propTypes;\nFilterButton.defaultProps = defaultProps;\n\nexport default FilterButton;\n"],
-  "mappings": "AAAA,OAAO,SAAS,qBAAqB;AACrC,OAAO,QAAQ;AACf,OAAO,eAAe;AACtB,SAAS,iBAAiB,oBAAoB;AAE9C,MAAM,YAAY;AAAA,EAIhB,WAAW,UAAU;AAAA,EAKrB,OAAO,UAAU;AAAA,EAKjB,iBAAiB,UAAU,OAAO;AAAA,EAKlC,QAAQ,UAAU,KAAK;AAAA,EAKvB,SAAS,UAAU,KAAK;AAAA,EAKxB,cAAc,UAAU,WAAW,YAAY,EAAE;AAAA,EAKjD,UAAU,UAAU,QAAQ;AAC9B;AAEA,MAAM,eAAe;AAAA,EACnB,WAAW;AAAA,EACX,OAAO;AACT;AAKA,MAAM,qBAAqB,cAAc;AAAA,EACvC,gBAAgB,YAAY;AAC1B,UAAM,EAAE,gBAAgB,IAAI,KAAK;AAEjC,UAAM,aAAa,GAAG,MAAM,OAAO,SAAS,OAAO,YAAY,CAAC;AAChE,QAAI,YAAY;AACd,aAAO,WAAW;AAAA,IACpB,OAAO;AACL,iBAAW,aAAa,SAAS,gBAAgB,MAAM,GAAG,EAAE,IAAI,EAAE;AAAA,IACpE;AAEA,UAAM,OAAO,GAAG,UAAU,YAAY,EAAE,QAAQ,MAAM,CAAC;AACvD,UAAM,SAAS,IAAI;AACnB,UAAM,EAAE,KAAK,IAAI,OAAO;AACxB,WAAO,QAAQ,aAAa,QAAW,QAAW,GAAG,SAAS,QAAQ,IAAI;AAAA,EAC5E;AAAA,EAEA,aAAa,iBAAiB;AAC5B,UAAM,EAAE,cAAc,QAAQ,QAAQ,IAAI,KAAK;AAC/C,UAAM,YAAY,CAAC;AAEnB,QAAI,cAAc;AAChB,UAAI,WAAW;AACb,aAAK,gBAAgB,KAAK;AAC1B,SAAC,aAAa,UAAU,IAAI,gBAAgB,MAAM,GAAG;AAAA,MACvD,OAAO;AACL,aAAK,gBAAgB,IAAI;AACzB,qBAAa,aAAa;AAAA,MAC5B;AAAA,IACF;AAEA,YAAQ,SAAS;AAAA,EACnB;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,WAAW,OAAO,iBAAiB,QAAQ,SAAS,IAAI,KAAK;AACrE,UAAM,SAAS,MAAM;AACnB,aAAO,KAAK,aAAa,eAAe;AAAA,IAC1C;AAEA,WACE,oCAAC;AAAA,MACC,cAAY;AAAA,MACZ,WAAW,GAAG,YAAY,SAAS,eAAe;AAAA,MAClD;AAAA,MACA,SAAS;AAAA,MACT,YAAY,CAAC,MAAM;AACjB,eAAO,EAAE,UAAU,MAAM,OAAO;AAAA,MAClC;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,OAET,QACH;AAAA,EAEJ;AACF;AAEA,aAAa,YAAY;AACzB,aAAa,eAAe;AAE5B,eAAe;",
-  "names": []
-}

package/components/FilterButton/FilterButton.scss

@@ -1,36 +0,0 @@
-.rt-route-filter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 35px;
-  width: 35px;
-  border-radius: 7px;
-  margin: 15px;
-  margin-top: 10px;
-  border: 2px solid #eee;
-  background-color: white;
-
-  svg {
-    height: 30px;
-    width: 30px;
-  }
-
-  &:hover {
-    background-color: #eee;
-  }
-
-  &.rt-active {
-    border-color: red;
-    background-color: red;
-
-    svg {
-      path {
-        fill: white;
-      }
-    }
-
-    &:hover {
-      background-color: red;
-    }
-  }
-}

package/components/FilterButton/index.js

@@ -1 +0,0 @@
-export { default } from "./FilterButton";

package/components/FilterButton/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/FilterButton/index.js"],
-  "sourcesContent": ["export { default } from './FilterButton';\n"],
-  "mappings": "AAAA,wBAAwB;",
-  "names": []
-}

package/components/FollowButton/FollowButton.js

@@ -1,73 +0,0 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { RealtimeLayer as TrackerLayer } from "mobility-toolbox-js/ol";
-const propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.string,
-  routeIdentifier: PropTypes.string.isRequired,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,
-  setCenter: PropTypes.func.isRequired,
-  children: PropTypes.element.isRequired
-};
-const defaultProps = {
-  className: "rt-route-follow",
-  title: "Follow"
-};
-class FollowButton extends PureComponent {
-  constructor() {
-    super();
-    this.onClick = this.onClick.bind(this);
-  }
-  componentDidUpdate(prevProps) {
-    const { routeIdentifier, active, trackerLayer, onClick } = this.props;
-    if (routeIdentifier !== prevProps.routeIdentifier) {
-      onClick(false);
-    }
-    if (active !== prevProps.active) {
-      if (active && trackerLayer) {
-        this.centerOnTrajectory(routeIdentifier);
-        this.updateInterval = window.setInterval(() => {
-          this.centerOnTrajectory(routeIdentifier);
-        }, 50);
-      } else {
-        clearInterval(this.updateInterval);
-      }
-    }
-  }
-  componentWillUnmount() {
-    clearInterval(this.updateInterval);
-  }
-  onClick() {
-    const { active, onClick } = this.props;
-    onClick(!active);
-  }
-  centerOnTrajectory(routeIdentifier) {
-    const { trackerLayer, setCenter } = this.props;
-    const [trajectory] = trackerLayer.getVehicle((r) => {
-      return r.routeIdentifier === routeIdentifier;
-    });
-    const firstCoord = trajectory && trajectory.coordinate;
-    if (firstCoord) {
-      setCenter(firstCoord);
-    }
-  }
-  render() {
-    const { className, title, active, children } = this.props;
-    return /* @__PURE__ */ React.createElement("div", {
-      "aria-label": title,
-      className: `${className}${active ? " rt-active" : ""}`,
-      title,
-      onClick: this.onClick,
-      onKeyPress: (e) => {
-        return e.which === 13 && this.onClick;
-      },
-      role: "button",
-      tabIndex: 0
-    }, children);
-  }
-}
-FollowButton.propTypes = propTypes;
-FollowButton.defaultProps = defaultProps;
-export default FollowButton;