refactor: class to function component

BREAKING CHANGE: removes props map and toggleOnClick
terrestris · May 6, 2024 · 3b13ce1 · 3b13ce1
1 parent 19987ed
commit 3b13ce1
Show file tree

Hide file tree

Showing 18 changed files with 863 additions and 1,315 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
   "scripts": {
     "build": "npm run test -- --coverage && npm run build:all",
     "build:all": "npm run build:styleguide && npm run build:dist",
-    "build:declaration": "tsc --emitDeclarationOnly",
+    "build:declaration": "tsc --emitDeclarationOnly && rimraf --glob ./dist/**/*.spec.d.ts ./dist/**/*.spec.js",
     "build:dist": "babel src --out-dir dist --copy-files --ignore spec.tsx,.md --extensions '.ts,.tsx' && npm run build:declaration",
     "build:styleguide": "npm run clean:build && styleguidist build",
     "clean": "rimraf ./build/* ./coverage/* ./dist/*",

diff --git a/src/Button/CopyButton/CopyButton.tsx b/src/Button/CopyButton/CopyButton.tsx
@@ -34,7 +34,7 @@ interface OwnProps {
 }
 
 export type CopyButtonProps = OwnProps & Omit<UseSelectFeaturesProps,
-  'layers'|'onFeatureSelect'|'featuresCollection'|'clearAfterSelect'> & Partial<ToggleButtonProps>;
+  'layers'|'onFeatureSelect'|'featuresCollection'|'clearAfterSelect'|'active'> & Partial<ToggleButtonProps>;
 
 // The class name for the component.
 const defaultClassName = `${CSS_PREFIX}copybutton`;

diff --git a/src/Button/DeleteButton/DeleteButton.tsx b/src/Button/DeleteButton/DeleteButton.tsx
@@ -30,7 +30,7 @@ interface OwnProps {
 }
 
 export type DeleteButtonProps = OwnProps & Omit<UseSelectFeaturesProps,
-  'layers'|'onFeatureSelect'|'featuresCollection'|'clearAfterSelect'> & Partial<ToggleButtonProps>;
+  'layers'|'onFeatureSelect'|'featuresCollection'|'clearAfterSelect'|'active'> & Partial<ToggleButtonProps>;
 
 /**
  * The className added to this component.

diff --git a/src/CircleMenu/CircleMenu.spec.tsx b/src/CircleMenu/CircleMenu.spec.tsx
@@ -4,7 +4,6 @@ import {
 } from '@testing-library/react';
 import * as React from 'react';
 
-import TestUtil from '../Util/TestUtil';
 import CircleMenu from './CircleMenu';
 
 describe('<CircleMenu />', () => {
@@ -82,7 +81,7 @@ describe('<CircleMenu />', () => {
     it('applies the transformation to the ref', async () => {
       const diameter = 1337;
       const animationDuration = 1;
-      const { rerender } = render(
+      render(
         <CircleMenu
           position={[0, 0]}
           animationDuration={animationDuration}

diff --git a/src/CoordinateInfo/CoordinateInfo.spec.tsx b/src/CoordinateInfo/CoordinateInfo.spec.tsx
@@ -1,17 +1,9 @@
 import { render } from '@testing-library/react';
-import OlMap from 'ol/Map';
 import * as React from 'react';
 
 import CoordinateInfo from '../CoordinateInfo/CoordinateInfo';
-import TestUtil from '../Util/TestUtil';
 
 describe('<CoordinateInfo />', () => {
-  let map: OlMap;
-
-  beforeEach(() => {
-    map = TestUtil.createMap();
-  });
-
   it('is defined', () => {
     expect(CoordinateInfo).not.toBeUndefined();
   });

diff --git a/src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.spec.tsx b/src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.spec.tsx
@@ -27,19 +27,6 @@ describe('<CoordinateReferenceSystemCombo />', () => {
     }]
   };
 
-  const transformedResults = [{
-    code: '31466',
-    bbox: [53.81,5.86,49.11,7.5],
-    // eslint-disable-next-line max-len
-    proj4def: '+proj=tmerc +lat_0=0 +lon_0=6 +k=1 +x_0=2500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs',
-    value: 'DHDN / 3-degree Gauss-Kruger zone 2'
-  }, {
-    code: '4326',
-    bbox: [90,-180,-90,180],
-    proj4def: '+proj=longlat +datum=WGS84 +no_defs',
-    value: 'WGS 84'
-  }];
-
   beforeAll(() => {
     enableFetchMocks();
     (fetch as FetchMock).mockResponse(JSON.stringify(resultMock));

diff --git a/src/LayerTree/LayerTree.example.md b/src/LayerTree/LayerTree.example.md
@@ -2,6 +2,8 @@ This example demonstrates the LayerTree.
 
 ```jsx
 import LayerTree from '@terrestris/react-geo/dist/LayerTree/LayerTree';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import OlLayerGroup from 'ol/layer/Group';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
@@ -11,102 +13,156 @@ import OlSourceTileWMS from 'ol/source/TileWMS';
 import OlView from 'ol/View';
 import * as React from 'react';
 
-class LayerTreeExample extends React.Component {
-
-  constructor(props) {
-
-    super(props);
-
-    this.mapDivId = `map-${Math.random()}`;
-
-    this.layerGroup = new OlLayerGroup({
-      name: 'Layergroup',
-      layers: [
-        new OlLayerTile({
-          name: 'OSM-Overlay-WMS',
-          minResolution: 0,
-          maxResolution: 200,
-          source: new OlSourceTileWMS({
-            url: 'https://ows.terrestris.de/osm/service',
-            params: {
-              LAYERS: 'OSM-Overlay-WMS'
-            }
-          })
-        }),
-        new OlLayerTile({
-          name: 'SRTM30-Contour',
-          minResolution: 0,
-          maxResolution: 10,
-          source: new OlSourceTileWMS({
-            url: 'https://ows.terrestris.de/osm/service',
-            params: {
-              LAYERS: 'SRTM30-Contour'
-            }
-          })
+const LayerTreeExample = () => {
+
+  const layerGroup = new OlLayerGroup({
+    properties: {
+      name: 'Layergroup'
+    },
+    layers: [
+      new OlLayerTile({
+        properties: {
+          name: 'OSM-Overlay-WMS'
+        },
+        minResolution: 0,
+        maxResolution: 200,
+        source: new OlSourceTileWMS({
+          url: 'https://ows.terrestris.de/osm/service',
+          params: {
+            LAYERS: 'OSM-Overlay-WMS'
+          }
+        })
+      }),
+      new OlLayerTile({
+        properties: {
+          name: 'SRTM30-Contour'
+        },
+        minResolution: 0,
+        maxResolution: 10,
+        visible: false,
+        source: new OlSourceTileWMS({
+          url: 'https://ows.terrestris.de/osm/service',
+          params: {
+            LAYERS: 'SRTM30-Contour'
+          }
+        })
+      }),
+      new OlLayerTile({
+        properties: {
+          name: 'SRTM30-Colored-Hillshade'
+        },
+        minResolution: 0,
+        maxResolution: 10,
+        visible: false,
+        source: new OlSourceTileWMS({
+          url: 'https://ows.terrestris.de/osm/service',
+          params: {
+            LAYERS: 'SRTM30-Colored-Hillshade'
+          }
         })
-      ]
-    });
-
-    this.map = new OlMap({
-      layers: [
-        new OlLayerTile({
-          name: 'OSM',
-          source: new OlSourceOSM()
-        }),
-        this.layerGroup
-      ],
-      view: new OlView({
-        center: fromLonLat([12.924, 47.551]),
-        zoom: 13
       })
-    });
-  }
-
-  componentDidMount() {
-    this.map.setTarget(this.mapDivId);
-  }
-
-  render() {
-    return (
-      <div>
-        <div
-          id={this.mapDivId}
-          style={{
-            height: '400px'
-          }}
+    ]
+  });
+
+  const anotherLayerGroup = new OlLayerGroup({
+    properties: {
+      name: 'Layergroup'
+    },
+    layers: [
+      new OlLayerTile({
+        properties: {
+          name: 'OSM-Overlay-WMS A'
+        },
+        minResolution: 0,
+        maxResolution: 200,
+        source: new OlSourceTileWMS({
+          url: 'https://ows.terrestris.de/osm/service',
+          params: {
+            LAYERS: 'OSM-Overlay-WMS'
+          }
+        })
+      }),
+      new OlLayerTile({
+        properties: {
+          name: 'OSM-Overlay-WMS B'
+        },
+        minResolution: 0,
+        maxResolution: 200,
+        source: new OlSourceTileWMS({
+          url: 'https://ows.terrestris.de/osm/service',
+          params: {
+            LAYERS: 'OSM-Overlay-WMS'
+          }
+        })
+      }),
+      layerGroup
+    ]
+  });
+
+  const map = new OlMap({
+    layers: [
+      new OlLayerTile({
+        properties: {
+          name: 'OSM'
+        },
+        source: new OlSourceOSM()
+      }),
+      anotherLayerGroup,
+      new OlLayerGroup({
+        properties: {
+          name: 'Empty layergroup'
+        },
+        visible: true,
+        layers: []
+      })
+    ],
+    view: new OlView({
+      center: fromLonLat([12.924, 47.551]),
+      zoom: 13
+    })
+  });
+
+  return (
+    <MapContext.Provider value={map}>
+      <MapComponent
+        map={map}
+        style={{
+          height: '400px'
+        }}
+      />
+
+      <span>{'Please note that the layers have resolution restrictions, please ' +
+      ' zoom in and out to see how the trees react to this.'}</span>
+      <div className="example-block">
+        <span>{'Autoconfigured with topmost LayerGroup of passed map:'}</span>
+
+        <LayerTree
+          className="top"
+          toggleOnClick={true}
         />
 
-        <span>{'Please note that the layers have resolution restrictions, please ' +
-        ' zoom in and out to see how the trees react to this.'}</span>
-        <div className="example-block">
-          <span>{'Autoconfigured with topmost LayerGroup of passed map:'}</span>
-
-          <LayerTree
-            map={this.map}
-          />
-
-        </div>
+      </div>
 
-        <div className="example-block">
-          <span>{'A LayerTree configured with concrete layerGroup:'}</span>
+      <div className="example-block">
+        <span>{'A LayerTree configured with concrete layerGroup:'}</span>
 
-          <LayerTree
-            layerGroup={this.layerGroup}
-            map={this.map}
-          />
-        </div>
+        <LayerTree
+          layerGroup={layerGroup}
+          className="middle"
+        />
+      </div>
 
-        <div className="example-block">
-          <span>{'A LayerTree with a filterFunction (The OSM layer is filtered out):'}</span>
+      <div className="example-block">
+        <span>{'A LayerTree with a filterFunction (The OSM layer is filtered out):'}</span>
 
-          <LayerTree
-            map={this.map}
-            filterFunction={(layer) => layer.get('name') !== 'OSM'}
-          />
-        </div>
+        <LayerTree
+          filterFunction={layer => layer.get('name') !== 'OSM'}
+          className="bottom"
+          toggleOnClick={true}
+        />
       </div>
-    );
-  }
+    </MapContext.Provider>
+  );
 }
 
 <LayerTreeExample />

diff --git a/src/LayerTree/LayerTree.less b/src/LayerTree/LayerTree.less
@@ -0,0 +1,9 @@
+.react-geo-layertree {
+  .out-of-range {
+    opacity: 0.5;
+  }
+
+  .ant-tree-node-content-wrapper {
+    pointer-events: none;
+  }
+}