From cb98417ca46b27432525bb3fe559be275eabb6a2 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 27 Apr 2023 10:09:28 +0700 Subject: [PATCH 1/3] highlight and mark current currency --- src/pages/iou/IOUCurrencySelection.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 1d4524be7d66..098500574c07 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -13,6 +13,11 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import * as IOU from '../../libs/actions/IOU'; import * as CurrencySymbolUtils from '../../libs/CurrencySymbolUtils'; import {withNetwork} from '../../components/OnyxProvider'; +import CONST from '../../CONST'; +import themeColors from '../../styles/themes/default'; +import * as Expensicons from '../../components/Icon/Expensicons'; + +const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success}; /** * IOU Currency selection for selecting currency @@ -30,11 +35,22 @@ const propTypes = { ISO4217: PropTypes.string, })), + /* Onyx Props */ + + /** Holds data related to IOU view state, rather than the underlying IOU data. */ + iou: PropTypes.shape({ + /** Selected Currency Code of the current IOU */ + selectedCurrencyCode: PropTypes.string, + }), + ...withLocalizePropTypes, }; const defaultProps = { currencyList: {}, + iou: { + selectedCurrencyCode: CONST.CURRENCY.USD, + }, }; class IOUCurrencySelection extends Component { @@ -79,6 +95,8 @@ class IOUCurrencySelection extends Component { text: `${currencyCode} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`, currencyCode, keyForList: currencyCode, + customIcon: currencyCode === this.props.iou.selectedCurrencyCode ? greenCheckmark : undefined, + boldStyle: currencyCode === this.props.iou.selectedCurrencyCode, })); } @@ -127,6 +145,7 @@ class IOUCurrencySelection extends Component { placeholderText={this.props.translate('common.search')} headerMessage={headerMessage} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} + initiallyFocusedOptionKey={_.get(_.filter(this.state.currencyData, crc => crc.currencyCode === this.props.iou.selectedCurrencyCode)[0], 'keyForList')} /> )} @@ -142,6 +161,9 @@ export default compose( withLocalize, withOnyx({ currencyList: {key: ONYXKEYS.CURRENCY_LIST}, + iou: { + key: ONYXKEYS.IOU, + }, }), withNetwork(), )(IOUCurrencySelection); From b0c03d074b745c86668d794aa0575a4cadcbb0bc Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 27 Apr 2023 10:54:44 +0700 Subject: [PATCH 2/3] use find instead of filter --- src/pages/iou/IOUCurrencySelection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 098500574c07..648257aa85e7 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -145,7 +145,7 @@ class IOUCurrencySelection extends Component { placeholderText={this.props.translate('common.search')} headerMessage={headerMessage} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} - initiallyFocusedOptionKey={_.get(_.filter(this.state.currencyData, crc => crc.currencyCode === this.props.iou.selectedCurrencyCode)[0], 'keyForList')} + initiallyFocusedOptionKey={_.get(_.find(this.state.currencyData, crc => crc.currencyCode === this.props.iou.selectedCurrencyCode), 'keyForList')} /> )} From 3673785e5bdcb6492eadda6c1989e1d7d0f36d4a Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 27 Apr 2023 14:03:08 +0700 Subject: [PATCH 3/3] rename crc variable --- src/pages/iou/IOUCurrencySelection.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 648257aa85e7..9920680e38ee 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -91,13 +91,16 @@ class IOUCurrencySelection extends Component { * @returns {Object} */ getCurrencyOptions() { - return _.map(this.props.currencyList, (currencyInfo, currencyCode) => ({ - text: `${currencyCode} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`, - currencyCode, - keyForList: currencyCode, - customIcon: currencyCode === this.props.iou.selectedCurrencyCode ? greenCheckmark : undefined, - boldStyle: currencyCode === this.props.iou.selectedCurrencyCode, - })); + return _.map(this.props.currencyList, (currencyInfo, currencyCode) => { + const isSelectedCurrency = currencyCode === this.props.iou.selectedCurrencyCode; + return { + text: `${currencyCode} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`, + currencyCode, + keyForList: currencyCode, + customIcon: isSelectedCurrency ? greenCheckmark : undefined, + boldStyle: isSelectedCurrency, + }; + }); } /** @@ -145,7 +148,7 @@ class IOUCurrencySelection extends Component { placeholderText={this.props.translate('common.search')} headerMessage={headerMessage} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} - initiallyFocusedOptionKey={_.get(_.find(this.state.currencyData, crc => crc.currencyCode === this.props.iou.selectedCurrencyCode), 'keyForList')} + initiallyFocusedOptionKey={_.get(_.find(this.state.currencyData, currency => currency.currencyCode === this.props.iou.selectedCurrencyCode), 'keyForList')} /> )}