@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/lib/es/modal/Modal.js

@@ -29,8 +29,8 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 import BaseComponent from '../_base/baseComponent';
-import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from '../modal/confirm';
-import useModal from '../modal/useModal';
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
+import useModal from './useModal';
 export const destroyFns = [];
 
 class Modal extends BaseComponent {
@@ -304,8 +304,8 @@ Modal.propTypes = {
   closable: PropTypes.bool,
   centered: PropTypes.bool,
   visible: PropTypes.bool,
-  width: PropTypes.number,
-  height: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   confirmLoading: PropTypes.bool,
   cancelLoading: PropTypes.bool,
   okText: PropTypes.string,

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

@@ -30,7 +30,7 @@ export declare function withInfo(props: ModalReactProps): {
     confirmLoading?: boolean;
     cancelLoading?: boolean;
     hasCancel?: boolean;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
@@ -38,7 +38,7 @@ export declare function withInfo(props: ModalReactProps): {
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     getPopupContainer?: () => HTMLElement;
     closeOnEsc?: boolean;
@@ -71,7 +71,7 @@ export declare function withSuccess(props: ModalReactProps): {
     confirmLoading?: boolean;
     cancelLoading?: boolean;
     hasCancel?: boolean;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
@@ -79,7 +79,7 @@ export declare function withSuccess(props: ModalReactProps): {
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     getPopupContainer?: () => HTMLElement;
     closeOnEsc?: boolean;
@@ -112,7 +112,7 @@ export declare function withWarning(props: ModalReactProps): {
     confirmLoading?: boolean;
     cancelLoading?: boolean;
     hasCancel?: boolean;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
@@ -120,7 +120,7 @@ export declare function withWarning(props: ModalReactProps): {
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     getPopupContainer?: () => HTMLElement;
     closeOnEsc?: boolean;
@@ -153,7 +153,7 @@ export declare function withError(props: ModalReactProps): {
     confirmLoading?: boolean;
     cancelLoading?: boolean;
     hasCancel?: boolean;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
@@ -161,7 +161,7 @@ export declare function withError(props: ModalReactProps): {
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     getPopupContainer?: () => HTMLElement;
     closeOnEsc?: boolean;
@@ -194,7 +194,7 @@ export declare function withConfirm(props: ModalReactProps): {
     confirmLoading?: boolean;
     cancelLoading?: boolean;
     hasCancel?: boolean;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
@@ -202,7 +202,7 @@ export declare function withConfirm(props: ModalReactProps): {
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     getPopupContainer?: () => HTMLElement;
     closeOnEsc?: boolean;

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

@@ -36,8 +36,8 @@ export interface NavProps extends BaseProps {
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
-    footer?: React.ReactNode | NavHeaderProps;
-    header?: React.ReactNode | NavFooterProps;
+    footer?: React.ReactNode | NavFooterProps;
+    header?: React.ReactNode | NavHeaderProps;
     isCollapsed?: boolean;
     items?: NavItems;
     limitIndent?: boolean;

package/lib/es/pagination/index.js

@@ -15,6 +15,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/pagination
 import '@douyinfe/semi-foundation/lib/es/pagination/pagination.css';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import Select from '../select/index';
@@ -45,6 +46,7 @@ export default class Pagination extends BaseComponent {
     this.foundation = new PaginationFoundation(this.adapter);
     this.renderDefaultPage = _bindInstanceProperty(_context = this.renderDefaultPage).call(_context, this);
     this.renderSmallPage = _bindInstanceProperty(_context2 = this.renderSmallPage).call(_context2, this);
+    warning(Boolean(props.showSizeChanger && props.hideOnSinglePage), '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears');
   }
 
   get adapter() {
@@ -338,7 +340,8 @@ export default class Pagination extends BaseComponent {
       className,
       style,
       hideOnSinglePage,
-      hoverShowPageSelect
+      hoverShowPageSelect,
+      showSizeChanger
     } = this.props;
     const paginationCls = classNames("".concat(prefixCls, "-small"), prefixCls, className);
     const {
@@ -348,7 +351,7 @@ export default class Pagination extends BaseComponent {
     } = this.state;
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 
@@ -377,13 +380,14 @@ export default class Pagination extends BaseComponent {
       showTotal,
       className,
       style,
-      hideOnSinglePage
+      hideOnSinglePage,
+      showSizeChanger
     } = this.props;
     const paginationCls = classNames(className, "".concat(prefixCls));
     const showTotalCls = "".concat(prefixCls, "-total");
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 

package/lib/es/radio/radio.js

@@ -127,6 +127,7 @@ class Radio extends BaseComponent {
       ["".concat(prefix, "-cardRadioGroup")]: isCardRadioGroup,
       ["".concat(prefix, "-cardRadioGroup_disabled")]: isDisabled && isCardRadioGroup,
       ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
+      ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
       ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
       [className]: Boolean(className)
     });

package/lib/es/rating/item.js

@@ -86,7 +86,8 @@ export default class Item extends PureComponent {
       "aria-checked": value > index ? 'true' : 'false',
       "aria-posinset": index + 1,
       "aria-setsize": count,
-      tabIndex: 0
+      tabIndex: 0,
+      className: "".concat(prefixCls, "-wrapper")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-first"),
       style: {

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

@@ -48,6 +48,7 @@ export declare type RenderMultipleSelectedItemFn = (optionNode: Record<string, a
 };
 export declare type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 export declare type SelectProps = {
+    id?: string;
     autoFocus?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;

package/lib/es/select/index.js

@@ -704,7 +704,9 @@ class Select extends BaseComponent {
           key: value
         }), content);
       } else {
-        return content;
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: value
+        }, content);
       }
     });
 
@@ -818,6 +820,7 @@ class Select extends BaseComponent {
       multiple,
       filter,
       style,
+      id,
       size,
       className,
       validateStatus,
@@ -891,6 +894,7 @@ class Select extends BaseComponent {
       ref: ref => this.triggerRef.current = ref,
       onClick: e => this.foundation.handleClick(e),
       style: style,
+      id: id,
       tabIndex: tabIndex,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,

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

@@ -176,7 +176,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
     _invokeColumnFn: (key: string, funcName: string, ...args: any[]) => void;
     _cacheHeaderRef: (node: HTMLDivElement) => void;
     getCurrentPageData: () => any;
-    getColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<any>[];
+    getColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<RecordType>[];
     getCellWidths: (...args: any[]) => number[];
     setHeadWidths: (...args: any[]) => void;
     getHeadWidths: (...args: any[]) => number[];

package/lib/es/timeline/item.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 export interface TimelineItemProps {
     color?: string;
-    time?: string;
+    time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;
     extra?: React.ReactNode;
@@ -14,7 +14,7 @@ export interface TimelineItemProps {
 export default class Item extends PureComponent<TimelineItemProps> {
     static propTypes: {
         color: PropTypes.Requireable<string>;
-        time: PropTypes.Requireable<string>;
+        time: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         type: PropTypes.Requireable<string>;
         dot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/timeline/item.js

@@ -40,9 +40,9 @@ export default class Item extends PureComponent {
       className: dotCls
     }, dotStyle), dot), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
-    }, children, extra ? /*#__PURE__*/React.createElement("div", {
+    }, children, extra && /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content-extra")
-    }, extra) : null, /*#__PURE__*/React.createElement("div", {
+    }, extra), time && /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content-time")
     }, time)));
   }
@@ -50,7 +50,7 @@ export default class Item extends PureComponent {
 }
 Item.propTypes = {
   color: PropTypes.string,
-  time: PropTypes.string,
+  time: PropTypes.node,
   type: PropTypes.oneOf(strings.ITEM_TYPE),
   dot: PropTypes.node,
   extra: PropTypes.node,

package/lib/es/tree/treeNode.js

@@ -64,8 +64,6 @@ export default class TreeNode extends PureComponent {
       const {
         onNodeRightClick
       } = this.context;
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
       onNodeRightClick(e, this.props);
     };
 

package/lib/es/treeSelect/index.js

@@ -716,6 +716,7 @@ class TreeSelect extends BaseComponent {
           itemSize: virtualize.itemSize,
           height: height,
           width: width,
+          // @ts-ignore avoid strict check of itemKey
           itemKey: this.itemKey,
           itemData: flattenNodes,
           className: "".concat(prefixTree, "-virtual-list"),

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -136,7 +136,16 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     static defaultProps: Partial<UploadProps>;
     static FileCard: typeof FileCard;
     constructor(props: UploadProps);
-    static getDerivedStateFromProps(props: UploadProps): Partial<UploadState> | null;
+    /**
+     * Notes:
+     *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+     *   `The types of the parameters "props" and "nextProps" are incompatible.
+           The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+     *   which seems to be a bug, remove props type declare here
+     */
+    static getDerivedStateFromProps(props: any): {
+        fileList: any;
+    };
     get adapter(): UploadAdapter<UploadProps, UploadState>;
     foundation: UploadFoundation;
     inputRef: RefObject<HTMLInputElement>;

package/lib/es/upload/index.js

@@ -267,6 +267,14 @@ class Upload extends BaseComponent {
     this.inputRef = /*#__PURE__*/React.createRef();
     this.replaceInputRef = /*#__PURE__*/React.createRef();
   }
+  /**
+   * Notes:
+   *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+   *   `The types of the parameters "props" and "nextProps" are incompatible.
+         The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+   *   which seems to be a bug, remove props type declare here
+   */
+
 
   static getDerivedStateFromProps(props) {
     const {

package/list/__test__/list.test.js

@@ -0,0 +1,264 @@
+import { List, Avatar, Button, ButtonGroup } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+const dataSource = [
+    '从明天起，做一个幸福的人',
+    '喂马，劈柴，周游世界',
+    '从明天起，关心粮食和蔬菜',
+    '我有一所房子，面朝大海，春暖花开',
+];
+
+function renderList(props) {
+    const realProps = {
+        dataSource,
+        renderItem: item => <List.Item>{item}</List.Item>,
+        ...props,
+    };
+    return mount(<List {...realProps} />, {
+        attachTo: document.getElementById('container'),
+    });
+}
+
+describe('List', () => {
+
+    beforeEach(() => {
+        const div = document.createElement('div');
+        div.setAttribute('id', 'container');
+        document.body.appendChild(div);
+    });
+
+    afterEach(() => {
+        const div = document.getElementById('container');
+        if (div) {
+            document.body.removeChild(div);
+        }
+        document.body.innerHTML = '';
+    });
+
+    it('List with jsx', () => {
+        const list = mount(<List>
+            <List.Item>从明天起，做一个幸福的人</List.Item>
+            <List.Item>喂马，劈柴，周游世界</List.Item>
+            <List.Item>从明天起，关心粮食和蔬菜</List.Item>
+            <List.Item>我有一所房子，面朝大海，春暖花开菜</List.Item>
+        </List>, {
+            attachTo: document.getElementById('container'),
+        });;
+        const item = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-list-item`);
+        expect(item.length).toEqual(4);
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-item`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('从明天起，做一个幸福的人');
+        list.unmount();
+    });
+
+    it('List with basic renderItem', () => {
+        const list = renderList();
+        const item = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-list-item`);
+        expect(item.length).toEqual(4);
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-item`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('从明天起，做一个幸福的人');
+        list.unmount();
+    });
+
+    it('List with renderItem header/main/extra', () => {
+        const list = renderList({
+            renderItem: item => (
+                <List.Item
+                    header={<Avatar color="blue">SE</Avatar>}
+                    main={
+                        <div>
+                            <span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>示例标题</span>
+                            {item}
+                        </div>
+                    }
+                    extra={
+                        <ButtonGroup theme="borderless">
+                            <Button>编辑</Button>
+                            <Button>更多</Button>
+                        </ButtonGroup>
+                    }
+                />
+            )
+        });
+        // item header
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-item-body-header .${BASE_CLASS_PREFIX}-avatar-label`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('SE');
+        // item main
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-item-body-main span`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('示例标题');
+        // item extra
+        expect(list.exists(`.${BASE_CLASS_PREFIX}-list-item-extra .${BASE_CLASS_PREFIX}-button-group`)).toEqual(true);
+        list.unmount();
+    });
+
+    it('List with className / style', () => {
+        const props = {
+            className: 'test',
+            style: { height: 420 },
+        };
+        const list = renderList(props);
+        expect(list.hasClass('test')).toEqual(true);
+        expect(list.find('div.test')).toHaveStyle('height', 420);
+        list.unmount();
+    });
+
+    it('List with bordered', () => {
+        const list = renderList({ bordered: true });
+        expect(list.exists(`.${BASE_CLASS_PREFIX}-list-bordered`)).toEqual(true);
+        list.unmount();
+    });
+
+    it('List with size', () => {
+        const smallList = renderList({ size: 'small' });
+        expect(smallList.exists(`.${BASE_CLASS_PREFIX}-list-small`)).toEqual(true);
+        smallList.unmount();
+        const defaultList = renderList({ size: 'default' });
+        expect(defaultList.exists(`.${BASE_CLASS_PREFIX}-list-default`)).toEqual(true);
+        defaultList.unmount();
+        const largeList = renderList({ size: 'large' });
+        expect(largeList.exists(`.${BASE_CLASS_PREFIX}-list-large`)).toEqual(true);
+        largeList.unmount();
+    });
+
+    it('List with layout', () => {
+        const horizontalList = renderList({ layout: 'horizontal' });
+        expect(horizontalList.exists(`.${BASE_CLASS_PREFIX}-list-flex`)).toEqual(true);
+        horizontalList.unmount();
+        const verticalList = renderList({ layout: 'vertical' });
+        expect(verticalList.exists(`.${BASE_CLASS_PREFIX}-list-flex`)).toEqual(false);
+        verticalList.unmount();
+    });
+
+    it('List with grid', () => {
+        const list = renderList({
+            grid: {
+                gutter: 18,
+                span: 6,
+            }
+        });
+        const item = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-col-6`);
+        expect(item.length).toEqual(4);
+        expect(list.find(`.${BASE_CLASS_PREFIX}-col-6`).at(0)).toHaveStyle('paddingLeft', 9);
+        expect(list.find(`.${BASE_CLASS_PREFIX}-col-6`).at(0)).toHaveStyle('paddingRight', 9);
+        list.unmount();
+    });
+
+    it('List with split', () => {
+        const list = renderList({ split: false });
+        expect(list.exists(`.${BASE_CLASS_PREFIX}-list-split`)).toEqual(false);
+        list.unmount();
+    });
+
+    it('List with onClick', () => {
+        const spyOnClick = sinon.spy(() => { });
+        const list = renderList({ onClick: spyOnClick });
+        list.find(`.${BASE_CLASS_PREFIX}-list-item`).at(0).simulate('click');
+        expect(spyOnClick.calledOnce).toBe(true);
+        list.unmount();
+    });
+
+
+    it('List with jsx', () => {
+        const spyOnClick = sinon.spy(() => { });
+        const list = mount(<List>
+            <List.Item onClick={spyOnClick}>从明天起，做一个幸福的人</List.Item>
+            <List.Item>喂马，劈柴，周游世界</List.Item>
+            <List.Item>从明天起，关心粮食和蔬菜</List.Item>
+            <List.Item>我有一所房子，面朝大海，春暖花开菜</List.Item>
+        </List>, {
+            attachTo: document.getElementById('container'),
+        });;
+        list.find(`.${BASE_CLASS_PREFIX}-list-item`).at(0).simulate('click');
+        expect(spyOnClick.calledOnce).toBe(true);
+        list.unmount();
+    });
+
+    it('List with loading', () => {
+        const loadingList = renderList({ loading: true });
+        expect(loadingList.exists(`.${BASE_CLASS_PREFIX}-spin-hidden`)).toEqual(false);
+        loadingList.unmount();
+        const noloadingList = renderList({ loading: false });
+        expect(noloadingList.exists(`.${BASE_CLASS_PREFIX}-spin-hidden`)).toEqual(true);
+        noloadingList.unmount();
+    });
+
+    it('List with loadMore', () => {
+        const list = renderList({ loadMore: <Button>加载更多</Button> });
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list .${BASE_CLASS_PREFIX}-button .${BASE_CLASS_PREFIX}-button-content`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('加载更多');
+        list.unmount();
+    });
+
+    it('List with emptyContent', () => {
+        const list = renderList({
+            emptyContent: <span className='empty'>自定义空内容</span>,
+            dataSource: []
+        });
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-items .${BASE_CLASS_PREFIX}-list-empty .empty`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('自定义空内容');
+        list.unmount();
+
+        const list2 = renderList({
+            dataSource: []
+        });
+        expect(
+            list2
+                .find(`.${BASE_CLASS_PREFIX}-list-items .${BASE_CLASS_PREFIX}-list-empty`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('暂无数据');
+        list2.unmount();
+    });
+
+    it('List with footer/header', () => {
+        const list = renderList({
+            header: <div className='header'>头部</div>,
+            footer: <div className='footer'>尾部</div>,
+        });
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-header .header`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('头部');
+        expect(
+            list
+                .find(`.${BASE_CLASS_PREFIX}-list-footer .footer`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('尾部');
+        list.unmount();
+    });
+});