react-native-country-picker-modal-xkelxmc/lib/CountryPicker.js

react-native country picker

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { CountryModal } from './CountryModal';
import { HeaderModal } from './HeaderModal';
import { FlagType } from './types';
import { CountryFilter } from './CountryFilter';
import { FlagButton } from './FlagButton';
import { useContext } from './CountryContext';
import { CountryList } from './CountryList';
const renderFlagButton = (props) => props.renderFlagButton ? (props.renderFlagButton(props)) : (_jsx(FlagButton, { ...props }));
const renderFilter = (props) => props.renderCountryFilter ? (props.renderCountryFilter(props)) : (_jsx(CountryFilter, { ...props }));
export const CountryPicker = (props) => {
    const { allowFontScaling, countryCode, region, subregion, countryCodes, renderFlagButton: renderButton, renderCountryFilter, filterProps, modalProps, flatListProps, onSelect, withEmoji, withFilter, withCloseButton, withCountryNameButton, withCallingCodeButton, withCurrencyButton, containerButtonStyle, withAlphaFilter, withCallingCode, withCurrency, withFlag, withModal, disableNativeModal, withFlagButton, onClose: handleClose, onOpen: handleOpen, closeButtonImage, closeButtonStyle, closeButtonImageStyle, excludeCountries, placeholder, preferredCountries, } = props;
    const [state, setState] = useState({
        visible: props.visible || false,
        countries: [],
        filter: '',
        filterFocus: false,
    });
    const { translation, getCountriesAsync } = useContext();
    const { visible, filter, countries, filterFocus } = state;
    useEffect(() => {
        if (state.visible !== props.visible) {
            setState({ ...state, visible: props.visible || false });
        }
    }, [props.visible]);
    const onOpen = () => {
        setState({ ...state, visible: true });
        if (handleOpen) {
            handleOpen();
        }
    };
    const onClose = () => {
        setState({ ...state, filter: '', visible: false });
        if (handleClose) {
            handleClose();
        }
    };
    const setFilter = (filter) => setState({ ...state, filter });
    const setCountries = (countries) => setState({ ...state, countries });
    const onSelectClose = (country) => {
        onSelect(country);
        onClose();
    };
    const onFocus = () => setState({ ...state, filterFocus: true });
    const onBlur = () => setState({ ...state, filterFocus: false });
    const flagProp = {
        allowFontScaling,
        countryCode,
        withEmoji,
        withCountryNameButton,
        withCallingCodeButton,
        withCurrencyButton,
        withFlagButton,
        renderFlagButton: renderButton,
        onOpen,
        containerButtonStyle,
        placeholder: placeholder || 'Select Country',
    };
    useEffect(() => {
        let cancel = false;
        getCountriesAsync(withEmoji ? FlagType.EMOJI : FlagType.FLAT, translation, region, subregion, countryCodes, excludeCountries, preferredCountries, withAlphaFilter)
            .then((countries) => (cancel ? null : setCountries(countries)))
            .catch(console.warn);
        return () => {
            cancel = true;
        };
    }, [translation, withEmoji]);
    return (_jsxs(_Fragment, { children: [withModal && renderFlagButton(flagProp), _jsxs(CountryModal, { visible, withModal, disableNativeModal, ...modalProps, onRequestClose: onClose, onDismiss: onClose, children: [_jsx(HeaderModal, { withFilter,
                        onClose,
                        closeButtonImage,
                        closeButtonImageStyle,
                        closeButtonStyle,
                        withCloseButton, renderFilter: (props) => renderFilter({
                            ...props,
                            allowFontScaling,
                            renderCountryFilter,
                            onChangeText: setFilter,
                            value: filter,
                            onFocus,
                            onBlur,
                            ...filterProps,
                        }) }), _jsx(CountryList, { onSelect: onSelectClose,
                        data: countries,
                        letters: [],
                        withAlphaFilter: withAlphaFilter && filter === '',
                        withCallingCode,
                        withCurrency,
                        withFlag,
                        withEmoji,
                        filter,
                        filterFocus,
                        flatListProps })] })] }));
};
CountryPicker.defaultProps = {
    withModal: true,
    withAlphaFilter: false,
    withCallingCode: false,
    placeholder: 'Select Country',
    allowFontScaling: true,
};
//# sourceMappingURL=CountryPicker.js.map