Skip to content

Commit 14760f0

Browse files
dnlkochsimonseyock
dnlkoch
authored and
simonseyock
committed
refactor: simplify the ToggleButton and ToggleGroup components
BREAKING CHANGE: The pressed state of the ToggleButton is controlled now
1 parent bd8812f commit 14760f0

29 files changed

+1097
-2442
lines changed

‎src/Button/CopyButton/CopyButton.example.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ This demonstrates the use of the CopyButton.
33
```jsx
44
import CopyButton from '@terrestris/react-geo/dist/Button/CopyButton/CopyButton';
55
import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
6-
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
6+
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
77
import {DigitizeUtil} from '@terrestris/react-util/dist/Util/DigitizeUtil';
88
import OlFormatGeoJSON from 'ol/format/GeoJSON';
99
import OlLayerTile from 'ol/layer/Tile';
@@ -22,6 +22,7 @@ const features = format.readFeatures(featuresJson);
2222

2323
const CopyButtonExample = () => {
2424
const [map, setMap] = useState();
25+
const [pressed, setPressed] = useState();
2526

2627
useEffect(() => {
2728
const newMap = new OlMap({
@@ -57,7 +58,10 @@ const CopyButtonExample = () => {
5758
}}
5859
/>
5960

60-
<CopyButton>
61+
<CopyButton
62+
onChange={() => setPressed(!pressed)}
63+
pressed={pressed}
64+
>
6165
Copy feature
6266
</CopyButton>
6367
</MapContext.Provider>

‎src/Button/CopyButton/CopyButton.spec.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ describe('<CopyButton />', () => {
7474
const button = screen.getByRole('button');
7575
await userEvent.click(button);
7676

77+
renderInMapContext(map, <CopyButton pressed={true} />);
78+
7779
expect(layer.getSource()?.getFeatures()).toHaveLength(1);
7880

7981
clickMap(map, 200, 200);

‎src/Button/CopyButton/CopyButton.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,15 @@ const CopyButton: React.FC<CopyButtonProps> = ({
8888
return null;
8989
}
9090

91-
return <SelectFeaturesButton
92-
layers={layers}
93-
onFeatureSelect={onFeatureSelect}
94-
className={finalClassName}
95-
clearAfterSelect={true}
96-
{...passThroughProps}
97-
/>;
91+
return (
92+
<SelectFeaturesButton
93+
layers={layers}
94+
onFeatureSelect={onFeatureSelect}
95+
className={finalClassName}
96+
clearAfterSelect={true}
97+
{...passThroughProps}
98+
/>
99+
);
98100

99101
};
100102

‎src/Button/DeleteButton/DeleteButton.example.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const features = format.readFeatures(federalStates);
2020

2121
const DeleteButtonExample = () => {
2222
const [map, setMap] = useState();
23+
const [pressed, setPressed] = useState();
2324

2425
useEffect(() => {
2526
const newMap = new OlMap({
@@ -54,7 +55,10 @@ const DeleteButtonExample = () => {
5455
height: '400px'
5556
}}
5657
/>
57-
<DeleteButton>
58+
<DeleteButton
59+
onChange={() => setPressed(!pressed)}
60+
pressed={pressed}
61+
>
5862
Delete feature
5963
</DeleteButton>
6064
</MapContext.Provider>

‎src/Button/DeleteButton/DeleteButton.spec.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ describe('<DeleteButton />', () => {
6060
const button = screen.getByRole('button');
6161
await userEvent.click(button);
6262

63+
renderInMapContext(map, <DeleteButton pressed={true} />);
64+
6365
expect(layer.getSource()?.getFeatures()).toHaveLength(1);
6466

6567
clickMap(map, 200, 200);

‎src/Button/DrawButton/DrawButton.example.md

+13-7
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
1414

1515
const DrawButtonExample = () => {
1616

17+
const [selected, setSelected] = useState();
1718
const [map, setMap] = useState();
1819

1920
useEffect(() => {
@@ -46,44 +47,49 @@ const DrawButtonExample = () => {
4647
/>
4748
<div>
4849
<span>Select a digitize type:</span>
49-
<ToggleGroup>
50+
<ToggleGroup
51+
selected={selected}
52+
onChange={(evt, value) => {
53+
setSelected(value)
54+
}}
55+
>
5056
<DrawButton
51-
name="drawPoint"
57+
value="drawPoint"
5258
drawType="Point"
5359
>
5460
Draw point
5561
</DrawButton>
5662

5763
<DrawButton
58-
name="drawLine"
64+
value="drawLine"
5965
drawType="LineString"
6066
>
6167
Draw line
6268
</DrawButton>
6369

6470
<DrawButton
65-
name="drawPolygon"
71+
value="drawPolygon"
6672
drawType="Polygon"
6773
>
6874
Draw polygon
6975
</DrawButton>
7076

7177
<DrawButton
72-
name="drawCircle"
78+
value="drawCircle"
7379
drawType="Circle"
7480
>
7581
Draw circle
7682
</DrawButton>
7783

7884
<DrawButton
79-
name="drawRectangle"
85+
value="drawRectangle"
8086
drawType="Rectangle"
8187
>
8288
Draw rectangle
8389
</DrawButton>
8490

8591
<DrawButton
86-
name="drawText"
92+
value="drawText"
8793
drawType="Text"
8894
>
8995
Draw text label

‎src/Button/DrawButton/DrawButton.spec.tsx

+34-68
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,10 @@ describe('<DrawButton />', () => {
4242

4343
describe('#Drawing', () => {
4444
xit('draws points', async () => {
45-
renderInMapContext(map, <DrawButton drawType={'Point'} />);
46-
47-
const button = screen.getByRole('button');
45+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Point'} />);
4846

4947
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
5048

51-
await userEvent.click(button);
52-
5349
clickMap(map, 100, 100);
5450

5551
expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
@@ -60,14 +56,10 @@ describe('<DrawButton />', () => {
6056
});
6157

6258
xit('draws lines', async () => {
63-
renderInMapContext(map, <DrawButton drawType={'LineString'} />);
64-
65-
const button = screen.getByRole('button');
59+
renderInMapContext(map, <DrawButton pressed={true} drawType={'LineString'} />);
6660

6761
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
6862

69-
await userEvent.click(button);
70-
7163
clickMap(map, 100, 100);
7264

7365
doubleClickMap(map, 120, 100);
@@ -82,14 +74,10 @@ describe('<DrawButton />', () => {
8274
});
8375

8476
xit('draws polygons', async () => {
85-
renderInMapContext(map, <DrawButton drawType={'Polygon'} />);
86-
87-
const button = screen.getByRole('button');
77+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Polygon'} />);
8878

8979
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
9080

91-
await userEvent.click(button);
92-
9381
clickMap(map, 100, 100);
9482

9583
clickMap(map, 120, 100);
@@ -111,14 +99,10 @@ describe('<DrawButton />', () => {
11199
});
112100

113101
xit('draws labels', async () => {
114-
renderInMapContext(map, <DrawButton drawType={'Text'} />);
115-
116-
const button = screen.getByRole('button');
102+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Text'} />);
117103

118104
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
119105

120-
await userEvent.click(button);
121-
122106
clickMap(map, 100, 100);
123107

124108
const dialog = screen.getByRole('dialog');
@@ -143,14 +127,10 @@ describe('<DrawButton />', () => {
143127
});
144128

145129
xit('aborts drawing labels', async () => {
146-
renderInMapContext(map, <DrawButton drawType={'Text'} />);
147-
148-
const button = screen.getByRole('button');
130+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Text'} />);
149131

150132
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
151133

152-
await userEvent.click(button);
153-
154134
clickMap(map, 100, 100);
155135

156136
const dialog = screen.getByRole('dialog');
@@ -170,14 +150,10 @@ describe('<DrawButton />', () => {
170150
});
171151

172152
xit('draws circles', async () => {
173-
renderInMapContext(map, <DrawButton drawType={'Circle'} />);
174-
175-
const button = screen.getByRole('button');
153+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Circle'} />);
176154

177155
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
178156

179-
await userEvent.click(button);
180-
181157
clickMap(map, 100, 100);
182158

183159
clickMap(map, 120, 120);
@@ -190,14 +166,10 @@ describe('<DrawButton />', () => {
190166
});
191167

192168
xit('draws rectangles', async () => {
193-
renderInMapContext(map, <DrawButton drawType={'Rectangle'} />);
194-
195-
const button = screen.getByRole('button');
169+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Rectangle'} />);
196170

197171
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
198172

199-
await userEvent.click(button);
200-
201173
clickMap(map, 100, 100);
202174

203175
clickMap(map, 120, 120);
@@ -215,27 +187,25 @@ describe('<DrawButton />', () => {
215187
});
216188

217189
xit('toggles off', async () => {
218-
renderInMapContext(map, <DrawButton drawType={'Point'} />);
219-
220-
const button = screen.getByRole('button');
190+
const { rerenderInMapContext } = renderInMapContext(map, <DrawButton pressed={false} drawType={'Point'} />);
221191

222192
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
223193

224194
expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(0);
225195

226-
await userEvent.click(button);
196+
rerenderInMapContext(<DrawButton pressed={true} drawType={'Point'} />);
227197

228198
clickMap(map, 100, 100);
229199

230200
expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
231201

232-
await userEvent.click(button);
202+
rerenderInMapContext(<DrawButton pressed={false} drawType={'Point'} />);
233203

234204
clickMap(map, 120, 100);
235205

236206
expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
237207

238-
await userEvent.click(button);
208+
rerenderInMapContext(<DrawButton pressed={true} drawType={'Point'} />);
239209

240210
clickMap(map, 120, 100);
241211

@@ -246,11 +216,14 @@ describe('<DrawButton />', () => {
246216
const startSpy = jest.fn();
247217
const endSpy = jest.fn();
248218

249-
renderInMapContext(map, <DrawButton drawType={'Polygon'} onDrawStart={startSpy} onDrawEnd={endSpy}/>);
250-
251-
const button = screen.getByRole('button');
252-
253-
await userEvent.click(button);
219+
const { rerenderInMapContext } = renderInMapContext(map, (
220+
<DrawButton
221+
pressed={true}
222+
drawType={'Polygon'}
223+
onDrawStart={startSpy}
224+
onDrawEnd={endSpy}
225+
/>
226+
));
254227

255228
expect(startSpy).not.toBeCalled();
256229
expect(endSpy).not.toBeCalled();
@@ -277,22 +250,23 @@ describe('<DrawButton />', () => {
277250
});
278251

279252
xit('multiple draw buttons use the same digitize layer', async () => {
280-
renderInMapContext(map, <>
281-
<DrawButton drawType={'Point'}>Point 1</DrawButton>
282-
<DrawButton drawType={'Point'}>Point 2</DrawButton>
283-
</>);
284-
285-
const button1 = screen.getByText('Point 1');
286-
const button2 = screen.getByText('Point 2');
253+
const { rerenderInMapContext } = renderInMapContext(map, (
254+
<>
255+
<DrawButton pressed={true} drawType={'Point'}>Point 1</DrawButton>
256+
<DrawButton drawType={'Point'}>Point 2</DrawButton>
257+
</>
258+
));
287259

288260
const digitizeLayer = DigitizeUtil.getDigitizeLayer(map);
289261

290-
await userEvent.click(button1);
291-
292262
clickMap(map, 100, 100);
293263

294-
await userEvent.click(button1);
295-
await userEvent.click(button2);
264+
rerenderInMapContext(
265+
<>
266+
<DrawButton drawType={'Point'}>Point 1</DrawButton>
267+
<DrawButton pressed={true} drawType={'Point'}>Point 2</DrawButton>
268+
</>
269+
);
296270

297271
clickMap(map, 120, 120);
298272

@@ -306,11 +280,7 @@ describe('<DrawButton />', () => {
306280

307281
map.addLayer(layer);
308282

309-
renderInMapContext(map, <DrawButton drawType={'Point'} digitizeLayer={layer} />);
310-
311-
const button = screen.getByRole('button');
312-
313-
await userEvent.click(button);
283+
renderInMapContext(map, <DrawButton pressed={true} drawType={'Point'} digitizeLayer={layer} />);
314284

315285
clickMap(map, 100, 100);
316286

@@ -322,11 +292,7 @@ describe('<DrawButton />', () => {
322292
});
323293

324294
xit('can change the type', async () => {
325-
const { rerenderInMapContext } = renderInMapContext(map, <DrawButton drawType={'Point'} />);
326-
327-
const button = screen.getByRole('button');
328-
329-
await userEvent.click(button);
295+
const { rerenderInMapContext } = renderInMapContext(map, <DrawButton pressed={true} drawType={'Point'} />);
330296

331297
clickMap(map, 100, 100);
332298

@@ -335,7 +301,7 @@ describe('<DrawButton />', () => {
335301
expect(digitizeLayer.getSource()?.getFeatures()).toHaveLength(1);
336302
expect(digitizeLayer.getSource()?.getFeatures()[0].getGeometry()?.getType()).toBe('Point');
337303

338-
rerenderInMapContext(<DrawButton drawType={'LineString'} />);
304+
rerenderInMapContext(<DrawButton pressed={true} drawType={'LineString'} />);
339305

340306
clickMap(map, 120, 120);
341307
doubleClickMap(map, 140, 140);

0 commit comments

Comments
 (0)