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

feat: table组件优化
thundersdata-frontend · Nov 20, 2023 · 652ce70 · 652ce70
2 parents 69249b8 + ae43aa0
commit 652ce70
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 19 deletions.
diff --git a/.changeset/lemon-socks-raise.md b/.changeset/lemon-socks-raise.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+feat: lego的table组件的优化
diff --git a/packages/lego/example/TableDemo/demo1.tsx b/packages/lego/example/TableDemo/demo1.tsx
@@ -85,12 +85,13 @@ const columns = [
 
 export default () => {
   return (
-    <Table
-      data={data}
-      columns={columns}
-      height={120}
-      pageSize={4}
-      autoplay={true}
-    />
+    <div style={{ width: '100%', height: 200 }}>
+      <Table
+        data={data}
+        columns={columns}
+        pageSize={4}
+        autoplay={true}
+      />
+    </div>
   );
 };
diff --git a/packages/lego/src/table/index.less b/packages/lego/src/table/index.less
@@ -1,15 +1,17 @@
 .td-lego-table-container {
   box-sizing: border-box;
   width: 100%;
-  height: calc(~'100% - 36px');
+  height: 100%;
   padding: 8px;
 
   .table-view {
     padding: 3px;
     background-size: 100% 100%;
+    height: 100%;
 
     .td-lego-table-header {
       width: 100%;
+      height: 36px;
       color: #fff;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
@@ -30,6 +32,9 @@
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
+      /** 100% */
+      height: 100%;
+
       .text {
         text-align: center;
       }

diff --git a/packages/lego/src/table/index.md b/packages/lego/src/table/index.md
@@ -15,7 +15,7 @@ group:
 | --- | --- | --- | --- | --- |
 | columns | `true` | 列数据 | `Column[]` |  |
 | data | `true` | 数据源 | `T[]` |  |
-| height | `true` | 除了表头的表格内容高度 | `number` |  |
+| height | `false` | 除了表头的表格内容高度, 如果不填默认撑满父组件 | `number` | `calc(100% - 36px)` |
 | pageSize | `true` | 每屏显示几条数据 | `number` |  |
 | speed | `false` | 速度（ms） | `number` |  |
 | autoplay | `false` | 自动轮播, 注：pageSize必须小于等于数量的一半才能自动轮播 | `boolean` |  |

diff --git a/packages/lego/src/table/index.tsx b/packages/lego/src/table/index.tsx
@@ -28,7 +28,7 @@ export type CustomTableProps<T> = {
   /** 数据源 */
   data: T[];
   /** 容器高度 */
-  height: number;
+  height?: number;
   /** 每屏显示几条数据 */
   pageSize: number;
   /** 速度（ms） */
@@ -48,7 +48,7 @@ export type CustomTableProps<T> = {
 function Table<T extends Record<string, any>>({
   columns = [],
   data = [],
-  height,
+  height = 0,
   pageSize = 1,
   speed = 1000,
   autoplay = true,
@@ -68,18 +68,21 @@ function Table<T extends Record<string, any>>({
   };
 
   const slidesPerViewParams = pageSize > data.length ? data.length : pageSize;
-  const lineHeight = height / slidesPerViewParams;
+
+  const bgHeight: string = height
+    ? `${(height / slidesPerViewParams) * 2}px`
+    : `calc(100% / ${slidesPerViewParams / 2})`;
 
   return (
     <div className="td-lego-table-container">
-      <div style={{ width: '100%' }}>
+      <div style={{ width: '100%', height: '100%' }}>
         <div className="table-view">
           <div
             className={classnames('td-lego-table-header', headerClass)}
             style={{ backgroundColor: colors?.[2] ?? colors?.[1] }}
           >
             {!isEmpty(columns) && (
-              <div className="td-lego-table-content" style={{ height: lineHeight }}>
+              <div className="td-lego-table-content">
                 {columns.map(item => {
                   return (
                     <div
@@ -107,15 +110,15 @@ function Table<T extends Record<string, any>>({
             style={{
               // 如果直接设置background，切换colors会报错（background和backgroundSize属性冲突）
               backgroundImage: `linear-gradient( ${colors[0]} 50%, ${colors[1]} 0)`,
-              backgroundSize: `100% ${2 * lineHeight}px`,
-              height,
+              backgroundSize: `100% ${bgHeight}`,
+              height: `${height === 0 ? 'calc(100% - 36px)' : height}`,
               overflow: autoplay ? 'hidden' : 'auto',
             }}
           >
             {!isEmpty(data) && !isEmpty(columns) && (
               <Container
                 {...{
-                  height,
+                  height: `${height ? height + 'px' : '100%'}`,
                   pageSize: slidesPerViewParams,
                   speed,
                   autoplay,
@@ -129,7 +132,6 @@ function Table<T extends Record<string, any>>({
                         style={{
                           ...theme.typography[inModal ? 'p0' : 'p2'],
                           lineHeight: inModal ? '25px' : '19px',
-                          height: lineHeight,
                         }}
                       >
                         {columns.map(term => {
@@ -142,6 +144,7 @@ function Table<T extends Record<string, any>>({
                                   width: term.width || `${100 / columns?.length}%`,
                                   flex: term.flex,
                                 }),
+                                alignItems: 'center',
                                 textAlign: term.textAlign,
                               }}
                             >
@@ -170,7 +173,7 @@ const Container = memo(
     speed,
     children,
   }: PropsWithChildren<{
-    height: number;
+    height: string | number;
     pageSize: number;
     autoplay: boolean;
     speed: number;