From b3836153177426de571866a16ee14b0cab5e3466 Mon Sep 17 00:00:00 2001 From: danji90 Date: Wed, 2 Nov 2022 17:18:29 +0100 Subject: [PATCH 1/4] chore: added input and toggle props for layer tree renderItemContent --- src/components/LayerTree/LayerTree.js | 18 ++++++++++------- src/components/LayerTree/README.md | 29 +++------------------------ 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/src/components/LayerTree/LayerTree.js b/src/components/LayerTree/LayerTree.js index 4832286d..af0b49a8 100644 --- a/src/components/LayerTree/LayerTree.js +++ b/src/components/LayerTree/LayerTree.js @@ -294,7 +294,7 @@ class LayerTree extends Component { return expLayers; } - renderInput(layer) { + renderInput(layer, inputProps) { const { titles, isItemHidden } = this.props; let tabIndex = 0; @@ -317,7 +317,7 @@ class LayerTree extends Component { aria-label={layer.visible ? titles.layerHide : titles.layerShow} onKeyPress={(e) => { if (e.which === 13) { - this.onInputClick(layer); + this.onInputClick(layer, undefined, inputType); } }} > @@ -327,8 +327,10 @@ class LayerTree extends Component { checked={layer.visible} readOnly onClick={() => { - return this.onInputClick(layer); + return this.onInputClick(layer, undefined, inputType); }} + // eslint-disable-next-line react/jsx-props-no-spreading + {...inputProps} /> @@ -359,7 +361,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,6 +387,8 @@ class LayerTree extends Component { aria-label={title} onClick={onInputClick} onKeyPress={onInputClick} + // eslint-disable-next-line react/jsx-props-no-spreading + {...toggleProps} >
{renderLabel(layer, this)}
{this.renderArrow(layer)} @@ -392,11 +396,11 @@ class LayerTree extends Component { ); } - renderItemContent(layer) { + renderItemContent(layer, inputProps = {}, toggleProps = {}) { return ( <> - {this.renderInput(layer)} - {this.renderToggleButton(layer)} + {this.renderInput(layer, inputProps)} + {this.renderToggleButton(layer, toggleProps)} ); } diff --git a/src/components/LayerTree/README.md b/src/components/LayerTree/README.md index efcb30b3..f5664a4b 100644 --- a/src/components/LayerTree/README.md +++ b/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];
Date: Wed, 2 Nov 2022 17:19:40 +0100 Subject: [PATCH 2/4] chore(release): 1.3.0-beta.2 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d3f24abe..b0b78b70 100644 --- a/package.json +++ b/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'", From deff0c61249830125716e5f097bf1c5fdb30721e Mon Sep 17 00:00:00 2001 From: danji_ma90 Date: Thu, 3 Nov 2022 12:04:32 +0100 Subject: [PATCH 3/4] chore: clean some relics --- src/components/LayerTree/LayerTree.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LayerTree/LayerTree.js b/src/components/LayerTree/LayerTree.js index af0b49a8..36b8e0be 100644 --- a/src/components/LayerTree/LayerTree.js +++ b/src/components/LayerTree/LayerTree.js @@ -317,7 +317,7 @@ class LayerTree extends Component { aria-label={layer.visible ? titles.layerHide : titles.layerShow} onKeyPress={(e) => { if (e.which === 13) { - this.onInputClick(layer, undefined, inputType); + this.onInputClick(layer); } }} > @@ -327,7 +327,7 @@ class LayerTree extends Component { checked={layer.visible} readOnly onClick={() => { - return this.onInputClick(layer, undefined, inputType); + return this.onInputClick(layer); }} // eslint-disable-next-line react/jsx-props-no-spreading {...inputProps} From 75bbf544838c8c7f1593c6564d8fd5d0372188c2 Mon Sep 17 00:00:00 2001 From: danji90 Date: Thu, 3 Nov 2022 12:11:51 +0100 Subject: [PATCH 4/4] chore: add documentation --- src/components/LayerTree/LayerTree.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/LayerTree/LayerTree.js b/src/components/LayerTree/LayerTree.js index 36b8e0be..c2b30107 100644 --- a/src/components/LayerTree/LayerTree.js +++ b/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. */