omnipay-savings-sdk
Version:
Omnipay Savings SDK
74 lines (73 loc) • 3.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const utils_1 = require("../../utils");
const OtpInput = ({ codeLength = 4, onCodeFilled, containerStyle, autoFocus, }) => {
const [code, setCode] = (0, react_1.useState)(Array(codeLength).fill(''));
const inputs = (0, react_1.useRef)([]);
const handleChange = (text, index) => {
var _a;
if (text.length > 1) {
// Handle paste
const chars = text.split('').slice(0, codeLength);
const newCode = [...code];
chars.forEach((char, i) => {
var _a;
newCode[i] = char;
if (inputs.current[i]) {
(_a = inputs.current[i]) === null || _a === void 0 ? void 0 : _a.setNativeProps({ text: char });
}
});
setCode(newCode);
if (chars.length === codeLength) {
onCodeFilled(chars.join(''));
react_native_1.Keyboard.dismiss();
}
}
else {
const newCode = [...code];
newCode[index] = text;
setCode(newCode);
if (text && index < codeLength - 1) {
(_a = inputs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
}
if (newCode.every(char => char !== '')) {
onCodeFilled(newCode.join(''));
react_native_1.Keyboard.dismiss();
}
}
};
const handleKeyPress = (e, index) => {
var _a;
if (e.nativeEvent.key === 'Backspace' && code[index] === '' && index > 0) {
(_a = inputs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
}
};
return ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [styles.container, containerStyle] }, { children: Array.from({ length: codeLength }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref => {
inputs.current[i] = ref;
}, style: styles.input, keyboardType: "number-pad", maxLength: 1, returnKeyType: "done", onChangeText: text => handleChange(text, i), onKeyPress: e => handleKeyPress(e, i), autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : i === 0, placeholder: "" }, i))) })));
};
const styles = react_native_1.StyleSheet.create({
container: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
// columnGap: 20,
},
input: {
textAlign: 'center',
width: (0, utils_1.ms)(70),
height: (0, utils_1.ms)(65),
borderRadius: (0, utils_1.ms)(5),
borderColor: utils_1.Colors.neutral20,
borderWidth: (0, utils_1.ms)(1),
backgroundColor: 'rgba(179, 179, 179, 0.05)',
color: utils_1.Colors.baseBlueText,
fontFamily: 'Gordita-Medium',
fontSize: (0, utils_1.fontSz)(24),
fontWeight: 'bold',
},
});
exports.default = OtpInput;