Skip to content
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

Use left/right arrow keys to move cursor in IOUAmountPage #3850

Merged
merged 9 commits into from
Jul 2, 2021
Merged
51 changes: 32 additions & 19 deletions src/pages/iou/steps/IOUAmountPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ class IOUAmountPage extends React.Component {
constructor(props) {
super(props);

this.updateAmountIfValidInput = this.updateAmountIfValidInput.bind(this);
this.updateAmountNumberPad = this.updateAmountNumberPad.bind(this);
this.updateAmount = this.updateAmount.bind(this);
this.state = {
amount: props.selectedAmount,
};
Expand Down Expand Up @@ -102,36 +103,51 @@ class IOUAmountPage extends React.Component {
}

/**
* Update amount with number or Backspace pressed.
* Check if amount is a decimal upto 3 digits
*
* @param {String} amount
* @returns {Boolean}
*/
validateAmount(amount) {
const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i');
return amount === '' || decimalNumberRegex.test(amount);
}

/**
* Update amount with number or Backspace pressed for BigNumberPad.
* Validate new amount with decimal number regex up to 6 digits and 2 decimal digit to enable Next button
*
* @param {String} key
*/
updateAmountIfValidInput(key) {
updateAmountNumberPad(key) {
// Backspace button is pressed
if (key === '<' || key === 'Backspace') {
if (this.state.amount.length > 0) {
this.setState(prevState => ({
amount: prevState.amount.substring(0, prevState.amount.length - 1),
amount: prevState.amount.slice(0, -1),
}));
}
return;
}

this.setState((prevState) => {
const newValue = `${prevState.amount}${key}`;

// Regex to validate decimal number with up to 3 decimal numbers
const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i');
if (!decimalNumberRegex.test(newValue)) {
return prevState;
}
return {
amount: newValue,
};
const amount = `${prevState.amount}${key}`;
return this.validateAmount(amount) ? {amount} : prevState;
});
}

/**
* Update amount on amount change
* Validate new amount with decimal number regex up to 6 digits and 2 decimal digit
*
* @param {String} amount
*/
updateAmount(amount) {
if (this.validateAmount(amount)) {
this.setState({amount});
}
}

render() {
return (
<View style={[styles.flex1, styles.pageWrapper]}>
Expand Down Expand Up @@ -162,10 +178,7 @@ class IOUAmountPage extends React.Component {
<TextInputAutoWidth
inputStyle={styles.iouAmountTextInput}
textStyle={styles.iouAmountText}
onKeyPress={(event) => {
this.updateAmountIfValidInput(event.key);
event.preventDefault();
}}
onChangeText={this.updateAmount}
ref={el => this.textInput = el}
value={this.state.amount}
placeholder="0"
Expand All @@ -176,7 +189,7 @@ class IOUAmountPage extends React.Component {
{this.props.isSmallScreenWidth
? (
<BigNumberPad
numberPressed={this.updateAmountIfValidInput}
numberPressed={this.updateAmountNumberPad}
/>
) : <View />}

Expand Down