fix: adjust to breaking changes in latest version of react-util

dnlkoch · simonseyock · commit 2711a6378c91 · 2024-05-06T17:40:37.000+02:00
diff --git a/src/BackgroundLayerChooser/BackgroundLayerChooser.example.md b/src/BackgroundLayerChooser/BackgroundLayerChooser.example.md
@@ -2,9 +2,9 @@ The BackgroundLayerChooser
 
 ```jsx
 import BackgroundLayerChooser from '@terrestris/react-geo/dist/BackgroundLayerChooser/BackgroundLayerChooser';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 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 { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOsm from 'ol/source/OSM';
diff --git a/src/BackgroundLayerChooser/BackgroundLayerChooser.tsx b/src/BackgroundLayerChooser/BackgroundLayerChooser.tsx
@@ -7,10 +7,10 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import BackgroudLayerChooserBase, {
   BackgroundLayerButtonProps
-} from '@terrestris/react-util/dist/BackgroundLayerChooser/BackgroundLayerChooser';
+} from '@terrestris/react-util/dist/Components/BackgroundLayerChooser/BackgroundLayerChooser';
 import {
   BackgroundLayerLoadingMaskProps
-} from '@terrestris/react-util/dist/BackgroundLayerPreview/BackgroundLayerPreview';
+} from '@terrestris/react-util/dist/Components/BackgroundLayerPreview/BackgroundLayerPreview';
 import Spin from 'antd/lib/spin';
 import OlLayerBase from 'ol/layer/Base';
 import OlLayer from 'ol/layer/Layer';
diff --git a/src/Button/CopyButton/CopyButton.example.md b/src/Button/CopyButton/CopyButton.example.md
@@ -2,8 +2,8 @@ This demonstrates the use of the CopyButton.
 
 ```jsx
 import CopyButton from '@terrestris/react-geo/dist/Button/CopyButton/CopyButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import {DigitizeUtil} from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
 import OlLayerTile from 'ol/layer/Tile';
diff --git a/src/Button/CopyButton/CopyButton.tsx b/src/Button/CopyButton/CopyButton.tsx
@@ -1,5 +1,5 @@
 import AnimateUtil from '@terrestris/ol-util/dist/AnimateUtil/AnimateUtil';
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlGeometry from 'ol/geom/Geometry';
 import { SelectEvent as OlSelectEvent } from 'ol/interaction/Select';
diff --git a/src/Button/DeleteButton/DeleteButton.example.md b/src/Button/DeleteButton/DeleteButton.example.md
@@ -2,8 +2,8 @@ This demonstrates the use of the DeleteButton.
 
 ```jsx
 import { DeleteButton } from '@terrestris/react-geo/dist/Button/DeleteButton/DeleteButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
 import OlLayerTile from 'ol/layer/Tile';
diff --git a/src/Button/DeleteButton/DeleteButton.tsx b/src/Button/DeleteButton/DeleteButton.tsx
@@ -1,4 +1,4 @@
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlGeometry from 'ol/geom/Geometry';
 import { SelectEvent as OlSelectEvent } from 'ol/interaction/Select';
diff --git a/src/Button/DrawButton/DrawButton.example.md b/src/Button/DrawButton/DrawButton.example.md
@@ -3,8 +3,8 @@ This demonstrates the use of the DrawButton.
 ```jsx
 import DrawButton from '@terrestris/react-geo/dist/Button/DrawButton/DrawButton';
 import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { fromLonLat } from 'ol/proj';
diff --git a/src/Button/DrawButton/DrawButton.tsx b/src/Button/DrawButton/DrawButton.tsx
@@ -1,4 +1,4 @@
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import { EventsKey } from 'ol/events';
 import * as OlEventConditions from 'ol/events/condition';
