Skip to content

Commit 5e5235f

Browse files
mengxinssfdmengxinssfd
authored
Merge pull request #109 from js-tool-pack/transition-group-remove-transition
TransitionGroup v3
2 parents f3c4f39 + 351c54a commit 5e5235f

18 files changed

+280
-208
lines changed

‎.eslintignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@ coverage
1919
pnpm-lock.yaml
2020
.output
2121

22-
*.d.ts
22+
*.d.ts
23+
temp

‎commitlint.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
module.exports = {
2-
extends: ['@commitlint/config-conventional'],
32
// 以下是我们自定义的规则
43
rules: {
54
'type-enum': [
@@ -21,4 +20,5 @@ module.exports = {
2120
],
2221
],
2322
},
23+
extends: ['@commitlint/config-conventional'],
2424
};

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"build:css-single": "pnpm -C packages/react-ui build:scss-single",
1515
"test": "pnpm -C packages/shared test && pnpm -C packages/components test",
1616
"eject": "react-scripts eject",
17-
"check:lint": "eslint \"**/*.{ts,tsx}\"",
17+
"check:lint": "eslint \"**/*.{ts,tsx}\" . --quiet",
1818
"check:ts": "tsc -p tsconfig.noEmit.json --noEmit",
1919
"check:ts-all": "pnpm check:ts & pnpm -r check:ts",
2020
"check:ts:lint": "npm run check:ts && npm run check:lint",

