Skip to content

Commit d7e94e3

Browse files
zombieJzombieJ
committed
rename dataSource to data
1 parent ac8d2bb commit d7e94e3

File tree

8 files changed

+117
-48
lines changed

8 files changed

+117
-48
lines changed

‎examples/animate.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
// @ts-ignore
33
import CSSMotion from 'rc-animate/lib/CSSMotion';
44
import classNames from 'classnames';
5-
import List, { ScrollInfo } from '../src/List';
5+
import List from '../src/List';
66
import './animate.less';
77

88
let uuid = 0;
@@ -15,9 +15,9 @@ function genItem() {
1515
return item;
1616
}
1717

18-
const originDataSource: Item[] = [];
18+
const originData: Item[] = [];
1919
for (let i = 0; i < 100000; i += 1) {
20-
originDataSource.push(genItem());
20+
originData.push(genItem());
2121
}
2222

2323
interface Item {
@@ -100,7 +100,7 @@ const MyItem: React.FC<MyItemProps> = (
100100
const ForwardMyItem = React.forwardRef(MyItem);
101101

102102
const Demo = () => {
103-
const [dataSource, setDataSource] = React.useState(originDataSource);
103+
const [data, setData] = React.useState(originData);
104104
const [closeMap, setCloseMap] = React.useState<{ [id: number]: boolean }>({});
105105
const [animating, setAnimating] = React.useState(false);
106106
const [insertIndex, setInsertIndex] = React.useState<number>();
@@ -115,8 +115,8 @@ const Demo = () => {
115115
};
116116

117117
const onLeave = (id: string) => {
118-
const newDataSource = dataSource.filter(item => item.id !== id);
119-
setDataSource(newDataSource);
118+
const newData = data.filter(item => item.id !== id);
119+
setData(newData);
120120
};
121121

122122
const onAppear = (...args: any[]) => {
@@ -128,28 +128,28 @@ const Demo = () => {
128128
}
129129

130130
const onInsertBefore = (id: string) => {
131-
const index = dataSource.findIndex(item => item.id === id);
132-
const newDataSource = [...dataSource.slice(0, index), genItem(), ...dataSource.slice(index)];
131+
const index = data.findIndex(item => item.id === id);
132+
const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
133133
setInsertIndex(index);
134-
setDataSource(newDataSource);
134+
setData(newData);
135135
lockForAnimation();
136136
};
137137
const onInsertAfter = (id: string) => {
138-
const index = dataSource.findIndex(item => item.id === id) + 1;
139-
const newDataSource = [...dataSource.slice(0, index), genItem(), ...dataSource.slice(index)];
138+
const index = data.findIndex(item => item.id === id) + 1;
139+
const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
140140
setInsertIndex(index);
141-
setDataSource(newDataSource);
141+
setData(newData);
142142
lockForAnimation();
143143
};
144144

145145
return (
146146
<React.StrictMode>
147147
<div>
148148
<h2>Animate</h2>
149-
<p>Current: {dataSource.length} records</p>
149+
<p>Current: {data.length} records</p>
150150

151151
<List<Item>
152-
dataSource={dataSource}
152+
data={data}
153153
data-id="list"
154154
height={200}
155155
itemHeight={30}

‎examples/basic.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ class TestItem extends React.Component<{ id: number }> {
3131
}
3232
}
3333

34-
const dataSource: Item[] = [];
34+
const data: Item[] = [];
3535
for (let i = 0; i < 100; i += 1) {
36-
dataSource.push({
36+
data.push({
3737
id: i,
3838
});
3939
}
@@ -65,7 +65,7 @@ const Demo = () => {
6565
))}
6666

6767
<List
68-
dataSource={dataSource}
68+
data={data}
6969
height={200}
7070
itemHeight={30}
7171
itemKey="id"

‎examples/height.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ const MyItem: React.FC<Item> = ({ id, height }, ref) => {
2626

2727
const ForwardMyItem = React.forwardRef(MyItem);
2828

29-
const dataSource: Item[] = [];
29+
const data: Item[] = [];
3030
for (let i = 0; i < 100; i += 1) {
31-
dataSource.push({
31+
data.push({
3232
id: i,
3333
height: 30 + (i % 2 ? 70 : 0),
3434
});
@@ -41,7 +41,7 @@ const Demo = () => {
4141
<h2>Dynamic Height</h2>
4242

4343
<List
44-
dataSource={dataSource}
44+
data={data}
4545
height={500}
4646
itemHeight={30}
4747
itemKey="id"

‎examples/without-height.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react';
2+
import List from '../src/List';
3+
4+
interface Item {
5+
id: number;
6+
height: number;
7+
}
8+
9+
const MyItem: React.FC<Item> = ({ id, height }, ref) => {
10+
return (
11+
<span
12+
ref={ref}
13+
style={{
14+
border: '1px solid gray',
15+
padding: '0 16px',
16+
height,
17+
lineHeight: '30px',
18+
boxSizing: 'border-box',
19+
display: 'inline-block',
20+
}}
21+
>
22+
{id}
23+
</span>
24+
);
25+
};
26+
27+
const ForwardMyItem = React.forwardRef(MyItem);
28+
29+
const data: Item[] = [];
30+
for (let i = 0; i < 100; i += 1) {
31+
data.push({
32+
id: i,
33+
height: 30 + (i % 2 ? 20 : 0),
34+
});
35+
}
36+
37+
const Demo = () => {
38+
return (
39+
<React.StrictMode>
40+
<div>
41+
<h2>Without Height</h2>
42+
43+
<List
44+
data={data}
45+
itemHeight={30}
46+
itemKey="id"
47+
style={{
48+
border: '1px solid red',
49+
boxSizing: 'border-box',
50+
}}
51+
>
52+
{item => <ForwardMyItem {...item} />}
53+
</List>
54+
</div>
55+
</React.StrictMode>
56+
);
57+
};
58+
59+
export default Demo;

‎src/List.tsx‎

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface ScrollInfo {
3030

3131
export interface ListProps<T> extends React.HTMLAttributes<any> {
3232
children: RenderFunc<T>;
33-
dataSource: T[];
33+
data: T[];
3434
height?: number;
3535
itemHeight?: number;
3636
itemKey: string;
@@ -50,7 +50,7 @@ interface ListState<T> {
5050
endIndex: number;
5151
/**
5252
* Calculated by `scrollTop`.
53-
* We cache in the state since if `dataSource` length change,
53+
* We cache in the state since if `data` length change,
5454
* we need revert back to the located item index.
5555
*/
5656
startItemTop: number;
@@ -80,7 +80,7 @@ interface ListState<T> {
8080
class List<T> extends React.Component<ListProps<T>, ListState<T>> {
8181
static defaultProps = {
8282
itemHeight: 15,
83-
dataSource: [],
83+
data: [],
8484
};
8585

8686
state: ListState<T> = {
@@ -106,7 +106,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
106106

107107
/**
108108
* Lock scroll process with `onScroll` event.
109-
* This is used for `dataSource` length change and `scrollTop` restore
109+
* This is used for `data` length change and `scrollTop` restore
110110
*/
111111
lockScroll: boolean = false;
112112

@@ -124,8 +124,8 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
124124
*/
125125
public componentDidUpdate() {
126126
const { status } = this.state;
127-
const { dataSource, height, itemHeight, disabled } = this.props;
128-
const prevDataSource: T[] = this.cachedProps.dataSource || [];
127+
const { data, height, itemHeight, disabled } = this.props;
128+
const prevData: T[] = this.cachedProps.data || [];
129129

130130
if (disabled) {
131131
return;
@@ -161,10 +161,10 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
161161
}
162162

163163
/**
164-
* Re-calculate the item position since `dataSource` length changed.
164+
* Re-calculate the item position since `data` length changed.
165165
* [IMPORTANT] We use relative position calculate here.
166166
*/
167-
if (prevDataSource.length !== dataSource.length && height) {
167+
if (prevData.length !== data.length && height) {
168168
const {
169169
itemIndex: originItemIndex,
170170
itemOffsetPtg: originItemOffsetPtg,
@@ -183,19 +183,15 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
183183
itemElementHeights: this.itemElementHeights,
184184
scrollPtg: getScrollPercentage({
185185
scrollTop: originScrollTop,
186-
scrollHeight: prevDataSource.length * itemHeight,
186+
scrollHeight: prevData.length * itemHeight,
187187
clientHeight: this.listRef.current.clientHeight,
188188
}),
189189
clientHeight: this.listRef.current.clientHeight,
190190
getItemKey: (index: number) => this.getIndexKey(index, this.cachedProps),
191191
});
192192

193193
// 2. Find the compare item
194-
const changedItemIndex: number = findListDiffIndex(
195-
prevDataSource,
196-
dataSource,
197-
this.getItemKey,
198-
);
194+
const changedItemIndex: number = findListDiffIndex(prevData, data, this.getItemKey);
199195
let originCompareItemIndex = changedItemIndex - 1;
200196
// Use next one since there are not more item before removed
201197
if (originCompareItemIndex < 0) {
@@ -226,7 +222,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
226222
* Phase 2: Trigger render since we should re-calculate current position.
227223
*/
228224
public onScroll = () => {
229-
const { dataSource, height, itemHeight, disabled } = this.props;
225+
const { data, height, itemHeight, disabled } = this.props;
230226

231227
const { scrollTop: originScrollTop, clientHeight, scrollHeight } = this.listRef.current;
232228
const scrollTop = alignScrollTop(originScrollTop, scrollHeight - clientHeight);
@@ -241,7 +237,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
241237

242238
const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(
243239
scrollPtg,
244-
dataSource.length,
240+
data.length,
245241
visibleCount,
246242
);
247243

@@ -257,14 +253,14 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
257253

258254
public getIndexKey = (index: number, props?: Partial<ListProps<T>>) => {
259255
const mergedProps = props || this.props;
260-
const { dataSource = [] } = mergedProps;
256+
const { data = [] } = mergedProps;
261257

262258
// Return ghost key as latest index item
263-
if (index === dataSource.length) {
259+
if (index === data.length) {
264260
return GHOST_ITEM_KEY;
265261
}
266262

267-
const item = dataSource[index];
263+
const item = data[index];
268264
if (!item) {
269265
console.error('Not find index item. Please report this since it is a bug.');
270266
}
@@ -296,7 +292,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
296292
} else if (typeof arg === 'object') {
297293
const { itemIndex: compareItemIndex, relativeTop: compareItemRelativeTop } = arg;
298294
const { scrollTop: originScrollTop } = this.state;
299-
const { dataSource, itemHeight, height } = this.props;
295+
const { data, itemHeight, height } = this.props;
300296

301297
// 1. Find the best match compare item top
302298
let bestSimilarity = Number.MAX_VALUE;
@@ -308,7 +304,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
308304

309305
let missSimilarity = 0;
310306

311-
const scrollHeight = dataSource.length * itemHeight;
307+
const scrollHeight = data.length * itemHeight;
312308
const { clientHeight } = this.listRef.current;
313309
const maxScrollTop = scrollHeight - clientHeight;
314310

@@ -320,7 +316,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
320316

321317
const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(
322318
scrollPtg,
323-
dataSource.length,
319+
data.length,
324320
visibleCount,
325321
);
326322

@@ -418,7 +414,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
418414
component: Component = 'div',
419415
height,
420416
itemHeight,
421-
dataSource,
417+
data,
422418
children,
423419
itemKey,
424420
...restProps
@@ -432,21 +428,21 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
432428
};
433429

434430
// Render pure list if not set height or height is enough for all items
435-
if (height === undefined || dataSource.length * itemHeight <= height) {
431+
if (height === undefined || data.length * itemHeight <= height) {
436432
return (
437433
<Component style={mergedStyle} {...restProps}>
438-
<Filler height={height}>{this.renderChildren(dataSource, 0, children)}</Filler>
434+
<Filler height={height}>{this.renderChildren(data, 0, children)}</Filler>
439435
</Component>
440436
);
441437
}
442438

443439
const { status, startIndex, endIndex, startItemTop } = this.state;
444-
const contentHeight = dataSource.length * itemHeight * ITEM_SCALE_RATE;
440+
const contentHeight = data.length * itemHeight * ITEM_SCALE_RATE;
445441

446442
return (
447443
<Component style={mergedStyle} {...restProps} onScroll={this.onScroll} ref={this.listRef}>
448444
<Filler height={contentHeight} offset={status === 'MEASURE_DONE' ? startItemTop : 0}>
449-
{this.renderChildren(dataSource.slice(startIndex, endIndex + 1), startIndex, children)}
445+
{this.renderChildren(data.slice(startIndex, endIndex + 1), startIndex, children)}
450446
</Filler>
451447
</Component>
452448
);

‎src/utils/itemUtil.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
22

33
/**
44
* Our algorithm have additional one ghost item
5-
* whose index as `dataSource.length` to simplify the calculation
5+
* whose index as `data.length` to simplify the calculation
66
*/
77
export const GHOST_ITEM_KEY = '__rc_ghost_item__';
88

‎tests/scroll.test.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import List from '../src';
4+
5+
describe('List', () => {
6+
it('without height', () => {
7+
const wrapper = mount(<List data={[1]}>{id => <span>{id}</span>}</List>);
8+
});
9+
});

‎tests/util.test.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,10 @@ describe('Util', () => {
3838
for (let i = 0; i < 100; i += 1) {
3939
test(`diff index: ${i}`, 100, i);
4040
}
41+
42+
it('same list', () => {
43+
const list = [1, 2, 3, 4];
44+
expect(findListDiffIndex(list, list, num => num)).toEqual(null);
45+
});
4146
});
4247
});

0 commit comments

Comments
 (0)