refactor(Table): convert to TypeScript, impove docs and tests, close #4613

.stylelintrc

@@ -1,6 +1,6 @@
 {
     "extends": ["@alifd/stylelint-config-next"],
-    "ignoreFiles": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/__docs__/**"],
+    "ignoreFiles": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/__docs__/**", "lib/**", "es/**"],
     "rules": {
         "max-nesting-depth": 4,
         "max-empty-lines": 3,

components/config-provider/types.ts

@@ -35,7 +35,15 @@ export interface FallbackUIProps {
 export type FallbackUI = JSXElementConstructor<FallbackUIProps>;
 
 export interface ErrorBoundaryConfig {
+    /**
+     * 捕获错误后的行为，比如埋点上传
+     * @en the behavior after catching the error, for example, upload error log
+     */
     afterCatch?: AfterCatch;
+    /**
+     * 捕获错误后的展示
+     * @en the display after catching the error
+     */
     fallbackUI?: FallbackUI;
 }
 
@@ -68,34 +76,37 @@ export interface ContextState {
 export interface ComponentCommonProps {
     /**
      * 样式类名的品牌前缀
+     * @en Prefix of component className
      */
     prefix?: string;
     /**
      * 组件的国际化文案对象
+     * @en Locale object for components
      */
     locale?: ComponentLocaleObject;
     /**
      * 是否开启 Pure Render 模式，会提高性能，但是也会带来副作用
+     * @en Enable the Pure Render mode, it will improve performance, but it will also have side effects
      */
     pure?: boolean;
     /**
      * 设备类型，针对不同的设备类型组件做出对应的响应式变化
+     * @en device type, different device types components will make corresponding responsive changes
      */
     device?: DeviceType;
     /**
      * 是否开启 rtl 模式
+     * @en Enable right to left mode
      */
     rtl?: boolean;
     /**
      * 是否开启错误捕捉 errorBoundary
-     * 如需自定义参数，请传入对象 对象接受参数列表如下：
-     *
-     * fallbackUI `Function(error?: {}, errorInfo?: {}) => Element` 捕获错误后的展示
-     * afterCatch `Function(error?: {}, errorInfo?: {})` 捕获错误后的行为，比如埋点上传
+     * @en Turn errorBoundary on or not
      */
     errorBoundary?: ErrorBoundaryType;
     /**
      * 是否在开发模式下显示组件属性被废弃的 warning 提示
+     * @en Whether to display the warning prompt for deprecated properties in development mode
      */
     warning?: boolean;
 }

components/locale/types.ts

@@ -116,14 +116,41 @@ export interface BaseLocale extends LocaleConfig {
         shortMaxTagPlaceholder: string;
     };
     Table: {
+        /**
+         * 没有数据情况下 table 内的文案
+         */
         empty: string;
+        /**
+         * 过滤器中确认按钮文案
+         */
         ok: string;
+        /**
+         * 过滤器中重置按钮文案
+         */
         reset: string;
+        /**
+         * 排序升序状态下的文案
+         */
         asc: string;
+        /**
+         * 排序将序状态下的文案
+         */
         desc: string;
+        /**
+         * 可折叠行，展开状态下的文案
+         */
         expanded: string;
+        /**
+         * 可折叠行，折叠状态下的文案
+         */
         folded: string;
+        /**
+         * 过滤器文案
+         */
         filter: string;
+        /**
+         * header 里全选的按钮文案
+         */
         selectAll: string;
     };
     TimePicker: {

components/table/__docs__/adaptor/index.tsx

@@ -0,0 +1,108 @@
+import React, { type CSSProperties } from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Table } from '@alifd/next';
+import type { ColumnProps, TableProps } from '@alifd/next/types/table';
+
+export default {
+    name: 'Table',
+    editor: () => ({
+        props: [
+            {
+                name: 'select',
+                label: 'Selection Mode',
+                type: Types.enum,
+                options: ['checkbox', 'none'],
+                default: 'none',
+            },
+            {
+                name: 'align',
+                type: Types.enum,
+                options: ['left', 'right', 'center'],
+                default: 'left',
+            },
+            {
+                name: 'head',
+                label: 'Header',
+                type: Types.enum,
+                options: ['show', 'hide'],
+                default: 'show',
+            },
+            {
+                name: 'border',
+                type: Types.bool,
+                default: false,
+            },
+            {
+                name: 'stripe',
+                type: Types.bool,
+                default: false,
+            },
+            {
+                name: 'width',
+                type: Types.number,
+                default: 800,
+            },
+        ],
+        data: {
+            default:
+                "Product | Price | Status\n2014 New Fashion Novelty Tank Slim Women's Fashion Dresses With Lace | US $2.5 | No Priced\nFree shipping women Casual dresses lady dress plus size 201 | US $2.5 | Already Priced",
+        },
+    }),
+    adaptor: ({
+        border,
+        stripe,
+        select,
+        align,
+        head,
+        width,
+        data,
+        style,
+        ...others
+    }: {
+        border: TableProps['hasBorder'];
+        stripe: TableProps['isZebra'];
+        select: 'checkbox' | 'none';
+        align: ColumnProps['align'];
+        head: 'show' | 'hide';
+        width: number;
+        data: string;
+        style: CSSProperties;
+    }) => {
+        const list = data.split('\n').filter(v => !!v);
+        let ths: string[] = [];
+        const bodys: { [key: string]: string }[] = [];
+        list.forEach((template, index) => {
+            if (index === 0) {
+                ths = template.split('|');
+            } else {
+                const column: { [key: string]: string } = {};
+                template.split('|').forEach((value, index) => {
+                    column[`column_${index}`] = value;
+                });
+                bodys.push(column);
+            }
+        });
+
+        return (
+            <Table
+                {...others}
+                dataSource={bodys}
+                rowSelection={select === 'checkbox' ? { onChange: () => {} } : null}
+                style={{ width, ...style }}
+                hasBorder={border}
+                hasHeader={head === 'show'}
+                isZebra={stripe}
+            >
+                {ths.map((label, index) => (
+                    <Table.Column
+                        cell={value => value}
+                        align={align}
+                        title={label}
+                        key={`column_${index}`}
+                        dataIndex={`column_${index}`}
+                    />
+                ))}
+            </Table>
+        );
+    },
+};

components/table/__docs__/demo/accessibility/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Table } from '@alifd/next';
+import type { ColumnProps } from '@alifd/next/types/table';
 
 const result = [
     {
@@ -14,21 +15,17 @@ const result = [
         title: { name: 'the great gatsby' },
     },
     {
-        id: '003',
+        id: '004',
         time: 1719,
         title: { name: 'The adventures of Robinson Crusoe' },
     },
 ];
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            dataSource: result,
-        };
-    }
+    state = {
+        dataSource: result,
+    };
 
