digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/components/CountryPhoneInput.js

@@ -1,286 +1,392 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useEffect, useRef } from 'react';
 import {
-    View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    TextInput,
-    FlatList,
-} from "react-native";
-import Modal from "react-native-modal";
-import { COLORS, FONT_MEDIUM, FONT_NORMAL } from "../themes/config";
-import countries from "../utils/countries.json";
-import Ionicons from "react-native-vector-icons/Ionicons"
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TextInput,
+  FlatList,
+  Animated,
+} from 'react-native';
+import Modal from 'react-native-modal';
+import {
+  COLORS,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import countries from '../utils/countries.json';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { TextField } from 'rn-material-ui-textfield';
 
 export default function CountryPhoneInput({
-    initialCountryCode = "PK",
-    phonePlaceholder = "Enter phone number",
-    onChange,
+  initialCountryCode = 'PK',
+  phonePlaceholder = 'Enter phone number',
+  onChange,
+  contentContainerStyle,
+  value = '', // ✅ accept controlled value
+  br = TEXT_SIZES.BORDER_RADIUS
 }) {
-    const defaultCountry =
-        countries.find((c) => c.code === initialCountryCode) || countries[0];
+  // detect country from value if possible
+  const detectCountryFromValue = (val) => {
+    if (!val) return countries.find((c) => c.code === initialCountryCode);
+    const match = countries.find((c) => val.startsWith(c.dial_code));
+    return match || countries.find((c) => c.code === initialCountryCode);
+  };
 
-    const [isModalVisible, setModalVisible] = useState(false);
-    const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
-    const [phoneNumber, setPhoneNumber] = useState("");
-    const [query, setQuery] = useState("");
+  const textInputRef = useRef(null);
 
-    const toggleModal = () => setModalVisible((p) => !p);
+  const [selectedCountry, setSelectedCountry] = useState(
+    detectCountryFromValue(value)
+  );
 
-    const filteredCountries = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        if (!q) return countries;
-        return countries.filter(
-            (c) =>
-                c.name.toLowerCase().includes(q) ||
-                c.code.toLowerCase().includes(q) ||
-                c.dial_code.toLowerCase().includes(q)
-        );
-    }, [query]);
+  const [phoneNumber, setPhoneNumber] = useState(
+    value.replace(selectedCountry.dial_code, '') || ''
+  );
+  const [isModalVisible, setModalVisible] = useState(false);
+  const [query, setQuery] = useState('');
 
-    const handleSelectCountry = (country) => {
-        setSelectedCountry(country);
-        toggleModal();
-        // propagate change after country changes
-        if (onChange) {
-            onChange({
-                country,
-                phone: phoneNumber,
-                fullNumber: `${country.dial_code}${phoneNumber}`,
-            });
-        }
-    };
+  const toggleModal = () => setModalVisible((p) => !p);
 
-    const handlePhoneChange = (text) => {
-        // keep only digits in the phone input; dial code already shown on left
-        const digitsOnly = text.replace(/[^\d]/g, "");
-        setPhoneNumber(digitsOnly);
-        if (onChange) {
-            onChange({
-                country: selectedCountry,
-                phone: digitsOnly,
-                fullNumber: `${selectedCountry.dial_code}${digitsOnly}`,
-            });
-        }
-    };
+  // 🔄 Update when parent value changes
+  useEffect(() => {
+    const detected = detectCountryFromValue(value);
+    if (detected.code !== selectedCountry.code) {
+      setSelectedCountry(detected);
+    }
+    setPhoneNumber(value.replace(detected.dial_code, '') || '');
+  }, [value]);
 
-    return (
-        <View style={Styles._mainContainer}>
-            {/* Country Picker */}
-            <TouchableOpacity
-                style={Styles._pickerMain}
-                activeOpacity={0.8}
-                onPress={toggleModal}
-            >
-                <Text style={Styles._emoji}>{selectedCountry.emoji}</Text>
-                <Text style={Styles._dialCode}>{selectedCountry.dial_code}</Text>
-                <Ionicons
-                    name={"chevron-down"}
-                    color={COLORS.primaryColor}
-                    size={18}
-                />
-            </TouchableOpacity>
+  const filteredCountries = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return countries;
+    return countries.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        c.code.toLowerCase().includes(q) ||
+        c.dial_code.toLowerCase().includes(q)
+    );
+  }, [query]);
 
