206 lines
7.1 KiB
TypeScript
206 lines
7.1 KiB
TypeScript
// Metro module 9261 (f9262).
|
|
import _slicedToArray from "../../../_bundle/_slicedToArray";
|
|
import { useState, useRef, useEffect } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { TextInput } from "../../../design/void/native";
|
|
import * as _TextInput_native from "../../../design/components/TextInput/native/TextInput.native";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import KeyboardAwareView from "../../keyboard/native/KeyboardAwareView";
|
|
let c6092_9, useStyles, CodeFieldInner;
|
|
const SingleCodeInput = function SingleCodeInput(props) {
|
|
const { loading = false, error, count = 6, codeType = c6092_9.NUMERIC } = props;
|
|
const NUMERIC = codeType;
|
|
const { onCodeEntered, disabled, code, setCode } = props;
|
|
const styles = useStyles();
|
|
return <View style={styles.singleInputWrapper}>
|
|
<_TextInput_native.TextInput errorMessage={error} value={code} autoCapitalize="characters" maxLength={count} accessibilityLabel={intl.string(t["ysthA+"])} textContentType="oneTimeCode" keyboardType={NUMERIC === c6092_9.NUMERIC ? "number-pad" : "default"} onChange={function handleChange(event) {
|
|
setCode(event.replace(NUMERIC === c6092_9.NUMERIC ? /\D/g : /[^A-Z0-9]/g, ""));
|
|
}} isDisabled={disabled} isClearable autoFocus />
|
|
<View style={styles.singleInputButton}>
|
|
<Button loading={loading} variant="primary" size="lg" text={intl.string(t["13ofGu"])} onPress={function handlePressSubmit() {
|
|
return onCodeEntered(code);
|
|
}} disabled={code.length !== count || disabled} />
|
|
</View>
|
|
</View>;
|
|
};
|
|
CodeFieldInner = function CodeFieldInner(props) {
|
|
const { title, description, error, onCodeEntered: onCodeEntered2, loading = false, count = 6, codeType = c6092_9.NUMERIC, actions, footer, backgroundStyle, disabled } = props;
|
|
const styles = useStyles();
|
|
const r33 = _slicedToArray(useState(""), 2);
|
|
return <ScrollView style={[styles.background, backgroundStyle]} contentContainerStyle={styles.backgroundFlex} keyboardShouldPersistTaps="handled" alwaysBounceVertical={false}>
|
|
<View style={styles.container}>
|
|
<Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">{title}</Text>
|
|
<Text style={styles.subtitle} variant="text-sm/medium" color="text-default">{description}</Text>
|
|
<View style={styles.inputContainer}>
|
|
<SingleCodeInput loading={loading} error={error} count={count} onCodeEntered={onCodeEntered2} codeType={codeType} disabled={disabled} code={r33[0]} setCode={r33[1]} />
|
|
</View>
|
|
{actions}
|
|
</View>
|
|
<KeyboardAwareView>{footer}</KeyboardAwareView>
|
|
</ScrollView>;
|
|
};
|
|
c6092_9 = {
|
|
NUMERIC: "numeric",
|
|
ALPHANUMERIC: "alphanumeric"
|
|
};
|
|
useStyles = createStyles({
|
|
viewWrapper: {
|
|
flex: 1
|
|
},
|
|
background: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
flex: 1
|
|
},
|
|
backgroundFlex: {
|
|
flex: 1,
|
|
justifyContent: "space-between"
|
|
},
|
|
container: {
|
|
padding: 16
|
|
},
|
|
title: {
|
|
textAlign: "center"
|
|
},
|
|
subtitle: {
|
|
marginTop: 8,
|
|
lineHeight: 18,
|
|
textAlign: "center"
|
|
},
|
|
inputContainer: {
|
|
marginTop: 20,
|
|
width: "100%",
|
|
alignItems: "center"
|
|
},
|
|
codeContainer: {
|
|
maxWidth: 336,
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around"
|
|
},
|
|
spacer: {
|
|
width: 4
|
|
},
|
|
inputWrapper: {
|
|
borderWidth: 1,
|
|
borderRadius: 5,
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
borderColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
inputWrapperError: {
|
|
borderColor: Module712.unsafe_rawColors.RED_400
|
|
},
|
|
input: {
|
|
textAlign: "center"
|
|
},
|
|
singleInputWrapper: {
|
|
width: "100%"
|
|
},
|
|
singleInputButton: {
|
|
marginTop: 8,
|
|
justifyContent: "flex-end"
|
|
}
|
|
});
|
|
export default function CodeField(props) {
|
|
const styles = useStyles();
|
|
return props.disableKeyboardAvoidingView ? <CodeFieldInner {...props} /> : <KeyboardAwareView style={styles.viewWrapper}>
|
|
<CodeFieldInner {...props} />
|
|
</KeyboardAwareView>;
|
|
};
|
|
export { c6092_9 as CodeType };
|
|
export function CodeBlocks(props) {
|
|
let env17100 = {};
|
|
const { hasError, onCodeEntered: onCodeEntered2 } = props;
|
|
env17100[0] = onCodeEntered2;
|
|
let count = props.count;
|
|
if (count === void 0) {
|
|
count = 6;
|
|
}
|
|
env17100[1] = count;
|
|
let codeType = props.codeType;
|
|
if (codeType === void 0) {
|
|
codeType = c6092_9.NUMERIC;
|
|
}
|
|
env17100[2] = void 0;
|
|
env17100[3] = void 0;
|
|
env17100[4] = void 0;
|
|
env17100[5] = void 0;
|
|
const styles = useStyles();
|
|
const r37 = _slicedToArray(useState(Array(count).fill("")), 2);
|
|
const r38 = r37[0];
|
|
env17100[2] = r38;
|
|
env17100[3] = r37[1];
|
|
env17100[4] = useRef(Array(count).fill(null));
|
|
env17100[5] = useRef(onCodeEntered2);
|
|
useEffect(() => {
|
|
env17100[5].current = env17100[0];
|
|
});
|
|
useEffect(() => {
|
|
const r5 = env17100[2];
|
|
if (r5.every((item) => item.trim() !== "")) {
|
|
env17100[5].current(r5.join(""));
|
|
}
|
|
}, [r38]);
|
|
const r55 = [];
|
|
const r9 = 0 < count;
|
|
let r1 = 0;
|
|
if (r9) {
|
|
do {
|
|
let c17101_0 = r1;
|
|
const r2 = count / 2;
|
|
const key = r1;
|
|
if (key === r2) {
|
|
r55.push(<View key="spacer" style={styles.spacer} />);
|
|
}
|
|
r55.push(<View key={key} style={[styles.inputWrapper, hasError ? styles.inputWrapperError : null]}>
|
|
<TextInput ref={(a0) => {
|
|
env17100[4].current[c17101_0] = a0;
|
|
}} style={[{
|
|
height: 42,
|
|
width: 252 / count
|
|
}, styles.input]} keyboardType={codeType === c6092_9.NUMERIC ? "phone-pad" : "default"} autoFocus={key === 0} value={r38[key]} onKeyPress={(event) => {
|
|
if (event.nativeEvent.key !== "Backspace") {
|
|
const r31 = env17100[4].current[c17101_0 + 1];
|
|
if (r31 != null) {
|
|
r31.focus();
|
|
}
|
|
} else {
|
|
const r8 = env17100[2];
|
|
if (r8[c17101_0] === "") {
|
|
const r6 = env17100[3];
|
|
const r17 = c17101_0 - 1;
|
|
const r18 = [...r8];
|
|
r18[r17] = "";
|
|
r6(r18);
|
|
const r22 = env17100[4].current[r17];
|
|
if (r22 != null) {
|
|
r22.focus();
|
|
}
|
|
}
|
|
}
|
|
}} onChangeText={(text) => {
|
|
const r8 = text[0];
|
|
const r5 = env17100[2];
|
|
const r22 = (r8 === r5[c17101_0] ? text.slice(1) : text).replace("-", "").trim().toUpperCase();
|
|
let r24 = r22.split("");
|
|
if (r22 === "") {
|
|
r24 = [""];
|
|
}
|
|
const r25 = [...r5];
|
|
r25.splice.apply(r25, [c17101_0, 1, ...r24]);
|
|
(0, env17100[3])(r25.slice(0, env17100[1]));
|
|
}} selection={{
|
|
start: r38[key].length,
|
|
end: r38[key].length
|
|
}} autoCapitalize="characters" autoCorrect={false} />
|
|
</View>);
|
|
r1 = key + 1;
|
|
} while (r1 < count);
|
|
}
|
|
return <View style={styles.codeContainer}>{r55}</View>;
|
|
}
|