diff --git a/src/Button/ModifyButton/ModifyButton.example.md b/src/Button/ModifyButton/ModifyButton.example.md
@@ -2,8 +2,8 @@ This demonstrates the use of the ModifyButton.
 
 ```jsx
 import {ModifyButton} from '@terrestris/react-geo/dist/Button/ModifyButton/ModifyButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import {DigitizeUtil} from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
 import OlLayerTile from 'ol/layer/Tile';
diff --git a/src/Button/ModifyButton/ModifyButton.tsx b/src/Button/ModifyButton/ModifyButton.tsx
@@ -1,4 +1,4 @@
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlCollection from 'ol/Collection';
 import { singleClick } from 'ol/events/condition';
diff --git a/src/Button/PrintButton/PrintButton.example.md b/src/Button/PrintButton/PrintButton.example.md
@@ -2,8 +2,8 @@ This demonstrates the use of the PrintButton.
 
 ```jsx
 import PrintButton from '@terrestris/react-geo/dist/Button/PrintButton/PrintButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import { Progress } from 'antd';
 import {getTopLeft, getWidth} from 'ol/extent';
 import Feature from 'ol/Feature';
diff --git a/src/Button/PrintButton/PrintButton.tsx b/src/Button/PrintButton/PrintButton.tsx
@@ -1,6 +1,6 @@
 import Logger from '@terrestris/base-util/dist/Logger';
 import { InkmapPrintSpec } from '@terrestris/ol-util/dist/LayerUtil/InkmapTypes';
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { PrintUtil } from '@terrestris/react-util/dist/Util/PrintUtil';
 import { jsPDF } from 'jspdf';
 import _isFinite from 'lodash/isFinite';
