diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx index db5077beca9a..c7e7f587769c 100644 --- a/src/components/SelectionList/Search/ActionCell.tsx +++ b/src/components/SelectionList/Search/ActionCell.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import {View} from 'react-native'; import Badge from '@components/Badge'; import Button from '@components/Button'; @@ -36,7 +36,7 @@ type ActionCellProps = { function ActionCell({ action = CONST.SEARCH.ACTION_TYPES.VIEW, - shouldUseSuccessStyle = true, + shouldUseSuccessStyle: shouldUseSuccessStyleProp = true, isLargeScreenWidth = true, isSelected = false, goToItem, @@ -52,6 +52,16 @@ function ActionCell({ const text = translate(actionTranslationsMap[action]); + const getButtonInnerStyles = useCallback( + (shouldUseSuccessStyle: boolean) => { + if (!isSelected) { + return {}; + } + return shouldUseSuccessStyle ? styles.buttonSuccessHovered : styles.buttonDefaultHovered; + }, + [isSelected, styles], + ); + const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID); if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE) { @@ -78,30 +88,28 @@ function ActionCell({ } if (action === CONST.SEARCH.ACTION_TYPES.VIEW || shouldUseViewAction) { - const buttonInnerStyles = isSelected ? styles.buttonDefaultHovered : {}; return isLargeScreenWidth ? (