react-native-fpay 0.3.5 → 0.3.7

package/src/ui/components/OtpInput/OTPInputView.tsx

@@ -1,243 +1,292 @@
 import type { InputProps, OTPInputViewState } from './helpers/types';
-import React, { Component } from 'react'
-import { View, TextInput, TouchableWithoutFeedback, Keyboard, Platform, I18nManager, type EmitterSubscription, } from 'react-native'
+import React, { Component } from 'react';
+import {
+  View,
+  TextInput,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Platform,
+  I18nManager,
+  type EmitterSubscription,
+} from 'react-native';
 import Clipboard from '@react-native-community/clipboard';
-import styles from './helpers/styles'
-import { isAutoFillSupported } from './helpers/device'
-import { codeToArray } from './helpers/codeToArray'
-
+import styles from './helpers/styles';
+import { isAutoFillSupported } from './helpers/device';
+import { codeToArray } from './helpers/codeToArray';
 
 type TextInputRef = React.ElementRef<typeof TextInput>;
 
-export default class OTPInputView extends Component<InputProps, OTPInputViewState> {
+export default class OTPInputView extends Component<
+  InputProps,
+  OTPInputViewState
+> {
+  private fields: Array<TextInputRef | null> = [];
 
-    private fields: Array<TextInputRef | null> = [];
+  private keyboardDidHideListener?: EmitterSubscription;
+  private timer?: NodeJS.Timeout;
+  private hasCheckedClipBoard?: boolean;
+  private clipBoardCode?: string;
 
-    private keyboardDidHideListener?: EmitterSubscription;
-    private timer?: NodeJS.Timeout;
-    private hasCheckedClipBoard?: boolean;
-    private clipBoardCode?: string;
+  constructor(props: InputProps) {
+    super(props);
+    const { code } = props;
+    this.state = {
+      digits: codeToArray(code),
+      selectedIndex: props.autoFocusOnLoad ? 0 : -1,
+    };
+  }
 
-    constructor(props: InputProps) {
-        super(props)
-        const { code } = props
-        this.state = {
-            digits: codeToArray(code),
-            selectedIndex: props.autoFocusOnLoad ? 0 : -1,
-        }
+  UNSAFE_componentWillReceiveProps(nextProps: InputProps) {
+    const { code } = this.props;
+    if (nextProps.code !== code) {
+      this.setState({ digits: codeToArray(nextProps.code) });
     }
+  }
 
-    UNSAFE_componentWillReceiveProps(nextProps: InputProps) {
-        const { code } = this.props
-        if (nextProps.code !== code) {
-            this.setState({ digits: codeToArray(nextProps.code) })
-        }
-    }
+  componentDidMount() {
+    this.copyCodeFromClipBoardOnAndroid();
+    this.bringUpKeyBoardIfNeeded();
+    this.keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      this.handleKeyboardDidHide
+    );
+  }
 
-    componentDidMount() {
-        this.copyCodeFromClipBoardOnAndroid()
-        this.bringUpKeyBoardIfNeeded()
-        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide)
-    }
-
-    componentWillUnmount() {
-        if (this.timer) {
-            clearInterval(this.timer)
-        }
-        this.keyboardDidHideListener?.remove()
+  componentWillUnmount() {
+    if (this.timer) {
+      clearInterval(this.timer);
     }
+    this.keyboardDidHideListener?.remove();
+  }
 
-    private copyCodeFromClipBoardOnAndroid = () => {
-        if (Platform.OS === "android") {
-            this.checkPinCodeFromClipBoard()
-            this.timer = setInterval(this.checkPinCodeFromClipBoard, 400)
-        }
+  private copyCodeFromClipBoardOnAndroid = () => {
+    if (Platform.OS === 'android') {
+      this.checkPinCodeFromClipBoard();
+      this.timer = setInterval(this.checkPinCodeFromClipBoard, 400);
     }
+  };
 
-    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)
-        }
+  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);
     }
+  };
 
-    getDigits = () => {
-        const { digits: innerDigits } = this.state
-        const { code } = this.props
-        return code === undefined ? innerDigits : code.split("")
-    }
+  getDigits = () => {
+    const { digits: innerDigits } = this.state;
+    const { code } = this.props;
+    return code === undefined ? innerDigits : code.split('');
+  };
 