‎packages/components/src/transition-group/TransitionGroup.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import type { FC } from 'react';
1010
* v2版参考了 {@link https://github.com/peoplesing1832/react-transition/blob/npm/src/v4/TransitionGroup.tsx} 该实现。
1111
*
1212
* 相比 v1 版， v2 需要元素外部套 Transition 组件，可随机插入(v1不行)，动画更流畅。
13+
* v3版已移除在外部套 Transition 组件的方式
1314
*
14-
* 目前还是不够完美，以后需要再次优化。。。
15+
* 目前 v3 还是跟 vue 的有差距，还是不够完美，以后需要再次优化。。。
1516
*/
1617

1718
const defaultProps = {

‎packages/components/src/transition-group/__tests__/TransitionGroup.test.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@ describe('TransitionGroup', () => {
77
testAttrs(TransitionGroup);
88

99
test('snap', () => {
10+
const { container } = render(
11+
<TransitionGroup>
12+
<div>foo bar</div>
13+
<div>foo-bar</div>
14+
</TransitionGroup>,
15+
);
16+
expect(container.firstChild).toMatchSnapshot();
17+
});
18+
test('transition snap', () => {
1019
const { container } = render(
1120
<TransitionGroup>
1221
<Transition appear>

‎packages/components/src/transition-group/__tests__/__snapshots__/TransitionGroup.test.tsx.snap

+17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`TransitionGroup snap 1`] = `
4+
<div
5+
class="t-transition-group"
6+
>
7+
<div
8+
class=""
9+
>
10+
foo bar
11+
</div>
12+
<div
13+
class=""
14+
>
15+
foo-bar
16+
</div>
17+
</div>
18+
`;
19+
20+
exports[`TransitionGroup transition snap 1`] = `
421
<div
522
class="t-transition-group"
623
>

‎packages/components/src/transition-group/demo/all.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@
44
* description: 点击列表内的按钮移除元素。
55
*/
66

7-
import {
8-
TransitionGroup,
9-
Transition,
10-
Button,
11-
Space,
12-
} from '@tool-pack/react-ui';
7+
import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
138
import React, { useCallback, useState, useRef } from 'react';
149
import styles from './all.module.scss';
1510

@@ -61,9 +56,9 @@ const App: React.FC = () => {
6156
<TransitionGroup className="group-container" tag="section" name="group">
6257
{children.current.map((item) => {
6358
return (
64-
<Transition key={item}>
65-
<button onClick={() => removeChild(item)}>{item}</button>
66-
</Transition>
59+
<button onClick={() => removeChild(item)} key={item}>
60+
{item}
61+
</button>
6762
);
6863
})}
6964
</TransitionGroup>

‎packages/components/src/transition-group/demo/flip.tsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
* title: 多维表格排序过渡
33
*/
44

5-
import {
6-
TransitionGroup,
7-
Transition,
8-
Button,
9-
Space,
10-
} from '@tool-pack/react-ui';
5+
import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
116
import React, { useCallback, useState, useRef } from 'react';
127
import styles from './flip.module.scss';
138

@@ -37,11 +32,7 @@ const App: React.FC = () => {
3732
<br />
3833
<TransitionGroup className="group-container" tag="section" name="group">
3934
{children.current.map((item) => {
40-
return (
41-
<Transition key={item}>
42-
<button>{item}</button>
43-
</Transition>
44-
);
35+
return <button key={item}>{item}</button>;
4536
})}
4637
</TransitionGroup>
4738
</div>

‎packages/components/src/transition-group/demo/list.tsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
* title: 列表过渡
33
*/
44

5-
import {
6-
TransitionGroup,
7-
Transition,
8-
Button,
9-
Space,
10-
} from '@tool-pack/react-ui';
5+
import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
116
import React, { useCallback, useState, useRef } from 'react';
127
import styles from './list.module.scss';
138

@@ -49,11 +44,7 @@ const App: React.FC = () => {
4944
<br />
5045
<TransitionGroup className="group-container" tag="section" name="group">
5146
{children.current.map((item) => {
52-
return (
53-
<Transition key={item}>
54-
<div>{item}</div>
55-
</Transition>
56-
);
47+
return <div key={item}>{item}</div>;
5748
})}
5849
</TransitionGroup>
5950
</div>

‎packages/components/src/transition-group/demo/mixed.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
* title: 排序过渡加列表过渡
33
*/
44

5-
import {
6-
TransitionGroup,
7-
Transition,
8-
Button,
9-
Space,
10-
} from '@tool-pack/react-ui';
5+
import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
116
import React, { useCallback, useState, useRef } from 'react';
127
import styles from './mixed.module.scss';
138

@@ -73,10 +68,10 @@ const App: React.FC = () => {
7368
<TransitionGroup className="group-container" tag="section" name="group">
7469
{children.current.map((item) => {
7570
return (
76-
<Transition key={item}>
77-
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
78-
<div onClick={() => removeChild(item)}>{item}</div>
79-
</Transition>
71+
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
72+
<div onClick={() => removeChild(item)} key={item}>
73+
{item}
74+
</div>
8075
);
8176
})}
8277
</TransitionGroup>

‎packages/components/src/transition-group/demo/shuffle.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* title: 排序过渡
33
*/
44

5-
import { TransitionGroup, Transition, Button } from '@tool-pack/react-ui';
5+
import { TransitionGroup, Button } from '@tool-pack/react-ui';
66
import React, { useCallback, useState, useRef } from 'react';
77
import styles from './shuffle.module.scss';
88

@@ -29,11 +29,7 @@ const App: React.FC = () => {
2929
<br />
3030
<TransitionGroup className="group-container" tag="section" name="group">
3131
{children.current.map((item) => {
32-
return (
33-
<Transition key={item}>
34-
<div>{item}</div>
35-
</Transition>
36-
);
32+
return <div key={item}>{item}</div>;
3733
})}
3834
</TransitionGroup>
3935
</div>

‎packages/components/src/transition-group/demo/tag.tsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
* description: 默认标签为 div，可设置 tag 为其它标签，当 tag 为 null 时，移除包裹元素
44
*/
55

6-
import {
7-
TransitionGroup,
8-
Transition,
9-
Button,
10-
Space,
11-
} from '@tool-pack/react-ui';
6+
import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
127
import React, { useCallback, useState, useRef } from 'react';
138
import styles from './list.module.scss';
149

@@ -51,11 +46,7 @@ const App: React.FC = () => {
5146
<div className="group-container">
5247
<TransitionGroup name="group" tag={null}>
5348
{children.current.map((item) => {
54-
return (
55-
<Transition key={item}>
56-
<div>{item}</div>
57-
</Transition>
58-
);
49+
return <div key={item}>{item}</div>;
5950
})}
6051
</TransitionGroup>
6152
</div>

‎packages/components/src/transition-group/demo/transition.tsx

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* title: transition
3+
* description: 手动搭配 Transition 使用(在 TransitionGroup 内部列表条目也是包裹了 Transition 的)
4+
*/
5+
6+
import {
7+
transitionCBAdapter,
8+
TransitionGroup,
9+
Transition,
10+
Button,
11+
Space,
12+
} from '@tool-pack/react-ui';
13+
import React, { useState, useRef } from 'react';
14+
import styles from './list.module.scss';
15+
16+
const App: React.FC = () => {
17+
const [list, setList] = useState<number[]>([
18+
...Array.from({ length: 10 }).keys(),
19+
]);
20+
21+
const index = useRef(list.length);
22+
function addChild() {
23+
const splice = list.splice(~~(Math.random() * list.length), list.length);
24+
list.push(index.current);
25+
list.push(...splice);
26+
index.current++;
27+
setList(list.slice());
28+
}
29+
function removeChild(item: number) {
30+
const index = list.indexOf(item);
31+
if (index === -1) return;
32+
list.splice(index, 1);
33+
setList(list.slice());
34+
}
35+
function removeRandomChild() {
36+
removeChild(list[~~(Math.random() * list.length)]!);
37+
}
38+
39+
return (
40+
<div className={styles['root']}>
41+
<Space style={{ justifyContent: 'center' }}>
42+
<Button onClick={addChild} type="primary">
43+
添加
44+
</Button>
45+
<Button onClick={removeRandomChild} type="warning" plain>
46+
移除
47+
</Button>
48+
</Space>
49+
<br />
50+
<TransitionGroup className="group-container" tag="section" name="group">
51+
{list.map((item) => {
52+
return (
53+
<Transition
54+
on={transitionCBAdapter({
55+
onBeforeEnter() {
56+
console.log(item + '正在进来');
57+
},
58+
onBeforeLeave() {
59+
console.log(item + '正在离去');
60+
},
61+
onAfterEnter() {
62+
console.log(item + '已进来');
63+
},
64+
onAfterLeave() {
65+
console.log(item + '已离去');
66+
},
67+
})}
68+
key={item}
69+
>
70+
<div>{item}</div>
71+
</Transition>
72+
);
73+
})}
74+
</TransitionGroup>
75+
</div>
76+
);
77+
};
78+
79+
export default App;

0 commit comments

Comments
 (0)