102 lines
4.1 KiB
TypeScript
102 lines
4.1 KiB
TypeScript
// Metro module 9236 (f9237).
|
|
import { forwardRef, useRef, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import * as _PhoneOrEmailUtils from "../PhoneOrEmailUtils";
|
|
import { PhoneOrEmailSelectorForceMode } from "../PhoneOrEmailUtils";
|
|
import FreeFormLabel from "../../../design/void/Form/native/FreeFormLabel";
|
|
import FreeFormTextInput from "../../../design/void/Form/native/FreeFormTextInput";
|
|
import FreeFormErrorLabel from "../../../design/void/Form/native/FreeFormErrorLabel";
|
|
let useStyles;
|
|
const CountryCodeSelector = function CountryCodeSelector(props) {
|
|
const show = props.show;
|
|
let alpha22 = props.alpha2;
|
|
const { countryCode: countryCode2, onPress } = props;
|
|
const styles = useStyles();
|
|
if (alpha22 == null) {
|
|
alpha22 = "";
|
|
}
|
|
const accessibilityLabel = `${alpha22} ${countryCode2}`;
|
|
return show ? <View style={styles.selectorOuterContainer}>
|
|
<View style={styles.selectorContainer}>
|
|
<PressableOpacity onPress={onPress} style={styles.selectorPressable} androidRippleConfig={{
|
|
borderless: true
|
|
}} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityHint={intl.string(t.GwAW3k)}>
|
|
<Text style={styles.selectorText} variant="text-md/medium" color="mobile-text-heading-primary">{accessibilityLabel}</Text>
|
|
</PressableOpacity>
|
|
<View style={styles.separator} />
|
|
</View>
|
|
</View> : null;
|
|
};
|
|
useStyles = createStyles({
|
|
label: {
|
|
marginBottom: 8
|
|
},
|
|
input: {
|
|
flexGrow: 1,
|
|
marginBottom: 8
|
|
},
|
|
error: {
|
|
marginBottom: 8
|
|
},
|
|
hint: {
|
|
marginBottom: 8
|
|
},
|
|
selectorOuterContainer: {
|
|
overflow: "hidden"
|
|
},
|
|
selectorContainer: {
|
|
flex: 1,
|
|
flexDirection: "row"
|
|
},
|
|
selectorPressable: {
|
|
justifyContent: "center"
|
|
},
|
|
selectorText: {
|
|
alignSelf: "center"
|
|
},
|
|
separator: {
|
|
borderLeftWidth: 1,
|
|
borderLeftColor: Module712.colors.INTERACTIVE_BACKGROUND_SELECTED,
|
|
marginHorizontal: 12,
|
|
marginVertical: -4
|
|
}
|
|
});
|
|
const r43 = forwardRef(function({ style, textInputStyle, label, error, value, hint, onChangeText, alpha2, countryCode, onPressCountrySelector, forceMode, ...props }, a1) {
|
|
let shouldShowCountryCodeSelector, current, ref;
|
|
shouldShowCountryCodeSelector = void 0;
|
|
current = void 0;
|
|
ref = void 0;
|
|
const handleChangeText = function handleChangeText(a0) {
|
|
const r12 = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, a0) ? countryCode : "";
|
|
if (onChangeText != null) {
|
|
onChangeText(a0, r12);
|
|
}
|
|
};
|
|
const styles = useStyles();
|
|
shouldShowCountryCodeSelector = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, value);
|
|
current = {
|
|
handleChangeText,
|
|
value
|
|
};
|
|
ref = useRef(current);
|
|
useEffect(() => {
|
|
ref.current = current;
|
|
});
|
|
useEffect(() => {
|
|
const current2 = ref.current;
|
|
(0, current2.handleChangeText)(current2.value);
|
|
}, [countryCode]);
|
|
return <View style={style}>
|
|
{label != null ? <FreeFormLabel style={styles.label}>{label}</FreeFormLabel> : null}
|
|
<FreeFormTextInput {...props} renderLeadingComponent={() => <CountryCodeSelector show={shouldShowCountryCodeSelector} alpha2={alpha2} countryCode={countryCode} onPress={onPressCountrySelector} />} error={error != null} ref={a1} value={value} style={[styles.input, textInputStyle]} onChangeText={handleChangeText} textContentType={forceMode === PhoneOrEmailSelectorForceMode.PHONE ? "telephoneNumber" : "emailAddress"} keyboardType={forceMode === PhoneOrEmailSelectorForceMode.PHONE ? "phone-pad" : "email-address"} accessibilityLabel={label} accessibilityHint={hint} />
|
|
{error != null ? <FreeFormErrorLabel style={styles.error}>{error}</FreeFormErrorLabel> : null}
|
|
{hint != null ? <Text style={styles.hint} variant="text-xs/medium" color="text-muted">{hint}</Text> : null}
|
|
</View>;
|
|
});
|
|
export default r43;
|