-    private handleKeyboardDidHide = () => {
-        this.blurAllFields()
-    }
+  private handleKeyboardDidHide = () => {
+    this.blurAllFields();
+  };
 
-    private notifyCodeChanged = () => {
-        const { digits } = this.state
-        const code = digits.join("")
-        const { onCodeChanged } = this.props
-        if (onCodeChanged) {
-            onCodeChanged(code)
-        }
+  private notifyCodeChanged = () => {
+    const { digits } = this.state;
+    const code = digits.join('');
+    const { onCodeChanged } = this.props;
+    if (onCodeChanged) {
+      onCodeChanged(code);
     }
+  };
 
-    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)
-                })
+  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(() => {
-        })
-    }
-
-    private handleChangeText = (index: number, text: string) => {
-        const { onCodeFilled, pinCount } = this.props
-        const digits = this.getDigits()
-        let newdigits: any = 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)
+          );
         }
+        this.clipBoardCode = code;
+        this.hasCheckedClipBoard = true;
+      })
+      .catch(() => {});
+  };
 
-        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)
-            }
+  private handleChangeText = (index: number, text: string) => {
+    const { onCodeFilled, pinCount } = this.props;
+    const digits = this.getDigits();
+    let newdigits: any = 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);
     }
 
-    private handleKeyPressTextInput = (index: number, key: string) => {
-        const digits = this.getDigits()
-        if (key === 'Backspace') {
-            if (!digits[index] && index > 0) {
-                this.handleChangeText(index - 1, '')
-                this.focusField(index - 1)
-            }
-        }
+    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);
+      }
     }
+  };
 
-    
-
-    focusField = (index: number) => {
-        if (index < this.fields.length) {
-            this.fields[index]?.focus();
-            this.setState({ selectedIndex: index });
-        }
+  private handleKeyPressTextInput = (index: number, key: string) => {
+    const digits = this.getDigits();
+    if (key === 'Backspace') {
+      if (!digits[index] && index > 0) {
+        this.handleChangeText(index - 1, '');
+        this.focusField(index - 1);
+      }
     }
+  };
 
-    blurAllFields = () => {
-        this.fields.forEach(field => field?.blur());
-        this.setState({ selectedIndex: -1 });
+  focusField = (index: number) => {
+    if (index < this.fields.length) {
+      this.fields[index]?.focus();
+      this.setState({ selectedIndex: index });
     }
+  };
 
+  blurAllFields = () => {
+    this.fields.forEach((field) => field?.blur());
+    this.setState({ selectedIndex: -1 });
+  };
 
-    clearAllFields = () => {
-        const { clearInputs, code } = this.props;
-        if (clearInputs && code === "") {
-            this.setState({ digits: [], selectedIndex: 0 })
-        }
+  clearAllFields = () => {
+    const { clearInputs, code } = this.props;
+    if (clearInputs && code === '') {
+      this.setState({ digits: [], selectedIndex: 0 });
     }
+  };
 
-    renderOneInputField = (_: TextInput, index: number) => {
-        const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance, showSoftInputOnFocus } = this.props
-        const { defaultTextFieldStyle } = styles
-        const { selectedIndex, digits } = this.state
-        const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props
-        const { color: defaultPlaceholderTextColor } = { ...defaultTextFieldStyle, ...codeInputFieldStyle }
-        return (
-            <View pointerEvents="none" key={index + "view"} testID="inputSlotView">
-                <TextInput
-                    testID="textInput"
-                    underlineColorAndroid='rgba(0,0,0,0)'
-                    style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [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}
-                    // showSoftInputOnFocus={showSoftInputOnFocus}
-                    editable={editable}
-                    placeholder={placeholderCharacter}
-                    placeholderTextColor={placeholderTextColor || defaultPlaceholderTextColor}
-                />
-            </View>
-        )
-    }
+  renderOneInputField = (_: TextInput, index: number) => {
+    const {
+      codeInputFieldStyle,
+      codeInputHighlightStyle,
+      secureTextEntry,
+      editable,
+      keyboardType,
+      selectionColor,
+      keyboardAppearance,
+      showSoftInputOnFocus,
+    } = this.props;
+    const { defaultTextFieldStyle } = styles;
+    const { selectedIndex, digits } = this.state;
+    const { clearInputs, placeholderCharacter, placeholderTextColor } =
+      this.props;
+    const { color: defaultPlaceholderTextColor } = {
+      ...defaultTextFieldStyle,
+      ...codeInputFieldStyle,
+    };
+    return (
+      <View pointerEvents="none" key={index + 'view'} testID="inputSlotView">
+        <TextInput
+          testID="textInput"
+          underlineColorAndroid="rgba(0,0,0,0)"
+          style={
+            selectedIndex === index
+              ? [
+                  defaultTextFieldStyle,
+                  codeInputFieldStyle,
+                  codeInputHighlightStyle,
+                ]
+              : [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}
+          // showSoftInputOnFocus={showSoftInputOnFocus}
+          editable={editable}
+          placeholder={placeholderCharacter}
+          placeholderTextColor={
+            placeholderTextColor || defaultPlaceholderTextColor
+          }
+        />
+      </View>
+    );
+  };
 
-    renderTextFields = () => {
-        const { pinCount } = this.props
-        const array = new Array(pinCount).fill(0)
-        return array.map(this.renderOneInputField)
-    }
+  renderTextFields = () => {
+    const { pinCount } = this.props;
+    const array = new Array(pinCount).fill(0);
+    return array.map(this.renderOneInputField);
+  };
 
-    render() {
-        const { pinCount, style, clearInputs } = this.props
-        const digits = this.getDigits()
-        return (
-            <View
-                testID="OTPInputView"
-                style={style}
-            >
-                <TouchableWithoutFeedback
-                    onPress={() => {
-                        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)
-                        }
-                    }}
-                >
-                    <View
-                        style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '100%', height: 100 , gap: '10px' }}
-                    >
-                        {this.renderTextFields()}
-                    </View>
-                </TouchableWithoutFeedback>
-            </View>
-        );
-    }
-}
+  render() {
+    const { pinCount, style, clearInputs } = this.props;
+    const digits = this.getDigits();
+    return (
+      <View testID="OTPInputView" style={style}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            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);
+            }
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              height: 100,
+              gap: '10px',
+            }}
+          >
+            {this.renderTextFields()}
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    );
+  }
+}

