Skip to content

fix: Scroll to with SCU #11

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

Merged
merged 4 commits into from
Mar 2, 2020
Merged

fix: Scroll to with SCU #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eee13f1
fix: Scroll to with SCU
zombieJ Mar 2, 2020
97c5788
add comiple ci
zombieJ Mar 2, 2020
062cc73
typo
zombieJ Mar 2, 2020
1f35a24
fix compiple
zombieJ Mar 2, 2020
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
17 changes: 16 additions & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,24 @@ jobs:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
compile:
docker:
- image: circleci/node:latest
steps:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- run: npm install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run: npm run compile
workflows:
version: 2
build_and_test:
jobs:
- lint
- test
- test
- compile
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@ module.exports = {
'react/no-did-update-set-state': 0,
'react/no-find-dom-node': 0,
'no-dupe-class-members': 0,
'react/sort-comp': 0,
},
};
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"react-dom": "*"
},
"devDependencies": {
"@types/jest": "^25.1.3",
"@types/react": "^16.8.19",
"@types/react-dom": "^16.8.4",
"@types/warning": "^3.0.0",
Expand Down
246 changes: 124 additions & 122 deletions src/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,143 +456,145 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
};

public scrollTo = (arg0: number | ScrollConfig) => {
// Number top
if (typeof arg0 === 'object') {
const { isVirtual } = this.state;
const { height, itemHeight, data } = this.props;
const { align = 'auto' } = arg0;

let index = 0;
if ('index' in arg0) {
({ index } = arg0);
} else if ('key' in arg0) {
const { key } = arg0;
index = data.findIndex(item => this.getItemKey(item) === key);
}
setTimeout(() => {
// Number top
if (typeof arg0 === 'object') {
const { isVirtual } = this.state;
const { height, itemHeight, data } = this.props;
const { align = 'auto' } = arg0;

let index = 0;
if ('index' in arg0) {
({ index } = arg0);
} else if ('key' in arg0) {
const { key } = arg0;
index = data.findIndex(item => this.getItemKey(item) === key);
}

const visibleCount = Math.ceil(height / itemHeight);
const item = data[index];
if (item) {
const { clientHeight } = this.listRef.current;

if (isVirtual) {
// Calculate related data
const { itemIndex, itemOffsetPtg } = this.state;
const { scrollTop } = this.listRef.current;
const scrollPtg = getElementScrollPercentage(this.listRef.current);

const relativeLocatedItemTop = getItemRelativeTop({
itemIndex,
itemOffsetPtg,
itemElementHeights: this.itemElementHeights,
scrollPtg,
clientHeight,
getItemKey: this.getIndexKey,
});

// We will force render related items to collect height for re-location
this.setState(
{
startIndex: Math.max(0, index - visibleCount),
endIndex: Math.min(data.length - 1, index + visibleCount),
},
() => {
this.collectItemHeights();

// Calculate related top
let relativeTop: number;
let mergedAlgin = align;

if (align === 'auto') {
let shouldChange = true;

// Check if exist in the visible range
if (Math.abs(itemIndex - index) < visibleCount) {
let itemTop = relativeLocatedItemTop;
if (index < itemIndex) {
for (let i = index; i < itemIndex; i += 1) {
const eleKey = this.getIndexKey(i);
itemTop -= this.itemElementHeights[eleKey] || 0;
}
} else {
for (let i = itemIndex; i <= index; i += 1) {
const eleKey = this.getIndexKey(i);
itemTop += this.itemElementHeights[eleKey] || 0;
const visibleCount = Math.ceil(height / itemHeight);
const item = data[index];
if (item) {
const { clientHeight } = this.listRef.current;

if (isVirtual) {
// Calculate related data
const { itemIndex, itemOffsetPtg } = this.state;
const { scrollTop } = this.listRef.current;
const scrollPtg = getElementScrollPercentage(this.listRef.current);

const relativeLocatedItemTop = getItemRelativeTop({
itemIndex,
itemOffsetPtg,
itemElementHeights: this.itemElementHeights,
scrollPtg,
clientHeight,
getItemKey: this.getIndexKey,
});

// We will force render related items to collect height for re-location
this.setState(
{
startIndex: Math.max(0, index - visibleCount),
endIndex: Math.min(data.length - 1, index + visibleCount),
},
() => {
this.collectItemHeights();

// Calculate related top
let relativeTop: number;
let mergedAlgin = align;

if (align === 'auto') {
let shouldChange = true;

// Check if exist in the visible range
if (Math.abs(itemIndex - index) < visibleCount) {
let itemTop = relativeLocatedItemTop;
if (index < itemIndex) {
for (let i = index; i < itemIndex; i += 1) {
const eleKey = this.getIndexKey(i);
itemTop -= this.itemElementHeights[eleKey] || 0;
}
} else {
for (let i = itemIndex; i <= index; i += 1) {
const eleKey = this.getIndexKey(i);
itemTop += this.itemElementHeights[eleKey] || 0;
}
}

shouldChange = itemTop <= 0 || itemTop >= clientHeight;
}

shouldChange = itemTop <= 0 || itemTop >= clientHeight;
if (shouldChange) {
// Out of range will fall back to position align
mergedAlgin = index < itemIndex ? 'top' : 'bottom';
} else {
const {
itemIndex: nextIndex,
itemOffsetPtg: newOffsetPtg,
startIndex,
endIndex,
} = getRangeIndex(scrollPtg, data.length, visibleCount);

this.setState({
scrollTop,
itemIndex: nextIndex,
itemOffsetPtg: newOffsetPtg,
startIndex,
endIndex,
});
return;
}
}

if (shouldChange) {
// Out of range will fall back to position align
mergedAlgin = index < itemIndex ? 'top' : 'bottom';
} else {
const {
itemIndex: nextIndex,
itemOffsetPtg: newOffsetPtg,
startIndex,
endIndex,
} = getRangeIndex(scrollPtg, data.length, visibleCount);

this.setState({
scrollTop,
itemIndex: nextIndex,
itemOffsetPtg: newOffsetPtg,
startIndex,
endIndex,
});
return;
// Align with position should make scroll happen
if (mergedAlgin === 'top') {
relativeTop = 0;
} else if (mergedAlgin === 'bottom') {
const eleKey = this.getItemKey(item);

relativeTop = clientHeight - this.itemElementHeights[eleKey] || 0;
}
}

// Align with position should make scroll happen
if (mergedAlgin === 'top') {
relativeTop = 0;
} else if (mergedAlgin === 'bottom') {
const eleKey = this.getItemKey(item);
this.internalScrollTo({
itemIndex: index,
relativeTop,
});
},
);
} else {
// Raw list without virtual scroll set position directly
this.collectItemHeights({ startIndex: 0, endIndex: data.length - 1 });
let mergedAlgin = align;

// Collection index item position
const indexItemHeight = this.itemElementHeights[this.getIndexKey(index)];
let itemTop = 0;
for (let i = 0; i < index; i += 1) {
const eleKey = this.getIndexKey(i);
itemTop += this.itemElementHeights[eleKey] || 0;
}
const itemBottom = itemTop + indexItemHeight;

relativeTop = clientHeight - this.itemElementHeights[eleKey] || 0;
if (mergedAlgin === 'auto') {
if (itemTop < this.listRef.current.scrollTop) {
mergedAlgin = 'top';
} else if (itemBottom > this.listRef.current.scrollTop + clientHeight) {
mergedAlgin = 'bottom';
}

this.internalScrollTo({
itemIndex: index,
relativeTop,
});
},
);
} else {
// Raw list without virtual scroll set position directly
this.collectItemHeights({ startIndex: 0, endIndex: data.length - 1 });
let mergedAlgin = align;

// Collection index item position
const indexItemHeight = this.itemElementHeights[this.getIndexKey(index)];
let itemTop = 0;
for (let i = 0; i < index; i += 1) {
const eleKey = this.getIndexKey(i);
itemTop += this.itemElementHeights[eleKey] || 0;
}
const itemBottom = itemTop + indexItemHeight;

if (mergedAlgin === 'auto') {
if (itemTop < this.listRef.current.scrollTop) {
mergedAlgin = 'top';
} else if (itemBottom > this.listRef.current.scrollTop + clientHeight) {
mergedAlgin = 'bottom';
}
}

if (mergedAlgin === 'top') {
this.listRef.current.scrollTop = itemTop;
} else if (mergedAlgin === 'bottom') {
this.listRef.current.scrollTop = itemTop - (clientHeight - indexItemHeight);
if (mergedAlgin === 'top') {
this.listRef.current.scrollTop = itemTop;
} else if (mergedAlgin === 'bottom') {
this.listRef.current.scrollTop = itemTop - (clientHeight - indexItemHeight);
}
}
}
} else {
this.listRef.current.scrollTop = arg0;
}
} else {
this.listRef.current.scrollTop = arg0;
}
});
};

public internalScrollTo(relativeScroll: RelativeScroll): void {
Expand Down
2 changes: 1 addition & 1 deletion src/utils/itemUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function getElementScrollPercentage(element: HTMLElement | null) {
* But if not provided, downgrade to `findDOMNode` to get the real dom element.
*/
export function getNodeHeight(node: HTMLElement) {
const element = findDOMNode(node);
const element = findDOMNode<HTMLElement>(node);
return element ? element.offsetHeight : 0;
}

Expand Down
14 changes: 14 additions & 0 deletions tests/scroll.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ function genData(count) {
}

describe('List.Scroll', () => {
beforeEach(() => {
jest.useFakeTimers();
});

afterEach(() => {
jest.useRealTimers();
});

function genList(props) {
let node = (
<List component="ul" itemKey="id" {...props}>
Expand All @@ -28,6 +36,7 @@ describe('List.Scroll', () => {

it('value scroll', () => {
listRef.current.scrollTo(903);
jest.runAllTimers();
expect(wrapper.find('ul').instance().scrollTop).toEqual(903);
});
});
Expand Down Expand Up @@ -82,10 +91,12 @@ describe('List.Scroll', () => {

it('top', () => {
listRef.current.scrollTo({ ...scrollConfig, align: 'top' });
jest.runAllTimers();
expect(scrollTop).toEqual(200);
});
it('bottom', () => {
listRef.current.scrollTo({ ...scrollConfig, align: 'bottom' });
jest.runAllTimers();
expect(scrollTop).toEqual(120);
});
describe('auto', () => {
Expand All @@ -97,6 +108,7 @@ describe('List.Scroll', () => {
.simulate('scroll');
expect(onScroll).toHaveBeenCalled();
listRef.current.scrollTo({ ...scrollConfig, align: 'auto' });
jest.runAllTimers();
expect(scrollTop).toEqual(200);
});
it('lower of', () => {
Expand All @@ -107,6 +119,7 @@ describe('List.Scroll', () => {
.simulate('scroll');
expect(onScroll).toHaveBeenCalled();
listRef.current.scrollTo({ ...scrollConfig, align: 'auto' });
jest.runAllTimers();
expect(scrollTop).toEqual(120);
});
it('in range', () => {
Expand All @@ -117,6 +130,7 @@ describe('List.Scroll', () => {
.simulate('scroll');
expect(onScroll).toHaveBeenCalled();
listRef.current.scrollTo({ ...scrollConfig, align: 'auto' });
jest.runAllTimers();
expect(scrollTop).toEqual(150);
});
});
Expand Down