diff --git a/src/Button/SelectFeaturesButton/SelectFeaturesButton.example.md b/src/Button/SelectFeaturesButton/SelectFeaturesButton.example.md
@@ -2,8 +2,8 @@ This demonstrates the use of the SelectFeaturesButton.
 
 ```jsx
 import SelectFeaturesButton from '@terrestris/react-geo/dist/Button/SelectFeaturesButton/SelectFeaturesButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
 import OlLayerTile from 'ol/layer/Tile';
 import OlVectorLayer from 'ol/layer/Vector';
diff --git a/src/Button/SelectFeaturesButton/SelectFeaturesButton.tsx b/src/Button/SelectFeaturesButton/SelectFeaturesButton.tsx
@@ -1,4 +1,4 @@
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlCollection from 'ol/Collection';
 import * as OlEventConditions from 'ol/events/condition';
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.example.md b/src/Container/AddWmsPanel/AddWmsPanel.example.md
@@ -6,9 +6,9 @@ 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 MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 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 useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.spec.tsx b/src/Container/AddWmsPanel/AddWmsPanel.spec.tsx
@@ -1,4 +1,5 @@
 import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
+import { renderInMapContext } from '@terrestris/react-util/dist/Util/rtlTestUtils';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import OlLayerTile from 'ol/layer/Tile';
@@ -7,7 +8,6 @@ import * as React from 'react';
 
 import TestUtil from '../../Util/TestUtil';
 import AddWmsPanel from './AddWmsPanel';
-import { renderInMapContext } from '@terrestris/react-util/dist/Util/rtlTestUtils';
 
 describe('<AddWmsPanel />', () => {
 
@@ -100,7 +100,7 @@ describe('<AddWmsPanel />', () => {
       const callback = jest.fn();
       renderInMapContext(
         map, <AddWmsPanel wmsLayers={testWmsLayers} onLayerAddToMap={callback} />
-      )
+      );
       const addAllLayersButton = screen.getByRole('button', { name: /add all layers/i });
       await userEvent.click(addAllLayersButton);
 
@@ -113,7 +113,7 @@ describe('<AddWmsPanel />', () => {
       const callback = jest.fn();
       renderInMapContext(
         map, <AddWmsPanel wmsLayers={testWmsLayers} onSelectionChange={callback} />
-      )
+      );
 
       const checkbox = screen.getByRole('checkbox', { name: testLayerTitle });
       await userEvent.click(checkbox);
@@ -126,7 +126,7 @@ describe('<AddWmsPanel />', () => {
     it('adds selected layers to the map', async () => {
       renderInMapContext(
         map, <AddWmsPanel wmsLayers={testWmsLayers} />
-      )
+      );
 
       const checkbox = screen.getByRole('checkbox', { name: testLayerTitle });
 
@@ -147,7 +147,7 @@ describe('<AddWmsPanel />', () => {
       const callback = jest.fn();
       renderInMapContext(
         map, <AddWmsPanel wmsLayers={testWmsLayers} onLayerAddToMap={callback} />
-      )
+      );
       const checkbox = screen.getByRole('checkbox', { name: testLayerTitle });
 
       await userEvent.click(checkbox);
@@ -163,7 +163,7 @@ describe('<AddWmsPanel />', () => {
     it('shows no cancel button if no `onCancel` method is provided', () => {
       renderInMapContext(
         map, <AddWmsPanel wmsLayers={testWmsLayers} />
-      )
+      );
       const onCancelButton = screen.queryByRole('button', { name: /cancel/i });
       expect(onCancelButton).not.toBeInTheDocument();
     });
@@ -172,7 +172,7 @@ describe('<AddWmsPanel />', () => {
       const callback = jest.fn();
       renderInMapContext(
         map, <AddWmsPanel wmsLayers={testWmsLayers} onCancel={callback} />
-      )
+      );
 
       const onCancelButton = screen.getByRole('button', { name: /cancel/i });
       expect(onCancelButton).toBeInTheDocument();
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.tsx b/src/Container/AddWmsPanel/AddWmsPanel.tsx
@@ -1,7 +1,7 @@
 import './AddWmsPanel.less';
 
 import Logger from '@terrestris/base-util/dist/Logger';
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
 import { Checkbox } from 'antd';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
diff --git a/src/Context/MapContext/MapContext.example.md b/src/Context/MapContext/MapContext.example.md
@@ -4,8 +4,8 @@ with [react 16.3](https://reactjs.org/docs/context.html).
 If you are using function-components head over to the `useMap` example in the "HOOKS" section.
 
 ```jsx
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOsm from 'ol/source/OSM';
diff --git a/src/Hook/useDropTargetMap.example.md b/src/Hook/useDropTargetMap.example.md
@@ -2,21 +2,21 @@ This example shows the usage of the DropTargetMap HOC by use of the onDropAware
 function.
 
 ```jsx
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
-import onDropAware from '@terrestris/react-util/dist/HigherOrderComponent/DropTargetMap/DropTargetMap';
-import { useMap } from '@terrestris/react-util/dist/hooks/useMap';
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
+import useDropTargetMap from '@terrestris/react-util/dist/Hooks/useDropTargetMap/useDropTargetMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOSM from 'ol/source/OSM';
 import OlView from 'ol/View';
 import * as React from 'react';
 
 const DropTargetMapExample = () => {
-
   const layer = new OlLayerTile({
     source: new OlSourceOSM()
   });
+
   const olMap = new OlMap({
     view: new OlView({
       center: [
@@ -29,23 +29,28 @@ const DropTargetMapExample = () => {
     layers: [layer]
   });
 
-  const mapComponent = () => {
+  const WrappedMapComponent = () => {
     const map = useMap();
+    const {
+      onDrop,
+      onDragOver
+    } = useDropTargetMap();
+
     return (
       <MapComponent
         map={map}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
         style={{
           height: '512px'
         }}
       />
     );
   };
 
-  const DropTargetMapComponent = onDropAware(mapComponent);
-
   return (
     <MapContext.Provider value={olMap}>
-      <DropTargetMapComponent map={olMap}/>
+      <WrappedMapComponent />
     </MapContext.Provider>
   )
 }
diff --git a/src/Hook/useDropTargetMap.ts b/src/Hook/useDropTargetMap.ts
diff --git a/src/Hook/useMap.example.md b/src/Hook/useMap.example.md
@@ -3,9 +3,9 @@ with [react 16.3](https://reactjs.org/docs/context.html).
 
 ```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 { useMap } from '@terrestris/react-util/dist/hooks/useMap';
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
+import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOsm from 'ol/source/OSM';
diff --git a/src/LayerSwitcher/LayerSwitcher.tsx b/src/LayerSwitcher/LayerSwitcher.tsx
@@ -1,7 +1,7 @@
 import './LayerSwitcher.less';
 import './LayerSwitcher.less';
 
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import OlLayerBase from 'ol/layer/Base';
 import OlLayerGroup from 'ol/layer/Group';
 import OlLayerTile from 'ol/layer/Tile';
