Merge pull request #730 from thundersdata-frontend/feat/lego

fix: lego中table组件的优化
thundersdata-frontend · Sep 18, 2023 · aca6f67 · aca6f67
2 parents c15dd39 + 8d81a2f
commit aca6f67
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 17 deletions.
diff --git a/.changeset/famous-dolls-tap.md b/.changeset/famous-dolls-tap.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+lego中table组件的优化
diff --git a/packages/lego/example/TableDemo/demo1.tsx b/packages/lego/example/TableDemo/demo1.tsx
@@ -30,6 +30,34 @@ const data = [
     model: '200',
     money: '200元',
   },
+  {
+    id: 5,
+    brand: '维特根5',
+    name: '沥青摊铺机',
+    model: '200',
+    money: '12988元',
+  },
+  {
+    id: 6,
+    brand: '徐工6',
+    name: '履带式挖掘机',
+    model: 'XE80CA',
+    money: '862.2元',
+  },
+  {
+    id: 7,
+    brand: '维特根7',
+    name: '沥青摊铺机',
+    model: '200',
+    money: '200元',
+  },
+  {
+    id: 8,
+    brand: '维特根8',
+    name: '沥青摊铺机',
+    model: '200',
+    money: '200元',
+  },
 ];
 
 const columns = [
@@ -60,8 +88,8 @@ export default () => {
     <Table
       data={data}
       columns={columns}
-      height={200}
-      countPreview={6}
+      height={120}
+      pageSize={4}
       autoplay={true}
     />
   );

diff --git a/packages/lego/example/TableDemo/demo2.tsx b/packages/lego/example/TableDemo/demo2.tsx
@@ -74,7 +74,7 @@ export default () => {
           data={data}
           columns={columns}
           height={200}
-          countPreview={4}
+          pageSize={4}
         />
       </Modal>
     </>

diff --git a/packages/lego/example/TableDemo/demo3.tsx b/packages/lego/example/TableDemo/demo3.tsx
@@ -63,7 +63,7 @@ export default () => {
         columns={columns}
         colors={['red', 'blue', 'green']}
         height={200}
-        countPreview={4}
+        pageSize={4}
       />
     </>
   );

diff --git a/packages/lego/example/TableDemo/demo4.tsx b/packages/lego/example/TableDemo/demo4.tsx
@@ -104,5 +104,5 @@ const columns = [
 ];
 
 export default () => {
-  return <Table data={data} columns={columns} height={210} countPreview={7} />;
+  return <Table data={data} columns={columns} height={210} pageSize={7} />;
 };
diff --git a/packages/lego/example/TableDemo/demo5.tsx b/packages/lego/example/TableDemo/demo5.tsx
@@ -98,7 +98,7 @@ export default () => {
       columns={columns}
       autoplay={false}
       height={200}
-      countPreview={4}
+      pageSize={4}
     />
   );
 };
diff --git a/packages/lego/example/TableDemo/demo6.tsx b/packages/lego/example/TableDemo/demo6.tsx
@@ -107,7 +107,7 @@ export default () => {
       data={data}
       columns={columns}
       height={200}
-      countPreview={4}
+      pageSize={4}
       autoplay={false}
       headerClass="header"
       contentClass="content"

diff --git a/packages/lego/src/table/index.md b/packages/lego/src/table/index.md
@@ -15,11 +15,11 @@ group:
 | ------------ | ------- | ---------------------- | ---------------------------------------------- | ------ |
 | columns      | `true`  | 列数据                 | `Column[]`                                     |        |
 | data         | `true`  | 数据源                 | `T[]`                                          |        |
+| height       | `true`  | 除了表头的表格内容高度 | `number`                                       |        |
+| pageSize     | `true`  | 每屏显示几条数据       | `number`                                       |        |
 | speed        | `false` | 速度（ms）             | `number`                                       |        |
 | autoplay     | `false` | 自动轮播               | `boolean`                                      |        |
 | inModal      | `false` | 是否在弹窗中           | `boolean`                                      |        |
-| lineHeight   | `false` | 自定义行高             | `number`                                       |        |
-| height       | `false` | 除了表头的表格内容高度 | `number`                                       |        |
 | colors       | `false` | 自定义颜色             | `[string, string] \| [string, string, string]` |        |
 | headerClass  | `false` | 表头的类               | `string`                                       |        |
 | contentClass | `false` | 内容的类               | `string`                                       |        |

diff --git a/packages/lego/src/table/index.tsx b/packages/lego/src/table/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import React, { memo, PropsWithChildren, ReactElement } from 'react';
 
 import classnames from 'classnames';
 import { isEmpty } from 'lodash-es';
@@ -30,7 +30,7 @@ export type CustomTableProps<T> = {
   /** 容器高度 */
   height: number;
   /** 每屏显示几条数据 */
-  countPreview: number;
+  pageSize: number;
   /** 速度（ms） */
   speed?: number;
   /** 自动轮播 */
@@ -49,7 +49,7 @@ function Table<T extends Record<string, any>>({
   columns = [],
   data = [],
   height,
-  countPreview = 1,
+  pageSize = 1,
   speed = 1000,
   autoplay = true,
   inModal = false,
@@ -67,7 +67,7 @@ function Table<T extends Record<string, any>>({
     return { width };
   };
 
-  const slidesPerViewParams = countPreview > data?.length ?? 0 ? countPreview : data.length;
+  const slidesPerViewParams = pageSize > data.length ? data.length : pageSize;
   const lineHeight = height / slidesPerViewParams;
 
   return (
@@ -116,7 +116,7 @@ function Table<T extends Record<string, any>>({
               <Container
                 {...{
                   height,
-                  countPreview: slidesPerViewParams,
+                  pageSize: slidesPerViewParams,
                   speed,
                   autoplay,
                 }}
@@ -165,21 +165,21 @@ function Table<T extends Record<string, any>>({
 const Container = memo(
   ({
     height,
-    countPreview,
+    pageSize,
     autoplay,
     speed,
     children,
   }: PropsWithChildren<{
     height: number;
-    countPreview: number;
+    pageSize: number;
     autoplay: boolean;
     speed: number;
   }>) => {
     return (
       <Swiper
         direction={'vertical'}
         modules={[Autoplay]}
-        slidesPerView={countPreview}
+        slidesPerView={pageSize}
         spaceBetween={0}
         loop
         autoplay={