Skip to content

Commit

Permalink
fix: ScrollTo should not out of range (#57)
Browse files Browse the repository at this point in the history
* fix: Not scroll out of range

* add test case
  • Loading branch information
zombieJ authored Sep 4, 2020
1 parent 36d8d26 commit a82ab91
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 8 deletions.
23 changes: 23 additions & 0 deletions examples/basic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,29 @@ const Demo = () => {
visible
</button>

<button
type="button"
onClick={() => {
listRef.current.scrollTo({
index: data.length - 2,
align: 'top',
});
}}
>
Scroll To Last (top)
</button>
<button
type="button"
onClick={() => {
listRef.current.scrollTo({
index: 0,
align: 'bottom',
});
}}
>
Scroll To First (bottom)
</button>

<button
type="button"
onClick={() => {
Expand Down
15 changes: 7 additions & 8 deletions src/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,10 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
value = newTop;
}

componentRef.current.scrollTop = value;
return value;
const alignedTop = keepInRange(value);

componentRef.current.scrollTop = alignedTop;
return alignedTop;
});
}

Expand Down Expand Up @@ -205,10 +207,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {

// ================================ Scroll ================================
function onScrollBar(newScrollTop: number) {
const newTop = keepInRange(newScrollTop);
if (newTop !== scrollTop) {
syncScrollTop(newTop);
}
const newTop = newScrollTop;
syncScrollTop(newTop);
}

// This code may only trigger in test case.
Expand All @@ -230,8 +230,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
isScrollAtBottom,
offsetY => {
syncScrollTop(top => {
const newTop = keepInRange(top + offsetY);

const newTop = top + offsetY;
return newTop;
});
},
Expand Down
6 changes: 6 additions & 0 deletions tests/scroll.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,12 @@ describe('List.Scroll', () => {
expect(wrapper.find('ul').instance().scrollTop).toEqual(600);
});

it('scroll top should not out of range', () => {
listRef.current.scrollTo({ index: 0, align: 'bottom' });
jest.runAllTimers();
expect(wrapper.find('ul').instance().scrollTop).toEqual(0);
});

it('key scroll', () => {
listRef.current.scrollTo({ key: '30', align: 'bottom' });
jest.runAllTimers();
Expand Down

1 comment on commit a82ab91

@vercel
Copy link

@vercel vercel bot commented on a82ab91 Sep 4, 2020

Choose a reason for hiding this comment

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

Please sign in to comment.