fix: cancel sorting

src/components/seal-table/components/header.tsx

@@ -7,11 +7,12 @@ interface HeaderProps {
   columns: SealColumnProps[];
   sortDirections?: ('ascend' | 'descend' | null)[];
   sorterList: TableOrder | Array<TableOrder>;
+  showSorterTooltip?: boolean;
   onSort?: OnSortFn;
 }
 
 const Header: React.FC<HeaderProps> = (props) => {
-  const { onSort, sortDirections, sorterList } = props;
+  const { onSort, sortDirections, sorterList, showSorterTooltip } = props;
 
   return (
     <Row className="row">
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = (props) => {
           <Col span={span} key={dataIndex || i}>
             <TableHeader
               onSort={onSort}
+              showSorterTooltip={showSorterTooltip}
               sorter={sorter}
               sorterList={sorterList}
               dataIndex={dataIndex}

src/components/seal-table/components/table-header.tsx

@@ -1,5 +1,6 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import '../styles/header.less';
@@ -22,6 +23,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     width,
     dataIndex
   } = props;
+  const intl = useIntl();
 
   const [currentSortOrder, setCurrentSortOrder] = React.useState<
     'ascend' | 'descend' | null
@@ -33,6 +35,16 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     return sortDirections[nextIndex];
   };
 
+  const nextSortTips = () => {
+    if (!currentSortOrder) {
+      return intl.formatMessage({ id: 'common.sorter.tips.ascend' });
+    }
+    if (currentSortOrder === 'ascend') {
+      return intl.formatMessage({ id: 'common.sorter.tips.descend' });
+    }
+    return intl.formatMessage({ id: 'common.sorter.tips.cancel' });
+  };
+
   const handleOnSort = () => {
     setCurrentSortOrder((prev) => {
       const next = getNextSortOrder(prev);

src/components/seal-table/index.tsx

@@ -45,6 +45,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     pagination,
     empty,
     sortDirections,
+    showSorterTooltip,
     renderChildren,
     loadChildren,
     loadChildrenAPI
@@ -167,6 +168,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
             columns={parsedColumns}
             sortDirections={sortDirections}
             sorterList={sorterList}
+            showSorterTooltip={showSorterTooltip}
           ></Header>
         </div>
         <Spin spinning={loading}>

src/components/seal-table/styles/header.less

@@ -41,6 +41,7 @@
   .sorter-header {
     display: flex;
     flex: 1;
+    width: 100%;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;

src/components/seal-table/types.ts

@@ -44,6 +44,7 @@ export interface SealColumnProps {
 }
 
 export interface TableHeaderProps {
+  showSorterTooltip?: boolean;
   sorterList?: TableOrder | Array<TableOrder>;
   sorter?: boolean | { multiple?: number };
   sortDirections?: ('ascend' | 'descend' | null)[];
@@ -78,6 +79,7 @@ export type TableOrder = {
   order: 'ascend' | 'descend' | null;
 };
 export interface SealTableProps {
+  showSorterTooltip?: boolean;
   sortDirections?: ('ascend' | 'descend' | null)[];
   columns?: SealColumnProps[];
   childParentKey?: string;