Refactor/spread sheet (#325)

kongshan-zhuyu · web-flow · commit 7c92447416cb · 2023-05-05T09:44:53.000+08:00
* refactor: refactor Spreadsheet with hooks

* test: supply Spreadsheet unit test

* docs: optimized Spreadsheet demos

* refactor: modify SpreadSheet component the type of _timer
diff --git a/src/spreadSheet/__tests__/index.test.tsx b/src/spreadSheet/__tests__/index.test.tsx
@@ -1,20 +1,65 @@
 import React from 'react';
 import SpreadSheet from '../index';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
+// mock the CopyUtils
+jest.mock('../../utils/copy', () => {
+    class CopyUtilsMock {
+        copy = jest.fn();
+    }
+    return CopyUtilsMock;
+});
+
 describe('test spreadSheet ', () => {
+    const columns = ['name', 'gender', 'age', 'address'];
+    const data = [
+        ['zhangsan', 'male', '20', 'xihu'],
+        ['lisi', 'male', '18', 'yuhang'],
+    ];
     test('should render SpreadSheet custom className', () => {
-        const { container } = render(
-            <SpreadSheet
-                columns={['name', 'gender', 'age', 'address']}
-                data={[
-                    ['zhangsan', 'male', '20', 'xihu'],
-                    ['lisi', 'male', '18', 'yuhang'],
-                ]}
-                className="testSpreadSheet"
-            />
+        const { container, getByText, unmount } = render(
+            <SpreadSheet columns={columns} data={data} className="testSpreadSheet" />
         );
         expect(container.firstChild).toHaveClass('testSpreadSheet');
+        expect(getByText('zhangsan')).toBeInTheDocument();
+        unmount();
+    });
+
+    test('renders without data', () => {
+        const { getByText, unmount } = render(<SpreadSheet data={[]} columns={columns} />);
+        expect(getByText('暂无数据')).toBeInTheDocument();
+        unmount();
+    });
+
+    test('copy value without header', () => {
+        const { getByText, unmount } = render(<SpreadSheet data={data} columns={columns} />);
+        const cell = getByText('zhangsan');
+        fireEvent.contextMenu(cell);
+        const copyBtn = getByText('复制');
+        expect(copyBtn).toBeInTheDocument();
+        fireEvent.click(copyBtn);
+        unmount();
+    });
+
+    test('copy value with header', () => {
+        const { getByText, unmount } = render(
+            <SpreadSheet data={data} columns={columns} options={{ showCopyWithHeader: true }} />
+        );
+        const cell = getByText('zhangsan');
+        fireEvent.contextMenu(cell);
+        const copyBtn = getByText('复制值以及列名');
+        expect(copyBtn).toBeInTheDocument();
+        fireEvent.click(copyBtn);
+        unmount();
+    });
+
+    test('should call componentDidUpdate when props are updated', () => {
+        const rerenderData = [['wangwu', 'male', '18', 'yuhang']];
+        jest.useFakeTimers();
+        const { rerender, getByText } = render(<SpreadSheet data={data} columns={columns} />);
+        rerender(<SpreadSheet data={rerenderData} columns={columns} />);
+        jest.runAllTimers();
+        expect(getByText('wangwu')).toBeInTheDocument();
     });
 });
diff --git a/src/spreadSheet/demos/basic.tsx b/src/spreadSheet/demos/basic.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { SpreadSheet } from 'dt-react-component';
+
+export default () => {
+    return (
+        <SpreadSheet
+            columns={['name', 'gender', 'age', 'address']}
+            data={[
+                ['zhangsan', 'male', '20', 'xihu'],
+                ['lisi', 'male', '18', 'yuhang'],
+            ]}
+        />
+    );
+};
diff --git a/src/spreadSheet/index.md b/src/spreadSheet/index.md
@@ -14,30 +14,15 @@ demo:
 
 ## 示例
 
-```jsx
-/**
- * title: "基础使用"
- */
-import React from 'react';
-import { SpreadSheet } from 'dt-react-component';
-
-export default () => {
-    return (
-        <SpreadSheet
-            columns={['name', 'gender', 'age', 'address']}
-            data={[
-                ['zhangsan', 'male', '20', 'xihu'],
-                ['lisi', 'male', '18', 'yuhang'],
-            ]}
-        />
-    );
-};
-```
+<code src="./demos/basic.tsx">基础使用</code>
 
 ## API
 
+### SpreadSheet
+
 | 参数                       | 说明                                   | 类型              | 默认值 |
 | -------------------------- | -------------------------------------- | ----------------- | ------ |
 | data                       | 表格数据                               | `Array(二维数组)` | -      |
 | columns                    | 列名                                   | `Array`           | -      |
+| className                  | 外层组件的 class 名                    | `string`          | -      |
 | options.showCopyWithHeader | 右键菜单中是否展示“复制值以及列名”按钮 | `boolean`         | -      |
diff --git a/src/spreadSheet/index.tsx b/src/spreadSheet/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import CopyUtils from '../utils/copy';
 import { HotTable } from '@handsontable/react';
@@ -7,7 +7,7 @@ import 'handsontable/dist/handsontable.full.css';
 import 'handsontable/languages/zh-CN.js';
 import './style.scss';
 
-export interface SpreadSheetProps {
+export interface ISpreadSheetProps {
     data: Array<Array<string>>;
     columns: any;
     className?: string;
@@ -16,77 +16,71 @@ export interface SpreadSheetProps {
     };
 }
 
-class SpreadSheet extends React.PureComponent<SpreadSheetProps, any> {
-    tableRef: any = React.createRef();
-    copyUtils = new CopyUtils();
-    _renderTimer: any;
+const SpreadSheet: React.FC<ISpreadSheetProps> = ({ data, columns = [], className, options }) => {
+    const tableRef = useRef<any>(null);
+    const copyUtils = new CopyUtils();
+    const _timer = useRef<number>();
 
-    componentDidUpdate(prevProps: any, _prevState: any) {
-        if (prevProps != this.props) {
-            if (this.tableRef) {
-                this.removeRenderClock();
-                this._renderTimer = setTimeout(() => {
-                    console.log('render sheet');
-                    this.tableRef.current.hotInstance.render();
-                }, 100);
-            }
+    useEffect(() => {
+        if (tableRef.current) {
+            removeRenderClock();
+            _timer.current = window.setTimeout(() => {
+                tableRef.current.hotInstance.render();
+            }, 100);
         }
-    }
-    removeRenderClock() {
-        if (this._renderTimer) {
-            clearTimeout(this._renderTimer);
-        }
-    }
-    componentWillUnmount() {
-        this.removeRenderClock();
-    }
-    getData() {
-        const { data, columns = [] } = this.props;
+        return () => {
+            removeRenderClock();
+        };
+    }, [data, columns]);
+
+    const removeRenderClock = () => {
+        clearTimeout(_timer.current);
+    };
+
+    const getData = () => {
         let showData = data;
-        if (!showData || !showData.length) {
+        if (!showData?.length) {
             const emptyArr = new Array(columns.length).fill('', 0, columns.length);
             emptyArr[0] = '暂无数据';
             showData = [emptyArr];
         }
         return showData;
-    }
-    getMergeCells() {
-        const { data, columns = [] } = this.props;
-        if (!data || !data.length) {
+    };
+
+    const getMergeCells = () => {
+        if (!data?.length) {
             return [{ row: 0, col: 0, rowspan: 1, colspan: columns.length }];
         }
-        return null;
-    }
-    getCell() {
-        const { data } = this.props;
+    };
+
+    const getCell = () => {
         if (!data || !data.length) {
             return [{ row: 0, col: 0, className: 'htCenter htMiddle' }];
         }
-        return null;
-    }
-    beforeCopy(arr: any, _arr2?: any) {
+    };
+
+    const beforeCopy = (arr: any[]) => {
         /**
          * 去除格式化
          */
         const value = arr
-            .map((row: any) => {
+            .map((row: any[]) => {
                 return row.join('\t');
             })
             .join('\n');
-        this.copyUtils.copy(value);
+        copyUtils.copy(value);
         return false;
-    }
-    getContextMenu() {
-        const that = this;
-        const { columns = [], options } = this.props;
-        const items: any = {
+    };
+
+    const getContextMenu = () => {
+        const items: Record<string, { name: string; callback: Function }> = {
             copy: {
                 name: '复制',
                 callback: function (this: any, _key: any) {
                     const indexArr = this.getSelected();
                     // eslint-disable-next-line prefer-spread
                     const copyDataArr = this.getData.apply(this, indexArr[0]);
-                    that.beforeCopy(copyDataArr);
+                    beforeCopy(copyDataArr);
                 },
             },
         };
@@ -106,7 +100,7 @@ class SpreadSheet extends React.PureComponent<SpreadSheetProps, any> {
                     if (columnArr) {
                         copyDataArr = [columnArr, ...copyDataArr];
                     }
-                    that.beforeCopy(copyDataArr);
+                    beforeCopy(copyDataArr);
                 },
             };
             // 目前版本不支持 copy_with_column_headers 暂时用 cut 代替，以达到与copy类似的表现
@@ -115,41 +109,33 @@ class SpreadSheet extends React.PureComponent<SpreadSheetProps, any> {
         return {
             items,
         } as any;
-    }
+    };
+
+    return (
+        <HotTable
+            ref={tableRef}
+            className={classNames('dtc-handsontable-no-border', className)}
+            language="zh-CN"
+            // 空数组情况，不显示colHeaders，否则colHeaders默认会按照 A、B...显示
+            // 具体可见 https://handsontable.com/docs/7.1.1/Options.html#colHeaders
+            colHeaders={columns?.length > 0 ? columns : false}
+            data={getData()}
+            mergeCells={getMergeCells()}
+            cell={getCell()}
+            readOnly
+            rowHeaders // 数字行号
+            fillHandle={false} // 拖动复制单元格
+            manualRowResize // 拉伸功能
+            manualColumnResize // 拉伸功能
+            autoColumnSize
+            colWidths={200}
+            beforeCopy={beforeCopy}
+            beforeCut={() => false}
+            columnHeaderHeight={25}
+            contextMenu={getContextMenu()}
+            stretchH="all" // 填充空白区域
+        />
+    );
+};
 
-    render() {
-        const { columns = [], className = '' } = this.props;
-        const showData = this.getData();
-        // 空数组情况，不显示colHeaders，否则colHeaders默认会按照 A、B...显示
-        // 具体可见 https://handsontable.com/docs/7.1.1/Options.html#colHeaders
-        let isShowColHeaders = false;
-        if (columns && columns.length > 0) {
-            isShowColHeaders = true;
-        }
-        return (
-            // @ts-ignore
-            <HotTable
-                ref={this.tableRef}
-                className={classNames('dtc-handsontable-no-border', className)}
-                style={{ width: '100%' }}
-                language="zh-CN"
-                colHeaders={isShowColHeaders ? columns : false}
-                data={showData}
-                mergeCells={this.getMergeCells()}
-                cell={this.getCell()}
-                readOnly
-                rowHeaders // 数字行号
-                fillHandle={false} // 拖动复制单元格
-                manualRowResize // 拉伸功能
-                manualColumnResize // 拉伸功能
-                colWidths={200}
-                beforeCopy={this.beforeCopy.bind(this)}
-                beforeCut={() => false}
-                columnHeaderHeight={25}
-                contextMenu={this.getContextMenu()}
-                stretchH="all" // 填充空白区域
-            />
-        );
-    }
-}
 export default SpreadSheet;
diff --git a/src/spreadSheet/style.scss b/src/spreadSheet/style.scss
@@ -1,30 +1,11 @@
-$prefix: "dtc-slide-pane";
-
-.#{$prefix} {
-    background: #FFF;
-    border-left: 1px solid #DDD;
-    border-bottom: 1px solid #DDD;
-    box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.1);
-    position: absolute;
-    display: inline-block;
-    transition: transform 0.3s ease-in;
-    z-index: 99;
-    &.l-#{$prefix}--fixed {
-        position: fixed;
-        top: 0;
-        right: 0;
-    }
-    .#{$prefix}-content {
-        position: relative;
-    }
-
-    .#{$prefix}-icon {
-        width: 12px;
-        height: 56px;
-        position: absolute;
-        top: calc(50% - 28px);
-        left: 0;
-        z-index: 999;
-        cursor: pointer;
+.dtc-handsontable-no-border {
+    width: 100%;
+    .handsontable {
+        thead tr:first-child th {
+            border-top: 0;
+        }
+        th:first-child {
+            border-left: 0;
+        }
     }
 }
