diff --git a/.gitignore b/.gitignore index 3e9012c..eb5e8a5 100644 --- a/.gitignore +++ b/.gitignore @@ -58,4 +58,3 @@ buck-out/ ReactotronConfig.js # ts build dir -dist \ No newline at end of file diff --git a/dist/helpers/codeToArray.d.ts b/dist/helpers/codeToArray.d.ts new file mode 100644 index 0000000..56e61df --- /dev/null +++ b/dist/helpers/codeToArray.d.ts @@ -0,0 +1,5 @@ +export declare const codeToArray: (code?: string | undefined) => string[]; +declare const _default: { + codeToArray: (code?: string | undefined) => string[]; +}; +export default _default; diff --git a/dist/helpers/codeToArray.js b/dist/helpers/codeToArray.js new file mode 100644 index 0000000..2bda90d --- /dev/null +++ b/dist/helpers/codeToArray.js @@ -0,0 +1,3 @@ +export const codeToArray = (code) => { var _a; return (_a = code === null || code === void 0 ? void 0 : code.split("")) !== null && _a !== void 0 ? _a : []; }; +export default { codeToArray }; +//# sourceMappingURL=codeToArray.js.map \ No newline at end of file diff --git a/dist/helpers/codeToArray.js.map b/dist/helpers/codeToArray.js.map new file mode 100644 index 0000000..de917a5 --- /dev/null +++ b/dist/helpers/codeToArray.js.map @@ -0,0 +1 @@ +{"version":3,"file":"codeToArray.js","sourceRoot":"","sources":["../../helpers/codeToArray.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAa,EAAY,EAAE,wBAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,EAAE,oCAAK,EAAE,GAAA,CAAC;AAE9E,eAAe,EAAE,WAAW,EAAE,CAAA"} \ No newline at end of file diff --git a/dist/helpers/device.d.ts b/dist/helpers/device.d.ts new file mode 100644 index 0000000..b61927d --- /dev/null +++ b/dist/helpers/device.d.ts @@ -0,0 +1,5 @@ +export declare const isAutoFillSupported: boolean; +declare const _default: { + isAutoFillSupported: boolean; +}; +export default _default; diff --git a/dist/helpers/device.js b/dist/helpers/device.js new file mode 100644 index 0000000..943ee0c --- /dev/null +++ b/dist/helpers/device.js @@ -0,0 +1,5 @@ +import { Platform } from 'react-native'; +const majorVersionIOS = parseInt(String(Platform.Version), 10); +export const isAutoFillSupported = (Platform.OS === 'ios' && majorVersionIOS >= 12); +export default { isAutoFillSupported }; +//# sourceMappingURL=device.js.map \ No newline at end of file diff --git a/dist/helpers/device.js.map b/dist/helpers/device.js.map new file mode 100644 index 0000000..187c762 --- /dev/null +++ b/dist/helpers/device.js.map @@ -0,0 +1 @@ +{"version":3,"file":"device.js","sourceRoot":"","sources":["../../helpers/device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,MAAM,eAAe,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/D,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,eAAe,IAAI,EAAE,CAAC,CAAA;AAEnF,eAAe,EAAE,mBAAmB,EAAE,CAAA"} \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..df13487 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,30 @@ +/// +import { InputProps, OTPInputViewState } from '@twotalltotems/react-native-otp-input'; +import { Component } from 'react'; +import { TextInput } from 'react-native'; +export default class OTPInputView extends Component { + static defaultProps: InputProps; + private fields; + private keyboardDidHideListener?; + private timer?; + private hasCheckedClipBoard?; + private clipBoardCode?; + constructor(props: InputProps); + UNSAFE_componentWillReceiveProps(nextProps: InputProps): void; + componentDidMount(): void; + componentWillUnmount(): void; + private copyCodeFromClipBoardOnAndroid; + bringUpKeyBoardIfNeeded: () => void; + getDigits: () => string[]; + private handleKeyboardDidHide; + private notifyCodeChanged; + checkPinCodeFromClipBoard: () => void; + private handleChangeText; + private handleKeyPressTextInput; + focusField: (index: number) => void; + blurAllFields: () => void; + clearAllFields: () => void; + renderOneInputField: (_: TextInput, index: number) => JSX.Element; + renderTextFields: () => JSX.Element[]; + render(): JSX.Element; +} diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..9113ec9 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,208 @@ +import React, { Component } from 'react'; +import { View, TextInput, TouchableWithoutFeedback, Keyboard, Platform, I18nManager, } from 'react-native'; +import Clipboard from '@react-native-community/clipboard'; +import styles from './styles'; +import { isAutoFillSupported } from './helpers/device'; +import { codeToArray } from './helpers/codeToArray'; +export default class OTPInputView extends Component { + constructor(props) { + super(props); + this.fields = []; + this.copyCodeFromClipBoardOnAndroid = () => { + if (Platform.OS === "android") { + this.checkPinCodeFromClipBoard(); + this.timer = setInterval(this.checkPinCodeFromClipBoard, 400); + } + }; + this.bringUpKeyBoardIfNeeded = () => { + const { autoFocusOnLoad, pinCount } = this.props; + const digits = this.getDigits(); + const focusIndex = digits.length ? digits.length - 1 : 0; + if (focusIndex < pinCount && autoFocusOnLoad) { + this.focusField(focusIndex); + } + }; + this.getDigits = () => { + const { digits: innerDigits } = this.state; + const { code } = this.props; + return code === undefined ? innerDigits : code.split(""); + }; + this.handleKeyboardDidHide = () => { + this.blurAllFields(); + }; + this.notifyCodeChanged = () => { + const { digits } = this.state; + const code = digits.join(""); + const { onCodeChanged } = this.props; + if (onCodeChanged) { + onCodeChanged(code); + } + }; + this.checkPinCodeFromClipBoard = () => { + const { pinCount, onCodeFilled } = this.props; + const regexp = new RegExp(`^\\d{${pinCount}}$`); + Clipboard.getString().then(code => { + if (this.hasCheckedClipBoard && regexp.test(code) && (this.clipBoardCode !== code)) { + this.setState({ + digits: code.split(""), + }, () => { + this.blurAllFields(); + this.notifyCodeChanged(); + onCodeFilled && onCodeFilled(code); + }); + } + this.clipBoardCode = code; + this.hasCheckedClipBoard = true; + }).catch(() => { + }); + }; + this.handleChangeText = (index, text) => { + const { onCodeFilled, pinCount } = this.props; + const digits = this.getDigits(); + let newdigits = digits.slice(); + const oldTextLength = newdigits[index] ? newdigits[index].length : 0; + const newTextLength = text.length; + if (newTextLength - oldTextLength === pinCount) { // user pasted text in. + newdigits = text.split("").slice(oldTextLength, newTextLength); + this.setState({ digits: newdigits }, this.notifyCodeChanged); + } + else { + if (text.length === 0) { + if (newdigits.length > 0) { + newdigits = newdigits.slice(0, newdigits.length - 1); + } + } + else { + text.split("").forEach((value) => { + if (index < pinCount) { + newdigits[index] = value; + index += 1; + } + }); + index -= 1; + } + this.setState({ digits: newdigits }, this.notifyCodeChanged); + } + let result = newdigits.join(""); + if (result.length >= pinCount) { + onCodeFilled && onCodeFilled(result); + this.focusField(pinCount - 1); + this.blurAllFields(); + } + else { + if (text.length > 0 && index < pinCount - 1) { + this.focusField(index + 1); + } + } + }; + this.handleKeyPressTextInput = (index, key) => { + const digits = this.getDigits(); + if (key === 'Backspace') { + if (!digits[index] && index > 0) { + this.handleChangeText(index - 1, ''); + this.focusField(index - 1); + } + } + }; + this.focusField = (index) => { + if (index < this.fields.length) { + this.fields[index].focus(); + this.setState({ + selectedIndex: index + }); + } + }; + this.blurAllFields = () => { + this.fields.forEach((field) => field.blur()); + this.setState({ + selectedIndex: -1, + }); + }; + this.clearAllFields = () => { + const { clearInputs, code } = this.props; + if (clearInputs && code === "") { + this.setState({ digits: [], selectedIndex: 0 }); + } + }; + this.renderOneInputField = (_, index) => { + const { codeInputFieldStyle, codeInputHighlightStyle, filledInputStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props; + const { defaultTextFieldStyle } = styles; + const { selectedIndex, digits } = this.state; + const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props; + const { color: defaultPlaceholderTextColor } = { ...defaultTextFieldStyle, ...codeInputFieldStyle }; + return ( + { + if (selectedIndex === index) { + return [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle]; + } + if (digits[index]) { + return [defaultTextFieldStyle, codeInputFieldStyle, filledInputStyle]; + } + return [defaultTextFieldStyle, codeInputFieldStyle]; + })()} ref={ref => { this.fields[index] = ref; }} onChangeText={text => { + this.handleChangeText(index, text); + }} onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key); }} value={!clearInputs ? digits[index] : ""} keyboardAppearance={keyboardAppearance} keyboardType={keyboardType} textContentType={isAutoFillSupported ? "oneTimeCode" : "none"} key={index} selectionColor={selectionColor} secureTextEntry={secureTextEntry} editable={editable} placeholder={placeholderCharacter} placeholderTextColor={placeholderTextColor || defaultPlaceholderTextColor}/> + ); + }; + this.renderTextFields = () => { + const { pinCount } = this.props; + const array = new Array(pinCount).fill(0); + return array.map(this.renderOneInputField); + }; + const { code } = props; + this.state = { + digits: codeToArray(code), + selectedIndex: props.autoFocusOnLoad ? 0 : -1, + }; + } + UNSAFE_componentWillReceiveProps(nextProps) { + const { code } = this.props; + if (nextProps.code !== code) { + this.setState({ digits: codeToArray(nextProps.code) }); + } + } + componentDidMount() { + this.copyCodeFromClipBoardOnAndroid(); + setTimeout(() => this.bringUpKeyBoardIfNeeded(), 100); + this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide); + } + componentWillUnmount() { + var _a; + if (this.timer) { + clearInterval(this.timer); + } + (_a = this.keyboardDidHideListener) === null || _a === void 0 ? void 0 : _a.remove(); + } + render() { + const { pinCount, style, clearInputs } = this.props; + const digits = this.getDigits(); + return ( + { + if (!clearInputs) { + let filledPinCount = digits.filter((digit) => { return (digit !== null && digit !== undefined); }).length; + this.focusField(Math.min(filledPinCount, pinCount - 1)); + } + else { + this.clearAllFields(); + this.focusField(0); + } + }}> + + {this.renderTextFields()} + + + ); + } +} +OTPInputView.defaultProps = { + pinCount: 6, + autoFocusOnLoad: true, + secureTextEntry: false, + editable: true, + keyboardAppearance: "default", + keyboardType: "number-pad", + clearInputs: false, + placeholderCharacter: "", + selectionColor: '#000', +}; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/index.js.map b/dist/index.js.map new file mode 100644 index 0000000..0ab900f --- /dev/null +++ b/dist/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/dist/styles.d.ts b/dist/styles.d.ts new file mode 100644 index 0000000..cc0ff76 --- /dev/null +++ b/dist/styles.d.ts @@ -0,0 +1,6 @@ +import { TextStyle } from 'react-native'; +interface Styles { + defaultTextFieldStyle: TextStyle; +} +declare const styles: Styles; +export default styles; diff --git a/dist/styles.js b/dist/styles.js new file mode 100644 index 0000000..9f25e87 --- /dev/null +++ b/dist/styles.js @@ -0,0 +1,14 @@ +import { StyleSheet } from 'react-native'; +const styles = StyleSheet.create({ + defaultTextFieldStyle: { + width: 45, + height: 45, + borderColor: 'rgba(226, 226, 226, 1)', + borderWidth: 1, + borderRadius: 2, + textAlign: 'center', + color: 'rgba(226, 226, 226, 1)', + }, +}); +export default styles; +//# sourceMappingURL=styles.js.map \ No newline at end of file diff --git a/dist/styles.js.map b/dist/styles.js.map new file mode 100644 index 0000000..59446f9 --- /dev/null +++ b/dist/styles.js.map @@ -0,0 +1 @@ +{"version":3,"file":"styles.js","sourceRoot":"","sources":["../styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,cAAc,CAAC;AAMrD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAS;IACrC,qBAAqB,EAAG;QACpB,KAAK,EAAG,EAAE;QACV,MAAM,EAAG,EAAE;QACX,WAAW,EAAG,wBAAwB;QACtC,WAAW,EAAG,CAAC;QACf,YAAY,EAAG,CAAC;QAChB,SAAS,EAAG,QAAQ;QACpB,KAAK,EAAE,wBAAwB;KAClC;CACJ,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"} \ No newline at end of file diff --git a/index.d.ts b/index.d.ts index aec5d5b..7b508e6 100644 --- a/index.d.ts +++ b/index.d.ts @@ -27,6 +27,10 @@ declare module '@twotalltotems/react-native-otp-input' { * Style of highlighted status for input fields */ codeInputHighlightStyle?: TextStyle; + /** + * Style of filled input Fileds + */ + filledInputStyle?: TextStyle; /** * Callback function * Trigger when all fields of the OTP has been filled diff --git a/index.tsx b/index.tsx index 6c56ef8..c174574 100644 --- a/index.tsx +++ b/index.tsx @@ -44,7 +44,7 @@ export default class OTPInputView extends Component this.bringUpKeyBoardIfNeeded(), 100); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide) } @@ -125,7 +125,7 @@ export default class OTPInputView extends Component { - if(index < pinCount) { + if (index < pinCount) { newdigits[index] = value; index += 1; } @@ -182,7 +182,7 @@ export default class OTPInputView extends Component { - const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props + const { codeInputFieldStyle, codeInputHighlightStyle, filledInputStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props const { defaultTextFieldStyle } = styles const { selectedIndex, digits } = this.state const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props @@ -192,13 +192,22 @@ export default class OTPInputView extends Component { + if (selectedIndex === index) { + return [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] + } + if (digits[index]) { + return [defaultTextFieldStyle, codeInputFieldStyle, filledInputStyle] + } + return [defaultTextFieldStyle, codeInputFieldStyle] + } + )()} ref={ref => { this.fields[index] = ref }} onChangeText={text => { this.handleChangeText(index, text) }} onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key) }} - value={ !clearInputs ? digits[index]: "" } + value={!clearInputs ? digits[index] : ""} keyboardAppearance={keyboardAppearance} keyboardType={keyboardType} textContentType={isAutoFillSupported ? "oneTimeCode" : "none"} diff --git a/package.json b/package.json index 00fb01e..8d9ff51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@twotalltotems/react-native-otp-input", - "version": "1.3.11", + "name": "@goblin-ihx/react-native-otp-input", + "version": "1.3.20", "description": "is a tiny JS library for one time passcode (OTP). Supports smart input suggestion on iOS and code autofill on Android (it will be filled when you press the copy button on the SMS notification bar)", "main": "./dist/index.js", "types": "./index.d.ts", diff --git a/yarn.lock b/yarn.lock index f826a0c..b136d9e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1050,6 +1050,11 @@ wcwidth "^1.0.1" ws "^1.1.0" +"@react-native-community/clipboard@^1.2.2": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@react-native-community/clipboard/-/clipboard-1.5.1.tgz#32abb3ea2eb91ee3f9c5fb1d32d5783253c9fabe" + integrity sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA== + "@sinonjs/commons@^1.7.0": version "1.7.1" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.1.tgz#da5fd19a5f71177a53778073978873964f49acf1"