-    onRemove = id => {
+    onRemove = (id: string) => {
         const { dataSource } = this.state;
         let index = -1;
         dataSource.forEach((item, i) => {
@@ -44,8 +41,8 @@ class Demo extends React.Component {
         }
     };
 
-    renderOper = (value, index, record) => {
-        return <a onClick={this.onRemove.bind(this, record.id)}>Remove({record.id})</a>;
+    renderOper: ColumnProps['cell'] = (value, index, record) => {
+        return <a onClick={this.onRemove.bind(this, record!.id)}>Remove({record!.id})</a>;
     };
     render() {
         return (

components/table/__docs__/demo/advanced/index.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Table } from '@alifd/next';
 import PropTypes from 'prop-types';
-/* eslint-disable react/no-multi-comp,react/prop-types */
+import type { TableProps } from '@alifd/next/types/table';
+
 const { Header, Cell } = Table;
 const dataSource = () => {
     const result = [];
@@ -16,10 +18,10 @@ const dataSource = () => {
     return result;
 };
 
-const AppHeader = (props, context) => {
+const AppHeader: NonNullable<TableProps['components']>['Header'] = (props, context) => {
     const { columns } = props;
     const { onChange } = context;
-    const length = columns[columns.length - 1].length;
+    const length = columns![columns!.length - 1].length;
     return (
         <Header {...props}>
             <tr>
@@ -48,20 +50,22 @@ class App extends React.Component {
     state = {
         selectedKeys: [],
     };
+    dataSource = dataSource();
+
     getChildContext() {
         return {
             onChange: this.onChange,
         };
     }
-    dataSource = dataSource();
-    onChange = checked => {
-        let selectedKeys = [];
+
+    onChange: NonNullable<TableProps['rowSelection']>['onChange'] = checked => {
+        let selectedKeys: number[] = [];
         if (checked) {
             selectedKeys = this.dataSource.map(item => item.id);
         }
         this.onRowChange(selectedKeys);
     };
-    onRowChange = selectedKeys => {
+    onRowChange = (selectedKeys: number[]) => {
         this.setState({
             selectedKeys,
         });