diff --git a/src/Map/MapComponent/MapComponent.example.md b/src/Map/MapComponent/MapComponent.example.md
@@ -2,8 +2,8 @@ This example shows the usage of the MapComponent in combination with the MapCont
 
 ```jsx
 import NominatimSearch from '@terrestris/react-geo/dist/Field/NominatimSearch/NominatimSearch';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
-import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOsm from 'ol/source/OSM';
diff --git a/src/Panel/SearchResultsPanel/SearchResultsPanel.tsx b/src/Panel/SearchResultsPanel/SearchResultsPanel.tsx
@@ -1,7 +1,7 @@
 import './SearchResultsPanel.less';
 import './SearchResultsPanel.less';
 
-import useMap from '@terrestris/react-util/dist/hooks/useMap';
+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import {
   Avatar,
   Collapse,
diff --git a/src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.tsx b/src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.tsx
@@ -19,9 +19,9 @@ import './TimeLayerSliderPanel.less';
 
 import { faCalendar, faPauseCircle, faPlayCircle, faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import timeLayerAware, {
+import {
   TimeLayerAwareConfig
-} from '@terrestris/react-util/dist/HigherOrderComponent/TimeLayerAware/TimeLayerAware';
+} from '@terrestris/react-util/dist/Hooks/useTimeLayerAware/useTimeLayerAware';
 
 import SimpleButton from '../../Button/SimpleButton/SimpleButton';
 import ToggleButton from '../../Button/ToggleButton/ToggleButton';
@@ -89,7 +89,6 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
     autoPlaySpeedOptions: [ 0.5, 1, 2, 5, 10, 100, 300 ]
   };
 
-  private _TimeLayerAwareSlider: any;
   private _wmsTimeLayers: TimeLayerAwareConfig[] = [];
   private _interval: number;
 
@@ -187,9 +186,9 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
         });
       }
     });
+
     // make sure an initial value is set
     this.wmsTimeHandler(this.state.value);
-    this._TimeLayerAwareSlider = timeLayerAware(TimeSlider, this._wmsTimeLayers);
   };
 
   /**
@@ -366,7 +365,7 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
    *
    * @param val
    */
-  onTimeChanged(val: string) {
+  onTimeChanged(val: string | [string, string]) {
     this.setState({
       value: moment(val)
     }, () => {
@@ -424,16 +423,13 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
       return <Option key={val} value={val}>{val}</Option>;
     });
 
-    const TimeLayerAwareSlider = this._TimeLayerAwareSlider;
-
     return (
       <div className={`time-layer-slider ${disabledCls}`.trim()}>
         <Popover
           placement="topRight"
           title={tooltips.dataRange}
           trigger="click"
           content={
-            // @ts-ignore
             <RangePicker
               showTime={{ format: 'HH:mm' }}
               defaultValue={[dayjs(startDate.toISOString()), dayjs(endDate.toISOString())]}
@@ -473,7 +469,7 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
               tooltip={tooltips.setToNow}
             /> : null
         }
-        <TimeLayerAwareSlider
+        <TimeSlider
           className={`${extraCls} timeslider ${futureClass}`.trim()}
           formatString={dateFormat}
           defaultValue={startDateString}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import useMap from '@terrestris/react-util/dist/hooks/useMap';`
	`1`	`+import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';`
`2`	`2`	`import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';`
`3`	`3`	`import OlGeometry from 'ol/geom/Geometry';`
`4`	`4`	`import { SelectEvent as OlSelectEvent } from 'ol/interaction/Select';`