TimeSlider / TimeLayerSliderPanel: Pass value correctly to layer / component and use DayJs

package.json

@@ -77,9 +77,9 @@
     "@terrestris/react-util": "^10.0.1",
     "@types/lodash": "^4.17.4",
     "ag-grid-react": "^33.0.4",
+    "dayjs": "^1.11.13",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
     "proj4": "^2.11.0",
     "prop-types": "^15.8.1"
   },

src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.example.md

@@ -2,88 +2,104 @@ This example demonstrates the usage of the TimeLayerSliderPanel
 (Data: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity, Iowa State University)
 
 ```jsx
+import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
 import TimeLayerSliderPanel from '@terrestris/react-geo/dist/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel';
-import moment from 'moment';
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
+import dayjs from 'dayjs';
 import { getCenter } from 'ol/extent';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { transformExtent } from 'ol/proj';
 import OlSourceOSM from 'ol/source/OSM';
 import OlSourceTileWMS from 'ol/source/TileWMS';
 import OlView from 'ol/View';
-import * as React from 'react';
+import {
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
 
-class TimeLayerSliderPanelExample extends React.Component {
+const TimeLayerSliderPanelExample = () => {
 
-  constructor(props) {
+  var extent = useMemo(() => transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857'), []);
 
-    super(props);
+  const [value, setValue] = useState();
+  const [map, setMap] = useState();
 
-    this.mapDivId = `map-${Math.random()}`;
-    var extent = transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857');
-    this.layers = [
-      new OlLayerTile({
-        extent: extent,
-        type: 'WMSTime',
-        timeFormat: 'YYYY-MM-DDTHH:mm',
-        roundToFullHours: true,
-        source: new OlSourceTileWMS({
-          attributions: ['Iowa State University'],
-          url: '//mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
-          params: {LAYERS: 'nexrad-n0r-wmst'}
-        })
-      })
-    ];
+  const timeLayer = useMemo(() => new OlLayerTile({
+    extent: extent,
+    type: 'WMSTime',
+    timeFormat: 'YYYY-MM-DDTHH:mm',
+    source: new OlSourceTileWMS({
+      attributions: ['Iowa State University'],
+      url: '//mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
+      params: {LAYERS: 'nexrad-n0r-wmst'}
+    })
+  }), [extent]);
 
-    this.map = new OlMap({
+  useEffect(() => {
+    const newMap = new OlMap({
       layers: [
         new OlLayerTile({
-          name: 'OSM',
+          properties: {
+            name: 'OSM'
+          },
           source: new OlSourceOSM()
         }),
-        ...this.layers
+        timeLayer
       ],
       view: new OlView({
         center: getCenter(extent),
         zoom: 4
       })
     });
-  }
 
-  componentDidMount() {
-    this.map.setTarget(this.mapDivId);
-  }
+    setMap(newMap);
+  }, [extent, timeLayer]);
+
+  const tooltips = {
+    setToNow: 'Set to now',
+    hours: 'Hours',
+    minutes: 'Minutes',
+    days: 'Days',
+    weeks: 'Weeks',
+    months: 'Months',
+    years: 'Years',
+    dataRange: 'Set data range'
+  };
+
+  const initStartDate = dayjs().subtract(3, 'hours');
+  const initEndDate = dayjs();
 
-  render() {
-    const tooltips = {
-      setToNow: 'Set to now',
-      hours: 'Hours',
-      days: 'Days',
-      weeks: 'Weeks',
-      months: 'Months',
-      years: 'Years',
-      dataRange: 'Set data range'
-    };
+  const onTimeChanged = (newTimeValue) => setValue(newTimeValue);
 
-    return (
-      <div>
-        <div
-          id={this.mapDivId}
+  useEffect(() => {
+    setValue(dayjs().subtract(1, 'hours'))
+  }, []);
+
+  return (
+    <div>
+      <MapContext.Provider value={map}>
+        <MapComponent
+          map={map}
           style={{
+            position: 'relative',
             height: '400px'
           }}
         />
         <TimeLayerSliderPanel
-          initStartDate={moment().subtract(3, 'hours')}
-          initEndDate={moment()}
-          timeAwareLayers={this.layers}
-          tooltips={tooltips}
-          autoPlaySpeedOptions={[0.5, 1, 2, 3]}
+          autoPlaySpeedOptions={[0.5, 1, 2, 3, 5]}
           dateFormat='YYYY-MM-DD HH:mm'
+          max={initEndDate}
+          min={initStartDate}
+          onChangeComplete={onTimeChanged}
+          timeAwareLayers={[timeLayer]}
+          tooltips={tooltips}
+          value={value}
         />
-      </div>
-    );
-  }
+      </MapContext.Provider>
+    </div>
+  );
 }
 
 <TimeLayerSliderPanelExample />

src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.less

@@ -55,10 +55,6 @@
     flex: 0 0 auto;
   }
 
-  .speed-picker {
-    margin-right: 20px;
-  }
-
   .ant-select-selection {
     background-color: white;
     width: 150px;

src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceTileWMS from 'ol/source/TileWMS';
@@ -40,17 +40,17 @@ describe('<TimeLayerSliderPanel />', () => {
 
   it('can be rendered', () => {
     const { container } = render(<TimeLayerSliderPanel
-      initStartDate={moment().subtract(3, 'hours')}
-      initEndDate={moment()}
+      min={dayjs().subtract(3, 'hours')}
+      max={dayjs()}
       timeAwareLayers={[]}
     />);
     expect(container).toBeVisible();
   });
 
   it('autoplay button is visible', () => {
     render(<TimeLayerSliderPanel
-      initStartDate={moment().subtract(3, 'hours')}
-      initEndDate={moment()}
+      min={dayjs().subtract(3, 'hours')}
+      max={dayjs()}
       timeAwareLayers={[]}
     />);
 
@@ -60,8 +60,8 @@ describe('<TimeLayerSliderPanel />', () => {
 
   it('autoplay can be toggled', async () => {
     render(<TimeLayerSliderPanel
-      initStartDate={moment().subtract(3, 'hours')}
-      initEndDate={moment()}
+      min={dayjs().subtract(3, 'hours')}
+      max={dayjs()}
       timeAwareLayers={[testLayer]}
     />);