Skip to content

Commit

Permalink
feat: padding example app refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
illuminati1911 committed Dec 6, 2024
1 parent 72e70bb commit f05f008
Showing 1 changed file with 35 additions and 24 deletions.
59 changes: 35 additions & 24 deletions example/src/controls/mapsControls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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"
/>
Expand Down

0 comments on commit f05f008

Please sign in to comment.