diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 0fd3cc0728ca..126c81961cee 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,6 +1,6 @@ import {useIsFocused} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; -import React, {useCallback, useMemo} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import {ActivityIndicator, View} from 'react-native'; import Icon from '@components/Icon'; @@ -89,6 +89,9 @@ type ButtonProps = Partial & { /** Whether we should use the danger theme color */ danger?: boolean; + /** Whether we should display the button as a link */ + link?: boolean; + /** Should we remove the right border radius top + bottom? */ shouldRemoveRightBorderRadius?: boolean; @@ -205,6 +208,7 @@ function Button( id = '', accessibilityLabel = '', isSplitButton = false, + link = false, isContentCentered = false, ...rest }: ButtonProps, @@ -213,6 +217,7 @@ function Button( const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const [isHovered, setIsHovered] = useState(false); const renderContent = () => { if ('children' in rest) { @@ -233,6 +238,10 @@ function Button( danger && styles.buttonDangerText, !!icon && styles.textAlignLeft, textStyles, + link && styles.link, + link && isHovered && StyleUtils.getColorStyle(theme.linkHover), + link && styles.fontWeightNormal, + link && styles.fontSizeLabel, ]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} > @@ -343,6 +352,7 @@ function Button( // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing text && shouldShowRightIcon ? styles.alignItemsStretch : undefined, innerStyles, + link && styles.bgTransparent, ]} hoverStyle={[ shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined, @@ -353,6 +363,8 @@ function Button( accessibilityLabel={accessibilityLabel} role={CONST.ROLE.BUTTON} hoverDimmingValue={1} + onHoverIn={() => setIsHovered(true)} + onHoverOut={() => setIsHovered(false)} > {renderContent()} {isLoading && ( diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx index ad77070c1b99..7888a8b26114 100644 --- a/src/components/SelectionList/Search/ActionCell.tsx +++ b/src/components/SelectionList/Search/ActionCell.tsx @@ -31,9 +31,19 @@ type ActionCellProps = { isLargeScreenWidth?: boolean; isSelected?: boolean; goToItem: () => void; + isChildListItem?: boolean; + parentAction?: string; }; -function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isLargeScreenWidth = true, isSelected = false, goToItem}: ActionCellProps) { +function ActionCell({ + action = CONST.SEARCH.ACTION_TYPES.VIEW, + transactionID, + isLargeScreenWidth = true, + isSelected = false, + goToItem, + isChildListItem = false, + parentAction = '', +}: ActionCellProps) { const {translate} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); @@ -53,13 +63,11 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL } }, [action, currentSearchHash, transactionID]); - if (!isLargeScreenWidth) { - return null; - } - const text = translate(actionTranslationsMap[action]); - if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) { + 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) { return ( + ) : null; + } + + if (action === CONST.SEARCH.ACTION_TYPES.REVIEW) { return (