Merge branch 'master' into aria-label-fix

react-component · Sep 6, 2022 · 1a02db6 · 1a02db6
2 parents 5d85422 + e3124cf
commit 1a02db6
Show file tree

Hide file tree

Showing 31 changed files with 435 additions and 161 deletions.
diff --git a/.fatherrc.ts b/.fatherrc.ts
@@ -4,6 +4,6 @@ export default {
   runtimeHelpers: true,
   preCommit: {
     eslint: true,
-    prettier: true,
+    prettier: false,
   },
 };
diff --git a/docs/demo/caption.md b/docs/demo/caption.md
@@ -0,0 +1,3 @@
+## caption
+
+<code src="../examples/caption.tsx">
diff --git a/docs/examples/caption.tsx b/docs/examples/caption.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
+
+const data = [
+  { name: 'John', age: '25', address: '1 A Street' },
+  { name: 'Fred', age: '38', address: '2 B Street' },
+  { name: 'Anne', age: '47', address: '3 C Street' },
+];
+
+const Demo = () => (
+  <div>
+    <h2>Table with basic caption</h2>
+    <Table columns={columns} data={data} caption="Users including age and address" />
+    <br />
+    <h2>Table with complex caption</h2>
+    <Table
+      columns={columns}
+      data={data}
+      caption={
+        <div style={{ textAlign: 'right' }}>
+          Users who are <em>old</em>
+        </div>
+      }
+    />
+  </div>
+);
+
+export default Demo;
diff --git a/docs/examples/expandedRowRender.tsx b/docs/examples/expandedRowRender.tsx
@@ -33,6 +33,7 @@ for (let i = 0; i < 10; i += 1) {
 const Demo = () => {
   const [data, setData] = React.useState(tableData);
   const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
+  const [columnTitle, columnTitleProps] = useCheckbox(false);
   const [expandRowByClick, expandRowByClickProps] = useCheckbox(false);
   const [fixColumns, fixColumnsProps] = useCheckbox(false);
   const [scrollX, scrollXProps] = useCheckbox(false);
@@ -104,6 +105,10 @@ const Demo = () => {
   return (
     <div>
       {toggleButton}
+      <label>
+        <input {...columnTitleProps} />
+        Expand Column Title
+      </label>
       <label>
         <input {...expandRowByClickProps} />
         Expand Row by Click
@@ -131,6 +136,7 @@ const Demo = () => {
       <Table<RecordType>
         columns={columns}
         expandable={{
+          columnTitle: columnTitle ? <span>title</span> : '',
           expandRowByClick,
           expandedRowRender: (record, index, indent, expanded) =>
             expanded ? <p>extra: {record.a}</p> : null,

diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
-import React from 'react';
 import Table from 'rc-table';
+import React from 'react';
 import '../../assets/index.less';
 
 interface RecordType {
@@ -9,42 +9,50 @@ interface RecordType {
   c?: string;
 }
 
-const columns = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
-  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100, align: 'right' },
-  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
-  {
-    title: 'Operations',
-    dataIndex: '',
-    key: 'd',
-    render(_: any, record: RecordType) {
-      return (
-        <a
-          onClick={e => {
-            e.preventDefault();
-            console.log('Operate on:', record);
-          }}
-          href="#"
-        >
-          Operations
-        </a>
-      );
-    },
-  },
-];
-
 const data = [
   { a: '123', key: '1' },
   { a: 'cdd', b: 'edd', key: '2' },
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-const Demo = () => (
-  <div>
-    <h2>simple table</h2>
-    <Table<RecordType> columns={columns} data={data} />
-  </div>
-);
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      count: 0,
+    };
+
+    this.columns = [
+      {
+        title: 'title1',
+        dataIndex: 'a',
+        render: this.renderColumn,
+      },
+    ];
+  }
+
+  renderColumn = () => {
+    return this.state.count;
+  };
+
+  render() {
+    return (
+      <>
+        <button
+          onClick={() => {
+            this.setState({
+              count: this.state.count + 1,
+            });
+          }}
+        >
+          Click {this.state.count} times
+        </button>
+        <Table<RecordType> columns={this.columns} data={data} />
+      </>
+    );
+  }
+}
 
 export default Demo;
 /* eslint-enable */
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-table",
-  "version": "7.25.3",
+  "version": "7.27.2",
   "description": "table ui component for react",
   "engines": {
     "node": ">=8.x"
@@ -64,8 +64,9 @@
     "@types/jest": "^28.1.2",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^18.0.5",
+    "@types/responselike": "^1.0.0",
     "@types/shallowequal": "^1.1.1",
-    "@umijs/fabric": "^2.0.0",
+    "@umijs/fabric": "^3.0.0",
     "cross-env": "^7.0.0",
     "dumi": "^1.1.9",
     "enzyme": "^3.1.0",

diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import Cell from '../Cell';
-import TableContext from '../context/TableContext';
 import BodyContext from '../context/BodyContext';
-import { getColumnsKey } from '../utils/valueUtil';
+import TableContext from '../context/TableContext';
+import { useContextSelector } from '../ContextSelector';
 import type {
   ColumnType,
   CustomizeComponent,
   GetComponentProps,
-  Key,
   GetRowKey,
+  Key,
 } from '../interface';
+import { getColumnsKey } from '../utils/valueUtil';
 import ExpandedRow from './ExpandedRow';
 
 export interface BodyRowProps<RecordType> {
@@ -49,7 +50,10 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     cellComponent,
     childrenColumnName,
   } = props;
-  const { prefixCls, fixedInfoList } = React.useContext(TableContext);
+  const { prefixCls, fixedInfoList } = useContextSelector(TableContext, [
+    'prefixCls',
+    'fixedInfoList',
+  ]);
   const {
     flattenColumns,
     expandableType,
@@ -61,7 +65,18 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     expandIcon,
     expandedRowRender,
     expandIconColumnIndex,
-  } = React.useContext(BodyContext);
+  } = useContextSelector(BodyContext, [
+    'flattenColumns',
+    'expandableType',
+    'expandRowByClick',
+    'onTriggerExpand',
+    'rowClassName',
+    'expandedRowClassName',
+    'indentSize',
+    'expandIcon',
+    'expandedRowRender',
+    'expandIconColumnIndex',
+  ]);
   const [expandRended, setExpandRended] = React.useState(false);
 
   const expanded = expandedKeys && expandedKeys.has(props.recordKey);

diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { CustomizeComponent } from '../interface';
 import Cell from '../Cell';
-import TableContext from '../context/TableContext';
 import ExpandedRowContext from '../context/ExpandedRowContext';
+import TableContext from '../context/TableContext';
+import { useContextSelector } from '../ContextSelector';
+import type { CustomizeComponent } from '../interface';
 
 export interface ExpandedRowProps {
   prefixCls: string;
@@ -25,9 +26,11 @@ function ExpandedRow({
   colSpan,
   isEmpty,
 }: ExpandedRowProps) {
-  const { scrollbarSize } = React.useContext(TableContext);
-  const { fixHeader, fixColumn, componentWidth, horizonScroll } =
-    React.useContext(ExpandedRowContext);
+  const scrollbarSize = useContextSelector(TableContext, 'scrollbarSize');
+  const { fixHeader, fixColumn, componentWidth, horizonScroll } = useContextSelector(
+    ExpandedRowContext,
+    ['fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
+  );
 
   // Cache render node
   return React.useMemo(() => {

diff --git a/src/Body/index.tsx b/src/Body/index.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
-import TableContext from '../context/TableContext';
-import type { GetRowKey, Key, GetComponentProps } from '../interface';
-import ExpandedRow from './ExpandedRow';
 import BodyContext from '../context/BodyContext';
-import { getColumnsKey } from '../utils/valueUtil';
-import ResizeContext from '../context/ResizeContext';
-import BodyRow from './BodyRow';
-import useFlattenRecords from '../hooks/useFlattenRecords';
 import HoverContext from '../context/HoverContext';
 import type { PerfRecord } from '../context/PerfContext';
 import PerfContext from '../context/PerfContext';
+import ResizeContext from '../context/ResizeContext';
+import TableContext from '../context/TableContext';
+import { useContextSelector } from '../ContextSelector';
+import useFlattenRecords from '../hooks/useFlattenRecords';
+import type { GetComponentProps, GetRowKey, Key } from '../interface';
+import { getColumnsKey } from '../utils/valueUtil';
+import BodyRow from './BodyRow';
+import ExpandedRow from './ExpandedRow';
 import MeasureRow from './MeasureRow';
 
 export interface BodyProps<RecordType> {
@@ -33,9 +34,12 @@ function Body<RecordType>({
   emptyNode,
   childrenColumnName,
 }: BodyProps<RecordType>) {
-  const { onColumnResize } = React.useContext(ResizeContext);
-  const { prefixCls, getComponent } = React.useContext(TableContext);
-  const { flattenColumns } = React.useContext(BodyContext);
+  const onColumnResize = useContextSelector(ResizeContext, 'onColumnResize');
+  const { prefixCls, getComponent } = useContextSelector(TableContext, [
+    'prefixCls',
+    'getComponent',
+  ]);
+  const flattenColumns = useContextSelector(BodyContext, 'flattenColumns');
 
   const flattenData: { record: RecordType; indent: number; index: number }[] =
     useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);

diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import shallowEqual from 'shallowequal';
 import { supportRef } from 'rc-util/lib/ref';
+import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import shallowEqual from 'shallowequal';
+import BodyContext from '../context/BodyContext';
+import type { HoverContextProps } from '../context/HoverContext';
+import HoverContext from '../context/HoverContext';
+import PerfContext from '../context/PerfContext';
+import StickyContext from '../context/StickyContext';
+import { useContextSelector } from '../ContextSelector';
 import type {
-  DataIndex,
+  AlignType,
+  CellEllipsisType,
+  CellType,
   ColumnType,
-  RenderedCell,
   CustomizeComponent,
-  CellType,
+  DataIndex,
   DefaultRecordType,
-  AlignType,
-  CellEllipsisType,
+  RenderedCell,
 } from '../interface';
 import { getPathValue, validateValue } from '../utils/valueUtil';
-import StickyContext from '../context/StickyContext';
-import HoverContext from '../context/HoverContext';
-import BodyContext from '../context/BodyContext';
-import type { HoverContextProps } from '../context/HoverContext';
-import warning from 'rc-util/lib/warning';
-import PerfContext from '../context/PerfContext';
-import { useContextSelector } from '../ContextSelector';
 
 /** Check if cell is in hover range */
 function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) {
@@ -143,7 +143,7 @@ function Cell<RecordType extends DefaultRecordType>(
 
   const perfRecord = React.useContext(PerfContext);
   const supportSticky = React.useContext(StickyContext);
-  const { allColumnsFixedLeft } = React.useContext(BodyContext);
+  const allColumnsFixedLeft = useContextSelector(BodyContext, 'allColumnsFixedLeft');
 
   // ==================== Child Node ====================
   const [childNode, legacyCellProps] = React.useMemo<