✨ Possibility to paste to first input

r5n-labs · Aug 14, 2019 · 2a30466 · 2a30466
1 parent 8b86860
commit 2a30466
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/OtpInput.tsx b/src/OtpInput.tsx
@@ -18,21 +18,23 @@ interface Props {
   clearTextOnFocus?: boolean
   containerStyles?: StyleProp<ViewStyle>
   error?: boolean
-  focusedBorderColor?: string
+  firstInput: boolean
   focusStyles?: StyleProp<ViewStyle>
+  focusedBorderColor?: string
   handleBackspace: (
     event: NativeSyntheticEvent<TextInputKeyPressEventData>,
   ) => void
   inputStyles?: StyleProp<TextStyle>
   keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad'
+  numberOfInputs: number
+  placeholder?: string
   secureTextEntry?: boolean
   selectTextOnFocus?: boolean
   testID: string
   textErrorColor?: string
   unfocusedBorderColor?: string
   updateText: (event: NativeSyntheticEvent<TextInputChangeEventData>) => void
   value?: string
-  placeholder?: string
 }
 
 interface State {
@@ -62,20 +64,22 @@ export default class OtpInput extends PureComponent<Props, State> {
     const {
       clearTextOnFocus,
       containerStyles,
-      focusStyles,
       error,
+      firstInput,
+      focusStyles,
       focusedBorderColor,
       handleBackspace,
       inputStyles,
       keyboardType,
+      numberOfInputs,
+      placeholder,
       secureTextEntry,
       selectTextOnFocus,
       testID,
       textErrorColor,
       unfocusedBorderColor,
       updateText,
       value,
-      placeholder,
     } = this.props
 
     return (
@@ -94,7 +98,7 @@ export default class OtpInput extends PureComponent<Props, State> {
         <TextInput
           clearTextOnFocus={clearTextOnFocus}
           keyboardType={keyboardType}
-          maxLength={1}
+          maxLength={firstInput ? numberOfInputs : 1}
           onBlur={this._onBlur}
           onChange={updateText}
           onFocus={this._onFocus}

diff --git a/src/index.tsx b/src/index.tsx
@@ -21,21 +21,21 @@ interface Props {
   errorMessage?: string
   errorMessageContainerStyles?: StyleProp<ViewStyle>
   errorMessageTextStyles?: StyleProp<TextStyle>
-  focusedBorderColor: string
   focusStyles?: StyleProp<ViewStyle>
+  focusedBorderColor: string
   handleChange: (otpCode: string) => void
   inputContainerStyles?: StyleProp<ViewStyle>
-  inputsContainerStyles?: StyleProp<ViewStyle>
   inputStyles?: StyleProp<TextStyle>
   inputTextErrorColor: string
+  inputsContainerStyles?: StyleProp<ViewStyle>
+  isRTL: boolean
   keyboardType: 'default' | 'email-address' | 'numeric' | 'phone-pad'
   numberOfInputs: number
+  placeholder: string
   secureTextEntry: boolean
   selectTextOnFocus: boolean
   testIDPrefix: string
   unfocusedBorderColor: string
-  isRTL: boolean
-  placeholder: string
 }
 
 interface State {
@@ -151,9 +151,12 @@ export default class OtpInputs extends PureComponent<Props, State> {
     event: TextInputOnChangeEventData,
     index: number,
   ): void => {
+    const { numberOfInputs } = this.props
     const { text } = event.nativeEvent
 
-    if (text) {
+    if (text.length === numberOfInputs) {
+      this._handleAfterOtpAction(text.split(''), numberOfInputs, true)
+    } else if (text) {
       let otpArray = this.state.otpCode
       otpArray[index] = text[text.length - 1]
       this._handleAfterOtpAction(otpArray, index + 1)
@@ -168,6 +171,7 @@ export default class OtpInputs extends PureComponent<Props, State> {
       const { handleChange, numberOfInputs } = this.props
       const otpCode = this.state.otpCode
       otpCode[index] = ''
+      this.inputs[index].current.clear()
 
       handleChange(otpCode.join(''))
       this.setState({ otpCode })
@@ -215,18 +219,20 @@ export default class OtpInputs extends PureComponent<Props, State> {
           autoCapitalize={autoCapitalize}
           clearTextOnFocus={clearTextOnFocus}
           containerStyles={inputContainerStyles}
-          focusStyles={focusStyles}
           error={!!errorMessage}
+          firstInput={index === 0}
+          focusStyles={focusStyles}
           focusedBorderColor={focusedBorderColor}
           handleBackspace={(event: TextInputOnKeyPressEventData) =>
             this._handleBackspace(event, inputIndex)
           }
-          placeholder={placeholder.toString()}
           inputStyles={inputStyles}
           key={inputIndex}
-          secureTextEntry={secureTextEntry}
           keyboardType={keyboardType}
+          numberOfInputs={numberOfInputs}
+          placeholder={placeholder}
           ref={this.inputs[inputIndex]}
+          secureTextEntry={secureTextEntry}
           selectTextOnFocus={selectTextOnFocus}
           textErrorColor={inputTextErrorColor}
           unfocusedBorderColor={unfocusedBorderColor}