-
Notifications
You must be signed in to change notification settings - Fork 350
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow for contentType="oneTimeCode" input / paste #75
Conversation
oneTimeCode acts like a paste action in react native. fixes issue: ttdung11t2#52
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added my own notes for the PR as review.
@@ -1,6 +1,6 @@ | |||
import React, {Component} from 'react'; | |||
import PropTypes from 'prop-types'; | |||
import { View, TextInput, StyleSheet, Dimensions, ViewPropTypes } from 'react-native'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
unused Dimensions
@@ -78,7 +80,7 @@ export default class ConfirmationCodeInput extends Component { | |||
} | |||
|
|||
_onFocus(index) { | |||
let newCodeArr = _.clone(this.state.codeArr); | |||
const newCodeArr = _.clone(this.state.codeArr); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
instance isn't changed so const. my linter complain to change to const.
@@ -97,9 +99,9 @@ export default class ConfirmationCodeInput extends Component { | |||
|
|||
_isMatchingCode(code, compareWithCode, ignoreCase = false) { | |||
if (ignoreCase) { | |||
return code.toLowerCase() == compareWithCode.toLowerCase(); | |||
return code.toLowerCase() === compareWithCode.toLowerCase(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
my linter recommended === also generally preferred for comparisons.
!isMatching && this.clear(); | ||
} else { | ||
onFulfill(code); | ||
if (character.length > codeLength) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if pasted value is too high, do nothing.
if (character.length > codeLength) { | ||
return; | ||
} | ||
if (index === 0 && character.length > 1) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if pasted value - its the only way for character to be greater than 1 char.
if (index === 0 && character.length > 1) { | ||
newCodeArr = character.split(''); | ||
if (character.length < codeLength) { | ||
this._setFocus(codeLength -1); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moved onFullfill to setState callback to allow the change to reflect in the UI
} else { | ||
this._setFocus(this.state.currentIndex + 1); | ||
index = character.length -1; | ||
isPasteAction = true; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
flag to prevent focus, active and set a timeout to allow the ui to show the fields completed.
@export-mike |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I applied these changes to my code and they work as expected.
merging seems blocked atm? |
what's the status on this? |
feel free to update this PR this is no longer relevant to me |
The code export-mike provided didn't work properly for me. his code is not compatible with the way iOS inserts the code from SMS to the textInput. You can find the working code here. |
contentType="oneTimeCode" acts like a paste action in react native
fixes issue:
#52