80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
// Metro module 9238 (f9239).
|
|
import { useState, useMemo, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { getI18NCountryName } from "../../i18n/CountryCodeUtils";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useWideAuthView from "../../auth/native/useWideAuthView";
|
|
import Module3871 from "../../../_bundle/Module3871";
|
|
import useScaledRowHeight from "../../main_tabs_v2/native/shared_components/user_list/useScaledRowHeight";
|
|
import fuzzysearch from "../../../_bundle/fuzzysearch";
|
|
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
|
|
import ViewEmptyState from "../../../components_native/common/ViewEmptyState";
|
|
import Module8299 from "../../../_bundle/Module8299";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import FastestList_android from "../../fastest_list/FastestList.android";
|
|
const useStyles = createStyles((a0) => ({
|
|
container: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
paddingHorizontal: a0 ? Module712.space.PX_24 : Module712.space.PX_12,
|
|
paddingTop: Module712.space.PX_16,
|
|
paddingBottom: a0 ? Module712.space.PX_24 : Module712.space.PX_16,
|
|
flex: 1
|
|
},
|
|
searchFieldContainer: {
|
|
paddingBottom: Module712.space.PX_16
|
|
}
|
|
}));
|
|
export default function CountryCallingCodeSelect(props) {
|
|
let rows;
|
|
const { onCountrySelected, onClose } = props;
|
|
rows = void 0;
|
|
const styles = useStyles(useWideAuthView());
|
|
const [state, onChange] = useState("");
|
|
const memo = useMemo(() => Module3871.flatMap(({ alpha2, phoneCountryCodes, name }, c30070_2) => {
|
|
const i18NCountryName = getI18NCountryName(alpha2);
|
|
return phoneCountryCodes.map((phoneCountryCode) => ({
|
|
translatedName: i18NCountryName,
|
|
key: `${c30070_2}-${phoneCountryCode}`,
|
|
country: {
|
|
code: phoneCountryCode,
|
|
alpha2,
|
|
name
|
|
}
|
|
}));
|
|
}), []);
|
|
const scaledRowHeight = useScaledRowHeight();
|
|
const memo2 = useMemo(() => {
|
|
const rows2 = [];
|
|
for (const item of memo) {
|
|
if (state.length === 0 || item.country.code.replace(/\+|\s/g, "").startsWith(state.replace(/\+|\s/g, "")) || fuzzysearch(state.toLowerCase(), item.country.name.toLowerCase()) || fuzzysearch(state.toLowerCase(), item.translatedName.toLowerCase())) {
|
|
rows2.push(item);
|
|
}
|
|
}
|
|
return {
|
|
rows: rows2,
|
|
sections: [rows2.length]
|
|
};
|
|
}, [memo, state]);
|
|
rows = memo2.rows;
|
|
const sections = memo2.sections;
|
|
const callback = useCallback((a0, a1) => {
|
|
const r13 = rows[a1];
|
|
const { translatedName, country } = r13;
|
|
return <TableRow start={a1 === 0} end={a1 === rows.length - 1} label={translatedName} trailing={<Text variant="text-md/semibold">{country.code}</Text>} onPress={() => {
|
|
onCountrySelected(country);
|
|
if (onClose != null) {
|
|
onClose();
|
|
}
|
|
}} />;
|
|
}, [onClose, onCountrySelected, rows]);
|
|
return <View style={styles.container}>
|
|
<View style={styles.searchFieldContainer}>
|
|
<SearchField size="md" onChange={onChange} />
|
|
</View>
|
|
{state !== "" && rows.length === 0 ? <ViewEmptyState source={Module8299} text={intl.string(t.wEHnxW)} /> : <FastestList_android sections={sections} renderItem={callback} itemSize={scaledRowHeight} estimatedListSize="windowSize" keyboardShouldPersistTaps="always" />}
|
|
</View>;
|
|
};
|