From f05f0088431ed35c5669e3f3c8a09652330fb4d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20V=C3=A4limaa?= <ville.valimaa@codemate.com>
Date: Fri, 6 Dec 2024 14:02:20 +0800
Subject: [PATCH] feat: padding example app refactoring

---
 example/src/controls/mapsControls.tsx | 59 ++++++++++++++++-----------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx
index 264d9a8..95c7a88 100644
--- a/example/src/controls/mapsControls.tsx
+++ b/example/src/controls/mapsControls.tsx
@@ -41,8 +41,12 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
   const [enableLocationMarker, setEnableLocationMarker] = useState(true);
   const [latitude, onLatChanged] = useState('');
   const [longitude, onLngChanged] = useState('');
-  const [horizontalPadding, setHorizontalPadding] = useState('');
-  const [verticalPadding, setVerticalPadding] = useState('');
+  const [padding, setPadding] = useState({
+    top: '',
+    bottom: '',
+    left: '',
+    right: '',
+  });
 
   useEffect(() => {
     if (zoom !== null) {
@@ -197,24 +201,15 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
     mapViewController.clearMapView();
   };
 
-  const onHorizontalPaddingChanged = (padding: string) => {
+  const onPaddingChanged = (edge: keyof typeof padding, value: string) => {
+    const updatedPadding = { ...padding, [edge]: value };
+    setPadding(updatedPadding);
     mapViewController.setPadding(
-      Number(verticalPadding),
-      Number(padding),
-      Number(verticalPadding),
-      Number(padding)
+      Number(updatedPadding.top),
+      Number(updatedPadding.left),
+      Number(updatedPadding.bottom),
+      Number(updatedPadding.right)
     );
-    setHorizontalPadding(padding);
-  };
-
-  const onVerticalPaddingChanged = (padding: string) => {
-    mapViewController.setPadding(
-      Number(padding),
-      Number(horizontalPadding),
-      Number(padding),
-      Number(horizontalPadding)
-    );
-    setVerticalPadding(padding);
   };
 
   return (
@@ -304,17 +299,33 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
       </View>
       <TextInput
         style={styles.input}
-        onChangeText={onHorizontalPaddingChanged}
-        value={horizontalPadding}
-        placeholder="Horizontal padding"
+        onChangeText={value => onPaddingChanged('top', value)}
+        value={padding.top}
+        placeholder="Top padding"
+        placeholderTextColor="#000"
+        keyboardType="numeric"
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={value => onPaddingChanged('bottom', value)}
+        value={padding.bottom}
+        placeholder="Bottom padding"
+        placeholderTextColor="#000"
+        keyboardType="numeric"
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={value => onPaddingChanged('left', value)}
+        value={padding.left}
+        placeholder="Left padding"
         placeholderTextColor="#000"
         keyboardType="numeric"
       />
       <TextInput
         style={styles.input}
-        onChangeText={onVerticalPaddingChanged}
-        value={verticalPadding}
-        placeholder="Vertical padding"
+        onChangeText={value => onPaddingChanged('right', value)}
+        value={padding.right}
+        placeholder="Right padding"
         placeholderTextColor="#000"
         keyboardType="numeric"
       />