Skip to content

Commit 5a60bcb

Browse files
zombieJzombieJ
authored
refactor: Use function component (#41)
* init refactor * add virtual check * calculate item in range * show it * scroll of it * simple scroll to target * scroll to support * fix scrollTo logic * no disabled * move onSkipRender as onItemRemove * support skipRender * fix no virtual * fix memo of height * rm raf * basic test case * clean up * clean up * scroll coverage * enhance test coverage * fix lint * add miss mock
1 parent 7aae9e0 commit 5a60bcb

22 files changed

+602
-1388
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@ module.exports = {
1010
'no-dupe-class-members': 0,
1111
'react/sort-comp': 0,
1212
'no-confusing-arrow': 0,
13+
'no-unused-expressions': 0,
1314
},
1415
};

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ es/
66
lib/
77
~*
88
yarn.lock
9-
package-lock.json
9+
package-lock.json
10+
!tests/__mocks__/rc-util/lib

‎examples/animate.tsx‎

Lines changed: 67 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
/* eslint-disable arrow-body-style */
2+
13
import * as React from 'react';
24
// @ts-ignore
35
import CSSMotion from 'rc-animate/lib/CSSMotion';
46
import classNames from 'classnames';
5-
import List from '../src/List';
7+
import List, { ListRef } from '../src/List';
68
import './animate.less';
79

810
let uuid = 0;
@@ -41,58 +43,69 @@ const getMaxHeight = (node: HTMLElement) => {
4143
};
4244
const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
4345

44-
const MyItem: React.FC<MyItemProps> = (
45-
{ id, uuid, visible, onClose, onLeave, onAppear, onInsertBefore, onInsertAfter, motionAppear },
46+
const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
47+
{
48+
id,
49+
uuid: itemUuid,
50+
visible,
51+
onClose,
52+
onLeave,
53+
onAppear,
54+
onInsertBefore,
55+
onInsertAfter,
56+
motionAppear,
57+
},
4658
ref,
47-
) => {
48-
return (
49-
<CSSMotion
50-
visible={visible}
51-
ref={ref}
52-
motionName="motion"
53-
motionAppear={motionAppear}
54-
onAppearStart={getCollapsedHeight}
55-
onAppearActive={getMaxHeight}
56-
onAppearEnd={onAppear}
57-
onLeaveStart={getCurrentHeight}
58-
onLeaveActive={getCollapsedHeight}
59-
onLeaveEnd={() => {
60-
onLeave(id);
61-
}}
62-
>
63-
{({ className, style }, motionRef) => {
64-
return (
65-
<div ref={motionRef} className={classNames('item', className)} style={style} data-id={id}>
66-
<div style={{ height: uuid % 2 ? 100 : undefined }}>
67-
<button
68-
onClick={() => {
69-
onClose(id);
70-
}}
71-
>
72-
Close
73-
</button>
74-
<button
75-
onClick={() => {
76-
onInsertBefore(id);
77-
}}
78-
>
79-
Insert Before
80-
</button>
81-
<button
82-
onClick={() => {
83-
onInsertAfter(id);
84-
}}
85-
>
86-
Insert After
87-
</button>
88-
{id}
89-
</div>
59+
) => (
60+
<CSSMotion
61+
visible={visible}
62+
ref={ref}
63+
motionName="motion"
64+
motionAppear={motionAppear}
65+
onAppearStart={getCollapsedHeight}
66+
onAppearActive={getMaxHeight}
67+
onAppearEnd={onAppear}
68+
onLeaveStart={getCurrentHeight}
69+
onLeaveActive={getCollapsedHeight}
70+
onLeaveEnd={() => {
71+
onLeave(id);
72+
}}
73+
>
74+
{({ className, style }, motionRef) => {
75+
return (
76+
<div ref={motionRef} className={classNames('item', className)} style={style} data-id={id}>
77+
<div style={{ height: itemUuid % 2 ? 100 : undefined }}>
78+
<button
79+
type="button"
80+
onClick={() => {
81+
onClose(id);
82+
}}
83+
>
84+
Close
85+
</button>
86+
<button
87+
type="button"
88+
onClick={() => {
89+
onInsertBefore(id);
90+
}}
91+
>
92+
Insert Before
93+
</button>
94+
<button
95+
type="button"
96+
onClick={() => {
97+
onInsertAfter(id);
98+
}}
99+
>
100+
Insert After
101+
</button>
102+
{id}
90103
</div>
91-
);
92-
}}
93-
</CSSMotion>
94-
);
95-
};
104+
</div>
105+
);
106+
}}
107+
</CSSMotion>
108+
);
96109

