@douyinfe/semi-ui 2.49.1 → 2.50.0-alpha.1

package/lib/es/image/previewImage.js

@@ -6,14 +6,38 @@ import Spin from "../spin";
 import PreviewImageFoundation from '@douyinfe/semi-foundation/lib/es/image/previewImageFoundation';
 const prefixCls = cssClasses.PREFIX;
 const preViewImgPrefixCls = `${prefixCls}-preview-image`;
+let originImageWidth = null;
+let originImageHeight = null;
+let startMouseMove = false;
+// startMouseOffset：The offset of the mouse relative to the left and top of the picture
+let startMouseOffset = {
+  x: 0,
+  y: 0
+};
 export default class PreviewImage extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
+      getOriginImageSize: () => ({
+        originImageWidth,
+        originImageHeight
+      }),
+      setOriginImageSize: size => {
+        originImageWidth = size.originImageWidth;
+        originImageHeight = size.originImageHeight;
+      },
       getContainer: () => {
         return this.containerRef.current;
       },
       getImage: () => {
-        return this.imageRef.current;
+        return this.imageRef;
+      },
+      getMouseMove: () => startMouseMove,
+      setStartMouseMove: move => {
+        startMouseMove = move;
+      },
+      getMouseOffset: () => startMouseOffset,
+      setStartMouseOffset: offset => {
+        startMouseOffset = offset;
       },
       setLoading: loading => {
         this.setState({
@@ -21,7 +45,7 @@ export default class PreviewImage extends BaseComponent {
         });
       },
       setImageCursor: canDrag => {
-        this.imageRef.current.style.cursor = canDrag ? "grab" : "default";
+        this.imageRef.style.cursor = canDrag ? "grab" : "default";
       }
     });
   }
