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'", diff --git a/src/components/LayerTree/LayerTree.js b/src/components/LayerTree/LayerTree.js index 4832286d..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. */ @@ -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} /> @@ -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,6 +390,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 +399,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];