refactor: transform to react fc

terrestris · May 6, 2024 · 74b7587 · 74b7587
1 parent 7d2e6cf
commit 74b7587
Show file tree

Hide file tree

Showing 5 changed files with 239 additions and 328 deletions.
diff --git a/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx b/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx
@@ -4,133 +4,111 @@ import { faCopyright, faInfo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
 import { Checkbox, Tooltip } from 'antd';
+import { FrameState } from 'ol/Map';
 import { Attribution as OlAttribution } from 'ol/source/Source';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 
-interface AddWmsLayerEntryProps {
+export type AddWmsLayerEntryProps = {
+  /**
+   * Object containing layer information
+   */
+  wmsLayer: WmsLayer;
   /**
    * Function returning a span with the textual representation of this layer
    * Default: Title of the layer and its abstract (if available)
    */
-  layerTextTemplateFn: (layer: WmsLayer) => React.ReactNode;
+  layerTextTemplateFn?: (layer: WmsLayer) => JSX.Element;
   /**
    * Optional text to be shown in Tooltip for a layer that can be queried
    */
-  layerQueryableText: string;
+  layerQueryableText?: string;
   /**
    * ARIA label for the icon which indicates that the layer has copyright / attribution
    * information. This label increases the accessibility of the generated HTML. If not
    * set explicitly, a generic English label will be added. Make sure to translate this
    * to the page language if needed.
    */
-  ariaLabelCopyright: string;
+  ariaLabelCopyright?: string;
   /**
    * ARIA label for the icon which indicates that the layer is queryable. This label
    * increases the accessibility of the generated HTML. If not set explicitly, a generic
    * English label will be added. Make sure to translate this to the page language if
    * needed.
    */
-  ariaLabelQueryable: string;
-  /**
-   * Object containing layer information
-   */
-  wmsLayer: WmsLayer;
-}
-
-interface AddWmsLayerEntryState {
-  copyright: OlAttribution | null;
-  queryable: boolean;
-}
+  ariaLabelQueryable?: string;
+};
 
 /**
  * Class representing a layer parsed from capabilities document.
- * This componment is used in AddWmsPanel
+ * This component is used in AddWmsPanel
  *
- * @class AddWmsLayerEntry
- * @extends React.Component
  */
-export class AddWmsLayerEntry extends React.Component<AddWmsLayerEntryProps, AddWmsLayerEntryState> {
-
-  /**
-   * The defaultProps.
-   */
-  static defaultProps = {
-    layerQueryableText: 'Layer is queryable',
-    ariaLabelCopyright: 'Icon indicating that attribution information for layer is available',
-    ariaLabelQueryable: 'Icon indicating that the layer is queryable',
-    layerTextTemplateFn: (wmsLayer: WmsLayer) => {
-      const title = wmsLayer.get('title');
-      const abstract = wmsLayer.get('abstract');
-      return abstract ?
-        <span>{`${title} - ${abstract}:`}</span> :
-        <span>{`${title}`}</span>;
-    }
-  };
-
-  /**
-   * Create the AddWmsLayerEntry.
-   *
-   * @constructs AddWmsLayerEntry
-   */
-  constructor(props: AddWmsLayerEntryProps) {
-    super(props);
-    // TODO: getAttributions is not @api and returns a function in v6.5
-    this.state = {
-      copyright: props.wmsLayer.getSource()?.getAttributions() || null,
-      queryable: props.wmsLayer.get('queryable')
-    };
+export const AddWmsLayerEntry: React.FC<AddWmsLayerEntryProps> = ({
+  wmsLayer,
+  layerQueryableText = 'Layer is queryable',
+  ariaLabelCopyright = 'Icon indicating that attribution information for layer is available',
+  ariaLabelQueryable = 'Icon indicating that the layer is queryable',
+  layerTextTemplateFn = (layer: WmsLayer) => {
+    const title = layer.get('title');
+    const abstract = layer.get('abstract');
+    return abstract ?
+      <span>{`${title} - ${abstract}:`}</span> :
+      <span>{`${title}`}</span>;
   }
+}) => {
 
-  /**
-   * The render function
-   */
-  render() {
-    const {
-      wmsLayer,
-      layerTextTemplateFn,
-      layerQueryableText,
-      ariaLabelCopyright,
-      ariaLabelQueryable
-    } = this.props;
-
-    const {
-      copyright,
-      queryable
-    } = this.state;
+  const [copyright, setCopyright] = useState<string | null>(null);
+  const [queryable, setQueryable] = useState<boolean>();
 
-    const title = wmsLayer.get('title');
-    const layerTextSpan = layerTextTemplateFn(wmsLayer);
+  useEffect(() => {
+    if (wmsLayer) {
+      if (wmsLayer.getSource()?.getAttributions()) {
+        const attributionsFn = wmsLayer.getSource()?.getAttributions() as OlAttribution;
+        const attributions = (attributionsFn({} as FrameState));
+        if (attributions?.length > 0) {
+          if (Array.isArray(attributions)) {
+            setCopyright(attributions.join(', '));
+          } else {
+            setCopyright(attributions);
+          }
+        }
+      }
+      setQueryable(!!wmsLayer.get('queryable'));
+    }
+  }, [wmsLayer]);
 
-    return (
-      <Checkbox value={title} className="add-wms-layer-checkbox-line">
-        <div className="add-wms-layer-entry">
-          {layerTextSpan}
-          {
-            copyright ? (
+  return (
+    <Checkbox
+      className="add-wms-layer-checkbox-line"
+      value={wmsLayer.get('title')}
+    >
+      <div className="add-wms-layer-entry">
+        {layerTextTemplateFn(wmsLayer)}
+        {
+          copyright && (
+            <Tooltip title={copyright}>
               <FontAwesomeIcon
                 className="add-wms-add-info-icon attribution-info"
                 icon={faCopyright}
                 aria-label={ariaLabelCopyright}
               />
-            )
-              : null
-          }
-          {
-            queryable ? (
-              <Tooltip title={layerQueryableText}>
-                <FontAwesomeIcon
-                  className="add-wms-add-info-icon queryable-info"
-                  icon={faInfo}
-                  aria-label={ariaLabelQueryable}
-                />
-              </Tooltip>
-            )
-              : null
-          }
-        </div>
-      </Checkbox>
-    );
-  }
-}
+            </Tooltip>
+          )
+        }
+        {
+          queryable && (
+            <Tooltip title={layerQueryableText}>
+              <FontAwesomeIcon
+                className="add-wms-add-info-icon queryable-info"
+                icon={faInfo}
+                aria-label={ariaLabelQueryable}
+              />
+            </Tooltip>
+          )
+        }
+      </div>
+    </Checkbox >
+  );
+};
 
 export default AddWmsLayerEntry;
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.example.md b/src/Container/AddWmsPanel/AddWmsPanel.example.md
@@ -6,24 +6,30 @@ An `AddWmsPanel` shows a list of the parsed layers and each checked layer (or th
 import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil';
 import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
 import AddWmsPanel from '@terrestris/react-geo/dist/Container/AddWmsPanel/AddWmsPanel';
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
+import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
+import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { fromLonLat } from 'ol/proj';
 import OlSourceOSM from 'ol/source/OSM';
 import OlView from 'ol/View';
-import * as React from 'react';
+import {
+  useEffect,
+  useState
+} from 'react';
 
 // Please note: CORS headers must be set on server providing capabilities document. Otherwise proxy needed.
-const WMS_CAPABILITIES_URL = 'https://ows.terrestris.de/osm/service?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities';
+const CAPABILITIES_URL = 'https://ows.terrestris.de/osm/service?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities';
 
-class AddWmsPanelExample extends React.Component {
+const AddWmsPanelExample = () => {
 
-  constructor(props) {
-    super(props);
+  const [map, setMap] = useState();
+  const [wmsLayers, setWmsLayers] = useState();
 
-    this.mapDivId = `map-${Math.random()}`;
-
-    this.map = new OlMap({
+  useEffect(() => {
+    const olMap = new OlMap({
       layers: [
         new OlLayerTile({
           name: 'OSM',
@@ -35,64 +41,46 @@ class AddWmsPanelExample extends React.Component {
         zoom: 4
       })
     });
+    setMap(olMap);
+  }, []);
 
-    this.state = {
-      layers: []
-    };
-  }
+  const onClick = async () => {
+    try {
+      const capabilities = await CapabilitiesUtil.getWmsCapabilities(CAPABILITIES_URL);
+      const capaLayers = await CapabilitiesUtil.getLayersFromWmsCapabilities(capabilities);
+      if (capaLayers) {
+        setWmsLayers(capaLayers);
+      }
+    } catch (error) {
+      alert('Could not extract layers from capabilities document.')
+    }
+  };
 
-  componentDidMount() {
-    this.map.setTarget(this.mapDivId);
+  if (!map) {
+    return null;
   }
 
-  onClick() {
-    CapabilitiesUtil.getWmsCapabilities(WMS_CAPABILITIES_URL)
-      .then(CapabilitiesUtil.getLayersFromWmsCapabilities)
-      .then(layers => {
-        this.setState({
-          layers: layers
-        });
-      })
-      .catch(() => alert('Could not parse capabilities document.'));
-  }
-
-  render() {
-    const {
-      layers
-    } = this.state;
-
-    return (
+  return (
+    <MapContext.Provider value={map}>
+      <MapComponent
+        map={map}
+        style={{
+          height: '400px'
+        }}
+      />
       <div>
-        <div
-          id={this.mapDivId}
-          style={{
-            height: '400px'
-          }}
+        <SimpleButton
+          onClick={onClick}
+        >
+          Fetch capabilities of OWS terrestris
+        </SimpleButton>
+        <AddWmsPanel
+          wmsLayers={wmsLayers}
         />
-        <div>
-          <SimpleButton
-            onClick={this.onClick.bind(this)}
-          >
-            Fetch capabilities of OWS terrestris
-          </SimpleButton>
-          <AddWmsPanel
-            style={{
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
-            }}
-            key="1"
-            map={this.map}
-            wmsLayers={layers}
-            draggable={true}
-            x={0}
-            y={0}
-          />
-        </div>
       </div>
-    );
-  }
-}
+    </MapContext.Provider>
+  );
+};
 
 <AddWmsPanelExample />
 ```
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.less b/src/Container/AddWmsPanel/AddWmsPanel.less
@@ -3,9 +3,8 @@
   flex-direction: column;
 
   .ant-checkbox-group {
-    flex: 1;
-    height: 100%;
-    overflow-y: auto;
+    display: block;
+
   }
 
   .buttons {