@@ -30,22 +54,52 @@ export default class PreviewImage extends BaseComponent {
     this.onWindowResize = () => {
       this.foundation.handleWindowResize();
     };
+    this.handleZoomChange = (newZoom, e) => {
+      this.foundation.handleZoomChange(newZoom, e);
+    };
     // Determine the response method of right click according to the disableDownload parameter in props
     this.handleRightClickImage = e => {
       this.foundation.handleRightClickImage(e);
     };
+    this.handleWheel = e => {
+      this.foundation.handleWheel(e);
+    };
     this.handleLoad = e => {
       this.foundation.handleLoad(e);
     };
     this.handleError = e => {
       this.foundation.handleError(e);
     };
+    this.resizeImage = () => {
+      this.foundation.handleResizeImage();
+    };
     this.handleMoveImage = e => {
       this.foundation.handleMoveImage(e);
     };
+    // 为什么通过ref注册wheel而不是使用onWheel事件？
+    // 因为对于wheel事件，浏览器将 addEventListener 的 passive 默认值更改为 true。如此，事件监听器便不能取消事件，也不会在用户滚动页面时阻止页面呈现。
+    // 这里我们需要保持页面不动，仅放大图片，因此此处需要将 passive 更改设置为 false。
+    // Why register wheel via ref instead of using onWheel event?
+    // Because for wheel events, the browser changes the passive default of addEventListener to true. This way, the event listener cannot cancel the event, nor prevent the page from rendering when the user scrolls.
+    // Here we need to keep the page still and only zoom in on the image, so here we need to set the passive change to false.
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
+    this.registryImageRef = ref => {
+      if (this.imageRef) {
+        this.imageRef.removeEventListener("wheel", this.handleWheel);
+      }
+      if (ref) {
+        ref.addEventListener("wheel", this.handleWheel, {
+          passive: false
+        });
+      }
+      this.imageRef = ref;
+    };
     this.onImageMouseDown = e => {
       this.foundation.handleImageMouseDown(e);
     };
+    this.onImageMouseUp = () => {
+      this.foundation.handleImageMouseUp();
+    };
     this.state = {
       width: 0,
       height: 0,
@@ -59,7 +113,7 @@ export default class PreviewImage extends BaseComponent {
       left: 0
     };
     this.containerRef = /*#__PURE__*/React.createRef();
-    this.imageRef = /*#__PURE__*/React.createRef();
+    this.imageRef = null;
     this.foundation = new PreviewImageFoundation(this.adapter);
   }
   componentDidMount() {
@@ -70,23 +124,28 @@ export default class PreviewImage extends BaseComponent {
   }
   componentDidUpdate(prevProps, prevStates) {
     // If src changes, start a new loading
-    const zoomChange = "zoom" in this.props && this.props.zoom !== this.state.currZoom;
-    const srcChange = this.props.src && this.props.src !== prevProps.src;
-    if (srcChange) {
+    if (this.props.src && this.props.src !== prevProps.src) {
       this.foundation.setLoading(true);
     }
     // If the incoming zoom changes, other content changes are determined based on the new zoom value
-    if (zoomChange) {
-      this.foundation.calculatePreviewImage(this.props.zoom, null);
+    if ("zoom" in this.props && this.props.zoom !== prevStates.currZoom) {
+      this.handleZoomChange(this.props.zoom, null);
     }
-    if (!zoomChange && !srcChange && prevProps) {
-      if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
-        this.foundation.handleRatioChange();
-      }
-      if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
-        this.onWindowResize();
+    // When the incoming ratio is changed, if it"s adaptation, then resizeImage is triggered to make the image adapt to the page
+    // else if it"s adaptation is realSize, then onZoom(1) is called to make the image size the original size;
+    if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
+      if (originImageWidth && originImageHeight) {
+        if (this.props.ratio === "adaptation") {
+          this.resizeImage();
+        } else {
+          this.props.onZoom(1);
+        }
       }
     }
+    // When the incoming rotation angle of the image changes, it needs to be resized to make the image fit on the page
+    if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
+      this.onWindowResize();
+    }
   }
   render() {
     const {
@@ -107,20 +166,21 @@ export default class PreviewImage extends BaseComponent {
       transform: `rotate(${-rotation}deg)`,
       top,
       left,
-      width,
-      height
+      width: loading ? "auto" : `${width}px`,
+      height: loading ? "auto" : `${height}px`
     };
     return /*#__PURE__*/React.createElement("div", {
       className: `${preViewImgPrefixCls}`,
       ref: this.containerRef
     }, /*#__PURE__*/React.createElement("img", {
-      ref: this.imageRef,
+      ref: this.registryImageRef,
       src: src,
       alt: "previewImag",
       className: `${preViewImgPrefixCls}-img`,
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
+      onMouseUp: this.onImageMouseUp,
       onContextMenu: this.handleRightClickImage,
       onDragStart: e => e.preventDefault(),
       onLoad: this.handleLoad,
@@ -137,9 +197,9 @@ PreviewImage.propTypes = {
   src: PropTypes.string,
   rotation: PropTypes.number,
   style: PropTypes.object,
-  // maxZoom: PropTypes.number,
-  // minZoom: PropTypes.number,
-  // zoomStep: PropTypes.number,
+  maxZoom: PropTypes.number,
+  minZoom: PropTypes.number,
+  zoomStep: PropTypes.number,
   zoom: PropTypes.number,
   ratio: PropTypes.string,
   disableDownload: PropTypes.bool,
@@ -150,8 +210,8 @@ PreviewImage.propTypes = {
   onError: PropTypes.func
 };
 PreviewImage.defaultProps = {
-  // maxZoom: 5,
-  // minZoom: 0.1,
-  // zoomStep: 0.1,
+  maxZoom: 5,
+  minZoom: 0.1,
+  zoomStep: 0.1,
   zoom: undefined
 };

package/lib/es/image/previewInner.d.ts

@@ -33,8 +33,6 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         disableDownload: PropTypes.Requireable<boolean>;
         viewerVisibleDelay: PropTypes.Requireable<number>;
         zIndex: PropTypes.Requireable<number>;
-        maxZoom: PropTypes.Requireable<number>;
-        minZoom: PropTypes.Requireable<number>;
         renderHeader: PropTypes.Requireable<(...args: any[]) => any>;
         renderPreviewMenu: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
@@ -60,20 +58,14 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         zIndex: number;
         maskClosable: boolean;
         viewerVisibleDelay: number;
-        maxZoom: number;
-        minZoom: number;
     };
     private bodyOverflow;
     private scrollBarWidth;
     private originBodyWidth;
     get adapter(): PreviewInnerAdapter<PreviewInnerProps, PreviewInnerStates>;
+    timer: any;
     context: PreviewContextProps;
     foundation: PreviewInnerFoundation;
-    imageWrapRef: React.RefObject<HTMLDivElement>;
-    headerRef: React.RefObject<HTMLElement>;
-    footerRef: React.RefObject<HTMLElement>;
-    leftIconRef: React.RefObject<HTMLDivElement>;
-    rightIconRef: React.RefObject<HTMLDivElement>;
     constructor(props: PreviewInnerProps);
     static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
     componentDidMount(): void;
@@ -89,11 +81,10 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     handleZoomImage: (newZoom: number) => void;
     handleMouseUp: (e: any) => void;
     handleMouseMove: (e: any) => void;
+    handleMouseEvent: (e: any, event: string) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     onImageError: () => void;
     onImageLoad: (src: any) => void;
     handleMouseDown: (e: any) => void;
-    handleWheel: (e: any) => void;
-    registryImageWrapRef: (ref: any) => void;
     render(): JSX.Element;
 }

package/lib/es/image/previewInner.js

@@ -14,6 +14,14 @@ import PreviewInnerFoundation from '@douyinfe/semi-foundation/lib/es/image/previ
 import { PreviewContext } from "./previewContext";
 import { getScrollbarWidth } from "../_utils";
 const prefixCls = cssClasses.PREFIX;
+let startMouseDown = {
+  x: 0,
+  y: 0
+};
+let mouseActiveTime = null;
+let stopTiming = false;
+let timer = null;
+// let bodyOverflowValue = document.body.style.overflow;
 export default class PreviewInner extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -97,22 +105,30 @@ export default class PreviewInner extends BaseComponent {
       unregisterKeyDownListener: () => {
         window && window.removeEventListener("keydown", this.handleKeyDown);
       },
+      getMouseActiveTime: () => {
+        return mouseActiveTime;
+      },
+      getStopTiming: () => {
+        return stopTiming;
+      },
+      setStopTiming: value => {
+        stopTiming = value;
+      },
+      getStartMouseDown: () => {
+        return startMouseDown;
+      },
+      setStartMouseDown: (x, y) => {
+        startMouseDown = {
+          x,
+          y
+        };
+      },
+      setMouseActiveTime: time => {
+        mouseActiveTime = time;
+      },
       getSetDownloadFunc: () => {
         var _a, _b;
         return (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.setDownloadName) !== null && _b !== void 0 ? _b : this.props.setDownloadName;
-      },
-      isValidTarget: e => {
-        const headerDom = this.headerRef && this.headerRef.current;
-        const footerDom = this.footerRef && this.footerRef.current;
-        const leftIconDom = this.leftIconRef && this.leftIconRef.current;
-        const rightIconDom = this.rightIconRef && this.rightIconRef.current;
-        const target = e.target;
-        if (headerDom && headerDom.contains(target) || footerDom && footerDom.contains(target) || leftIconDom && leftIconDom.contains(target) || rightIconDom && rightIconDom.contains(target)) {
-          // Move in the operation area, return false
-          return false;
-        }
-        // Move in the preview area except the operation area, return true
-        return true;
       }
     });
   }
@@ -145,6 +161,9 @@ export default class PreviewInner extends BaseComponent {
     this.handleMouseMove = e => {
       this.foundation.handleMouseMove(e);
     };
+    this.handleMouseEvent = (e, event) => {
+      this.foundation.handleMouseMoveEvent(e, event);
+    };
     this.handleKeyDown = e => {
       this.foundation.handleKeyDown(e);
     };
@@ -157,31 +176,6 @@ export default class PreviewInner extends BaseComponent {
     this.handleMouseDown = e => {
       this.foundation.handleMouseDown(e);
     };
-    this.handleWheel = e => {
-      this.foundation.handleWheel(e);
-    };
-    // 为什么通过 addEventListener 注册 wheel 事件而不是使用 onWheel 事件？
-    // 因为 Passive Event Listeners（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners）
-    // Passive Event Listeners 是一种优化技术，用于提高滚动性能。在默认情况下，浏览器会假设事件的监听器不会调用 
-    // preventDefault() 方法来阻止事件的默认行为，从而允许进行一些优化操作，例如滚动平滑。
-    // 对于 Image 而言，如果使用触控板，双指朝不同方向分开放大图片，则需要  preventDefault 防止页面整体放大。
-    // Why register wheel event through addEventListener instead of using onWheel event？
-    // Because of Passive Event Listeners(an optimization technique used to improve scrolling performance. By default, 
-    // the browser will assume that event listeners will not call preventDefault() method to prevent the default behavior of the event, 
-    // allowing some optimization operations such as scroll smoothing.)
-    // For Image, if we use the trackpad and spread your fingers in different directions to enlarge the image, we need to preventDefault
-    // to prevent the page from being enlarged as a whole.
-    this.registryImageWrapRef = ref => {
-      if (this.imageWrapRef) {
-        this.imageWrapRef.removeEventListener("wheel", this.handleWheel);
-      }
-      if (ref) {
-        ref.addEventListener("wheel", this.handleWheel, {
-          passive: false
-        });
-      }
-      this.imageWrapRef = ref;
-    };
     this.state = {
       imgSrc: [],
       imgLoadStatus: new Map(),
@@ -198,11 +192,6 @@ export default class PreviewInner extends BaseComponent {
     this.bodyOverflow = '';
     this.originBodyWidth = '100%';
     this.scrollBarWidth = 0;
-    this.imageWrapRef = null;
-    this.headerRef = /*#__PURE__*/React.createRef();
-    this.footerRef = /*#__PURE__*/React.createRef();
-    this.leftIconRef = /*#__PURE__*/React.createRef();
-    this.rightIconRef = /*#__PURE__*/React.createRef();
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
@@ -218,9 +207,6 @@ export default class PreviewInner extends BaseComponent {
       willUpdateStates.visible = props.visible;
       if (props.visible) {
         willUpdateStates.preloadAfterVisibleChange = true;
-        willUpdateStates.viewerVisible = true;
-        willUpdateStates.rotation = 0;
-        willUpdateStates.ratio = 'adaptation';
       }
     }
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
@@ -239,8 +225,10 @@ export default class PreviewInner extends BaseComponent {
     }
   }
   componentDidUpdate(prevProps, prevState) {
-    if (prevProps.src !== this.props.src) {
-      this.foundation.updateTimer();
+    if (prevState.visible !== this.props.visible && this.props.visible) {
+      mouseActiveTime = new Date().getTime();
+      timer && clearInterval(timer);
+      timer = setInterval(this.viewVisibleChange, 1000);
     }
     // hide => show
     if (!prevProps.visible && this.props.visible) {
@@ -252,7 +240,7 @@ export default class PreviewInner extends BaseComponent {
     }
   }
   componentWillUnmount() {
-    this.foundation.clearTimer();
+    timer && clearInterval(timer);
   }
   isInGroup() {
     return Boolean(this.context && this.context.isGroup);
@@ -317,10 +305,10 @@ export default class PreviewInner extends BaseComponent {
       style: style,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
-      ref: this.registryImageWrapRef,
-      onMouseMove: this.handleMouseMove
+      onMouseMove: this.handleMouseMove,
+      onMouseOver: e => this.handleMouseEvent(e.nativeEvent, "over"),
+      onMouseOut: e => this.handleMouseEvent(e.nativeEvent, "out")
     }, /*#__PURE__*/React.createElement(Header, {
-      ref: this.headerRef,
       className: cls(hideViewerCls),
       onClose: this.handlePreviewClose,
       renderHeader: renderHeader
@@ -331,6 +319,7 @@ export default class PreviewInner extends BaseComponent {
       setRatio: this.handleAdjustRatio,
       zoom: zoom,
       ratio: ratio,
+      zoomStep: zoomStep,
       rotation: rotation,
       crossOrigin: crossOrigin,
       onError: this.onImageError,
@@ -339,7 +328,6 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      ref: this.leftIconRef,
       className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-prev`, hideViewerCls),
       onClick: () => this.handleSwitchImage("prev")
     }, /*#__PURE__*/React.createElement(IconArrowLeft, {
@@ -348,13 +336,11 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      ref: this.rightIconRef,
       className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-next`, hideViewerCls),
       onClick: () => this.handleSwitchImage("next")
     }, /*#__PURE__*/React.createElement(IconArrowRight, {
       size: "large"
     })), /*#__PURE__*/React.createElement(Footer, {
-      forwardRef: this.footerRef,
       className: hideViewerCls,
       totalNum: total,
       curPage: currentIndex + 1,
@@ -412,8 +398,6 @@ PreviewInner.propTypes = {
   disableDownload: PropTypes.bool,
   viewerVisibleDelay: PropTypes.number,
   zIndex: PropTypes.number,
-  maxZoom: PropTypes.number,
-  minZoom: PropTypes.number,
   renderHeader: PropTypes.func,
   renderPreviewMenu: PropTypes.func,
   getPopupContainer: PropTypes.func,
@@ -438,7 +422,5 @@ PreviewInner.defaultProps = {
   preLoadGap: 2,
   zIndex: 1000,
   maskClosable: true,
-  viewerVisibleDelay: 10000,
-  maxZoom: 5,
-  minZoom: 0.1
+  viewerVisibleDelay: 10000
 };

package/lib/es/index.d.ts

@@ -1,6 +1,4 @@
 import './_base/base.css';
-export { default as BaseFoundation } from '@douyinfe/semi-foundation/lib/es/base/foundation';
-export { default as BaseComponent } from "./_base/baseComponent";
 export { default as Anchor } from './anchor';
 export { default as AutoComplete } from './autoComplete';
 export { default as Avatar } from './avatar';

package/lib/es/index.js

@@ -1,6 +1,4 @@
 import './_base/base.css';
-export { default as BaseFoundation } from '@douyinfe/semi-foundation/lib/es/base/foundation';
-export { default as BaseComponent } from "./_base/baseComponent";
 export { default as Anchor } from './anchor';
 export { default as AutoComplete } from './autoComplete';
 export { default as Avatar } from './avatar';

package/lib/es/modal/confirm.d.ts

@@ -157,13 +157,13 @@ export declare function withError(props: ModalReactProps): {
     height?: string | number;
     content?: React.ReactNode;
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     closeOnEsc?: boolean;
     preventScroll?: boolean;
     afterClose?: () => void;
     keepDOM?: boolean;
     cancelText?: string;
     okText?: string;
-    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     closeIcon?: React.ReactNode;
     bodyStyle?: React.CSSProperties;
     closable?: boolean;
@@ -377,6 +377,11 @@ export declare function withError(props: ModalReactProps): {
         accessKey?: string;
         autoFocus?: boolean;
         content?: string;
+        formAction?: string;
+        formEncType?: string;
+        formMethod?: string;
+        formNoValidate?: boolean;
+        formTarget?: string;
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
@@ -458,11 +463,6 @@ export declare function withError(props: ModalReactProps): {
         'aria-valuemin'?: number;
         'aria-valuenow'?: number;
         'aria-valuetext'?: string;
-        formAction?: string;
-        formEncType?: string;
-        formMethod?: string;
-        formNoValidate?: boolean;
-        formTarget?: string;
     };
 };
 export declare function withConfirm(props: ModalReactProps): {

package/lib/es/notification/index.d.ts

@@ -33,20 +33,20 @@ declare class NotificationList extends BaseComponent<NotificationListProps, Noti
     constructor(props: NotificationListProps);
     context: ContextValue;
     get adapter(): NotificationListAdapter;
-    static addNotice(notice: NoticeProps): string | number;
+    static addNotice(notice: NoticeProps): string;
     static removeNotice(id: string): string;
-    static info(opts: NoticeProps): string | number;
-    static success(opts: NoticeProps): string | number;
-    static error(opts: NoticeProps): string | number;
-    static warning(opts: NoticeProps): string | number;
-    static open(opts: NoticeProps): string | number;
+    static info(opts: NoticeProps): string;
+    static success(opts: NoticeProps): string;
+    static error(opts: NoticeProps): string;
+    static warning(opts: NoticeProps): string;
+    static open(opts: NoticeProps): string;
     static close(id: string): string;
     static destroyAll(): void;
     static config(opts: ConfigProps): void;
     add: (noticeOpts: NoticeProps) => any;
     has: (id: string) => any;
-    remove: (id: string | number) => void;
-    update: (id: string | number, opts: NoticeProps) => any;
+    remove: (id: string) => void;
+    update: (id: string, opts: NoticeProps) => any;
     destroyAll: () => any;
     renderNoticeInPosition: (notices: NoticeInstance[], position: NoticePosition, removedItems?: NoticeInstance[], updatedItems?: NoticeInstance[]) => JSX.Element;
     setPosInStyle(noticeInstance: NoticeInstance): {};

package/lib/es/notification/notice.d.ts

@@ -16,7 +16,7 @@ declare class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
     static contextType: React.Context<ContextValue>;
     static propTypes: {
         duration: PropTypes.Requireable<number>;
-        id: PropTypes.Requireable<NonNullable<string | number>>;
+        id: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         type: PropTypes.Requireable<string>;

package/lib/es/notification/notice.js

@@ -161,7 +161,7 @@ class Notice extends BaseComponent {
 Notice.contextType = ConfigContext;
 Notice.propTypes = {
   duration: PropTypes.number,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  id: PropTypes.string,
   title: PropTypes.node,
   content: PropTypes.node,
   type: PropTypes.oneOf(types),

package/lib/es/table/ColumnSorter.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { SortOrder } from './interface';
+import { SortIcon, SortOrder } from './interface';
 export interface ColumnSorterProps {
     className?: string;
     style?: React.CSSProperties;
@@ -8,6 +8,7 @@ export interface ColumnSorterProps {
     prefixCls?: string;
     sortOrder?: SortOrder;
     title?: React.ReactNode;
+    sortIcon?: SortIcon;
 }
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
     static propTypes: {
@@ -16,6 +17,7 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         prefixCls: PropTypes.Requireable<string>;
         sortOrder: PropTypes.Requireable<NonNullable<string | boolean>>;
+        sortIcon: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         prefixCls: "semi-table";

package/lib/es/table/ColumnSorter.js

@@ -12,7 +12,8 @@ export default class ColumnSorter extends PureComponent {
       onClick,
       sortOrder,
       style,
-      title
+      title,
+      sortIcon
     } = this.props;
     const iconBtnSize = 'default';
     const upCls = cls(`${prefixCls}-column-sorter-up`, {
@@ -29,25 +30,34 @@ export default class ColumnSorter extends PureComponent {
       'aria-label': `Current sort order is ${sortOrder ? `${sortOrder}ing` : 'none'}`,
       'aria-roledescription': 'Sort data with this column'
     };
+    const renderSortIcon = () => {
+      if (typeof sortIcon === 'function') {
+        return sortIcon({
+          sortOrder
+        });
+      } else {
+        return /*#__PURE__*/React.createElement("div", {
+          style: style,
+          className: `${prefixCls}-column-sorter`
+        }, /*#__PURE__*/React.createElement("span", {
+          className: `${upCls}`
+        }, /*#__PURE__*/React.createElement(IconCaretup, {
+          size: iconBtnSize
+        })), /*#__PURE__*/React.createElement("span", {
+          className: `${downCls}`
+        }, /*#__PURE__*/React.createElement(IconCaretdown, {
+          size: iconBtnSize
+        })));
+      }
+    };
     return /*#__PURE__*/React.createElement("div", Object.assign({
-      role: 'button'
+      role: "button"
     }, ariaProps, {
       tabIndex: -1,
       className: `${prefixCls}-column-sorter-wrapper`,
       onClick: onClick,
       onKeyPress: e => isEnterPress(e) && onClick(e)
-    }), title, /*#__PURE__*/React.createElement("div", {
-      style: style,
-      className: `${prefixCls}-column-sorter`
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${upCls}`
-    }, /*#__PURE__*/React.createElement(IconCaretup, {
-      size: iconBtnSize
-    })), /*#__PURE__*/React.createElement("span", {
-      className: `${downCls}`
-    }, /*#__PURE__*/React.createElement(IconCaretdown, {
-      size: iconBtnSize
-    }))));
+    }), title, renderSortIcon());
   }
 }
 ColumnSorter.propTypes = {
@@ -55,7 +65,8 @@ ColumnSorter.propTypes = {
   style: PropTypes.object,
   onClick: PropTypes.func,
   prefixCls: PropTypes.string,
-  sortOrder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  sortOrder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  sortIcon: PropTypes.func
 };
 ColumnSorter.defaultProps = {
   prefixCls: cssClasses.PREFIX,

package/lib/es/table/Table.js

@@ -637,6 +637,7 @@ class Table extends BaseComponent {
           const sorter = /*#__PURE__*/React.createElement(ColumnSorter, {
             key: strings.DEFAULT_KEY_COLUMN_SORTER,
             sortOrder: sortOrder,
+            sortIcon: column.sortIcon,
             onClick: e => _this2.foundation.handleSort(column, e),
             title: TitleNode
           });

package/lib/es/table/interface.d.ts

@@ -83,6 +83,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     sortChildrenRecord?: boolean;
     sortOrder?: SortOrder;
     sorter?: Sorter<RecordType>;
+    sortIcon?: SortIcon;
     title?: ColumnTitle;
     useFullRender?: boolean;
     width?: string | number;
@@ -95,6 +96,9 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
 }
 export type Align = BaseAlign;
 export type SortOrder = BaseSortOrder;
+export type SortIcon = (props: {
+    sortOrder: SortOrder;
+}) => ReactNode;
 export type FilterIcon = boolean | React.ReactNode | FilterIconRenderFunction;
 export interface Filter extends BaseFilter {
     value?: any;