@douyinfe/semi-ui 2.9.0-beta.0 → 2.9.1

package/table/TableCell.tsx

@@ -10,9 +10,9 @@ import TableCellFoundation, { TableCellAdapter } from '@douyinfe/semi-foundation
 import { isSelectionColumn, isExpandedColumn } from '@douyinfe/semi-foundation/table/utils';
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import Context from './table-context';
+import Context, { TableContextProps } from './table-context';
 import { amendTableWidth } from './utils';
-import { Align, ColumnProps } from './interface';
+import { Align, ColumnProps, ExpandIcon } from './interface';
 
 export interface TableCellProps extends BaseProps {
     record?: Record<string, any>;
@@ -30,7 +30,7 @@ export interface TableCellProps extends BaseProps {
       * When hideExpandedColumn is true or isSection is true
       * expandIcon is a custom icon or true
       */
-    expandIcon?: ReactNode | boolean;
+    expandIcon?: ExpandIcon;
     renderExpandIcon?: (record: Record<string, any>) => ReactNode;
     hideExpandedColumn?: boolean;
     component?: any;
@@ -100,6 +100,8 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
     }
 
     ref: React.MutableRefObject<any>;
+    context: TableContextProps;
+
     constructor(props: TableCellProps) {
         super(props);
         this.ref = createRef();
@@ -242,7 +244,7 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         ) : null;
 
         // column.render
-        const realExpandIcon = typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon;
+        const realExpandIcon = (typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon) as React.ReactNode;
         if (render) {
             const renderOptions = {
                 expandIcon: realExpandIcon,

package/table/TableHeaderRow.tsx

@@ -14,7 +14,7 @@ import {
     sliceColumnsByLevel
 } from '@douyinfe/semi-foundation/table/utils';
 import BaseComponent from '../_base/baseComponent';
-import TableContext from './table-context';
+import TableContext, { TableContextProps } from './table-context';
 import { TableComponents, OnHeaderRow, Fixed } from './interface';
 
 export interface TableHeaderRowProps {
@@ -64,6 +64,8 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
     }
 
     headerNode: HTMLElement;
+    context: TableContextProps;
+    
     constructor(props: TableHeaderRowProps) {
         super(props);
         this.headerNode = null;

package/table/__test__/table.test.js

@@ -109,6 +109,7 @@ describe(`Table`, () => {
             myCls,
             myClsIndex,
         });
+        demo.unmount();
     });
     it(`test object columns appearance`, async () => {
         const myCls = `my-tr-class`;

package/table/table-context.ts

@@ -1,20 +1,24 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { noop } from 'lodash';
-import { ColumnProps, GetVirtualizedListRef } from './interface';
+import { ColumnProps, GetVirtualizedListRef, RowKey } from './interface';
+import {
+    BaseRowKeyType,
+    BaseHeadWidth,
+} from '@douyinfe/semi-foundation/table/foundation';
 
 export interface TableContextProps {
     children?: React.ReactNode;
     anyColumnFixed?: boolean;
     flattenedColumns?: ColumnProps[];
-    tableWidth?: number[];
-    headWidths?: number[];
-    setHeadWidths?: (headWidth?: number[], index?: number) => void;
+    tableWidth?: number;
+    headWidths?: BaseHeadWidth[][];
+    setHeadWidths?: (headWidth?: BaseHeadWidth[], index?: number) => void;
     getHeadWidths?: (index?: number) => number[];
     getCellWidths?: (flattenColumns: ColumnProps[], flattenedWidths?: number[], ignoreScrollBarKey?: boolean) => number[];
-    handleRowExpanded?: (expanded: boolean, realKey: string, domEvent: React.MouseEvent<HTMLElement>) => void;
+    handleRowExpanded?: (expanded: boolean, realKey: RowKey<any>, domEvent: React.MouseEvent<HTMLElement>) => void;
     renderExpandIcon?: (record: Record<string, any>, isNested?: boolean, groupKey?: string | number) => React.ReactNode;
-    renderSelection?: (record: Record<string, any>, isHeader?: boolean) => React.ReactNode;
+    renderSelection?: (record?: Record<string, any>, isHeader?: boolean) => React.ReactNode;
     getVirtualizedListRef?: GetVirtualizedListRef;
     setBodyHasScrollbar?: (bodyHasScrollBar: boolean) => void;
 }

package/tabs/TabPane.tsx

@@ -4,6 +4,7 @@ import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/tabs/constants';
 import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
 import TabsContext from './tabs-context';
+import { TabContextValue } from './interface';
 import TabPaneTransition from './TabPaneTransition';
 import { PlainTab, TabPaneProps } from './interface';
 
@@ -27,6 +28,7 @@ class TabPane extends PureComponent<TabPaneProps> {
     ref = createRef<HTMLDivElement>();
     isAnimating: boolean;
     _active: boolean;
+    context: TabContextValue;
 
     componentDidMount(): void {
         this.lastActiveKey = this.context.activeKey;
@@ -51,6 +53,7 @@ class TabPane extends PureComponent<TabPaneProps> {
         return false;
     };
 
+    /* istanbul ignore next */
     hideScroll = (): void => {
         if (this.ref && this.ref.current) {
             this.ref.current.style.overflow = 'hidden';
@@ -58,6 +61,7 @@ class TabPane extends PureComponent<TabPaneProps> {
         }
     };
 
+    /* istanbul ignore next */
     autoScroll = (): void => {
         if (this.ref && this.ref.current) {
             this.ref.current.style.overflow = '';

package/tabs/_story/tabs.stories.js

@@ -795,3 +795,75 @@ export const TabSize = () => <TabSizeDemo />;
 TabSize.story = {
   name: 'tab size',
 };
+
+class TabListChangeDemo extends React.Component {
+   constructor() {
+    super();
+    this.state = {
+      itemKey: '1',
+      tabList:[
+      {
+        tab: '文档',
+        itemKey: '1',
+      },
+      {
+        tab: '快速起步',
+        itemKey: '2',
+      },
+      {
+        tab: '帮助',
+        itemKey: '3',
+      },
+      {
+        tab: '关于',
+        itemKey: '4',
+      },
+      {
+        tab: '资源工具',
+        itemKey: '5',
+      },
+    ]
+    };
+    this.onTabClick = this.onTabClick.bind(this);
+  }
+
+  onTabClick(itemKey, type) {
+    this.setState({
+      [type]: itemKey,
+      tabList: [{
+        tab: '文档',
+        itemKey: '1',
+      }]
+    });
+  }
+
+  render() {
+    const contentList = [
+      <div>文档</div>,
+      <div>快速起步</div>,
+      <div>帮助</div>,
+      <div>关于</div>,
+      <div>资源工具</div>,
+    ];
+    return (
+      <Tabs
+        style={style}
+        type="line"
+        tabList={this.state.tabList}
+        onTabClick={itemKey => {
+          this.onTabClick(itemKey, 'itemKey');
+        }}
+      >
+        {contentList[this.state.itemKey]}
+        <span>test</span>
+        <span>test2</span>
+      </Tabs>
+    );
+  }
+}
+
+export const TabListChange = () => <TabListChangeDemo />;
+
+TabListChange.story = {
+  name: 'tablist change',
+};

package/tabs/index.tsx

@@ -119,9 +119,9 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
                 }
                 if (panes.findIndex(p => p.itemKey === activeKey) === -1){
                     if (panes.length>0){
-                        this.setState({activeKey: panes[0].itemKey});
+                        this.setState({ activeKey: panes[0].itemKey });
                     } else {
-                        this.setState({activeKey: ''});
+                        this.setState({ activeKey: '' });
                     }
                 }
                 
@@ -192,6 +192,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         this.foundation.handleTabClick(activeKey, event);
     };
 
+    /* istanbul ignore next */
     rePosChildren = (children: ReactElement[], activeKey: string): ReactElement[] => {
         const newChildren: ReactElement[] = [];
 

package/tabs/interface.ts

@@ -1,4 +1,4 @@
-import { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+import React, { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
 
 export type TabType = 'line' | 'card' | 'button';
@@ -57,6 +57,7 @@ export interface TabBarProps {
 
 export interface TabPaneProps {
     className?: string;
+    children?: React.ReactNode | undefined;
     disabled?: boolean;
     icon?: ReactNode;
     itemKey?: string;

package/tag/group.tsx

@@ -45,7 +45,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         avatarShape: PropTypes.oneOf(avatarShapeSet),
     };
 
-    renderNTag(n: number, restTags: (Tag | React.ReactNode)[]) {
+    renderNTag(n: number, restTags: React.ReactNode) {
         const { size, showPopover, popoverProps } = this.props;
         let nTag = (
             <Tag
@@ -84,7 +84,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         let renderTags: (Tag | React.ReactNode)[] = tags;
 
         const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);
-        const restTags = tags.slice(maxTagCount);
+        const restTags = tags.slice(maxTagCount) as  React.ReactNode;
         let nTag = null;
         if (n > 0) {
             nTag = this.renderNTag(n, restTags);
@@ -96,9 +96,9 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
 
     renderAllTags() {
         const { tagList, size, mode, avatarShape } = this.props;
-        const renderTags: (Tag | React.ReactNode)[] = tagList.map((tag, index): (Tag | React.ReactNode) => {
+        const renderTags = tagList.map((tag, index): (Tag | React.ReactNode) => {
             if (mode === 'custom') {
-                return tag;
+                return tag as React.ReactNode;
             }
             if (!(tag as TagProps).size) {
                 (tag as TagProps).size = size;
@@ -122,7 +122,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         }, className);
 
         const tags = this.renderAllTags();
-        const tagContents = typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags);
+        const tagContents = (typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags)) as React.ReactNode;
 
         return (
             <div style={style} className={groupCls}>

package/tagInput/_story/tagInput.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Toast, Icon, Button, Avatar } from '@douyinfe/semi-ui/';
+import { Toast, Icon, Button, Avatar, Form } from '@douyinfe/semi-ui/';
 import TagInput from '../index';
 import { IconGift, IconVigoLogo } from '@douyinfe/semi-icons';
 const style = {
@@ -412,3 +412,16 @@ export const PrefixSuffix = () => (
 PrefixSuffix.story = {
   name: 'prefix / suffix',
 };
+
+
+export const TagInputInForm = () => (
+  <>
+    <Form onSubmit={() => Toast.info('123')}>
+      <TagInput showClear />
+    </Form>
+  </>
+);
+
+PrefixSuffix.story = {
+  name: 'TagInputInForm'
+};

package/timePicker/TimePicker.tsx

@@ -323,7 +323,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                 index,
                 isNullOrUndefined(panelHeader) ? get(defaultHeaderMap, index, null) : panelHeader
             );
-            panelProps.panelFooter = get(panels, index, panelFooter);
+            panelProps.panelFooter = get(panels, index, panelFooter) as React.ReactNode;
         }
 
         return panelProps;
@@ -475,7 +475,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
 
         const panelPrefix = classNames({
             [`${prefixCls}-panel`]: true,
-            [`${prefixCls}-panel-${ size}`]: size,
+            [`${prefixCls}-panel-${size}`]: size,
         });
 
         const inputProps = {

package/timePicker/_story/timepicker.stories.js

@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button } from '../../index';
+import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
 import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
 import { get } from 'lodash';
 
@@ -44,6 +44,12 @@ const init = () => {
 init();
 
 export const TimePickerPanelDefault = () => {
+   const initValues = {
+    testRange: [
+      new Date("2022-04-17T15:00:00"),
+      new Date("2022-04-17T18:00:00"),
+    ],
+  };
   return (
     <div>
       <TimePicker panelHeader={'Time Select'} onChange={val => console.log(val)} />
@@ -53,6 +59,19 @@ export const TimePickerPanelDefault = () => {
         defaultOpen={true}
         scrollItemProps={{ cycled: false }}
       />
+      <TimePicker use12Hours defaultValue={"上午 10:32:33"}/>
+      <br/><br/>
+      <TimePicker type="timeRange" use12Hours format="a h:mm"  defaultValue={["下午 08:11", "上午 11:21"]} />
+      <Form initValues={initValues}>
+      <pre>{JSON.stringify(initValues)}</pre>
+      <Form.TimePicker
+        use12Hours
+        field="testRange"
+        label="Time Range"
+        type="timeRange"
+        format="a hh:mm"
+      />
+    </Form>
     </div>
   );
 };

package/timeline/index.tsx

@@ -17,6 +17,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
+    children?: React.ReactNode | undefined;
 }
 
 const prefixCls = cssClasses.PREFIX;

package/timeline/item.tsx

@@ -7,6 +7,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 
 export interface TimelineItemProps {
     color?: string;
+    children?: React.ReactNode | undefined;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;

package/toast/ToastTransition.tsx

@@ -6,7 +6,7 @@ import React, { CSSProperties } from 'react';
 
 export interface ToastTransitionProps{
     motion?: Motion<ToastTransitionProps>;
-    children?: React.ReactChildren | React.JSXElementConstructor<any>;
+    children?: React.ReactNode | ((TransitionProps: any) => any)
 }
 
 

package/toast/toast.tsx

@@ -2,7 +2,7 @@
 import React, { CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import ToastFoundation, { ToastAdapter, ToastState, ToastProps } from '@douyinfe/semi-foundation/toast/toastFoundation';
 import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/toast/constants';
 import BaseComponent from '../_base/baseComponent';
@@ -52,6 +52,8 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         this.foundation = new ToastFoundation(this.adapter);
     }
 
+    context: ContextValue;
+
     get adapter(): ToastAdapter {
         return {
             ...super.adapter,

package/tooltip/_story/tooltip.stories.js

@@ -404,6 +404,115 @@ AdjustPosition.story = {
   name: '自适应',
 };
 
+export const AdjustPosIfNeed = () => {
+  const tops = [
+        ['topLeft', 'TL'],
+        ['top', 'Top'],
+        ['topRight', 'TR'],
+    ];
+    const lefts = [
+        ['leftTop', 'LT'],
+        ['left', 'Left'],
+        ['leftBottom', 'LB'],
+    ];
+    const rights = [
+        ['rightTop', 'RT'],
+        ['right', 'Right'],
+        ['rightBottom', 'RB'],
+    ];
+    const bottoms = [
+        ['bottomLeft', 'BL'],
+        ['bottom', 'Bottom'],
+        ['bottomRight', 'BR'],
+    ];
+
+     return (
+        <div style={{ paddingLeft: 40 }}>
+            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
+                {tops.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag 
+                          style={{ marginRight: '8px' }}
+                          data-cy={Array.isArray(pos) ? pos[0] : pos}
+                        >
+                          {Array.isArray(pos) ? pos[1] : pos}
+                        </Tag>
+                    </Tooltip>
+                ))}
+            </div>
+            <div style={{ width: 40, float: 'left' }}>
+                {lefts.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag data-cy={Array.isArray(pos) ? pos[0] : pos} style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                    </Tooltip>
+                ))}
+            </div>
+            <div style={{ width: 40, marginLeft: 180 }}>
+                {rights.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag data-cy={Array.isArray(pos) ? pos[0] : pos} style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                    </Tooltip>
+                ))}
+            </div>
+            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
+                {bottoms.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag data-cy={Array.isArray(pos) ? pos[0] : pos} position={Array.isArray(pos) ? pos[0] : pos} style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                    </Tooltip>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+AdjustPosIfNeed.story = {
+  name: '自适应位置',
+};
+
 export const CompositeComponent = () => (
   <div
     style={{
@@ -764,7 +873,7 @@ export const leftTopOverDemo = () => {
     content,
     trigger: 'click',
     showArrow: false,
-    visible,
+    visible:true,
     trigger: 'custom',
     motion: false,
   };
@@ -774,34 +883,37 @@ export const leftTopOverDemo = () => {
 
   return (
     <div data-cy="wrapper">
-      <Button onClick={() => setVisible(!visible)}>toggle visible</Button>
-      <div style={{ paddingTop: 200 }}>
+      <Button onClick={() => setVisible(!visible)} data-cy="toggleVisible">toggle visible</Button>
+      <div style={{ paddingTop: 110 }}>
         <Space spacing={80}>
-          <Tooltip {...commonProps} position="leftTopOver">
-            <Button data-cy="leftTopOver" style={buttonStyle}>
-              leftTopOver
-            </Button>
-          </Tooltip>
-          <Tooltip {...commonProps} position="leftBottomOver">
+          <Tooltip {...commonProps} position="leftBottomOver" trigger="click">
             <Button data-cy="leftBottomOver" style={buttonStyle}>
               leftBottomOver
             </Button>
           </Tooltip>
-          <Tooltip {...commonProps} position="rightTopOver">
-            <Button data-cy="rightTopOver" style={buttonStyle}>
-              rightTopOver
-            </Button>
-          </Tooltip>
-          <Tooltip {...commonProps} position="rightBottomOver">
+          <Tooltip {...commonProps} position="rightBottomOver" trigger="click">
             <Button data-cy="rightBottomOver" style={buttonStyle}>
               rightBottomOver
             </Button>
           </Tooltip>
         </Space>
       </div>
+      <Space spacing={80}>
+        <Tooltip {...commonProps} position="leftTopOver" trigger="click">
+          <Button data-cy="leftTopOver" style={buttonStyle}>
+            leftTopOver
+          </Button>
+        </Tooltip>
+        <Tooltip {...commonProps} position="rightTopOver" trigger="click">
+          <Button data-cy="rightTopOver" style={buttonStyle}>
+            rightTopOver
+          </Button>
+        </Tooltip>
+      </Space>
     </div>
   );
 };
+
 leftTopOverDemo.storyName = `leftTopOver visible`;
 leftTopOverDemo.parameters = {
   chromatic: {

package/tooltip/index.tsx

@@ -19,7 +19,7 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
 import { getActiveElement, getFocusableElements, stopPropagation } from '../_utils';
 import Portal from '../_portal/index';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
 import TriangleArrowVertical from './TriangleArrowVertical';
 import TooltipTransition from './TooltipStyledTransition';
@@ -173,6 +173,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     getPopupContainer: () => HTMLElement;
     containerPosition: string;
     foundation: TooltipFoundation;
+    context: ContextValue;
 
     constructor(props: TooltipProps) {
         super(props);
@@ -580,7 +581,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
             </TooltipTransition>
         ) : (
-            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? undefined : 'visible', ...style }}>
+            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? 'hidden' : 'visible', ...style }}>
                 {contentNode}
                 {icon}
             </div>

package/transfer/index.tsx

@@ -60,6 +60,8 @@ export interface SourcePanelProps {
     filterData: Array<DataItem>;
     /* All items */
     sourceData: Array<DataItem>;
+    /* transfer props' dataSource */
+    propsDataSource: DataSource,
     /* Whether to select all */
     allChecked: boolean;
     /* Number of filtered results */
@@ -359,7 +361,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
     renderLeft(locale: Locale['Transfer']) {
         const { data, selectedItems, inputValue, searchResult } = this.state;
-        const { loading, type, emptyContent, renderSourcePanel } = this.props;
+        const { loading, type, emptyContent, renderSourcePanel, dataSource } = this.props;
         const totalToken = locale.total;
         const inSearchMode = inputValue !== '';
         const showNumber = inSearchMode ? searchResult.size : data.length;
@@ -423,6 +425,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             noMatch,
             filterData,
             sourceData: data,
+            propsDataSource: dataSource,
             allChecked: !leftContainesNotInSelected,
             showNumber,
             inputValue,
@@ -558,18 +561,20 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderRightSortableList(selectedData: Array<ResolvedDataItem>) {
         // when choose some items && draggable is true
         const SortableItem = SortableElement((
-            (item: ResolvedDataItem) => this.renderRightItem(item)) as React.SFC<ResolvedDataItem>
+            (item: ResolvedDataItem) => this.renderRightItem(item)) as React.FC<ResolvedDataItem>
         );
         const SortableList = SortableContainer(({ items }: { items: Array<ResolvedDataItem> }) => (
             <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
                 {items.map((item, index: number) => (
                     // sortableElement will take over the property 'key', so use another '_optionKey' to pass
+                    // @ts-ignore skip SortableItem type check
                     <SortableItem key={item.label} index={index} {...item} _optionKey={item.key} />
                 ))}
             </div>
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
         ), { distance: 10 });
+        // @ts-ignore skip SortableItem type check
         const sortList = <SortableList useDragHandle onSortEnd={this.onSortEnd} items={selectedData} />;
         return sortList;
     }