Merge branch 'main' of github.com:DouyinFE/semi-design

packages/semi-foundation/table/table.scss

@@ -209,15 +209,19 @@ $module: #{$prefix}-table;
         display: table-row-group;
         & > .#{$module}-row {
             display: table-row;
+            background-color: $color-table_body-bg-default;
 
             &:hover {
                 & > .#{$module}-row-cell {
-                    background-color: $color-table_body-bg-hover;
+                    // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
+                    // combine background-image and background-color to make the non-fixed column color does not show through the bottom color
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
 
                     &.#{$module}-cell-fixed {
                         &-left,
                         &-right {
-                            background-color: $color-table_body-bg-default;
+                            background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
@@ -246,7 +250,6 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
-                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

packages/semi-foundation/table/utils.ts

@@ -2,7 +2,6 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable eqeqeq */
 import {
-    cloneDeepWith,
     isEqualWith,
     get,
     filter,
@@ -21,17 +20,6 @@ import isNullOrUndefined from '../utils/isNullOrUndefined';
 import Logger from '../utils/Logger';
 
 
-export function cloneDeep(value: any, customizer?: (v: any) => any) {
-    return cloneDeepWith(value, v => {
-        if (typeof v === 'function') {
-            return v;
-        } else if (typeof customizer === 'function') {
-            return customizer(v);
-        }
-        return undefined;
-    });
-}
-
 export function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean) {
     return isEqualWith(value, other, (objVal, othVal, ...rest) => {
         if (typeof objVal === 'function' && typeof othVal === 'function') {
@@ -61,36 +49,6 @@ export function getColumnKey(column: any, keyPropNames: any[]): any {
     return key;
 }
 
-export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], keyPropNames: any[] = null, deep = true) {
-    const finalColumns: any[] = [];
-    const clone = deep ? cloneDeep : lodashClone;
-
-    if (deep) {
-        const logger = new Logger('[@douyinfe/semi-ui Table]');
-        logger.warn('Should not deep merge columns from foundation since columns may have react elements. Merge columns deep from semi-ui');
-    }
-
-    map(newColumns, newColumn => {
-        newColumn = { ...newColumn };
-        const key = getColumnKey(newColumn, keyPropNames);
-
-        const oldColumn = key != null && find(oldColumns, item => getColumnKey(item, keyPropNames) === key);
-
-        if (oldColumn) {
-            finalColumns.push(
-                clone({
-                    ...oldColumn,
-                    ...newColumn,
-                })
-            );
-        } else {
-            finalColumns.push(clone(newColumn));
-        }
-    });
-
-    return finalColumns;
-}
-
 /**
  *
  * @param {Array<number>} arr
@@ -437,7 +395,7 @@ export function mergeQueries(query: Record<string, any>, queries: Record<string,
  * @param {Object[]} newColumns
  */
 export function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]) {
-    const _newColumns = cloneDeep(newColumns);
+    const _newColumns = { ...newColumns };
     for (const column of columns) {
         if (!isNullOrUndefined(column.width)) {
             const currentColumn = column.key;

packages/semi-foundation/table/variables.scss

@@ -75,6 +75,8 @@ $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
 $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
+$color-table_cell-bg-hover: var(--semi-color-bg-0); // 让表格在 hover 时正确显示 $color-table_body-bg-hover 颜色，如无必要不要修改
+
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式

packages/semi-ui/table/Table.tsx

@@ -30,7 +30,6 @@ import {
 import {
     mergeQueries,
     equalWith,
-    mergeColumns,
     isAnyFixedRight,
     assignColumnKeys,
     flattenColumns,
@@ -56,7 +55,7 @@ import ColumnSorter from './ColumnSorter';
 import ExpandedIcon from './CustomExpandIcon';
 import HeadTable, { HeadTableProps } from './HeadTable';
 import BodyTable, { BodyProps } from './Body';
-import { logger, cloneDeep, mergeComponents } from './utils';
+import { logger, cloneDeep, mergeComponents, mergeColumns } from './utils';
 import {
     ColumnProps,
     TablePaginationProps,

packages/semi-ui/table/_story/v2/index.js

@@ -13,4 +13,5 @@ export { default as FixedSorter } from './FixedSorter';
 export { default as stickyHeaderTable } from './stickyHeader';
 export { default as Fixed1188 } from './Fixed1188';
 export { default as EmptyFilters } from './emptyFilters';
-export { default as fixedResizableWithForm } from './fixedResizableWithForm';
+export { default as fixedResizableWithForm } from './fixedResizableWithForm';
+export { default as zebra } from './zebra';

packages/semi-ui/table/_story/v2/zebra.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+App.storyName = 'zebra style';
+
+/**
+ * zebra style
+ */
+export default function App() {
+    const handleRow = (record, index) => {
+        // 给偶数行设置斑马纹
+        if (index % 2 === 0) {
+            return {
+                style: {
+                    background: 'var(--semi-color-fill-0)',
+                }
+            };
+        } else {
+            return {};
+        }
+    };
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            // fixed: true,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            // onCell: handleRow,
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            // onCell: handleRow,
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            // onCell: handleRow,
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            // onCell: handleRow,
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+            // onCell: handleRow,
+        },
+    ];
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey'
+
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red'
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue'
+        },
+        {
+            key: '4',
+            name: 'Semi Pro 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey'
+
+        },
+        {
+            key: '5',
+            name: 'Semi Pro 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red'
+        },
+        {
+            key: '6',
+            name: 'Semi Pro 设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue'
+        },
+    ];
+
+    return <Table columns={columns} dataSource={data} onRow={handleRow} pagination={false} />;
+}