feat: padding example app refactoring

Author: illuminati1911

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"
       />