Merge branch 'master' into antd-5.x

Author: li-jia-nan

.gitignore

@@ -33,6 +33,7 @@ es/
 .storybook
 .doc
 !__mocks__/rc-util/lib
+!__mocks__/@rc-component/util/lib
 examples/debug.tsx
 .history
 ~*

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

README.md

@@ -1,11 +1,11 @@
-# rc-table
+# @rc-component/table
 
 React table component with useful functions.
 
 [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-table.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-table
+[npm-image]: http://img.shields.io/npm/v/@rc-component/table.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/table
 [github-actions-image]: https://github.com/react-component/table/workflows/CI/badge.svg
 [github-actions-url]: https://github.com/react-component/table/actions
 [coveralls-image]: https://img.shields.io/coveralls/react-component/table.svg?style=flat-square
@@ -16,14 +16,14 @@ React table component with useful functions.
 [david-image]: https://david-dm.org/react-component/table/status.svg?style=flat-square
 [david-dev-url]: https://david-dm.org/react-component/table?type=dev
 [david-dev-image]: https://david-dm.org/react-component/table/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-table.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-table
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-table
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-table
+[download-image]: https://img.shields.io/npm/dm/@rc-component/table.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/table
+[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/table
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/table
 
 ## install
 
-[![rc-table](https://nodei.co/npm/rc-table.png)](https://npmjs.org/package/rc-table)
+[![@rc-component/table](https://nodei.co/npm/@rc-component/table.png)](https://npmjs.org/package/@rc-component/table)
 
 ## Development
 
@@ -39,7 +39,7 @@ https://table-react-component.vercel.app/
 ## Usage
 
 ```js
-import Table from 'rc-table';
+import Table from '@rc-component/table';
 
 const columns = [
   {
@@ -83,7 +83,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | tableLayout | `auto` \| `fixed` | `auto` \| `fixed` for any columns is fixed or ellipsis or header is fixed | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout |
-| prefixCls | String | rc-table |  |
+| prefixCls | String | `rc-table` |  |
 | className | String |  | additional className |
 | id | String |  | identifier of the container div |
 | useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns |
@@ -158,4 +158,4 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 
 ## License
 
-rc-table is released under the MIT license.
+@rc-component/table is released under the MIT license.

__mocks__/rc-util/lib/getScrollBarSize.ts renamed to __mocks__/@rc-component/util/lib/getScrollBarSize.ts

@@ -55,76 +55,37 @@
   }
 
   // ================== Cell ==================
-  &-fixed-column-gapped {
-    .@{tablePrefixCls}-cell-fix-left-last::after,
-    .@{tablePrefixCls}-cell-fix-right-first::after {
-      display: none !important;
-    }
-  }
-
   &-cell {
     background: #f4f4f4;
 
-    &-fix-left,
-    &-fix-right {
-      z-index: 2;
+    &-fix {
+      position: sticky !important;
+      z-index: calc(2 + var(--z-offset));
     }
 
-    &-fix-right:last-child:not(&-fix-sticky) {
-      border-right-color: transparent;
-    }
-
-    .@{tablePrefixCls}-rtl & {
-      &-fix-right:last-child {
-        border-right-color: @border-color;
-      }
-      &-fix-left:last-child {
-        border-left-color: transparent;
+    &-fix-start-shadow,
+    &-fix-end-shadow {
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 5px;
+        background: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        content: '';
+        transition: opacity 0.3s;
       }
-    }
 
-    &-fix-left-first {
-      .@{tablePrefixCls}-rtl & {
-        box-shadow: 1px 0 0 @border-color;
+      &-show::after {
+        opacity: 1;
       }
     }
 
-    &-fix-left-first::after,
-    &-fix-left-last::after {
-      position: absolute;
-      top: 0;
-      right: -1px;
-      bottom: -1px;
-      width: 20px;
-      transform: translateX(100%);
-      transition: box-shadow 0.3s;
-      content: '';
-      pointer-events: none;
-    }
-
-    &-fix-left-all::after {
-      display: none;
+    &-fix-start-shadow::after {
+      inset-inline-start: 100%;
     }
-
-    &-fix-right-first,
-    &-fix-right-last {
-      box-shadow: -1px 0 0 @border-color;
-
-      .@{tablePrefixCls}-rtl & {
-        box-shadow: none;
-      }
-
-      &::after {
-        position: absolute;
-        top: 0;
-        bottom: -1px;
-        left: -1px;
-        width: 20px;
-        transform: translateX(-100%);
-        transition: box-shadow 0.3s;
-        content: '';
-        pointer-events: none;
-      }
+    &-fix-end-shadow::after {
+      inset-inline-end: 100%;
     }
 
     &&-ellipsis {
@@ -133,9 +94,8 @@
       text-overflow: ellipsis;
 
       // Fixed first or last should special process
-      &.@{tablePrefixCls}-cell-fix-left-first,
-      &.@{tablePrefixCls}-cell-fix-left-last,
-      &.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
+      &.@{tablePrefixCls}-cell-fix-start-shadow,
+      &.@{tablePrefixCls}-cell-fix-end-shadow {
         overflow: visible;
 
         .@{tablePrefixCls}-cell-content {
@@ -151,18 +111,24 @@
     }
   }
 
-  &-ping-left {
-    .@{tablePrefixCls}-cell-fix-left-first::after,
-    .@{tablePrefixCls}-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px green;
-    }
+  &-fix-start-shadow::before,
+  &-fix-end-shadow::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    width: 5px;
   }
 
-  &-ping-right {
-    .@{tablePrefixCls}-cell-fix-right-first::after,
-    .@{tablePrefixCls}-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px green;
-    }
+  &-fix-start-shadow-show::before {
+    inset-inline-start: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &-fix-end-shadow-show::after {
+    inset-inline-end: 0;
+    background: rgba(0, 0, 0, 0.5);
   }
 
   // ================= Expand =================

assets/index.less

@@ -1,7 +1,7 @@
 import React from 'react';
 import CSSMotionList from 'rc-animate/lib/CSSMotionList';
 import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
+import toArray from '@rc-component/util/lib/Children/toArray';
 import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
@@ -11,7 +11,7 @@ type MotionBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
   const nodeList = toArray(children);
-  const nodesRef = React.useRef<Record<string, React.ReactElement>>({});
+  const nodesRef = React.useRef<Record<string, React.ReactElement<any>>>({});
 
   // Better apply clean up logic to avoid OOM
   const keys: React.Key[] = [];
@@ -26,7 +26,7 @@ const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
       <CSSMotionList keys={keys} component={false} motionName="move">
         {({ key, className }) => {
           const node = nodesRef.current[key];
-          return React.cloneElement(node, {
+          return React.cloneElement<any>(node, {
             className: classNames(node.props.className, className),
           });
         }}

docs/examples/animation.tsx

@@ -52,6 +52,20 @@ const Demo = () => (
       expandedRowClassName={(record, i) => `ex-row-${i}`}
       data={data}
       className="table"
+      title={() => <span>title</span>}
+      footer={() => <span>footer</span>}
+    />
+    <h2>scroll</h2>
+     <Table
+      columns={columns}
+      rowClassName={(record, i) => `row-${i}`}
+      expandedRowRender={record => <p>extra: {record.a}</p>}
+      expandedRowClassName={(record, i) => `ex-row-${i}`}
+      data={Array(5).fill(data)}
+      className="table"
+      scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}
+      title={() => <span>title</span>}
+      footer={() => <span>footer</span>}
     />
   </div>
 );

docs/examples/className.tsx

@@ -24,6 +24,18 @@ const Demo = () => {
   return (
     <div>
       <Table
+        classNames={{
+          body: {
+            wrapper: 'test-body-wrapper',
+            cell: 'test-body-cell',
+            row: 'test-body-row',
+          },
+          header: {
+            wrapper: 'test-header-wrapper',
+            cell: 'test-header-cell',
+            row: 'test-header-row',
+          },
+        }}
         components={{ header: { table } }}
         sticky
         columns={[

docs/examples/components.tsx

@@ -3,6 +3,22 @@ import type { ColumnType } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
+// 合并单元格
+export const getRowSpan = (source: (string | number | undefined)[] = []) => {
+  const list: { rowSpan?: number }[] = [];
+  let span = 0;
+  source.reverse().forEach((key, index) => {
+    span = span + 1;
+    if (key !== source[index + 1]) {
+      list.push({ rowSpan: span });
+      span = 0;
+    } else {
+      list.push({ rowSpan: 0 });
+    }
+  });
+  return list.reverse();
+};
+
 const Demo = () => {
   const [expandedRowKeys, setExpandedRowKeys] = useState<readonly React.Key[]>([]);
 
@@ -11,13 +27,33 @@ const Demo = () => {
     { key: 'b', a: '张三', d: '文一西路' },
     { key: 'c', a: '张三', d: '文二西路' },
   ];
+  // const rowKeys = data.map(item => item.key);
+
+  // const rowSpanList = getRowSpan(data.map(item => item.a));
 
   const columns: ColumnType<Record<string, any>>[] = [
     {
       title: '手机号',
       dataIndex: 'a',
       width: 100,
+      colSpan: 2,
+      // fixed: 'left',
       onCell: (_, index) => {
+        // const { rowSpan = 1 } = rowSpanList[index];
+        // const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
+        // props.rowSpan = rowSpan;
+        // if (rowSpan >= 1) {
+        //   let currentRowSpan = rowSpan;
+        //   for (let i = index; i < index + rowSpan; i += 1) {
+        //     const rowKey = rowKeys[i];
+        //     if (expandedRowKeys.includes(rowKey)) {
+        //       currentRowSpan += 1;
+        //     }
+        //   }
+        //   props.rowSpan = currentRowSpan;
+        // }
+        // return props;
+
         if (index === 1) {
           return {
             rowSpan: 2,
@@ -29,7 +65,7 @@ const Demo = () => {
         }
       },
     },
-    { title: 'key', dataIndex: 'key2', width: 100 },
+    { title: 'key', dataIndex: 'key2', colSpan: 0, width: 100 },
     Table.EXPAND_COLUMN,
     { title: 'key', dataIndex: 'key' },
     { title: 'Address', fixed: 'right', dataIndex: 'd', width: 200 },
@@ -41,7 +77,7 @@ const Demo = () => {
       <Table<Record<string, any>>
         rowKey="key"
         sticky
-        scroll={{ x: 2000 }}
+        scroll={{ x: 1000 }}
         columns={columns}
         data={data}
         expandable={{

docs/examples/expandedSticky.tsx

@@ -34,7 +34,7 @@ const columns: ColumnType<RecordType>[] = [
   { title: 'title8', dataIndex: 'b', key: 'h' },
   { title: 'title9', dataIndex: 'b', key: 'i' },
   { title: 'title10', dataIndex: 'b', key: 'j' },
-  { title: 'title11', dataIndex: 'b', key: 'k', width: 50 },
+  { title: 'title11', dataIndex: 'b', key: 'k', width: 50, fixed: 'right'  },
   { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
 ];