fix(table): optimize style performance (ant-design#3706)

* fix(table): fix DragSortTable render problems with multiple renders * remove all code * fix(table): optimize style performance
raychanks · Sep 22, 2021 · df59f7e · df59f7e
1 parent ec1a6c1
commit df59f7e
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 813 deletions.
diff --git a/packages/provider/src/locale/ja_JP.tsx b/packages/provider/src/locale/ja_JP.tsx
@@ -43,5  43,5 @@ export default {
     next: '次のステップ',
     pre: '前へ',
     submit: '送信',
-  }
   },
 };
diff --git a/packages/table/src/components/DragSortTable/index.less b/packages/table/src/components/DragSortTable/index.less
@@ -0,0  1,16 @@
 @import '~antd/es/style/themes/default.less';
 
 @pro-dropdown-prefix-cls: ~'@{ant-prefix}-pro-table-drag';
 
 .@{pro-dropdown-prefix-cls} {
   &-visible-cell {
     display: flex;
     align-items: center;
   }
 
   &-icon {
     margin-right: 8px;
     color: #999;
     cursor: grab;
   }
 }
diff --git a/packages/table/src/components/DragSortTable/index.tsx b/packages/table/src/components/DragSortTable/index.tsx
@@ -1,11  1,13 @@
-import React, { useMemo, useState, useCallback, useRef } from 'react';
 import React, { useMemo, useState, useCallback, useRef, useContext } from 'react';
 import { useDragSort } from '../../utils/useDragSort';
 import type { ParamsType } from '@ant-design/pro-provider';
 import ProTable from '../../Table';
 import { SortableHandle } from 'react-sortable-hoc';
 import { MenuOutlined } from '@ant-design/icons';
 import type { ProColumns, ProTableProps } from '../../typing';
 import { useDeepCompareEffect } from '@ant-design/pro-utils';
 import { ConfigProvider } from 'antd';
 import './index.less';
 
 export type DragTableProps<T, U extends ParamsType> = {
   /** @name 拖动排序列key值 如配置此参数，则会在该 key 对应的行显示拖拽排序把手，允许拖拽排序 */
@@ -18,10  20,6 @@ export type DragTableProps<T, U extends ParamsType> = {
 
 // 用于创建可拖拽把手组件的工厂
 const handleCreator = (handle: React.ReactNode) => SortableHandle(() => <>{handle}</>);
-// 默认拖拽把手
-const DragHandle = handleCreator(
-  <MenuOutlined className="dragSortDefaultHandle" style={{ cursor: 'grab', color: '#999' }} />,
-);
 
 function DragSortTable<T, U extends ParamsType>(props: DragTableProps<T, U>) {
   const {
@@ -34,6  32,13 @@ function DragSortTable<T, U extends ParamsType>(props: DragTableProps<T, U>) {
     dataSource: oriDs,
     ...otherProps
   } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
 
   // 默认拖拽把手
   const DragHandle = useMemo(
     () => handleCreator(<MenuOutlined className={getPrefixCls('pro-table-drag-icon')} />),
     [getPrefixCls],
   );
 
   const [columns, setRefColumns] = useState<DragTableProps<T, U>['columns']>(propsColumns);
 
@@ -69,10  74,10 @@ function DragSortTable<T, U extends ParamsType>(props: DragTableProps<T, U>) {
         ? handleCreator(dragSortHandlerRender(rowData, index))
         : DragHandle;
       return (
-        <>
         <div className={getPrefixCls('pro-table-drag-visible-cell')}>
           <RealHandle />
           {originColumn.render?.(dom, rowData, index, action, schema)}
-        </>
         </div>
       );
     };
     // 重新生成数据