package/src/ui/components/OtpInput/Styles.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components/native";
+import styled from 'styled-components/native';
 
 export const HideInput = styled.TextInput`
   width: 80%;

package/src/ui/components/OtpInput/helpers/codeToArray.ts

@@ -1,3 +1,3 @@
-export const codeToArray = (code?: string): string[] => code?.split("") ?? [];
+export const codeToArray = (code?: string): string[] => code?.split('') ?? [];
 
-export default { codeToArray }
+export default { codeToArray };

package/src/ui/components/OtpInput/helpers/device.ts

@@ -1,6 +1,7 @@
-import { Platform } from 'react-native'
+import { Platform } from 'react-native';
 
 const majorVersionIOS = parseInt(String(Platform.Version), 10);
-export const isAutoFillSupported = (Platform.OS === 'ios' && majorVersionIOS >= 12)
+export const isAutoFillSupported =
+  Platform.OS === 'ios' && majorVersionIOS >= 12;
 
-export default { isAutoFillSupported }
+export default { isAutoFillSupported };

package/src/ui/components/OtpInput/helpers/styles.ts

@@ -1,17 +1,16 @@
-import { StyleSheet, type TextStyle, } from 'react-native';
+import { StyleSheet, type TextStyle } from 'react-native';
 
-
-const styles = StyleSheet.create<{defaultTextFieldStyle: TextStyle}>({
-    defaultTextFieldStyle : {
-        width : 65, 
-        height : 65, 
-        borderColor : 'rgba(226, 226, 226, 1)', 
-        borderWidth : 1,
-        borderRadius : 2, 
-        textAlign : 'center',
-        color: 'rgba(226, 226, 226, 1)', 
-        marginHorizontal: 3.5
-    },
+const styles = StyleSheet.create<{ defaultTextFieldStyle: TextStyle }>({
+  defaultTextFieldStyle: {
+    width: 65,
+    height: 65,
+    borderColor: 'rgba(226, 226, 226, 1)',
+    borderWidth: 1,
+    borderRadius: 2,
+    textAlign: 'center',
+    color: 'rgba(226, 226, 226, 1)',
+    marginHorizontal: 3.5,
+  },
 });
 
-export default styles;
+export default styles;