diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.js b/packages/desktop-client/src/components/accounts/TransactionsTable.js
index e6a26461fab0c6d0b20e0e17de3df15dc3e2908f..16c2dd18cf167f4f58a63b8a7a51e97a25e5d13a 100644
--- a/packages/desktop-client/src/components/accounts/TransactionsTable.js
+++ b/packages/desktop-client/src/components/accounts/TransactionsTable.js
@@ -69,6 +69,7 @@ import {
CellButton,
useTableNavigator,
Table,
+ UnexposedCellContent,
} from '../table';
function getDisplayValue(obj, name) {
@@ -392,6 +393,8 @@ function PayeeCell({
onUpdate,
onCreatePayee,
onManagePayees,
+ onNavigateToTransferAccount,
+ onNavigateToSchedule,
}) {
let isCreatingPayee = useRef(false);
@@ -405,7 +408,6 @@ function PayeeCell({
name="payee"
value={payeeId}
valueStyle={[valueStyle, inherited && { color: colors.n8 }]}
- formatter={() => getPayeePretty(transaction, payee, transferAcct)}
exposed={focused}
onExpose={!isPreview && (name => onEdit(id, name))}
onUpdate={async value => {
@@ -418,6 +420,20 @@ function PayeeCell({
isCreatingPayee.current = false;
}
}}
+ unexposedContent={
+ <>
+ <PayeeIcons
+ transaction={transaction}
+ transferAccount={transferAcct}
+ onNavigateToTransferAccount={onNavigateToTransferAccount}
+ onNavigateToSchedule={onNavigateToSchedule}
+ />
+ <UnexposedCellContent
+ value={payeeId}
+ formatter={() => getPayeePretty(transaction, payee, transferAcct)}
+ />
+ </>
+ }
>
{({
onBlur,
@@ -473,6 +489,8 @@ function PayeeIcons({
}
let buttonStyle = {
+ marginLeft: -5,
+ marginRight: 2,
width: 23,
height: 23,
color: 'inherit',
@@ -490,43 +508,41 @@ function PayeeIcons({
color: 'inherit',
};
- let onScheduleIconClick = () => onNavigateToSchedule(scheduleId);
-
let recurring = schedule && schedule._date && !!schedule._date.frequency;
- let ScheduledIcon = () => (
- <Button bare style={buttonStyle} onClick={onScheduleIconClick}>
+
+ return schedule ? (
+ <Button
+ bare
+ style={buttonStyle}
+ onClick={e => {
+ e.stopPropagation();
+ onNavigateToSchedule(scheduleId);
+ }}
+ >
{recurring ? (
<ArrowsSynchronize style={scheduleIconStyle} />
) : (
<CalendarIcon style={scheduleIconStyle} />
)}
</Button>
- );
-
- let onTransferIconClick = () =>
- !isTemporaryId(transaction.id) &&
- onNavigateToTransferAccount(transferAccount.id);
-
- let TransferDirectionIcon = () => (
- <Button bare style={buttonStyle} onClick={onTransferIconClick}>
+ ) : transferAccount ? (
+ <Button
+ bare
+ style={buttonStyle}
+ onClick={e => {
+ e.stopPropagation();
+ if (!isTemporaryId(transaction.id)) {
+ onNavigateToTransferAccount(transferAccount.id);
+ }
+ }}
+ >
{(transaction._inverse ? -1 : 1) * transaction.amount > 0 ? (
<LeftArrow2 style={transferIconStyle} />
) : (
<RightArrow2 style={transferIconStyle} />
)}
</Button>
- );
-
- return (
- <View style={{ flex: 1, flexDirection: 'row', alignItems: 'stretch' }}>
- {schedule && <Cell exposed={true}>{ScheduledIcon}</Cell>}
- {!schedule && transferAccount && (
- <Cell exposed={true}>{TransferDirectionIcon}</Cell>
- )}
-
- {children}
- </View>
- );
+ ) : null;
}
const Transaction = memo(function Transaction(props) {
@@ -820,40 +836,29 @@ const Transaction = memo(function Transaction(props) {
)}
</CustomCell>
)}
- {(() => {
- let cell = (
- <PayeeCell
- id={id}
- payeeId={payeeId}
- accountId={accountId}
- focused={focusedField === 'payee'}
- inherited={inheritedFields && inheritedFields.has('payee')}
- payees={payees}
- accounts={accounts}
- valueStyle={valueStyle}
- transaction={transaction}
- payee={payee}
- transferAcct={transferAcct}
- importedPayee={importedPayee}
- isPreview={isPreview}
- onEdit={onEdit}
- onUpdate={onUpdate}
- onCreatePayee={onCreatePayee}
- onManagePayees={onManagePayees}
- />
- );
-
- return (
- <PayeeIcons
- transaction={transaction}
- transferAccount={transferAcct}
- onNavigateToTransferAccount={onNavigateToTransferAccount}
- onNavigateToSchedule={onNavigateToSchedule}
- >
- {cell}
- </PayeeIcons>
- );
- })()}
+ {(() => (
+ <PayeeCell
+ id={id}
+ payeeId={payeeId}
+ accountId={accountId}
+ focused={focusedField === 'payee'}
+ inherited={inheritedFields && inheritedFields.has('payee')}
+ payees={payees}
+ accounts={accounts}
+ valueStyle={valueStyle}
+ transaction={transaction}
+ payee={payee}
+ transferAcct={transferAcct}
+ importedPayee={importedPayee}
+ isPreview={isPreview}
+ onEdit={onEdit}
+ onUpdate={onUpdate}
+ onCreatePayee={onCreatePayee}
+ onManagePayees={onManagePayees}
+ onNavigateToTransferAccount={onNavigateToTransferAccount}
+ onNavigateToSchedule={onNavigateToSchedule}
+ />
+ ))()}
{isPreview ? (
<Cell name="notes" width="flex" />
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index 5b8fe3edbef28c23bf12919cc988962bf37a2dcf..ffc52d5ef66fef987fb2d3271361254353d969b3 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -162,6 +162,24 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
);
});
+export function UnexposedCellContent({
+ value,
+ formatter,
+}: Pick<CellProps, 'value' | 'formatter'>) {
+ return (
+ <Text
+ style={{
+ flexGrow: 1,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ }}
+ >
+ {formatter ? formatter(value) : value}
+ </Text>
+ );
+}
+
type CellProps = Omit<ComponentProps<typeof View>, 'children' | 'value'> & {
formatter?: (value: string, type?: unknown) => string;
focused?: boolean;
@@ -170,6 +188,7 @@ type CellProps = Omit<ComponentProps<typeof View>, 'children' | 'value'> & {
plain?: boolean;
exposed?: boolean;
children?: ReactNode | (() => ReactNode);
+ unexposedContent?: ReactNode;
value?: string;
valueStyle?: CSSProperties;
onExpose?: (name: string) => void;
@@ -188,6 +207,7 @@ export function Cell({
plain,
style,
valueStyle,
+ unexposedContent,
...viewProps
}: CellProps) {
let mouseCoords = useRef(null);
@@ -231,9 +251,10 @@ export function Cell({
<View
style={[
{
+ flexDirection: 'row',
flex: 1,
padding: '0 5px',
- justifyContent: 'center',
+ alignItems: 'center',
},
styles.smallText,
valueStyle,
@@ -242,27 +263,24 @@ export function Cell({
// the user does a direct click, not if they also drag the
// mouse to select something
onMouseDown={e => (mouseCoords.current = [e.clientX, e.clientY])}
- onMouseUp={e => {
- if (
- mouseCoords.current &&
- Math.abs(e.clientX - mouseCoords.current[0]) < 5 &&
- Math.abs(e.clientY - mouseCoords.current[1]) < 5
- ) {
- onExpose && onExpose(name);
- }
- }}
// When testing, allow the click handler to be used instead
- onClick={global.IS_TESTING && (() => onExpose && onExpose(name))}
+ onClick={
+ global.IS_TESTING
+ ? () => onExpose && onExpose(name)
+ : e => {
+ if (
+ mouseCoords.current &&
+ Math.abs(e.clientX - mouseCoords.current[0]) < 5 &&
+ Math.abs(e.clientY - mouseCoords.current[1]) < 5
+ ) {
+ onExpose && onExpose(name);
+ }
+ }
+ }
>
- <Text
- style={{
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- }}
- >
- {formatter ? formatter(value) : value}
- </Text>
+ {unexposedContent || (
+ <UnexposedCellContent value={value} formatter={formatter} />
+ )}
</View>
)}
</View>
diff --git a/upcoming-release-notes/1260.md b/upcoming-release-notes/1260.md
new file mode 100644
index 0000000000000000000000000000000000000000..0985b1cb0be28c2858413ff9d5667d7ef3c041e5
--- /dev/null
+++ b/upcoming-release-notes/1260.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [j-f1]
+---
+
+Fix transaction list scrolling behavior