From cdc67f2a00c729a65fe4a40aa8109931685a47c8 Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Thu, 1 Apr 2021 20:58:29 +0100 Subject: [PATCH 1/7] Refactor IOUAmountPage --- src/components/TextInputAutoGrow.js | 66 ++++++++++++++++ src/components/TextInputFocusable/index.js | 20 ++++- src/pages/iou/IOUModal.js | 39 ++-------- src/pages/iou/steps/IOUAmountPage.js | 91 +++++++++++++--------- 4 files changed, 143 insertions(+), 73 deletions(-) create mode 100644 src/components/TextInputAutoGrow.js diff --git a/src/components/TextInputAutoGrow.js b/src/components/TextInputAutoGrow.js new file mode 100644 index 000000000000..03d5691dd173 --- /dev/null +++ b/src/components/TextInputAutoGrow.js @@ -0,0 +1,66 @@ +import React from 'react'; +import {View, Text} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import styles from '../styles/styles'; +import TextInputFocusable from './TextInputFocusable'; + +const propTypes = { + + // The value of the comment box + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + + // A ref to forward to the text input + forwardedRef: PropTypes.func.isRequired, + + // General styles to apply to the text input + // eslint-disable-next-line react/forbid-prop-types + style: PropTypes.any, + + // Styles to apply to the text input + // eslint-disable-next-line react/forbid-prop-types + textStyle: PropTypes.any.isRequired, +}; + +const defaultProps = { + value: undefined, + style: null, +}; + +class TextInputAutoGrow extends React.Component { + constructor(props) { + super(props); + + this.state = { + textInputWidth: 0, + }; + } + + render() { + const propsWithoutStyles = _.omit(this.props, ['style', 'textStyle']); + return ( + + + this.setState({textInputWidth: e.nativeEvent.layout.width})} + > + {this.props.value} + + + ); + } +} + +TextInputAutoGrow.propTypes = propTypes; +TextInputAutoGrow.defaultProps = defaultProps; + +export default React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +)); diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js index bef213b31d27..998ab162c2c7 100644 --- a/src/components/TextInputFocusable/index.js +++ b/src/components/TextInputFocusable/index.js @@ -8,7 +8,10 @@ const propTypes = { maxLines: PropTypes.number, // The default value of the comment box - defaultValue: PropTypes.string.isRequired, + defaultValue: PropTypes.string, + + // The value of the comment box + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Callback method to handle pasting a file onPasteFile: PropTypes.func, @@ -40,6 +43,8 @@ const propTypes = { }; const defaultProps = { + defaultValue: undefined, + value: undefined, maxLines: -1, onPasteFile: () => {}, shouldClear: false, @@ -71,8 +76,12 @@ class TextInputFocusable extends React.Component { this.state = { numberOfLines: 1, selection: { - start: this.props.defaultValue.length, - end: this.props.defaultValue.length, + start: this.props.defaultValue + ? `${this.props.defaultValue}`.length + : `${this.props.value}`.length, + end: this.props.defaultValue + ? `${this.props.defaultValue}`.length + : `${this.props.value}`.length, }, }; } @@ -206,6 +215,9 @@ class TextInputFocusable extends React.Component { const propStyles = StyleSheet.flatten(this.props.style); propStyles.outline = 'none'; const propsWithoutStyles = _.omit(this.props, 'style'); + const propsWithoutValueOrDefaultValue = this.props.defaultValue + ? _.omit(propsWithoutStyles, 'value') + : _.omit(propsWithoutStyles, 'defaultValue'); return ( this.textInput = el} @@ -216,7 +228,7 @@ class TextInputFocusable extends React.Component { numberOfLines={this.state.numberOfLines} style={propStyles} /* eslint-disable-next-line react/jsx-props-no-spreading */ - {...propsWithoutStyles} + {...propsWithoutValueOrDefaultValue} disabled={this.props.isDisabled} /> ); diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js index 593addfda470..6fcd86700d4e 100644 --- a/src/pages/iou/IOUModal.js +++ b/src/pages/iou/IOUModal.js @@ -39,16 +39,14 @@ class IOUModal extends Component { this.navigateToPreviousStep = this.navigateToPreviousStep.bind(this); this.navigateToNextStep = this.navigateToNextStep.bind(this); - this.updateAmount = this.updateAmount.bind(this); this.currencySelected = this.currencySelected.bind(this); - this.addParticipants = this.addParticipants.bind(this); + this.state = { currentStepIndex: 0, participants: [], amount: '', selectedCurrency: 'USD', - isAmountPageNextButtonDisabled: true, }; } @@ -102,33 +100,6 @@ class IOUModal extends Component { }); } - /** - * Update amount with number or Backspace pressed. - * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit - * - * @param {String} buttonPressed - */ - updateAmount(buttonPressed) { - // Backspace button is pressed - if (buttonPressed === '<' || buttonPressed === 'Backspace') { - if (this.state.amount.length > 0) { - this.setState(prevState => ({ - amount: prevState.amount.substring(0, prevState.amount.length - 1), - isAmountPageNextButtonDisabled: prevState.amount.length === 1, - })); - } - } else { - const decimalNumberRegex = new RegExp(/^\d{1,6}(\.\d{0,2})?$/, 'i'); - const amount = this.state.amount + buttonPressed; - if (decimalNumberRegex.test(amount)) { - this.setState({ - amount, - isAmountPageNextButtonDisabled: false, - }); - } - } - } - /** * Update the currency state * @@ -174,12 +145,12 @@ class IOUModal extends Component { {currentStep === Steps.IOUAmount && ( { + this.setState({amount}); + this.navigateToNextStep(); + }} currencySelected={this.currencySelected} - amount={this.state.amount} selectedCurrency={this.state.selectedCurrency} - isNextButtonDisabled={this.state.isAmountPageNextButtonDisabled} /> )} {currentStep === Steps.IOUParticipants && ( diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 4d0c2e99d67e..e6dc9ebe436f 100644 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -12,15 +12,12 @@ import styles from '../../../styles/styles'; import themeColors from '../../../styles/themes/default'; import BigNumberPad from '../../../components/BigNumberPad'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import TextInputFocusable from '../../../components/TextInputFocusable'; +import TextInputAutoGrow from '../../../components/TextInputAutoGrow'; const propTypes = { // Callback to inform parent modal of success onStepComplete: PropTypes.func.isRequired, - // Callback to inform parent modal with key pressed - numberPressed: PropTypes.func.isRequired, - // Currency selection will be implemented later // eslint-disable-next-line react/no-unused-prop-types currencySelected: PropTypes.func.isRequired, @@ -28,12 +25,6 @@ const propTypes = { // User's currency preference selectedCurrency: PropTypes.string.isRequired, - // Amount value entered by user - amount: PropTypes.string.isRequired, - - // To disable/enable Next button based on amount validity - isNextButtonDisabled: PropTypes.bool.isRequired, - /* Window Dimensions Props */ ...windowDimensionsPropTypes, @@ -54,8 +45,10 @@ class IOUAmountPage extends React.Component { constructor(props) { super(props); + this.onlyAllowNumericValues = this.onlyAllowNumericValues.bind(this); this.state = { - textInputWidth: 0, + amount: '', + isNextButtonEnabled: false, }; } @@ -65,6 +58,45 @@ class IOUAmountPage extends React.Component { } } + /** + * Update amount with number or Backspace pressed. + * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit to enable Next button + * + * @param {String} key + * @param {String} event + */ + onlyAllowNumericValues(key, event) { + // Prevent reusing synthetic event object, so we can call preventDefault() later. + if (event) { + event.persist(); + } + + // 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), + isNextButtonEnabled: prevState.amount.length !== 1, + })); + } + return; + } + this.setState((prevState) => { + const newValue = `${prevState.amount}${key}`; + const decimalNumberRegex = new RegExp(/^\d{1,6}(\.\d{0,2})?$/, 'i'); + if (!decimalNumberRegex.test(newValue)) { + if (event) { + event.preventDefault(); + } + return prevState; + } + return { + amount: newValue, + isNextButtonEnabled: true, + }; + }); + } + render() { return ( @@ -81,38 +113,27 @@ class IOUAmountPage extends React.Component { {this.props.selectedCurrency} {this.props.isSmallScreenWidth - ? {this.props.amount} + ? {this.state.amount} : ( - - { - this.props.numberPressed(event.key); - event.preventDefault(); - }} - ref={el => this.textInput = el} - defaultValue={this.props.amount} - textAlign="left" - /> - this.setState({textInputWidth: e.nativeEvent.layout.width})} - > - {this.props.amount} - - + this.onlyAllowNumericValues(event.key, event)} + ref={el => this.textInput = el} + value={this.state.amount} + textAlign="left" + /> )} {this.props.isSmallScreenWidth - ? + ? : } this.props.onStepComplete(this.state.amount)} + disabled={!this.state.isNextButtonEnabled} > Next From 37deb3ee675948045c0a616633add038f795c656 Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Thu, 1 Apr 2021 21:21:25 +0100 Subject: [PATCH 2/7] Move style object to styles --- src/components/TextInputAutoGrow.js | 5 +++-- src/styles/styles.js | 8 ++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/TextInputAutoGrow.js b/src/components/TextInputAutoGrow.js index 03d5691dd173..994f2c219f04 100644 --- a/src/components/TextInputAutoGrow.js +++ b/src/components/TextInputAutoGrow.js @@ -38,16 +38,17 @@ class TextInputAutoGrow extends React.Component { render() { const propsWithoutStyles = _.omit(this.props, ['style', 'textStyle']); + const widthStyle = {width: Math.max(5, this.state.textInputWidth)}; return ( this.setState({textInputWidth: e.nativeEvent.layout.width})} > {this.props.value} diff --git a/src/styles/styles.js b/src/styles/styles.js index 9ef88778a851..c1aea688b9d7 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1239,6 +1239,14 @@ const styles = { fontSize: variables.iouAmountTextSize, }, 0), + autoGrowTextInputHiddenText: { + position: 'absolute', + opacity: 0, + + // Using a very large value here makes sure it's out of screen + left: 100000, + }, + noScrollbars: { scrollbarWidth: 'none', }, From aa5ef6aae5ad469f33fcab6929a906f150646a84 Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Fri, 2 Apr 2021 13:40:22 +0100 Subject: [PATCH 3/7] Addressing comments --- src/components/TextInputAutoGrow.js | 52 +++++++++++++++------- src/components/TextInputFocusable/index.js | 2 +- src/pages/iou/steps/IOUAmountPage.js | 29 +++++------- src/styles/styles.js | 37 +++++++++++---- 4 files changed, 76 insertions(+), 44 deletions(-) diff --git a/src/components/TextInputAutoGrow.js b/src/components/TextInputAutoGrow.js index 994f2c219f04..ca2200d47f26 100644 --- a/src/components/TextInputAutoGrow.js +++ b/src/components/TextInputAutoGrow.js @@ -2,29 +2,32 @@ import React from 'react'; import {View, Text} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import styles from '../styles/styles'; +import {getAutoGrowTextInputStyle, getHiddenElementOutsideOfWindow} from '../styles/styles'; +import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import TextInputFocusable from './TextInputFocusable'; const propTypes = { // The value of the comment box - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + value: PropTypes.string.isRequired, // A ref to forward to the text input forwardedRef: PropTypes.func.isRequired, // General styles to apply to the text input // eslint-disable-next-line react/forbid-prop-types - style: PropTypes.any, + inputStyle: PropTypes.object, // Styles to apply to the text input // eslint-disable-next-line react/forbid-prop-types - textStyle: PropTypes.any.isRequired, + textStyle: PropTypes.object.isRequired, + + /* Window Dimensions Props */ + ...windowDimensionsPropTypes, }; const defaultProps = { - value: undefined, - style: null, + inputStyle: {}, }; class TextInputAutoGrow extends React.Component { @@ -36,23 +39,38 @@ class TextInputAutoGrow extends React.Component { }; } + /** + * Text input component doesn't support auto grow by default. We're using a hidden text input to achieve that. + * This text view is used to calculate width of the input value given textStyle in this component. + * This text component is intentionally positioned out of the screen. + * + * @returns {Text} + */ + getHiddenTextView() { + return ( + this.setState({textInputWidth: e.nativeEvent.layout.width})} + > + {this.props.value} + + ); + } + render() { - const propsWithoutStyles = _.omit(this.props, ['style', 'textStyle']); - const widthStyle = {width: Math.max(5, this.state.textInputWidth)}; + const propsWithoutStyles = _.omit( + this.props, + ['inputStyle', 'textStyle', Object.keys(windowDimensionsPropTypes)], + ); return ( - this.setState({textInputWidth: e.nativeEvent.layout.width})} - > - {this.props.value} - + {this.getHiddenTextView()} ); } @@ -61,7 +79,9 @@ class TextInputAutoGrow extends React.Component { TextInputAutoGrow.propTypes = propTypes; TextInputAutoGrow.defaultProps = defaultProps; +const TextInputAutoGrowWithWindowDimensions = withWindowDimensions(TextInputAutoGrow); + export default React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ - + )); diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js index 998ab162c2c7..f10d98c3d138 100644 --- a/src/components/TextInputFocusable/index.js +++ b/src/components/TextInputFocusable/index.js @@ -11,7 +11,7 @@ const propTypes = { defaultValue: PropTypes.string, // The value of the comment box - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + value: PropTypes.string, // Callback method to handle pasting a file onPasteFile: PropTypes.func, diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index e6dc9ebe436f..02c41b88a0be 100644 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -45,10 +45,9 @@ class IOUAmountPage extends React.Component { constructor(props) { super(props); - this.onlyAllowNumericValues = this.onlyAllowNumericValues.bind(this); + this.updateAmountIfValidInput = this.updateAmountIfValidInput.bind(this); this.state = { amount: '', - isNextButtonEnabled: false, }; } @@ -63,36 +62,28 @@ class IOUAmountPage extends React.Component { * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit to enable Next button * * @param {String} key - * @param {String} event */ - onlyAllowNumericValues(key, event) { - // Prevent reusing synthetic event object, so we can call preventDefault() later. - if (event) { - event.persist(); - } - + updateAmountIfValidInput(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), - isNextButtonEnabled: prevState.amount.length !== 1, })); } return; } + this.setState((prevState) => { const newValue = `${prevState.amount}${key}`; + + // Regex to validate decimal number with up to 6 digits and 2 decimal numbers const decimalNumberRegex = new RegExp(/^\d{1,6}(\.\d{0,2})?$/, 'i'); if (!decimalNumberRegex.test(newValue)) { - if (event) { - event.preventDefault(); - } return prevState; } return { amount: newValue, - isNextButtonEnabled: true, }; }); } @@ -116,9 +107,9 @@ class IOUAmountPage extends React.Component { ? {this.state.amount} : ( this.onlyAllowNumericValues(event.key, event)} + onKeyPress={event => this.updateAmountIfValidInput(event.key)} ref={el => this.textInput = el} value={this.state.amount} textAlign="left" @@ -127,13 +118,13 @@ class IOUAmountPage extends React.Component { {this.props.isSmallScreenWidth - ? + ? : } this.props.onStepComplete(this.state.amount)} - disabled={!this.state.isNextButtonEnabled} + disabled={this.state.amount.length === 0} > Next diff --git a/src/styles/styles.js b/src/styles/styles.js index c1aea688b9d7..40f87db3f461 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1239,14 +1239,6 @@ const styles = { fontSize: variables.iouAmountTextSize, }, 0), - autoGrowTextInputHiddenText: { - position: 'absolute', - opacity: 0, - - // Using a very large value here makes sure it's out of screen - left: 100000, - }, - noScrollbars: { scrollbarWidth: 'none', }, @@ -1413,6 +1405,33 @@ function getZoomSizingStyle(isZoomed) { }; } +/** + * Returns auto grow text input style + * + * @param {Number} width + * @return {Object} + */ +function getAutoGrowTextInputStyle(width) { + return { + minWidth: 5, + width, + }; +} + +/** + * Positions an element to outside of the window and hides it + * + * @param {Number} windowWidth + * @returns {Object} + */ +function getHiddenElementOutsideOfWindow(windowWidth) { + return { + position: 'absolute', + opacity: 0, + left: windowWidth, + }; +} + export default styles; export { getSafeAreaPadding, @@ -1423,4 +1442,6 @@ export { getNavigationModalCardStyle, getZoomCursorStyle, getZoomSizingStyle, + getAutoGrowTextInputStyle, + getHiddenElementOutsideOfWindow, }; From 359eb3e9e59cdc3bfa46ef8100e00220bf2d836b Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Fri, 2 Apr 2021 17:29:16 +0100 Subject: [PATCH 4/7] Use event.preventDefault in TextInputAutoGrow onKeyPress This change makes input entry smoother by preventing TextInput to update its own value --- src/pages/iou/steps/IOUAmountPage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 02c41b88a0be..6301d4b6c25c 100644 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -109,7 +109,10 @@ class IOUAmountPage extends React.Component { this.updateAmountIfValidInput(event.key)} + onKeyPress={(event) => { + this.updateAmountIfValidInput(event.key); + event.preventDefault(); + }} ref={el => this.textInput = el} value={this.state.amount} textAlign="left" From 6a382c1946397a5e07fb0cd94b49c190b13fd99c Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Mon, 12 Apr 2021 18:07:59 +0100 Subject: [PATCH 5/7] Addressing comments --- src/components/BigNumberPad.js | 76 +++++++--------------- src/components/TextInputAutoGrow.js | 31 ++++----- src/components/TextInputFocusable/index.js | 4 +- src/pages/iou/steps/IOUAmountPage.js | 1 - src/styles/styles.js | 2 + 5 files changed, 41 insertions(+), 73 deletions(-) diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js index 3f12fdacaa62..8181cb67e9a9 100644 --- a/src/components/BigNumberPad.js +++ b/src/components/BigNumberPad.js @@ -1,7 +1,8 @@ -import React, {PureComponent} from 'react'; +import React from 'react'; import { Text, TouchableOpacity, View, } from 'react-native'; +import _ from 'underscore'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; @@ -17,57 +18,30 @@ const padNumbers = [ ['.', '0', '<'], ]; -class BigNumberPad extends PureComponent { - /** - * Creates set of buttons for given row - * - * @param {number} row - * @returns {View} - */ - createNumberPadRow(row) { - const self = this; - const numberPadRow = padNumbers[row].map((column, index) => self.createNumberPadButton(row, index)); - return ( - - {numberPadRow} +const BigNumberPad = ({numberPressed}) => ( + + {_.map(padNumbers, (row, rowIndex) => ( + + {_.map(row, (column, columnIndex) => { + // Adding margin between buttons except first column to + // avoid unccessary space before the first column. + const marginLeft = columnIndex > 0 ? styles.ml3 : {}; + return ( + numberPressed(column)} + > + + {column} + + + ); + })} - ); - } - - /** - * Creates a button for given row and column - * - * @param {number} row - * @param {number} column - * @returns {View} - */ - createNumberPadButton(row, column) { - // Adding margin between buttons except first column to - // avoid unccessary space before the first column. - const marginLeft = column > 0 ? styles.ml3 : {}; - return ( - this.props.numberPressed(padNumbers[row][column])} - > - - {padNumbers[row][column]} - - - ); - } - - render() { - const self = this; - const numberPad = padNumbers.map((row, index) => self.createNumberPadRow(index)); - return ( - - {numberPad} - - ); - } -} + ))} + +); BigNumberPad.propTypes = propTypes; BigNumberPad.displayName = 'BigNumberPad'; diff --git a/src/components/TextInputAutoGrow.js b/src/components/TextInputAutoGrow.js index ca2200d47f26..b60d367029a0 100644 --- a/src/components/TextInputAutoGrow.js +++ b/src/components/TextInputAutoGrow.js @@ -39,24 +39,6 @@ class TextInputAutoGrow extends React.Component { }; } - /** - * Text input component doesn't support auto grow by default. We're using a hidden text input to achieve that. - * This text view is used to calculate width of the input value given textStyle in this component. - * This text component is intentionally positioned out of the screen. - * - * @returns {Text} - */ - getHiddenTextView() { - return ( - this.setState({textInputWidth: e.nativeEvent.layout.width})} - > - {this.props.value} - - ); - } - render() { const propsWithoutStyles = _.omit( this.props, @@ -70,7 +52,18 @@ class TextInputAutoGrow extends React.Component { /* eslint-disable-next-line react/jsx-props-no-spreading */ {...propsWithoutStyles} /> - {this.getHiddenTextView()} + {/* + Text input component doesn't support auto grow by default. + We're using a hidden text input to achieve that. + This text view is used to calculate width of the input value given textStyle in this component. + This text component is intentionally positioned out of the screen. + */} + this.setState({textInputWidth: e.nativeEvent.layout.width})} + > + {this.props.value} + ); } diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js index f10d98c3d138..d7a6638aa3ce 100644 --- a/src/components/TextInputFocusable/index.js +++ b/src/components/TextInputFocusable/index.js @@ -43,8 +43,8 @@ const propTypes = { }; const defaultProps = { - defaultValue: undefined, - value: undefined, + defaultValue: '', + value: '', maxLines: -1, onPasteFile: () => {}, shouldClear: false, diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 6301d4b6c25c..7277c1062a1d 100644 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -115,7 +115,6 @@ class IOUAmountPage extends React.Component { }} ref={el => this.textInput = el} value={this.state.amount} - textAlign="left" /> )} diff --git a/src/styles/styles.js b/src/styles/styles.js index 40f87db3f461..42b540589c5f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1231,12 +1231,14 @@ const styles = { fontFamily: fontFamily.GTA_BOLD, fontWeight: fontWeightBold, fontSize: variables.iouAmountTextSize, + color: themeColors.heading, }, iouAmountTextInput: addOutlineWidth({ fontFamily: fontFamily.GTA_BOLD, fontWeight: fontWeightBold, fontSize: variables.iouAmountTextSize, + color: themeColors.heading, }, 0), noScrollbars: { From a8e4b1428d7dd53d53ad687b7cbb05deb518c36e Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Wed, 14 Apr 2021 14:53:33 +0100 Subject: [PATCH 6/7] Addressing comments --- ...InputAutoGrow.js => TextInputAutoWidth.js} | 23 ++++++------------- src/pages/iou/steps/IOUAmountPage.js | 6 ++--- src/styles/styles.js | 23 +++++++------------ 3 files changed, 18 insertions(+), 34 deletions(-) rename src/components/{TextInputAutoGrow.js => TextInputAutoWidth.js} (70%) diff --git a/src/components/TextInputAutoGrow.js b/src/components/TextInputAutoWidth.js similarity index 70% rename from src/components/TextInputAutoGrow.js rename to src/components/TextInputAutoWidth.js index b60d367029a0..71fad594821b 100644 --- a/src/components/TextInputAutoGrow.js +++ b/src/components/TextInputAutoWidth.js @@ -2,8 +2,7 @@ import React from 'react'; import {View, Text} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import {getAutoGrowTextInputStyle, getHiddenElementOutsideOfWindow} from '../styles/styles'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; +import styles, {getAutoGrowTextInputStyle} from '../styles/styles'; import TextInputFocusable from './TextInputFocusable'; const propTypes = { @@ -21,16 +20,13 @@ const propTypes = { // Styles to apply to the text input // eslint-disable-next-line react/forbid-prop-types textStyle: PropTypes.object.isRequired, - - /* Window Dimensions Props */ - ...windowDimensionsPropTypes, }; const defaultProps = { inputStyle: {}, }; -class TextInputAutoGrow extends React.Component { +class TextInputAutoWidth extends React.Component { constructor(props) { super(props); @@ -40,10 +36,7 @@ class TextInputAutoGrow extends React.Component { } render() { - const propsWithoutStyles = _.omit( - this.props, - ['inputStyle', 'textStyle', Object.keys(windowDimensionsPropTypes)], - ); + const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']); return ( this.setState({textInputWidth: e.nativeEvent.layout.width})} > {this.props.value} @@ -69,12 +62,10 @@ class TextInputAutoGrow extends React.Component { } } -TextInputAutoGrow.propTypes = propTypes; -TextInputAutoGrow.defaultProps = defaultProps; - -const TextInputAutoGrowWithWindowDimensions = withWindowDimensions(TextInputAutoGrow); +TextInputAutoWidth.propTypes = propTypes; +TextInputAutoWidth.defaultProps = defaultProps; export default React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ - + )); diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 7277c1062a1d..a88ee4d9f893 100644 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -12,7 +12,7 @@ import styles from '../../../styles/styles'; import themeColors from '../../../styles/themes/default'; import BigNumberPad from '../../../components/BigNumberPad'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import TextInputAutoGrow from '../../../components/TextInputAutoGrow'; +import TextInputAutoWidth from '../../../components/TextInputAutoWidth'; const propTypes = { // Callback to inform parent modal of success @@ -78,7 +78,7 @@ class IOUAmountPage extends React.Component { const newValue = `${prevState.amount}${key}`; // Regex to validate decimal number with up to 6 digits and 2 decimal numbers - const decimalNumberRegex = new RegExp(/^\d{1,6}(\.\d{0,2})?$/, 'i'); + const decimalNumberRegex = new RegExp(/^\d+(\.\d{0,3})?$/, 'i'); if (!decimalNumberRegex.test(newValue)) { return prevState; } @@ -106,7 +106,7 @@ class IOUAmountPage extends React.Component { {this.props.isSmallScreenWidth ? {this.state.amount} : ( - { diff --git a/src/styles/styles.js b/src/styles/styles.js index 1491df1b64bc..d0de58cff84f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1266,6 +1266,14 @@ const styles = { alignItems: 'center', zIndex: 10, }, + + hiddenElementOutsideOfWindow: { + position: 'fixed', + top: 0, + left: 0, + opacity: 0, + transform: 'translateX(-100%)', + }, }; const baseCodeTagStyles = { @@ -1533,20 +1541,6 @@ function getWidthAndHeightStyle(width, height) { }; } -/** - * Positions an element to outside of the window and hides it - * - * @param {Number} windowWidth - * @returns {Object} - */ -function getHiddenElementOutsideOfWindow(windowWidth) { - return { - position: 'absolute', - opacity: 0, - left: windowWidth, - }; -} - /** * @param {Number} opacity * @returns {Object} @@ -1588,7 +1582,6 @@ export { getZoomCursorStyle, getZoomSizingStyle, getAutoGrowTextInputStyle, - getHiddenElementOutsideOfWindow, getBackgroundAndBorderStyle, getBackgroundColorStyle, getButtonBackgroundColorStyle, From afddb0fb45767508bfdb5a4ca811e928107985f8 Mon Sep 17 00:00:00 2001 From: tugbadogan Date: Wed, 14 Apr 2021 14:57:05 +0100 Subject: [PATCH 7/7] Updating regex comment --- 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 a88ee4d9f893..e266b6359451 100644 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -77,7 +77,7 @@ class IOUAmountPage extends React.Component { this.setState((prevState) => { const newValue = `${prevState.amount}${key}`; - // Regex to validate decimal number with up to 6 digits and 2 decimal numbers + // 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;