fix: remove momentjs and homogenize props of timeslader and its panel

BREAKING CHANGE: MomentJS is replaced by DayJS
terrestris · Jan 23, 2025 · 6de4ff9 · 6de4ff9
1 parent 4eefb99
commit 6de4ff9
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 269 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,6 @@
     "ag-grid-react": "^33.0.4",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
     "proj4": "^2.11.0",
     "prop-types": "^15.8.1"
   },

diff --git a/src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.example.md b/src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.example.md
@@ -5,7 +5,7 @@ This example demonstrates the usage of the TimeLayerSliderPanel
 import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
 import TimeLayerSliderPanel from '@terrestris/react-geo/dist/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { getCenter } from 'ol/extent';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
@@ -30,32 +30,6 @@ const TimeLayerSliderPanelExample = () => {
     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'}
-    })
-  }), [extent]);
-
-
-  const timeLayer2 = useMemo(() => 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'}
-    })
-  }), [extent]);
-
-  const timeLayer3 = useMemo(() => 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',
@@ -72,9 +46,7 @@ const TimeLayerSliderPanelExample = () => {
           },
           source: new OlSourceOSM()
         }),
-        timeLayer,
-        timeLayer2,
-        timeLayer3
+        timeLayer
       ],
       view: new OlView({
         center: getCenter(extent),
@@ -83,25 +55,26 @@ const TimeLayerSliderPanelExample = () => {
     });
 
     setMap(newMap);
-  }, [extent, timeLayer, timeLayer2, timeLayer3]);
+  }, [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 = moment().subtract(3, 'hours');
-  const initEndDate = moment();
+  const initStartDate = dayjs().subtract(3, 'hours');
+  const initEndDate = dayjs();
 
   const onTimeChanged = (newTimeValue) => setValue(newTimeValue);
 
   useEffect(() => {
-    setValue(moment().subtract(1, 'hours'))
+    setValue(dayjs().subtract(1, 'hours'))
   }, []);
 
   return (
@@ -115,14 +88,14 @@ const TimeLayerSliderPanelExample = () => {
           }}
         />
         <TimeLayerSliderPanel
-          initStartDate={initStartDate}
-          initEndDate={initEndDate}
-          timeAwareLayers={[timeLayer, timeLayer2, timeLayer3]}
-          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}
-          onChange={onTimeChanged}
         />
       </MapContext.Provider>
     </div>

diff --git a/src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.spec.tsx b/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]}
     />);