97110
const ForwardMyItem = React.forwardRef(MyItem);
98111

@@ -102,7 +115,7 @@ const Demo = () => {
102115
const [animating, setAnimating] = React.useState(false);
103116
const [insertIndex, setInsertIndex] = React.useState<number>();
104117

105-
const listRef = React.useRef<List<Item>>();
118+
const listRef = React.useRef<ListRef>();
106119

107120
const onClose = (id: string) => {
108121
setCloseMap({
@@ -117,6 +130,7 @@ const Demo = () => {
117130
};
118131

119132
const onAppear = (...args: any[]) => {
133+
console.log('Appear:', args);
120134
setAnimating(false);
121135
};
122136

@@ -157,8 +171,8 @@ const Demo = () => {
157171
border: '1px solid red',
158172
boxSizing: 'border-box',
159173
}}
160-
161174
onSkipRender={onAppear}
175+
// onItemRemove={onAppear}
162176
>
163177
{(item, index) => (
164178
<ForwardMyItem

‎examples/basic.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const MyItem: React.FC<Item> = ({ id }, ref) => (
1212
style={{
1313
border: '1px solid gray',
1414
padding: '0 16px',
15-
height: 30,
15+
height: 30 + (id % 2 ? 0 : 10),
1616
lineHeight: '30px',
1717
boxSizing: 'border-box',
1818
display: 'inline-block',

‎examples/switch.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ function getData(count: number) {
3535
}
3636

3737
const Demo = () => {
38-
const [height, setHeight] = React.useState(200);
39-
const [data, setData] = React.useState(getData(2));
38+
const [height, setHeight] = React.useState(100);
39+
const [data, setData] = React.useState(getData(100));
4040

4141
return (
4242
<React.StrictMode>

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@
4545
"@types/classnames": "^2.2.10",
4646
"@types/enzyme": "^3.10.5",
4747
"@types/jest": "^25.1.3",
48-
"@types/raf": "^3.4.0",
4948
"@types/react": "^16.8.19",
5049
"@types/react-dom": "^16.8.4",
5150
"@types/warning": "^3.0.0",
5251
"cross-env": "^5.2.0",
5352
"enzyme": "^3.1.0",
5453
"enzyme-adapter-react-16": "^1.0.2",
5554
"enzyme-to-json": "^3.1.4",
55+
"eslint": "^7.6.0",
5656
"father": "^2.13.2",
5757
"np": "^5.0.3",
5858
"rc-animate": "^2.9.1",
@@ -62,7 +62,7 @@
6262
},
6363
"dependencies": {
6464
"classnames": "^2.2.6",
65-
"raf": "^3.4.1",
66-
"rc-util": "^5.0.0"
65+
"rc-resize-observer": "^0.2.3",
66+
"rc-util": "^5.0.7"
6767
}
6868
}

‎src/Filler.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import ResizeObserver from 'rc-resize-observer';
23
import classNames from 'classnames';
34

45
interface FillerProps {
@@ -9,6 +10,8 @@ interface FillerProps {
910
offset?: number;
1011

1112
children: React.ReactNode;
13+
14+
onInnerResize?: () => void;
1215
}
1316

1417
/**
@@ -19,6 +22,7 @@ const Filler: React.FC<FillerProps> = ({
1922
offset,
2023
children,
2124
prefixCls,
25+
onInnerResize,
2226
}): React.ReactElement => {
2327
let outerStyle: React.CSSProperties = {};
2428

@@ -42,14 +46,16 @@ const Filler: React.FC<FillerProps> = ({
4246

4347
return (
4448
<div style={outerStyle}>
45-
<div
46-
style={innerStyle}
47-
className={classNames({
48-
[`${prefixCls}-holder-inner`]: prefixCls,
49-
})}
50-
>
51-
{children}
52-
</div>
49+
<ResizeObserver onResize={onInnerResize}>
50+
<div
51+
style={innerStyle}
52+
className={classNames({
53+
[`${prefixCls}-holder-inner`]: prefixCls,
54+
})}
55+
>
56+
{children}
57+
</div>
58+
</ResizeObserver>
5359
</div>
5460
);
5561
};

0 commit comments

Comments
 (0)