refactor: simplify the ToggleButton and ToggleGroup components

BREAKING CHANGE: The pressed state of the ToggleButton is controlled now
terrestris · May 6, 2024 · 14760f0 · 14760f0
1 parent bd8812f
commit 14760f0
Show file tree

Hide file tree

Showing 29 changed files with 1,097 additions and 2,442 deletions.
diff --git a/src/Button/CopyButton/CopyButton.example.md b/src/Button/CopyButton/CopyButton.example.md
@@ -3,7 +3,7 @@ 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 MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import {DigitizeUtil} from '@terrestris/react-util/dist/Util/DigitizeUtil';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
 import OlLayerTile from 'ol/layer/Tile';
@@ -22,6 +22,7 @@ const features = format.readFeatures(featuresJson);
 
 const CopyButtonExample = () => {
   const [map, setMap] = useState();
+  const [pressed, setPressed] = useState();
 
   useEffect(() => {
     const newMap = new OlMap({
@@ -57,7 +58,10 @@ const CopyButtonExample = () => {
           }}
         />
 
-        <CopyButton>
+        <CopyButton
+          onChange={() => setPressed(!pressed)}
+          pressed={pressed}
+        >
           Copy feature
         </CopyButton>
       </MapContext.Provider>

diff --git a/src/Button/CopyButton/CopyButton.spec.tsx b/src/Button/CopyButton/CopyButton.spec.tsx
@@ -74,6 +74,8 @@ describe('<CopyButton />', () => {
       const button = screen.getByRole('button');
       await userEvent.click(button);
 
+      renderInMapContext(map, <CopyButton pressed={true} />);
+
       expect(layer.getSource()?.getFeatures()).toHaveLength(1);
 
       clickMap(map, 200, 200);

diff --git a/src/Button/CopyButton/CopyButton.tsx b/src/Button/CopyButton/CopyButton.tsx
@@ -88,13 +88,15 @@ const CopyButton: React.FC<CopyButtonProps> = ({
     return null;
   }
 
-  return <SelectFeaturesButton
-    layers={layers}
-    onFeatureSelect={onFeatureSelect}
-    className={finalClassName}
-    clearAfterSelect={true}
-    {...passThroughProps}
-  />;
+  return (
+    <SelectFeaturesButton
+      layers={layers}
+      onFeatureSelect={onFeatureSelect}
+      className={finalClassName}
+      clearAfterSelect={true}
+      {...passThroughProps}
+    />
+  );
 
 };
 

diff --git a/src/Button/DeleteButton/DeleteButton.example.md b/src/Button/DeleteButton/DeleteButton.example.md
@@ -20,6 +20,7 @@ const features = format.readFeatures(federalStates);
 
 const DeleteButtonExample = () => {
   const [map, setMap] = useState();
+  const [pressed, setPressed] = useState();
 
   useEffect(() => {
     const newMap = new OlMap({
@@ -54,7 +55,10 @@ const DeleteButtonExample = () => {
             height: '400px'
           }}
         />
-        <DeleteButton>
+        <DeleteButton
+          onChange={() => setPressed(!pressed)}
+          pressed={pressed}
+        >
           Delete feature
         </DeleteButton>
       </MapContext.Provider>

diff --git a/src/Button/DeleteButton/DeleteButton.spec.tsx b/src/Button/DeleteButton/DeleteButton.spec.tsx
@@ -60,6 +60,8 @@ describe('<DeleteButton />', () => {
       const button = screen.getByRole('button');
       await userEvent.click(button);
 
+      renderInMapContext(map, <DeleteButton pressed={true} />);
+
       expect(layer.getSource()?.getFeatures()).toHaveLength(1);
 
       clickMap(map, 200, 200);

diff --git a/src/Button/DrawButton/DrawButton.example.md b/src/Button/DrawButton/DrawButton.example.md
@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
 
 const DrawButtonExample = () => {
 
+  const [selected, setSelected] = useState();
   const [map, setMap] = useState();
 
   useEffect(() => {
@@ -46,44 +47,49 @@ const DrawButtonExample = () => {
         />
         <div>
           <span>Select a digitize type:</span>
-          <ToggleGroup>
+          <ToggleGroup
+            selected={selected}
+            onChange={(evt, value) => {
+              setSelected(value)
+            }}
+          >
             <DrawButton
-              name="drawPoint"
+              value="drawPoint"
               drawType="Point"
             >
               Draw point
             </DrawButton>
 
             <DrawButton
-              name="drawLine"
+              value="drawLine"
               drawType="LineString"
             >
               Draw line
             </DrawButton>
 
             <DrawButton
-              name="drawPolygon"
+              value="drawPolygon"
               drawType="Polygon"
             >
               Draw polygon
             </DrawButton>
 
             <DrawButton
-              name="drawCircle"
+              value="drawCircle"
               drawType="Circle"
             >
               Draw circle
             </DrawButton>
 
             <DrawButton
-              name="drawRectangle"
+              value="drawRectangle"
               drawType="Rectangle"
             >
               Draw rectangle
             </DrawButton>
 
             <DrawButton
-              name="drawText"
+              value="drawText"
               drawType="Text"
             >
               Draw text label

diff --git a/src/Button/DrawButton/DrawButton.spec.tsx b/src/Button/DrawButton/DrawButton.spec.tsx
@@ -42,14 +42,10 @@ describe('<DrawButton />', () => {
 
   describe('#Drawing', () => {
     xit('draws points', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Point'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Point'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
@@ -60,14 +56,10 @@ describe('<DrawButton />', () => {
     });
 
     xit('draws lines', async () => {
-      renderInMapContext(map, <DrawButton drawType={'LineString'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'LineString'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       doubleClickMap(map, 120, 100);
@@ -82,14 +74,10 @@ describe('<DrawButton />', () => {
     });
 
     xit('draws polygons', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Polygon'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Polygon'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       clickMap(map, 120, 100);
@@ -111,14 +99,10 @@ describe('<DrawButton />', () => {
     });
 
     xit('draws labels', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Text'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Text'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       const dialog = screen.getByRole('dialog');
@@ -143,14 +127,10 @@ describe('<DrawButton />', () => {
     });
 
     xit('aborts drawing labels', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Text'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Text'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       const dialog = screen.getByRole('dialog');
@@ -170,14 +150,10 @@ describe('<DrawButton />', () => {
     });
 
     xit('draws circles', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Circle'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Circle'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       clickMap(map, 120, 120);
@@ -190,14 +166,10 @@ describe('<DrawButton />', () => {
     });
 
     xit('draws rectangles', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Rectangle'} />);
-
-      const button = screen.getByRole('button');
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Rectangle'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button);
-
       clickMap(map, 100, 100);
 
       clickMap(map, 120, 120);
@@ -215,27 +187,25 @@ describe('<DrawButton />', () => {
     });
 
     xit('toggles off', async () => {
-      renderInMapContext(map, <DrawButton drawType={'Point'} />);
-
-      const button = screen.getByRole('button');
+      const { rerenderInMapContext } = renderInMapContext(map, <DrawButton pressed={false} drawType={'Point'} />);
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
       expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(0);
 
-      await userEvent.click(button);
+      rerenderInMapContext(<DrawButton pressed={true} drawType={'Point'} />);
 
       clickMap(map, 100, 100);
 
       expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
 
-      await userEvent.click(button);
+      rerenderInMapContext(<DrawButton pressed={false} drawType={'Point'} />);
 
       clickMap(map, 120, 100);
 
       expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
 
-      await userEvent.click(button);
+      rerenderInMapContext(<DrawButton pressed={true} drawType={'Point'} />);
 
       clickMap(map, 120, 100);
 
@@ -246,11 +216,14 @@ describe('<DrawButton />', () => {
       const startSpy = jest.fn();
       const endSpy = jest.fn();
 
-      renderInMapContext(map, <DrawButton drawType={'Polygon'} onDrawStart={startSpy} onDrawEnd={endSpy}/>);
-
-      const button = screen.getByRole('button');
-
-      await userEvent.click(button);
+      const { rerenderInMapContext } = renderInMapContext(map, (
+        <DrawButton
+          pressed={true}
+          drawType={'Polygon'}
+          onDrawStart={startSpy}
+          onDrawEnd={endSpy}
+        />
+      ));
 
       expect(startSpy).not.toBeCalled();
       expect(endSpy).not.toBeCalled();
@@ -277,22 +250,23 @@ describe('<DrawButton />', () => {
     });
 
     xit('multiple draw buttons use the same digitize layer', async () => {
-      renderInMapContext(map, <>
-        <DrawButton drawType={'Point'}>Point 1</DrawButton>
-        <DrawButton drawType={'Point'}>Point 2</DrawButton>
-      </>);
-
-      const button1 = screen.getByText('Point 1');
-      const button2 = screen.getByText('Point 2');
+      const { rerenderInMapContext } = renderInMapContext(map, (
+        <>
+          <DrawButton pressed={true} drawType={'Point'}>Point 1</DrawButton>
+          <DrawButton drawType={'Point'}>Point 2</DrawButton>
+        </>
+      ));
 
       const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
 
-      await userEvent.click(button1);
-
       clickMap(map, 100, 100);
 
-      await userEvent.click(button1);
-      await userEvent.click(button2);
+      rerenderInMapContext(
+        <>
+          <DrawButton drawType={'Point'}>Point 1</DrawButton>
+          <DrawButton pressed={true} drawType={'Point'}>Point 2</DrawButton>
+        </>
+      );
 
       clickMap(map, 120, 120);
 
@@ -306,11 +280,7 @@ describe('<DrawButton />', () => {
 
       map.addLayer(layer);
 
-      renderInMapContext(map, <DrawButton drawType={'Point'} digitizeLayer={layer} />);
-
-      const button = screen.getByRole('button');
-
-      await userEvent.click(button);
+      renderInMapContext(map, <DrawButton pressed={true} drawType={'Point'} digitizeLayer={layer} />);
 
       clickMap(map, 100, 100);
 
@@ -322,11 +292,7 @@ describe('<DrawButton />', () => {
     });
 
     xit('can change the type', async () => {
-      const { rerenderInMapContext } = renderInMapContext(map, <DrawButton drawType={'Point'} />);
-
-      const button = screen.getByRole('button');
-
-      await userEvent.click(button);
+      const { rerenderInMapContext } = renderInMapContext(map, <DrawButton pressed={true} drawType={'Point'} />);
 
       clickMap(map, 100, 100);
 
@@ -335,7 +301,7 @@ describe('<DrawButton />', () => {
       expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
       expect(digitizeLayer.getSource()?.getFeatures()[0].getGeometry()?.getType()).toBe('Point');
 
-      rerenderInMapContext(<DrawButton drawType={'LineString'} />);
+      rerenderInMapContext(<DrawButton pressed={true} drawType={'LineString'} />);
 
       clickMap(map, 120, 120);
       doubleClickMap(map, 140, 140);