From 9b9a5a5be696ac3e4d7ccf315d7396078e7ff3c7 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 07:19:21 +0300 Subject: [PATCH 1/9] IOUAmount use arrow keys to move cursor --- src/pages/iou/steps/IOUAmountPage.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index aa266e1ddd17..3f7fa6f6b336 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -162,10 +162,14 @@ class IOUAmountPage extends React.Component { { - this.updateAmountIfValidInput(event.key); - event.preventDefault(); - }} + onChangeText={(amount) => { + // Regex to validate decimal number with up to 3 decimal numbers + const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); + if (amount != '' && !decimalNumberRegex.test(amount)) { + return; + } + this.setState({amount}); + }} ref={el => this.textInput = el} value={this.state.amount} placeholder="0" From 3edb3e034abd774344771e02471df4f04cbeb075 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 07:27:36 +0300 Subject: [PATCH 2/9] rename, make func more specialized --- src/pages/iou/steps/IOUAmountPage.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 3f7fa6f6b336..356a28c59680 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -68,7 +68,7 @@ class IOUAmountPage extends React.Component { constructor(props) { super(props); - this.updateAmountIfValidInput = this.updateAmountIfValidInput.bind(this); + this.updateAmountNumberPad = this.updateAmountNumberPad.bind(this); this.state = { amount: props.selectedAmount, }; @@ -102,14 +102,14 @@ class IOUAmountPage extends React.Component { } /** - * Update amount with number or Backspace pressed. + * 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 (key === '<') { if (this.state.amount.length > 0) { this.setState(prevState => ({ amount: prevState.amount.substring(0, prevState.amount.length - 1), @@ -180,7 +180,7 @@ class IOUAmountPage extends React.Component { {this.props.isSmallScreenWidth ? ( ) : } From cf8ba66741328522d88d54c414694584668384b9 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 07:45:55 +0300 Subject: [PATCH 3/9] fix typo, eslint --- src/pages/iou/steps/IOUAmountPage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 356a28c59680..c2a6818651df 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -165,11 +165,11 @@ class IOUAmountPage extends React.Component { onChangeText={(amount) => { // Regex to validate decimal number with up to 3 decimal numbers const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); - if (amount != '' && !decimalNumberRegex.test(amount)) { - return; + if (amount !== '' && !decimalNumberRegex.test(amount)) { + return; } - this.setState({amount}); - }} + this.setState({amount}); + }} ref={el => this.textInput = el} value={this.state.amount} placeholder="0" From 5a0b4e2e75606e7bbe074d0e2326e2f778c7a8e5 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 07:57:03 +0300 Subject: [PATCH 4/9] refactor into a function --- src/pages/iou/steps/IOUAmountPage.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index c2a6818651df..2728bc79ac0c 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -69,6 +69,7 @@ class IOUAmountPage extends React.Component { super(props); this.updateAmountNumberPad = this.updateAmountNumberPad.bind(this); + this.updateAmount = this.updateAmount.bind(this); this.state = { amount: props.selectedAmount, }; @@ -132,6 +133,21 @@ class IOUAmountPage extends React.Component { }); } + /** + * 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) { + // Regex to validate decimal number with up to 3 decimal numbers + const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); + if (amount !== '' && !decimalNumberRegex.test(amount)) { + return; + } + this.setState({amount}); + } + render() { return ( @@ -162,14 +178,7 @@ class IOUAmountPage extends React.Component { { - // Regex to validate decimal number with up to 3 decimal numbers - const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); - if (amount !== '' && !decimalNumberRegex.test(amount)) { - return; - } - this.setState({amount}); - }} + onChangeText={this.updateAmount} ref={el => this.textInput = el} value={this.state.amount} placeholder="0" From 066d88c0987fcf1ccf9b896cab3361071e721791 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 22:39:29 +0300 Subject: [PATCH 5/9] refactor. Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com> --- src/pages/iou/steps/IOUAmountPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 2728bc79ac0c..7d3c3ad2de4b 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -113,7 +113,7 @@ class IOUAmountPage extends React.Component { if (key === '<') { 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; From f7fe4e90bf69ea4eecd4658f3efc01580e259c2f Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 22:56:35 +0300 Subject: [PATCH 6/9] create validateAmount() and refactor --- src/pages/iou/steps/IOUAmountPage.js | 32 ++++++++++++++-------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 7d3c3ad2de4b..43cf1c6f4030 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -102,6 +102,17 @@ class IOUAmountPage extends React.Component { this.unsubscribe(); } + /** + * Check if amount is a decimal upto 3 digits + * + * @param {String} amount + * @returns True if amount is a decimal upto 3 digits + */ + 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 @@ -120,16 +131,8 @@ class IOUAmountPage extends React.Component { } 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; }); } @@ -140,12 +143,9 @@ class IOUAmountPage extends React.Component { * @param {String} amount */ updateAmount(amount) { - // Regex to validate decimal number with up to 3 decimal numbers - const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); - if (amount !== '' && !decimalNumberRegex.test(amount)) { - return; - } - this.setState({amount}); + if (this.validateAmount(amount)) { + this.setState({amount}); + } } render() { From 5c9963153c22c3a3ad1854ce91ee69d1f1e12e8f Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 23:01:39 +0300 Subject: [PATCH 7/9] fix docs --- src/pages/iou/steps/IOUAmountPage.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 43cf1c6f4030..eb4159bd3100 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -104,15 +104,15 @@ class IOUAmountPage extends React.Component { /** * Check if amount is a decimal upto 3 digits - * - * @param {String} amount - * @returns True if amount is a decimal upto 3 digits + * + * @param {String} amount + * @returns {boolean} Return `true` if amount is a decimal upto 3 digits, else `false` */ 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 @@ -145,7 +145,7 @@ class IOUAmountPage extends React.Component { updateAmount(amount) { if (this.validateAmount(amount)) { this.setState({amount}); - } + } } render() { From 34e3b85b925589088b58f2eddc97197ce114498a Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 23:16:38 +0300 Subject: [PATCH 8/9] fix JSDoc style Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com> --- src/pages/iou/steps/IOUAmountPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index eb4159bd3100..6bccfd085577 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -106,7 +106,7 @@ class IOUAmountPage extends React.Component { * Check if amount is a decimal upto 3 digits * * @param {String} amount - * @returns {boolean} Return `true` if amount is a decimal upto 3 digits, else `false` + * @returns {Boolean} */ validateAmount(amount) { const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); From 02340f0fc53bcefff71b19df509b57ddeeabd99e Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 1 Jul 2021 23:19:34 +0300 Subject: [PATCH 9/9] undo remove check for Backspace --- src/pages/iou/steps/IOUAmountPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 6bccfd085577..e91b13e05b81 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -121,7 +121,7 @@ class IOUAmountPage extends React.Component { */ updateAmountNumberPad(key) { // Backspace button is pressed - if (key === '<') { + if (key === '<' || key === 'Backspace') { if (this.state.amount.length > 0) { this.setState(prevState => ({ amount: prevState.amount.slice(0, -1),