@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/Input/PhoneNumberInput.tsx

@@ -1,431 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 12:35 PM
- */
-
-import React, {
-  useRef,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-} from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Animated,
-  type AccessibilityProps,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import PhoneInput from 'react-native-phone-number-input';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { ChevronDown } from 'lucide-react-native';
-import { getExampleNumber } from 'libphonenumber-js';
-import examples from 'libphonenumber-js/mobile/examples';
-import { parsePhoneNumberFromString } from 'libphonenumber-js';
-import debounce from 'lodash.debounce';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-export interface PhoneNumberInputProps extends Pick<
-  AccessibilityProps,
-  'accessibilityLabel' | 'accessibilityHint'
-> {
-  value: string;
-  onChangeText: (params: {
-    fullNumber: string;
-    countryCode: string;
-    formattedNumber: string;
-  }) => void;
-  label?: string;
-  placeholder?: string;
-  error?: boolean;
-  errorMessage?: string;
-  inputStyle?: TextStyle;
-  containerStyle?: ViewStyle;
-  theme?: ThemeOverride;
-  disabled?: boolean;
-}
-
-const getMaxLengthForCountry = (
-  countryCode: string,
-  defaultMaxLength: number
-): number => {
-  try {
-    const example = getExampleNumber(
-      countryCode as keyof typeof examples,
-      examples
-    );
-    return example?.nationalNumber?.length ?? defaultMaxLength;
-  } catch (error) {
-    console.warn(`Failed to get max length for country ${countryCode}:`, error);
-    return defaultMaxLength;
-  }
-};
-
-const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
-  value = '',
-  onChangeText,
-  label,
-  placeholder = 'Enter phone number',
-  error = false,
-  errorMessage,
-  inputStyle,
-  containerStyle,
-  theme: propTheme,
-  accessibilityLabel = label || 'Phone number input',
-  accessibilityHint,
-  disabled = false,
-}) => {
-  const phoneInputRef = useRef<PhoneInput>(null);
-  const { theme: appliedTheme, isDarkMode } = useInternalTheme(propTheme);
-  const [inputError, setInputError] = useState<string | null>(null);
-  const [isFocused, setIsFocused] = useState<boolean>(false);
-  const errorAnimation = useRef(new Animated.Value(0)).current;
-
-  // ✅ Hard set country to India
-  useEffect(() => {
-    phoneInputRef.current?.getCountryCode();
-  }, []);
-
-  useEffect(() => {
-    if (inputError || error) {
-      Animated.timing(errorAnimation, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      Animated.timing(errorAnimation, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [inputError, error, errorAnimation]);
-
-  const validatePhoneNumber = useCallback(
-    (formattedText: string, inputCallingCode: string) => {
-      const rawInput = formattedText.replace(/[^\d]/g, '');
-      const fullRawNumber = `+${inputCallingCode}${rawInput}`;
-      const parsedNumber = parsePhoneNumberFromString(fullRawNumber);
-      const maxLength = getMaxLengthForCountry('IN', 10);
-
-      if (!rawInput) {
-        setInputError(null);
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      if (!parsedNumber || !inputCallingCode) {
-        setInputError('Invalid phone number format');
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      if (rawInput.length > maxLength) {
-        setInputError(`Phone number must not exceed ${maxLength} digits`);
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      if (rawInput.length < maxLength) {
-        setInputError(`Phone number must be at least ${maxLength} digits`);
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      const isValid = parsedNumber.isValid();
-      const e164 = parsedNumber.number;
-
-      if (isValid && e164) {
-        setInputError(null);
-        onChangeText({
-          fullNumber: e164,
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-      } else {
-        setInputError('Please enter a valid phone number');
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-      }
-    },
-    [onChangeText]
-  );
-
-  const debouncedHandlePhoneChange = useMemo(
-    () =>
-      debounce((formattedText: string) => {
-        const currentCallingCode = phoneInputRef.current?.getCallingCode();
-        validatePhoneNumber(formattedText, currentCallingCode || '');
-      }, 300),
-    [validatePhoneNumber]
-  );
-
-  useEffect(() => {
-    return () => {
-      debouncedHandlePhoneChange.cancel();
-    };
-  }, [debouncedHandlePhoneChange]);
-
-  const maxLength = useMemo(() => getMaxLengthForCountry('IN', 10), []);
-
-  const inputWrapperStyle = useMemo(
-    () => [
-      styles.inputWrapper,
-      {
-        borderColor: disabled
-          ? appliedTheme.colors.outlineDisabled
-          : inputError || error
-            ? appliedTheme.colors.error
-            : isFocused
-              ? appliedTheme.colors.primary
-              : appliedTheme.colors.outline,
-        backgroundColor: disabled
-          ? appliedTheme.colors.backgroundDisabled
-          : inputError || error
-            ? appliedTheme.colors.errorContainer
-            : appliedTheme.colors.background,
-        borderWidth: isFocused ? scale(1.5) : scale(1),
-      },
-    ],
-    [
-      disabled,
-      appliedTheme.colors.outlineDisabled,
-      appliedTheme.colors.error,
-      appliedTheme.colors.primary,
-      appliedTheme.colors.outline,
-      appliedTheme.colors.backgroundDisabled,
-      appliedTheme.colors.errorContainer,
-      appliedTheme.colors.background,
-      inputError,
-      error,
-      isFocused,
-    ]
-  );
-
-  const computedAccessibilityLabel = useMemo(
-    () =>
-      `${accessibilityLabel}, country code: +91${inputError || error ? `, error: ${inputError || errorMessage || 'Invalid phone number'}` : ''}`,
-    [accessibilityLabel, inputError, error, errorMessage]
-  );
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        containerStyle,
-        {
-          opacity: errorAnimation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [1, 0.95],
-          }),
-        },
-      ]}
-    >
-      {label && (
-        <View
-          style={[
-            styles.labelContainer,
-            { backgroundColor: appliedTheme.colors.background },
-          ]}
-        >
-          <Text
-            style={[
-              styles.label,
-              {
-                color: disabled
-                  ? appliedTheme.colors.textDisabled
-                  : error || inputError
-                    ? appliedTheme.colors.error
-                    : appliedTheme.colors.textPrimary,
-              },
-            ]}
-          >
-            {label}
-          </Text>
-        </View>
-      )}
-      <View style={inputWrapperStyle}>
-        <PhoneInput
-          ref={phoneInputRef}
-          defaultCode="IN"
-          layout="second"
-          value={value}
-          onChangeText={debouncedHandlePhoneChange}
-          withShadow={false}
-          autoFocus={false}
-          disabled={disabled}
-          placeholder={placeholder}
-          containerStyle={[
-            styles.phoneInputContainer,
-            { backgroundColor: 'transparent' },
-          ]}
-          textContainerStyle={[
-            styles.phoneInputTextContainer,
-            { backgroundColor: 'transparent' },
-          ]}
-          textInputStyle={[
-            styles.textInput,
-            {
-              color: disabled
-                ? appliedTheme.colors.textDisabled
-                : appliedTheme.colors.textPrimary,
-              backgroundColor: 'transparent',
-            },
-            inputStyle,
-          ]}
-          codeTextStyle={[
-            styles.codeTextStyle,
-            {
-              color: disabled
-                ? appliedTheme.colors.textDisabled
-                : error || inputError
-                  ? appliedTheme.colors.onErrorContainer
-                  : appliedTheme.colors.textPrimary,
-              backgroundColor: 'transparent',
-            },
-          ]}
-          countryPickerButtonStyle={[
-            styles.countryPickerButtonStyle,
-            { backgroundColor: 'transparent' },
-          ]}
-          renderDropdownImage={
-            <ChevronDown
-              color={
-                disabled
-                  ? appliedTheme.colors.textDisabled
-                  : error || inputError
-                    ? appliedTheme.colors.error
-                    : appliedTheme.colors.textPrimary
-              }
-              size={scale(18)}
-            />
-          }
-          textInputProps={{
-            keyboardType: 'numeric',
-            maxLength,
-            placeholderTextColor: disabled
-              ? appliedTheme.colors.textDisabled
-              : appliedTheme.colors.textSecondary,
-            accessibilityLabel: computedAccessibilityLabel,
-            accessibilityHint: accessibilityHint,
-            cursorColor:
-              inputError || error
-                ? appliedTheme.colors.error
-                : appliedTheme.colors.primary,
-            selectionColor:
-              inputError || error
-                ? appliedTheme.colors.error
-                : appliedTheme.colors.primary,
-
-            onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false),
-          }}
-          withDarkTheme={isDarkMode}
-        />
-      </View>
-      {(error || inputError) && (
-        <Text
-          style={[
-            styles.errorText,
-            { color: appliedTheme.colors.onErrorContainer },
-          ]}
-        >
-          {inputError || errorMessage || 'Invalid phone number'}
-        </Text>
-      )}
-    </Animated.View>
-  );
-};
-
-export default React.memo(PhoneNumberInputOne);
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    marginBottom: verticalScale(16),
-  },
-  labelContainer: {
-    position: 'absolute',
-    top: -verticalScale(7),
-    left: scale(12),
-    zIndex: 1,
-    paddingHorizontal: scale(6),
-    borderRadius: scale(4),
-  },
-  label: {
-    fontSize: RFValue(10),
-    fontWeight: '500',
-    letterSpacing: 0.3,
-  },
-  inputWrapper: {
-    width: '100%',
-    height: verticalScale(50),
-    borderRadius: moderateScale(12),
-    paddingHorizontal: scale(8),
-    flexDirection: 'row',
-    alignItems: 'center',
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  phoneInputContainer: {
-    flex: 1,
-    borderWidth: 0,
-    elevation: 0,
-  },
-  phoneInputTextContainer: {
-    flex: 1,
-    paddingVertical: 0,
-    paddingHorizontal: scale(2),
-    alignItems: 'center',
-  },
-  textInput: {
-    flex: 1,
-    fontSize: RFValue(16),
-    padding: 0,
-    fontWeight: '400',
-  },
-  codeTextStyle: {
-    fontSize: RFValue(16),
-    fontWeight: '500',
-  },
-  countryPickerButtonStyle: {
-    marginRight: scale(-4),
-    padding: scale(2),
-    marginLeft: scale(-4),
-  },
-  errorText: {
-    fontSize: RFValue(10),
-    marginTop: verticalScale(8),
-    marginLeft: scale(12),
-    fontWeight: '400',
-    opacity: 0.9,
-  },
-});