-            {/* Phone Input */}
-            <TextInput
-                style={Styles._input}
-                placeholder={phonePlaceholder}
-                keyboardType="phone-pad"
-                value={phoneNumber}
-                onChangeText={handlePhoneChange}
-            />
+  const handleSelectCountry = (country) => {
+    setSelectedCountry(country);
+    toggleModal();
+    const full = `${country.dial_code}${phoneNumber}`;
+    onChange?.({ country, phone: phoneNumber, fullNumber: full });
+  };
 
-            {/* Country Modal with Search */}
-            <Modal
-                isVisible={isModalVisible}
-                onBackdropPress={toggleModal}
-                onBackButtonPress={toggleModal}
-                useNativeDriver
-            >
-                <View style={Styles._modalContent}>
-                    <View style={Styles._modalHeader}>
-                        <Text style={Styles._modalTitle}>Select country</Text>
-                        <TouchableOpacity onPress={toggleModal} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
-                            <Text style={Styles._closeText}>Close</Text>
-                        </TouchableOpacity>
-                    </View>
+  const handlePhoneChange = (text) => {
+    // Remove non-digits
+    let digitsOnly = text.replace(/[^\d]/g, '');
 
-                    <View style={Styles._searchWrap}>
-                        <TextInput
-                            value={query}
-                            onChangeText={setQuery}
-                            placeholder="Search by country, code or +dial"
-                            autoCorrect={false}
-                            autoCapitalize="none"
-                            style={Styles._searchInput}
-                            clearButtonMode="while-editing"
-                        />
-                        {/* {query.length > 0 && (
-                            <TouchableOpacity
-                                onPress={() => setQuery("")}
-                                style={Styles._clearBtn}
-                            >
-                                <Text style={Styles._clearBtnText}>×</Text>
-                            </TouchableOpacity>
-                        )} */}
-                    </View>
+    // Remove leading zeros
+    digitsOnly = digitsOnly.replace(/^0+/, '');
 
-                    <FlatList
-                        data={filteredCountries}
-                        keyExtractor={(item) => item.code}
-                        keyboardShouldPersistTaps="handled"
-                        showsVerticalScrollIndicator={false}
-                        renderItem={({ item, index }) => {
-                            const isSelected = item.code === selectedCountry.code;
-                            return (
-                                <TouchableOpacity
-                                    style={Styles._countryItem}
-                                    onPress={() => handleSelectCountry(item)}
-                                    key={index}
-                                >
-                                    <Text style={Styles._emoji}>{item.emoji}</Text>
-                                    <View style={{ flex: 1, marginLeft: 10 }}>
-                                        <Text
-                                            style={[
-                                                Styles._countryName,
-                                                isSelected && Styles._countryNameSelected,
-                                            ]}
-                                        >
-                                            {item.name}
-                                        </Text>
-                                        <Text style={Styles._countryMeta}>
-                                            {item.code} · {item.dial_code}
-                                        </Text>
-                                    </View>
-                                    {isSelected ? <Text style={Styles._tick}>✓</Text> : null}
-                                </TouchableOpacity>
-                            );
-                        }}
-                        ListEmptyComponent={
-                            <View style={Styles._emptyWrap}>
-                                <Text style={Styles._emptyText}>No matches</Text>
-                            </View>
-                        }
-                    />
-                </View>
-            </Modal>
+    setPhoneNumber(digitsOnly);
+
+    const full = `${selectedCountry.dial_code}${digitsOnly}`;
+
+    onChange?.({
+      country: selectedCountry,
+      phone: digitsOnly,
+      fullNumber: full,
+    });
+  };
+
+
+  // --- Floating label animation setup ---
+  const [isFocused, setIsFocused] = useState(false);
+  const animatedIsFocused = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedIsFocused, {
+      toValue: isFocused || phoneNumber ? 1 : 0,
+      duration: 150,
+      useNativeDriver: false,
+    }).start();
+  }, [isFocused, phoneNumber]);
+
+  const labelStyle = {
+    position: 'absolute',
+    left: 12,
+    top: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: [18, 5],
+    }),
+    fontSize: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: [16, 12],
+    }),
+    color: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['#999', '#777'],
+    }),
+  };
+
+  const onFocus = () => {
+    setIsFocused(true);
+    if (textInputRef.current) {
+      textInputRef.current.focus();
+    }
+  };
+
+  return (
+    // <View
+    //   style={{
+    //     flex: 1,
+    //     width: '100%',
+    //     backgroundColor: COLORS.redColor,
+    //     alignItems: 'center',
+    //   }}
+    // >
+    <View style={Styles._mainContainerParent}>
+      {/* Country Picker Section */}
+      <View style={[Styles._mainContainerFlag, { borderRadius: br }]}>
+        <TouchableOpacity
+          style={Styles._pickerMain}
+          activeOpacity={0.8}
+          onPress={toggleModal}
+        >
+          <Text style={Styles._emoji}>{selectedCountry.emoji}</Text>
+          <Text style={Styles._dialCode}>{selectedCountry.dial_code}</Text>
+          <Ionicons name="chevron-down" color={COLORS.gray} size={24} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Floating Label Phone Input */}
+      <View style={[Styles._mainContainer]}>
+        <View
+          style={{
+            borderWidth: 1, // 👈 dynamic width
+            borderColor: COLORS.gray, // 👈 dynamic color
+            borderRadius: br,
+            paddingVertical: 12,
+            paddingHorizontal: 12,
+            justifyContent: 'center',
+            width: '100%',
+            height: "100%"
+          }}
+        >
+          {/* <Animated.Text
+            style={[
+              labelStyle,
+              {
+                color: isFocused ? COLORS.blackColor : '#777', // 👈 optional label color change
+              },
+            ]}
+          >
+            Mobile Number
+          </Animated.Text> */}
+          <TextInput
+            style={{
+              height: "100%",
+              fontSize: 15,
+              color: COLORS.blackColor,
+              // fontWeight: '700',
+              fontFamily: FONT_MEDIUM,
+              // marginTop: 12,
+              padding: 0,
+            }}
+            value={phoneNumber}
+            ref={textInputRef}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            keyboardType="phone-pad"
+            onChangeText={handlePhoneChange}
+            placeholder='Mobile Number'
+            // placeholder={isFocused ? '' : phonePlaceholder}
+            placeholderTextColor="#aaa"
+            maxLength={10}
+          />
         </View>
