Merge pull request #109 from js-tool-pack/transition-group-remove-transition

TransitionGroup v3

Author: mengxinssfd

.eslintignore

@@ -19,4 +19,5 @@ coverage
 pnpm-lock.yaml
 .output
 
-*.d.ts
+*.d.ts
+temp

commitlint.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
   // 以下是我们自定义的规则
   rules: {
     'type-enum': [
@@ -21,4 +20,5 @@ module.exports = {
       ],
     ],
   },
+  extends: ['@commitlint/config-conventional'],
 };

package.json

@@ -14,7 +14,7 @@
     "build:css-single": "pnpm -C packages/react-ui build:scss-single",
     "test": "pnpm -C packages/shared test && pnpm -C packages/components test",
     "eject": "react-scripts eject",
-    "check:lint": "eslint \"**/*.{ts,tsx}\"",
+    "check:lint": "eslint \"**/*.{ts,tsx}\" . --quiet",
     "check:ts": "tsc -p tsconfig.noEmit.json --noEmit",
     "check:ts-all": "pnpm check:ts & pnpm -r check:ts",
     "check:ts:lint": "npm run check:ts && npm run check:lint",

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

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

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

@@ -7,6 +7,15 @@ describe('TransitionGroup', () => {
   testAttrs(TransitionGroup);
 
   test('snap', () => {
+    const { container } = render(
+      <TransitionGroup>
+        <div>foo bar</div>
+        <div>foo-bar</div>
+      </TransitionGroup>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test('transition snap', () => {
     const { container } = render(
       <TransitionGroup>
         <Transition appear>

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

@@ -1,6 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransitionGroup snap 1`] = `
+<div
+  class="t-transition-group"
+>
+  <div
+    class=""
+  >
+    foo bar
+  </div>
+  <div
+    class=""
+  >
+    foo-bar
+  </div>
+</div>
+`;
+
+exports[`TransitionGroup transition snap 1`] = `
 <div
   class="t-transition-group"
 >

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

@@ -4,12 +4,7 @@
  * description: 点击列表内的按钮移除元素。
  */
 
-import {
-  TransitionGroup,
-  Transition,
-  Button,
-  Space,
-} from '@tool-pack/react-ui';
+import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
 import React, { useCallback, useState, useRef } from 'react';
 import styles from './all.module.scss';
 
@@ -61,9 +56,9 @@ const App: React.FC = () => {
       <TransitionGroup className="group-container" tag="section" name="group">
         {children.current.map((item) => {
           return (
-            <Transition key={item}>
-              <button onClick={() => removeChild(item)}>{item}</button>
-            </Transition>
+            <button onClick={() => removeChild(item)} key={item}>
+              {item}
+            </button>
           );
         })}
       </TransitionGroup>

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

@@ -2,12 +2,7 @@
  * title: 多维表格排序过渡
  */
 
-import {
-  TransitionGroup,
-  Transition,
-  Button,
-  Space,
-} from '@tool-pack/react-ui';
+import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
 import React, { useCallback, useState, useRef } from 'react';
 import styles from './flip.module.scss';
 
@@ -37,11 +32,7 @@ const App: React.FC = () => {
       <br />
       <TransitionGroup className="group-container" tag="section" name="group">
         {children.current.map((item) => {
-          return (
-            <Transition key={item}>
-              <button>{item}</button>
-            </Transition>
-          );
+          return <button key={item}>{item}</button>;
         })}
       </TransitionGroup>
     </div>

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

@@ -2,12 +2,7 @@
  * title: 列表过渡
  */
 
-import {
-  TransitionGroup,
-  Transition,
-  Button,
-  Space,
-} from '@tool-pack/react-ui';
+import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
 import React, { useCallback, useState, useRef } from 'react';
 import styles from './list.module.scss';
 
@@ -49,11 +44,7 @@ const App: React.FC = () => {
       <br />
       <TransitionGroup className="group-container" tag="section" name="group">
         {children.current.map((item) => {
-          return (
-            <Transition key={item}>
-              <div>{item}</div>
-            </Transition>
-          );
+          return <div key={item}>{item}</div>;
         })}
       </TransitionGroup>
     </div>

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

@@ -2,12 +2,7 @@
  * title: 排序过渡加列表过渡
  */
 
-import {
-  TransitionGroup,
-  Transition,
-  Button,
-  Space,
-} from '@tool-pack/react-ui';
+import { TransitionGroup, Button, Space } from '@tool-pack/react-ui';
 import React, { useCallback, useState, useRef } from 'react';
 import styles from './mixed.module.scss';
 
@@ -73,10 +68,10 @@ const App: React.FC = () => {
       <TransitionGroup className="group-container" tag="section" name="group">
         {children.current.map((item) => {
           return (
-            <Transition key={item}>
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-              <div onClick={() => removeChild(item)}>{item}</div>
-            </Transition>
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+            <div onClick={() => removeChild(item)} key={item}>
+              {item}
+            </div>
           );
         })}
       </TransitionGroup>