fix(table): use rc-table and modify sort-icon color (#1877)

Co-authored-by: maxin <maxin@growingio.com>

package.json

@@ -38,7 +38,6 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@gio-design/table": "7.18.1-patch.1",
     "@popperjs/core": "^2.10.2",
     "@types/react-resizable": "^1.7.3",
     "classnames": "^2.2.6",
@@ -59,6 +58,7 @@
     "rc-notification": "^4.5.4",
     "rc-picker": "^2.5.10",
     "rc-resize-observer": "^1.0.1",
+    "rc-table": "^7.23.0",
     "rc-tooltip": "^5.0.1",
     "rc-tree": "5.3.2",
     "rc-tree-select": "4.1.2",

src/legacy/table/DragTable.tsx

@@ -6,10 +6,9 @@ import classNames from 'classnames';
 import { findIndex, omit } from 'lodash';
 import { usePrefixCls } from '@gio-design/utils';
 import { SortableElement, SortableContainer, SortableHandle } from 'react-sortable-hoc';
-import { TableComponents } from '@gio-design/table/es/interface';
+import { TableComponents } from 'rc-table/es/interface';
 import { ColumnType, TableProps } from './interface';
 import Table from './Table';
-import './style/index';
 
 const DragHandle = SortableHandle(() => <MoveOutlined />);
 

src/legacy/table/Table.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo, forwardRef, createContext } from 'react';
-import RcTable from '@gio-design/table';
+import RcTable from 'rc-table';
 import classNames from 'classnames';
 import { cloneDeep, isUndefined, get, has, set, isFunction } from 'lodash';
-import { ExpandableConfig } from '@gio-design/table/lib/interface';
+import { ExpandableConfig } from 'rc-table/lib/interface';
 import { compose } from 'lodash/fp';
 import { RightOutlined, DownOutlined } from '@gio-design/icons';
 import { usePrefixCls } from '@gio-design/utils';

src/legacy/table/interface.ts

@@ -1,5 +1,5 @@
-import { ExpandableConfig } from '@gio-design/table/lib/interface';
-import { TableComponents } from '@gio-design/table/es/interface';
+import { ExpandableConfig } from 'rc-table/lib/interface';
+import { TableComponents } from 'rc-table/es/interface';
 import { PaginationProps } from '../pagination/interface';
 import { CheckboxProps } from '../checkbox/interface';
 import { TooltipProps } from '../tooltip/interface';

src/table/Table.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo, forwardRef, createContext, useCallback, useRef } from 'react';
-import GioTable from '@gio-design/table';
+import GioTable from 'rc-table';
 import classNames from 'classnames';
 import { get, has, isFunction, isNil, isEmpty } from 'lodash';
-import { ExpandableConfig } from '@gio-design/table/lib/interface';
+import { ExpandableConfig } from 'rc-table/lib/interface';
 import { compose } from 'lodash/fp';
 import { RightOutlined, DownOutlined } from '@gio-design/icons';
 import { usePrefixCls } from '@gio-design/utils';
-import { RenderExpandIcon, RowClassName } from '@gio-design/table/es/interface';
+import { RenderExpandIcon, RowClassName } from 'rc-table/es/interface';
 import useMergeRef from '../utils/hooks/useMergeRef';
 import useSorter from './hook/useSorter';
 import useFilter from './hook/useFilter';

src/table/Title.tsx

@@ -94,11 +94,11 @@ const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement =
       return null;
     }
     return (
-      <span className={`${prefixCls}-column-title-info`}>
-        <Tooltip title={info} overlayClassName={`${prefixCls}-tooltip`}>
-          <QuestionCircleOutlined size="12px" />
-        </Tooltip>
-      </span>
+      <Tooltip title={info} overlayClassName={`${prefixCls}-tooltip`}>
+        <span className={`${prefixCls}-column-title-info`}>
+          <QuestionCircleOutlined size="14px" />
+        </span>
+      </Tooltip>
     );
   };
 

src/table/interface.ts

@@ -1,5 +1,5 @@
-import { ColumnType as GioColumnType, GetComponentProps, AlignType, Key } from '@gio-design/table/es/interface';
-import { TableProps as GioTableProps } from '@gio-design/table/es/Table';
+import { ColumnType as GioColumnType, GetComponentProps, AlignType, Key } from 'rc-table/es/interface';
+import { TableProps as GioTableProps } from 'rc-table/es/Table';
 import { PaginationProps } from '../pagination';
 import { CheckboxProps } from '../checkbox';
 import { TooltipProps } from '../tooltip';

src/table/style/index.less

@@ -162,12 +162,13 @@
     width: 100%;
     min-height: 22px;
     &-info {
-      display: inline-flex;
+      display: flex;
       align-items: center;
       justify-content: center;
-      width: 16px;
-      height: 16px;
-      margin-left: 8px;
+      min-height: inherit;
+      padding: 0 8px;
+      color: @gray-3;
+      cursor: help;
       .gio-icon {
         vertical-align: 0;
       }
@@ -204,10 +205,12 @@
       flex-direction: column;
     }
     &-up {
+      color: @gray-3;
       line-height: 0;
       transform: translateY(3px);
     }
     &-down {
+      color: @gray-3;
       line-height: 0;
       transform: translateY(-3px);
     }

yarn.lock

@@ -1619,18 +1619,6 @@
   dependencies:
     "@babel/runtime" "^7.14.8"
 
-"@gio-design/table@7.18.1-patch.1":
-  version "7.18.1-patch.1"
-  resolved "https://registry.yarnpkg.com/@gio-design/table/-/table-7.18.1-patch.1.tgz#58b67e141568f7f82d5d4ec26803985d4e5531c2"
-  integrity sha512-jmGKU7FurWfuUpIruoP/H+ZPGA6TIZ9h8x6S2Jvv09JX6jwjU+yH9sYhhSSizzPVXq5N3pRz8O6RBjrMqS7pfg==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.2.5"
-    lodash "^4.17.21"
-    rc-resize-observer "^1.0.0"
-    rc-util "^5.14.0"
-    shallowequal "^1.1.0"
-
 "@gio-design/tokens@22.0.0-alpha.0":
   version "22.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@gio-design/tokens/-/tokens-22.0.0-alpha.0.tgz#3089471e2e52f73914952f9448e3894e599bad97"
@@ -15077,7 +15065,7 @@ rc-picker@^2.5.10:
     rc-util "^5.4.0"
     shallowequal "^1.1.0"
 
-rc-resize-observer@^1.0.0, rc-resize-observer@^1.0.1:
+rc-resize-observer@^1.0.0, rc-resize-observer@^1.0.1, rc-resize-observer@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz#9f46052f81cdf03498be35144cb7c53fd282c4c7"
   integrity sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==
@@ -15100,6 +15088,17 @@ rc-select@^11.1.1:
     rc-virtual-list "^3.2.0"
     warning "^4.0.3"
 
+rc-table@^7.23.0:
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.23.0.tgz#e5f76998ecf3246147d45ed311417c08886e6507"
+  integrity sha512-Q1gneB2+lUa8EzCCfbrq+jO1qNSwQv1RUUXKB84W/Stdp4EvGOt2+QqGyfotMNM4JUw0fgGLwY+WjnhUhnLuQQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-resize-observer "^1.1.0"
+    rc-util "^5.14.0"
+    shallowequal "^1.1.0"
+
 rc-tooltip@^5.0.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.1.1.tgz#94178ed162d0252bc4993b725f5dc2ac0fccf154"