-    );
+
+        {/* Country Modal */}
+        <Modal
+          isVisible={isModalVisible}
+          onBackdropPress={toggleModal}
+          onBackButtonPress={toggleModal}
+          useNativeDriver
+        >
+          <View style={Styles._modalContent}>
+            <View style={Styles._modalHeader}>
+              <Text style={Styles._modalTitle}>Select country</Text>
+              <TouchableOpacity onPress={toggleModal}>
+                <Text style={Styles._closeText}>Close</Text>
+              </TouchableOpacity>
+            </View>
+
+            <View style={Styles._searchWrap}>
+              <TextInput
+                value={query}
+                onChangeText={setQuery}
+                placeholder="Search by country, code or +dial"
+                autoCorrect={false}
+                autoCapitalize="none"
+                style={Styles._searchInput}
+                placeholderTextColor={COLORS.gray}
+              />
+            </View>
+
+            <FlatList
+              data={filteredCountries}
+              keyExtractor={(item) => item.code}
+              keyboardShouldPersistTaps="handled"
+              renderItem={({ item }) => {
+                const isSelected = item.code === selectedCountry.code;
+                return (
+                  <TouchableOpacity
+                    style={Styles._countryItem}
+                    onPress={() => handleSelectCountry(item)}
+                  >
+                    <Text style={Styles._emoji}>{item.emoji}</Text>
+                    <View style={{ flex: 1, marginLeft: 10 }}>
+                      <Text
+                        style={[
+                          Styles._countryName,
+                          isSelected && Styles._countryNameSelected,
+                        ]}
+                      >
+                        {item.name}
+                      </Text>
+                      <Text style={Styles._countryMeta}>
+                        {item.code} · {item.dial_code}
+                      </Text>
+                    </View>
+                    {isSelected && <Text style={Styles._tick}>✓</Text>}
+                  </TouchableOpacity>
+                );
+              }}
+              ListEmptyComponent={
+                <View style={Styles._emptyWrap}>
+                  <Text style={Styles._emptyText}>No matches</Text>
+                </View>
+              }
+            />
+          </View>
+        </Modal>
+      </View>
+    </View>
+    // </View>
+  );
 }
 
 const Styles = StyleSheet.create({
-    _mainContainer: {
-        width: "95%",
-        height: 50,
-        backgroundColor: COLORS.whiteColor,
-        borderRadius: 15,
-        borderColor: COLORS.grey,
-        borderWidth: 1,
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 10,
-    },
-    _pickerMain: {
-        // width: "25%",
-        height: "80%",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        borderRightColor: COLORS.gray,
-        borderRightWidth: 0.7,
-        gap: 5,
-        paddingHorizontal: 5
-        // backgroundColor: "red"
-    },
-    _emoji: {
-        fontSize: 25,
-    },
-    _dialCode: {
-        fontSize: 13,
-        // fontWeight: "600",
-        fontFamily: FONT_NORMAL
-    },
-    _input: {
-        flex: 1,
-        height: "100%",
-        paddingHorizontal: 10,
-        fontSize: 16,
-        color: COLORS.black,
-    },
-    _modalContent: {
-        backgroundColor: COLORS.whiteColor,
-        borderRadius: 12,
-        padding: 12,
-        maxHeight: "75%",
-    },
-    _modalHeader: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        marginBottom: 8,
-    },
-    _modalTitle: {
-        fontSize: 15,
-        fontFamily: FONT_MEDIUM
-        // fontWeight: "700",
-    },
-    _closeText: {
-        fontSize: 13,
-        fontFamily: FONT_NORMAL
-    },
-    _searchWrap: {
-        flexDirection: "row",
-        alignItems: "center",
-        borderWidth: 1,
-        borderColor: COLORS.grey,
-        borderRadius: 10,
-        paddingHorizontal: 10,
-        height: 42,
-        marginBottom: 8,
-    },
-    _searchInput: {
-        flex: 1,
-        fontSize: 13,
-        fontFamily: FONT_NORMAL,
-    },
-    _clearBtn: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-    },
-    _clearBtnText: {
-        fontSize: 20,
-        lineHeight: 20,
-    },
-    _countryItem: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingVertical: 12,
-        borderBottomColor: COLORS.grey,
-        borderBottomWidth: 0.5,
-    },
-    _countryName: {
-        fontSize: 14,
-        fontFamily: FONT_NORMAL
-    },
-    _countryNameSelected: {
-        fontWeight: "700",
-    },
-    _countryMeta: {
-        fontSize: 10,
-        opacity: 0.7,
-        fontFamily: FONT_NORMAL
-    },
-    _tick: {
-        fontSize: 18,
-        marginLeft: 8,
-    },
-    _emptyWrap: {
-        paddingVertical: 24,
-        alignItems: "center",
-    },
-    _emptyText: {
-        fontSize: 14,
-        opacity: 0.6,
-        fontFamily: FONT_NORMAL
-    },
+  _mainContainerParent: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between', // ensures proper gap using percentage widths
+    alignItems: 'center',
+  },
+  _mainContainerFlag: {
+    width: '35%',
+    height: 60,
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    // paddingHorizontal: 10,
+  },
+  _mainContainer: {
+    width: '60%',
+    height: 60,
+    backgroundColor: COLORS.whiteColor,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  _pickerMain: {
+    height: '80%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    // borderRightColor: COLORS.gray,
+    // borderRightWidth: 0.7,
+    gap: 7,
+    // paddingHorizontal: 5,
+  },
+  _emoji: {
+    fontSize: 25,
+  },
+  _dialCode: {
+    fontSize: 13,
+    fontFamily: FONT_NORMAL,
+  },
+  _input: {
+    flex: 1,
+    height: '100%',
+    paddingHorizontal: 10,
+    fontSize: 16,
+    color: COLORS.black,
+  },
+  _modalContent: {
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    padding: 12,
+    maxHeight: '75%',
+  },
+  _modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  _modalTitle: {
+    fontSize: 15,
+    fontFamily: FONT_MEDIUM,
+  },
+  _closeText: {
+    fontSize: 13,
+    fontFamily: FONT_NORMAL,
+  },
+  _searchWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: COLORS.grey,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingHorizontal: 10,
+    height: 42,
+    marginBottom: 8,
+  },
+  _searchInput: {
+    flex: 1,
+    fontSize: 13,
+    fontFamily: FONT_NORMAL,
+  },
+  _countryItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomColor: COLORS.grey,
+    borderBottomWidth: 0.5,
+  },
+  _countryName: {
+    fontSize: 14,
+    fontFamily: FONT_NORMAL,
+  },
+  _countryNameSelected: {
+    fontWeight: '700',
+  },
+  _countryMeta: {
+    fontSize: 10,
+    opacity: 0.7,
+    fontFamily: FONT_NORMAL,
+  },
+  _tick: {
+    fontSize: 18,
+    marginLeft: 8,
+  },
+  _emptyWrap: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  _emptyText: {
+    fontSize: 14,
+    opacity: 0.6,
+    fontFamily: FONT_NORMAL,
+  },
 });