Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix hovering and style AddUnreportedExpense component #212

Merged
merged 2 commits into from
Mar 17, 2025
Merged

Fix hovering and style AddUnreportedExpense component #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4961732
Fix hover style of TransactionItemRow
JakubKorytko Mar 14, 2025
70cbdd3
Add some style to AddUnreportedExpense
JakubKorytko Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/components/TransactionItemRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type {ViewStyle} from 'react-native';
import {View} from 'react-native';
import Hoverable from '@components/Hoverable';
import Text from '@components/Text';
Expand All @@ -19,11 +20,13 @@ function TransactionItemRow({
shouldUseNarrowLayout,
isSelected,
shouldShowTooltip,
containerStyles,
}: {
transactionItem: Transaction;
shouldUseNarrowLayout: boolean;
isSelected: boolean;
shouldShowTooltip: boolean;
containerStyles?: ViewStyle[];
}) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand All @@ -35,7 +38,7 @@ function TransactionItemRow({
{shouldUseNarrowLayout ? (
<Hoverable>
{(hovered) => (
<View style={[hovered ? styles.hoveredComponentBG : backgroundColor, styles.expenseWidgetRadius, styles.justifyContentEvenly]}>
<View style={containerStyles ?? [hovered ? styles.hoveredComponentBG : backgroundColor, styles.expenseWidgetRadius, styles.justifyContentEvenly]}>
<View style={[styles.flexRow, styles.mt3, styles.mr3, styles.mb3, styles.ml3]}>
<View style={[styles.mr3]}>
<ReceiptCell
Expand Down Expand Up @@ -89,7 +92,7 @@ function TransactionItemRow({
) : (
<Hoverable>
{(hovered) => (
<View style={[hovered ? styles.hoveredComponentBG : backgroundColor, styles.p2, styles.expenseWidgetRadius]}>
<View style={containerStyles ?? [hovered ? styles.hoveredComponentBG : backgroundColor, styles.p2, styles.expenseWidgetRadius]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.RECEIPT)]}>
<ReceiptCell
Expand Down
43 changes: 17 additions & 26 deletions src/pages/AddUnreportedExpense.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, {useMemo, useRef, useState} from 'react';
import type {ViewStyle} from 'react-native';
import {View} from 'react-native';
import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement';

Check failure on line 4 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

'FocusTrapContainerElement' is defined but never used

Check failure on line 4 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'FocusTrapContainerElement' is defined but never used
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Hoverable from '@components/Hoverable';

Check failure on line 6 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

'Hoverable' is defined but never used

Check failure on line 6 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'Hoverable' is defined but never used
import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectCircle from '@components/SelectCircle';
Expand All @@ -20,28 +21,30 @@
import type Transaction from '@src/types/onyx/Transaction';
import NewChatSelectorPage from './NewChatSelectorPage';

const emptyStylesArray: ViewStyle[] = [];

function unreportedExpenseListItem<TItem extends ListItem>({
item,
isFocused,
showTooltip,
isDisabled,
canSelectMultiple,
onDismissError,

Check failure on line 32 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'onDismissError' is defined but never used
shouldPreventEnterKeySubmit,

Check failure on line 33 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'shouldPreventEnterKeySubmit' is defined but never used
rightHandSideComponent,

Check failure on line 34 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'rightHandSideComponent' is defined but never used
onFocus,
shouldSyncFocus,
pressableStyle,

Check failure on line 37 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

'pressableStyle' is defined but never used
}: UserListItemProps<TItem>) {
// eslint-disable-next-line react-hooks/rules-of-hooks
const styles = useThemeStyles();
// eslint-disable-next-line react-hooks/rules-of-hooks
const [isSelected, setIsSelected] = useState<boolean>(false);
const theme = useTheme();

Check failure on line 43 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

React Hook "useTheme" is called in function "unreportedExpenseListItem" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

const backgroundColor = isSelected ? styles.buttonDefaultBG : styles.highlightBG;

const animatedHighlightStyle = useAnimatedHighlightStyle({

Check failure on line 47 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

React Hook "useAnimatedHighlightStyle" is called in function "unreportedExpenseListItem" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
borderRadius: variables.componentBorderRadius,
shouldHighlight: item?.shouldAnimateInHighlight ?? false,
highlightColor: theme.messageHighlightBG,
Expand All @@ -60,36 +63,24 @@
onFocus={onFocus}
shouldSyncFocus={shouldSyncFocus}
hoverStyle={item.isSelected && styles.activeComponentBG}
pressableWrapperStyle={[animatedHighlightStyle]}
pressableWrapperStyle={[animatedHighlightStyle, backgroundColor]}
onSelectRow={() => {
setIsSelected((val) => !val);
}}
containerStyle={[styles.p3, styles.mbn4]}
>
<Hoverable>
{(hovered) => (
<View style={[{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}]}>
<TransactionItemRow
transactionItem={item}
shouldUseNarrowLayout
isSelected={isSelected}
/>
<View
style={[
hovered ? styles.buttonDefaultBG : styles.highlightBG,
backgroundColor,
styles.minHeight22,
styles.justifyContentCenter,
styles.alignItemsCenter,
styles.expenseWidgetSelectCircle,
styles.mln2,
styles.pr2,
]}
>
<SelectCircle isChecked={isSelected} />
</View>
</View>
)}
</Hoverable>
<View style={[{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}]}>
<TransactionItemRow
transactionItem={item}

Check failure on line 74 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

Type 'TItem' is not assignable to type '{ amount: number; attendees?: Attendee[] | undefined; taxAmount?: number | undefined; taxCode?: string | undefined; billable?: boolean | undefined; category?: string | undefined; ... 44 more ...; inserted?: string | undefined; } & OfflineFeedback<...>'.
shouldUseNarrowLayout
isSelected={isSelected}
// in order to remove styles from the component
containerStyles={emptyStylesArray}
/>
<View style={[styles.pb3, styles.justifyContentCenter, styles.alignItemsCenter, styles.expenseWidgetSelectCircle, styles.mln2, styles.pr2]}>
<SelectCircle isChecked={isSelected} />
</View>
</View>
</BaseListItem>
);
}
Expand All @@ -108,7 +99,7 @@
{
title: 'expense',
shouldShow: true,
data: unreportedExpensesList,

Check failure on line 102 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

Type '({ amount: number; attendees?: Attendee[] | undefined; taxAmount?: number | undefined; taxCode?: string | undefined; billable?: boolean | undefined; category?: string | undefined; ... 44 more ...; inserted?: string | undefined; } & OfflineFeedback<...>)[]' is not assignable to type 'Partial<OptionData>[]'.
},
];

Expand All @@ -132,14 +123,14 @@
behavior="padding"
// Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
// This is because when wrapping whole screen the screen was freezing when changing Tabs.
keyboardVerticalOffset={variables.contentHeaderHeight + top + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding}

Check failure on line 126 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

'top' is possibly 'null'.

Check failure on line 126 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

Operator '+' cannot be applied to types 'number' and 'Window'.
>
<SelectionList<Transaction & ListItem>
ref={selectionListRef}
onSelectRow={() => {}}
shouldShowTextInput={false}
canSelectMultiple
sections={sections}

Check failure on line 133 in src/pages/AddUnreportedExpense.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

Type 'Section[]' is not assignable to type 'readonly never[] | SectionListDataType<{ amount: number; attendees?: Attendee[] | undefined; taxAmount?: number | undefined; taxCode?: string | undefined; billable?: boolean | undefined; category?: string | undefined; ... 44 more ...; inserted?: string | undefined; } & OfflineFeedback<...> & ListItem>[]'.
ListItem={unreportedExpenseListItem}
confirmButtonStyles={styles.mb5}
/>
Expand Down
Loading