fix(LayerTree): make LayerTree renderItemContent more configurable

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-spatial",
   "description": "Components to build React map apps.",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "license": "MIT",
   "dependencies": {
     "@geops/geops-ui": "0.1.13",
@@ -96,12 +96,12 @@
     "xml-beautifier": "0.5.0"
   },
   "scripts": {
-    "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",
     "cp": "generact --root src/components",
     "doc": "styleguidist build",
+    "esbuild": "esbuild src/*.js src/**/*.js src/**/**/*.js --target=chrome100 --outdir=build/ --loader:.js=jsx --sourcemap=external",
     "format": "prettier --write 'src/**/*.js' && eslint 'src/**/*.js' --fix && stylelint 'src/**/*.css' 'src/**/*.scss' --fix",
     "link2": "cmdToAdd=$(node ./scripts/read-pkg-json.js add) && $cmdToAdd && yarn build && cmdToRemove=$(node ./scripts/read-pkg-json.js remove) && $cmdToRemove && cd build && yarn link",
     "lint": "eslint 'src/**/*.js' && stylelint 'src/**/*.css' 'src/**/*.scss'",

src/components/LayerTree/LayerTree.js

@@ -44,8 +44,11 @@ const propTypes = {
 
   /**
    * 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 {object} item The item to render.
+   * @param {Layer} layer The layer the item content is created for
+   * @param {LayerTree} comp The LayerTree component.
    *
    * @return {node} A jsx node.
    */
@@ -294,7 +297,7 @@ class LayerTree extends Component {
     return expLayers;
   }
 
-  renderInput(layer) {
+  renderInput(layer, inputProps) {
     const { titles, isItemHidden } = this.props;
     let tabIndex = 0;
 
@@ -329,6 +332,8 @@ class LayerTree extends Component {
           onClick={() => {
             return this.onInputClick(layer);
           }}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...inputProps}
         />
         <span />
       </label>
@@ -359,7 +364,7 @@ class LayerTree extends Component {
 
   // Render a button which expands/collapse the layer if there is children
   // or simulate a click on the input otherwise.
-  renderToggleButton(layer) {
+  renderToggleButton(layer, toggleProps) {
     const { t, titles, isItemHidden, renderLabel } = this.props;
     const { expandedLayers } = this.state;
 
@@ -385,18 +390,20 @@ class LayerTree extends Component {
         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) {
+  renderItemContent(layer, inputProps = {}, toggleProps = {}) {
     return (
       <>
-        {this.renderInput(layer)}
-        {this.renderToggleButton(layer)}
+        {this.renderInput(layer, inputProps)}
+        {this.renderToggleButton(layer, toggleProps)}
       </>
     );
   }

src/components/LayerTree/README.md

@@ -10,30 +10,12 @@ import GeoJSONFormat from 'ol/format/GeoJSON';
 import LayerTree from 'react-spatial/components/LayerTree';
 import BasicMap from 'react-spatial/components/BasicMap';
 
-
 const baseBright = new MapboxLayer({
   name: 'Base - Bright',
   group: 'baseLayer',
   url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`,
 });
 
-const busLines = new MapboxStyleLayer({
-  name: 'Tramway routes',
-  mapboxLayer: baseBright,
-  visible: false,
-  styleLayer: {
-    id: 'bus',
-    type: 'line',
-    source: 'base',
-    'source-layer': 'osm_edges',
-    filter: ['==', 'vehicle_type_prior', 'Tram' ],
-    paint: {
-      'line-color': 'rgba(255, 220, 0, 1)',
-      'line-width': 3,
-    },
-  },
-});
-
 const railLines = new MapboxStyleLayer({
   name: 'Railways routes',
   mapboxLayer: baseBright,
@@ -42,7 +24,7 @@ const railLines = new MapboxStyleLayer({
     type: 'line',
     source: 'base',
     'source-layer': 'osm_edges',
-    filter: ['==', 'vehicle_type_prior', 'Zug' ],
+    filter: ['==', 'vehicle_type_prior', 'Zug'],
     paint: {
       'line-color': 'rgba(255, 0, 0, 1)',
       'line-width': 2,
@@ -74,12 +56,7 @@ const passengerFrequencies = new MapboxStyleLayer({
   },
 });
 
-// const baseBrightGroup = new Layer ({
-//   name: 'Base - Bright',
-//   group: 'baseLayer',
-//   children: [baseBright, passengerFrequencies, railLines, busLines],
-// })
-baseBright.children = [passengerFrequencies, railLines, busLines];
+baseBright.children = [passengerFrequencies, railLines];
 
 const baseDark = new MapboxLayer({
   name: 'Base - Dark',
@@ -97,7 +74,7 @@ const baseTravic = new MapboxLayer({
   },
 });
 
-const layers = [ baseDark, baseTravic, baseBright ];
+const layers = [baseDark, baseTravic, baseBright];
 
 <div className="rs-layer-tree-example">
   <BasicMap