digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/components/CityModal.js

@@ -0,0 +1,117 @@
+// components/CityModal.js
+import React from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import cities from '../utils/city.json';
+import { COLORS, Input_Field_SIZES } from '../themes/config';
+
+const CityModal = ({ visible, onClose, onSelect }) => {
+  const [search, setSearch] = React.useState('');
+
+  // ✅ Adjust to match your JSON key "Cities"
+  const filteredCities = cities.filter((c) => {
+    const cityName = c?.Cities || '';
+    return cityName.toLowerCase().includes(search.toLowerCase());
+  });
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <View style={styles.overlay}>
+        <View style={styles.modalBox}>
+          <Text style={styles.title}>Select City</Text>
+
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search city..."
+            value={search}
+            onChangeText={setSearch}
+          />
+
+          <FlatList
+            data={filteredCities}
+            keyExtractor={(item, index) => `${item.Cities}-${index}`}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.cityItem}
+                onPress={() => {
+                  onSelect(item.Cities);
+                  onClose();
+                }}
+              >
+                <Text style={styles.cityText}>{item.Cities}</Text>
+              </TouchableOpacity>
+            )}
+          />
+
+          <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
+            <Text style={styles.closeTxt}>Close</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default CityModal;
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalBox: {
+    width: '85%',
+    maxHeight: '75%',
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: COLORS.primaryColor,
+    marginBottom: 10,
+  },
+  searchInput: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 10,
+    // height:Input_Field_SIZES.Input_Height
+  },
+  cityItem: {
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  cityText: {
+    fontSize: 16,
+    color: '#333',
+  },
+  closeBtn: {
+    marginTop: 10,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: 8,
+    paddingVertical: 10,
+    alignItems: 'center',
+  },
+  closeTxt: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+});