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.

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

🐛 (mobile) scrolling in lists with pull-to-refresh #1706

Merged
merged 3 commits into from
Sep 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
import PullToRefresh from 'react-simple-pull-to-refresh';

import { useActions } from '../../hooks/useActions';
import Add from '../../icons/v1/Add';
Expand All @@ -12,6 +11,7 @@ import InputWithContent from '../common/InputWithContent';
import Label from '../common/Label';
import Text from '../common/Text';
import View from '../common/View';
import PullToRefresh from '../responsive/PullToRefresh';
import CellValue from '../spreadsheet/CellValue';
import { TransactionList } from '../transactions/MobileTransaction';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import PullToRefresh from 'react-simple-pull-to-refresh';

import * as queries from 'loot-core/src/client/queries';

Expand All @@ -14,6 +13,7 @@ import Text from '../common/Text';
import TextOneLine from '../common/TextOneLine';
import View from '../common/View';
import { Page } from '../Page';
import PullToRefresh from '../responsive/PullToRefresh';
import CellValue from '../spreadsheet/CellValue';

function AccountHeader({ name, amount, style = {} }) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { type ComponentProps } from 'react';
import BasePullToRefresh from 'react-simple-pull-to-refresh';

import { css } from 'glamor';

type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;

export default function PullToRefresh(props: PullToRefreshProps) {
return (
<div style={{ overflow: 'auto' }}>
<BasePullToRefresh
pullDownThreshold={80}
resistance={2}
Comment on lines +12 to +13
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Increasing the resistance a bit in order to make it more difficult to refresh accidentally

className={String(
css({
'& .ptr__pull-down': {
textAlign: 'center',
},
Comment on lines +16 to +18
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Centers the "pull down to refresh" label that is visible before the refresh starts

'& .ptr__children': {
overflow: 'hidden auto',
},
Comment on lines +19 to +21
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the main fix.. a bit hacky.. but I couldn't figure out anything better sadly.

}),
)}
{...props}
/>
</div>
);
}
6 changes: 6 additions & 0 deletions upcoming-release-notes/1706.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Bugfix
authors: [MatissJanis]
---

Mobile: fix transaction list scrolling requiring a previous interaction before scroll happens