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

package/tabs/TabBar.tsx

@@ -0,0 +1,248 @@
+import React, { MouseEvent, ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import cls from 'classnames';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/tabs/constants';
+import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
+import OverflowList from '../overflowList';
+import Dropdown from '../dropdown';
+import Button from '../button';
+import { TabBarProps, PlainTab } from './interface';
+import { isEmpty } from 'lodash';
+import { IconChevronRight, IconChevronLeft, IconClose } from '@douyinfe/semi-icons';
+import { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';
+
+export interface TabBarState {
+    endInd: number;
+    rePosKey: number;
+    startInd: number;
+}
+
+export interface OverflowItem extends PlainTab {
+    key: string;
+    active: boolean;
+}
+
+class TabBar extends React.Component<TabBarProps, TabBarState> {
+    static propTypes = {
+        activeKey: PropTypes.string,
+        className: PropTypes.string,
+        collapsible: PropTypes.bool,
+        list: PropTypes.array,
+        onTabClick: PropTypes.func,
+        size: PropTypes.oneOf(strings.SIZE),
+        style: PropTypes.object,
+        tabBarExtraContent: PropTypes.node,
+        tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
+        type: PropTypes.oneOf(strings.TYPE_MAP),
+        closable: PropTypes.bool,
+        deleteTabItem: PropTypes.func
+    };
+
+    uuid: string;
+
+    constructor(props: TabBarProps) {
+        super(props);
+        this.state = {
+            endInd: props.list.length,
+            rePosKey: 0,
+            startInd: 0,
+        };
+        this.uuid = getUuidv4();
+    }
+
+    renderIcon(icon: ReactNode): ReactNode {
+        return (
+            <span>
+                {icon}
+            </span>
+        );
+    }
+
+    renderExtra(): ReactNode {
+        const { tabBarExtraContent, type, size } = this.props;
+        const tabBarExtraContentDefaultStyle = { float: 'right' };
+        const tabBarExtraContentStyle =
+            tabBarExtraContent && (tabBarExtraContent as ReactElement).props ? (tabBarExtraContent as ReactElement).props.style : {};
+        const extraCls = cls(cssClasses.TABS_BAR_EXTRA, {
+            [`${cssClasses.TABS_BAR}-${type}-extra`]: type,
+            [`${cssClasses.TABS_BAR}-${type}-extra-${size}`]: size,
+        });
+        if (tabBarExtraContent) {
+            const tabBarStyle = { ...tabBarExtraContentDefaultStyle, ...tabBarExtraContentStyle };
+            return (
+                <div className={extraCls} style={tabBarStyle}>
+                    {tabBarExtraContent}
+                </div>
+            );
+        }
+        return null;
+    }
+
+    handleItemClick = (itemKey: string, e: MouseEvent<Element>): void => {
+        this.props.onTabClick(itemKey, e);
+        if (this.props.collapsible) {
+            const key = this._getItemKey(itemKey);
+            // eslint-disable-next-line max-len
+            const tabItem = document.querySelector(`[data-uuid="${this.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+            tabItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        }
+    };
+
+    renderTabItem = (panel: PlainTab): ReactNode => {
+        const { size, type, deleteTabItem } = this.props;
+        const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
+        const closableIcon = (type === 'card' && panel.closable) ? <IconClose className={`${cssClasses.TABS_TAB}-icon-close`} onClick={(e: React.MouseEvent<HTMLSpanElement>) => deleteTabItem(panel.itemKey, e)} /> : null;
+        let events = {};
+        const key = panel.itemKey;
+        if (!panel.disabled) {
+            events = {
+                onClick: (e: MouseEvent<HTMLDivElement>): void => this.handleItemClick(key, e),
+            };
+        }
+        const className = cls(cssClasses.TABS_TAB, {
+            [cssClasses.TABS_TAB_ACTIVE]: this._isActive(key),
+            [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
+            [`${cssClasses.TABS_TAB}-small`]: size === 'small',
+            [`${cssClasses.TABS_TAB}-medium`]: size === 'medium',
+        });
+        return (
+            <div
+                role="tab"
+                aria-disabled={panel.disabled ? 'true' : 'false'}
+                aria-selected={this._isActive(key) ? 'true' : 'false'}
+                {...events}
+                className={className}
+                key={this._getItemKey(key)}
+            >
+                {panelIcon}
+                {panel.tab}
+                {closableIcon}
+            </div>
+        );
+    };
+
+    renderTabComponents = (list: Array<PlainTab>): Array<ReactNode> => list.map(panel => this.renderTabItem(panel));
+
+    handleArrowClick = (items: Array<OverflowItem>, pos: 'start' | 'end'): void => {
+        const inline = pos === 'start' ? 'end' : 'start';
+        const lastItem = pos === 'start' ? items.pop() : items.shift();
+        if (!lastItem) {
+            return;
+        }
+        const key = this._getItemKey(lastItem.itemKey);
+        // eslint-disable-next-line max-len
+        const tabItem = document.querySelector(`[data-uuid="${this.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+        tabItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline });
+    };
+
+    renderCollapse = (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end'): ReactNode => {
+        if (isEmpty(items)) {
+            return null;
+        }
+        const { dropdownClassName, dropdownStyle } = this.props;
+        const { rePosKey } = this.state;
+        const disabled = !items.length;
+        const menu = (
+            <Dropdown.Menu>
+                {items.map(panel => {
+                    const { icon: i, tab, itemKey } = panel;
+                    const panelIcon = i ? this.renderIcon(panel.icon) : null;
+                    return (
+                        <Dropdown.Item
+                            key={itemKey}
+                            onClick={(e): void => this.handleItemClick(itemKey, e)}
+                            active={this._isActive(itemKey)}
+                        >
+                            {panelIcon}
+                            {tab}
+                        </Dropdown.Item>
+                    );
+                })}
+            </Dropdown.Menu>
+        );
+
+        const arrowCls = cls({
+            [`${cssClasses.TABS_BAR}-arrow-${pos}`]: pos,
+            [`${cssClasses.TABS_BAR}-arrow`]: true,
+        });
+
+        const dropdownCls = cls(dropdownClassName, {
+            [`${cssClasses.TABS_BAR}-dropdown`]: true,
+        });
+
+        return (
+            <Dropdown
+                className={dropdownCls}
+                clickToHide
+                clickTriggerToHide
+                key={`${rePosKey}-${pos}`}
+                position={pos === 'start' ? 'bottomLeft' : 'bottomRight'}
+                render={disabled ? null : menu}
+                showTick
+                style={dropdownStyle}
+                trigger={'hover'}
+            >
+                <div className={arrowCls} onClick={(e): void => this.handleArrowClick(items, pos)}>
+                    <Button
+                        disabled={disabled}
+                        icon={icon}
+                        // size="small"
+                        theme="borderless"
+                    />
+                </div>
+            </Dropdown>
+        );
+    };
+
+    renderOverflow = (items: any[]): Array<ReactNode> => items.map((item, ind) => {
+        const icon = ind === 0 ? <IconChevronLeft /> : <IconChevronRight />;
+        const pos = ind === 0 ? 'start' : 'end';
+        return this.renderCollapse(item, icon, pos);
+    });
+
+
+    renderCollapsedTab = (): ReactNode => {
+        const { list } = this.props;
+        const renderedList = list.map(item => {
+            const { itemKey } = item;
+            return { key: this._getItemKey(itemKey), active: this._isActive(itemKey), ...item };
+        });
+        return (
+            <OverflowList
+                items={renderedList}
+                overflowRenderer={this.renderOverflow}
+                renderMode="scroll"
+                className={`${cssClasses.TABS_BAR}-overflow-list`}
+                visibleItemRenderer={this.renderTabItem as any}
+            />
+        );
+    };
+
+    render(): ReactNode {
+        const { type, style, className, list, tabPosition, collapsible, ...restProps } = this.props;
+        const classNames = cls(className, {
+            [cssClasses.TABS_BAR]: true,
+            [cssClasses.TABS_BAR_LINE]: type === 'line',
+            [cssClasses.TABS_BAR_CARD]: type === 'card',
+            [cssClasses.TABS_BAR_BUTTON]: type === 'button',
+            [`${cssClasses.TABS_BAR}-${tabPosition}`]: tabPosition,
+            [`${cssClasses.TABS_BAR}-collapse`]: collapsible,
+        });
+
+        const extra = this.renderExtra();
+        const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
+
+        return (
+            <div role="tab-list" className={classNames} style={style} {...getDataAttr(restProps)} data-uuid={this.uuid}>
+                {contents}
+                {extra}
+            </div>
+        );
+    }
+
+    private _isActive = (key: string): boolean => key === this.props.activeKey;
+
+    private _getItemKey = (key: string): string => `${key}-bar`;
+}
+
+export default TabBar;

package/tabs/TabPane.tsx

@@ -0,0 +1,116 @@
+import React, { createRef, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+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 TabPaneTransition from './TabPaneTransition';
+import { PlainTab, TabPaneProps } from './interface';
+
+class TabPane extends PureComponent<TabPaneProps> {
+    static isTabPane = true;
+    static contextType = TabsContext;
+
+    static propTypes = {
+        className: PropTypes.string,
+        style: PropTypes.object,
+        children: PropTypes.node,
+        disabled: PropTypes.bool,
+        itemKey: PropTypes.string,
+        tab: PropTypes.node,
+        icon: PropTypes.node,
+        closable: PropTypes.bool
+    };
+
+    lastActiveKey: string = null;
+
+    ref = createRef<HTMLDivElement>();
+    isAnimating: boolean;
+    _active: boolean;
+
+    componentDidMount(): void {
+        this.lastActiveKey = this.context.activeKey;
+    }
+
+    // get direction from current item key to activeKey
+    getDirection = (activeKey: string, itemKey: string, panes: Array<PlainTab>): boolean => {
+        if (itemKey !== null && activeKey !== null && Array.isArray(panes) && panes.length) {
+            const activeIndex = panes.findIndex(pane => pane.itemKey === activeKey);
+            const itemIndex = panes.findIndex(pane => pane.itemKey === itemKey);
+            const lastActiveIndex = panes.findIndex(pane => pane.itemKey === this.lastActiveKey);
+
+            this.lastActiveKey = activeKey;
+
+            if (activeIndex === itemIndex) {
+                return lastActiveIndex > activeIndex;
+            } else {
+                return itemIndex < activeIndex;
+            }
+        }
+
+        return false;
+    };
+
+    hideScroll = (): void => {
+        if (this.ref && this.ref.current) {
+            this.ref.current.style.overflow = 'hidden';
+            this.isAnimating = true;
+        }
+    };
+
+    autoScroll = (): void => {
+        if (this.ref && this.ref.current) {
+            this.ref.current.style.overflow = '';
+            this.isAnimating = false;
+        }
+    };
+
+    shouldRender = (): boolean => {
+        const { itemKey } = this.props;
+        const { activeKey, lazyRender } = this.context;
+        const active = activeKey === itemKey;
+        this._active = this._active || active;
+        return lazyRender ? this._active : true;
+    };
+
+    render(): ReactNode {
+        const { tabPaneMotion: motion, tabPosition } = this.context;
+        const { className, style, children, itemKey, ...restProps } = this.props;
+        const active = this.context.activeKey === itemKey;
+        const classNames = cls(className, {
+            [cssClasses.TABS_PANE_INACTIVE]: !active,
+            [cssClasses.TABS_PANE_ACTIVE]: active,
+            [cssClasses.TABS_PANE]: true,
+        });
+        const shouldRender = this.shouldRender();
+        return (
+            <div
+                ref={this.ref}
+                role="tab-panel"
+                className={classNames}
+                style={style}
+                aria-hidden={active ? 'false' : 'true'}
+                {...getDataAttr(restProps)}
+            >
+                {motion ? (
+                    <TabPaneTransition
+                        direction={this.getDirection(this.context.activeKey, itemKey, this.context.panes)}
+                        motion={motion}
+                        mode={tabPosition === 'top' ? 'horizontal' : 'vertical'}
+                        state={active ? 'enter' : 'leave'}
+                    >
+                        {(transitionStyle): ReactNode => (
+                            <div className={`${cssClasses.TABS_PANE_MOTION_OVERLAY}`} style={{ ...transitionStyle }}>
+                                {shouldRender ? children : null}
+                            </div>
+                        )}
+                    </TabPaneTransition>
+                ) : (
+                    shouldRender ? children : null
+                )}
+            </div>
+        );
+    }
+}
+
+export default TabPane;

package/tabs/TabPaneTransition.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { FC, ReactNode } from 'react';
+import { Transition } from '@douyinfe/semi-animation-react';
+import { toInteger } from 'lodash';
+import { TabPaneTransitionProps } from './interface';
+
+const TabPaneTransition: FC<TabPaneTransitionProps> = (props = {}) => {
+    const direction = props.direction ? 1 : -1;
+    const { mode } = props;
+    let { motion } = props;
+
+    const ratio = 60;
+
+    if (typeof motion === 'function') {
+        motion = motion(props);
+    } else if (!motion || typeof motion !== 'object') {
+        motion = {};
+    }
+
+    if (mode === 'vertical') {
+        return (
+            <Transition
+                {...props}
+                config={{ tension: 612, friction: 32 }}
+                from={{ translateY: direction * ratio, opacity: 0 }}
+                enter={{ translateY: 0, opacity: { val: 1, duration: 200 } } as any}
+                leave={{ translateY: -1 * direction * ratio, opacity: { val: 0, duration: 200 } } as any}
+                {...motion}
+            >
+                {typeof props.children === 'function' ?
+                    ({ translateY, opacity }: { translateY: number;opacity: number }): ReactNode => {
+                        // delete translateX in 0 in case of zIndex problems.
+                        const finalState = toInteger(translateY) === 0 ? { opacity } : {
+                            transform: `translateY(${toInteger(translateY)}px)`,
+                            opacity,
+                        };
+                        return props.children(finalState);
+                    } :
+                    props.children}
+            </Transition>
+        );
+    }
+
+    return (
+        <Transition
+            {...props}
+            config={{ tension: 612, friction: 32 }}
+            from={{ translateX: direction * ratio, opacity: 0 }}
+            enter={{ translateX: 0, opacity: { val: 1, duration: 200 } } as any}
+            leave={{ translateX: -1 * direction * ratio, opacity: { val: 0, duration: 200 } } as any}
+            {...motion}
+        >
+            {typeof props.children === 'function' ?
+                ({ translateX, opacity }: { translateX: number;opacity: number }): ReactNode => {
+                    // delete translateX in 0 in case of zIndex problems.
+                    const finalState = toInteger(translateX) === 0 ? { opacity } : {
+                        transform: `translateX(${toInteger(translateX)}px)`,
+                        opacity,
+                    };
+                    return props.children(finalState);
+                } :
+                props.children}
+        </Transition>
+    );
+};
+
+export default TabPaneTransition;

package/tabs/__test__/tabs.test.js

@@ -0,0 +1,208 @@
+import { useState } from 'react';
+import { TabPane, Tabs } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+let defaultTabPane = [
+    { itemKey: 'itemKeyA', tab: 'titleA', children: 'contentA' },
+    { itemKey: 'itemKeyB', tab: 'titleB', children: 'contentB' }
+]
+
+let ACTIVE = `.${BASE_CLASS_PREFIX}-tabs-tab-active`;
+
+function getTabs(tabProps, tabPaneProps = defaultTabPane) {
+    let tabPane = tabPaneProps.map(pane => {
+        return <TabPane {...pane}></TabPane>
+    });
+    return <Tabs {...tabProps}>
+        {tabPane}
+    </Tabs>
+}
+
+describe('Tabs', () => {
+
+    it('tabs render basicly', () => {
+        let props = {};
+        const tabs = mount(getTabs(props, defaultTabPane))
+        // render in same time
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-content`).children().length).toEqual(2);
+        // default active first pane
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab-active`).text()).toEqual('titleA');
+    });
+
+    it('Tabs with custom className & style & contentStyle', () => {
+        let props = {
+            className: 'test',
+            style: {
+                color: 'red'
+            }
+        };
+        const tabs = shallow(getTabs(props));
+        expect(tabs.exists('.test')).toEqual(true);
+        expect(tabs.find('div.test')).toHaveStyle('color', 'red');
+    });
+
+    it('Tabs with defaultActiveKey', () => {
+        let tabProps = {
+            defaultActiveKey: 'itemKeyB'
+        };
+        const tabs = mount(getTabs(tabProps));
+        const activeTabContent = tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab-active`).text();
+        expect(activeTabContent).toEqual('titleB');
+    });
+
+    it('different type Tabs', () => {
+        let lineTabs = mount(getTabs({ type: 'line' }));
+        let cardTabs = mount(getTabs({ type: 'card' }));
+        let buttonTabs = mount(getTabs({ type: 'button' }));
+        expect(lineTabs.exists(`.${BASE_CLASS_PREFIX}-tabs-bar-button`)).toEqual(false);
+        expect(lineTabs.exists(`.${BASE_CLASS_PREFIX}-tabs-bar-card`)).toEqual(false);
+        expect(cardTabs.exists(`.${BASE_CLASS_PREFIX}-tabs-bar-card`)).toEqual(true);
+        expect(buttonTabs.exists(`.${BASE_CLASS_PREFIX}-tabs-bar-button`)).toEqual(true);
+    });
+
+    it('tabList', () => {
+        let tabList = [
+            { tab: "文档", itemKey: "1" },
+            { tab: "快速起步", itemKey: "2" },
+            { tab: "帮助", itemKey: "3" }
+        ];
+        const contentList = [
+            (<div>文档</div>),
+            (<div>快速起步</div>),
+            (<div>帮助</div>)
+        ]
+
+        class TabListDemo extends React.Component {
+            state = {
+                key: '1'
+            };
+
+            render() {
+                return (
+                    <Tabs
+                        tabList={tabList}
+                    >
+                        {contentList[this.state.key - 1]}
+                    </Tabs>
+                )
+            }
+        }
+
+        const tabs = mount(<TabListDemo></TabListDemo>);
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-content`).children().length).toEqual(1);
+    })
+
+    it('should not toggle whenn clicked disabled pane', () => {
+        let spyOnChange = sinon.spy((activeKey) => {
+        })
+        let tabProps = {
+            defaultActiveKey: 'itemKeyA',
+            onChange: spyOnChange
+        };
+        let tabPaneProps = [
+            { itemKey: 'itemKeyA', tab: 'titleA' },
+            { itemKey: 'itemKeyB', tab: 'titleB', disabled: true },
+        ];
+        let tabs = mount(getTabs(tabProps, tabPaneProps));
+        expect(tabs.exists(`.${BASE_CLASS_PREFIX}-tabs-tab-disabled`)).toEqual(true);
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab-disabled`).text()).toEqual('titleB');
+
+        tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(1).simulate('click');
+        expect(spyOnChange.calledOnce).toBe(false);
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab-active`).text()).toEqual('titleA');
+    });
+
+    it('onTabClick', () => {
+        let onTabClick = (key, e) => {
+            // debugger
+        };
+        let spyOnTabClick = sinon.spy(onTabClick);
+        let props = {
+            onTabClick: spyOnTabClick
+        };
+        const tabs = mount(getTabs(props));
+        tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(1).simulate('click');
+        expect(spyOnTabClick.calledWithMatch("itemKeyB")).toBe(true);
+        expect(spyOnTabClick.calledOnce).toBe(true);
+    });
+
+    it('onChange', () => {
+        let onChange = value => {
+            // debugger
+        };
+        let spyOnChange = sinon.spy(onChange);
+        let tabsProps = {
+            onChange: spyOnChange
+        };
+        let paneProps = defaultTabPane;
+        const tabs = mount(getTabs(tabsProps, paneProps));
+        tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(1).simulate('click');
+        expect(spyOnChange.calledWithMatch("itemKeyB")).toBe(true);
+        expect(spyOnChange.calledOnce).toBe(true);
+    });
+
+    it('should update when activeKey change', () => {
+        let tabsProps = {
+            activeKey: 'itemKeyA'
+        };
+        const tabs = mount(getTabs(tabsProps, defaultTabPane));
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab-active`).text()).toEqual('titleA');
+        tabs.setProps({ activeKey: 'itemKeyB' });
+        tabs.update()
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-tab-active`).text()).toEqual('titleB');
+    });
+
+    it('contentStyle', () => {
+        let tabsProps = {
+            contentStyle: {
+                color: 'red'
+            }
+        };
+        const tabs = mount(getTabs(tabsProps, defaultTabPane));
+        expect(tabs.find(`.${BASE_CLASS_PREFIX}-tabs-content`)).toHaveStyle('color', 'red');
+    });
+
+    it('tarBarExtraContent', () => {
+        let extraContent = (<div className='extra'>Extra</div>);
+        let tabsProps = {
+            tabBarExtraContent: extraContent
+        };
+        const tabs = mount(getTabs(tabsProps, defaultTabPane));
+        expect(tabs.contains(extraContent)).toEqual(true);
+    });
+
+    it('tabpane closable', () => {
+        const Demo = () => {
+            const [tabList, $tabList] = useState([
+                {tab: '文档', itemKey:'1', text:'文档', closable:true},
+                {tab: '快速起步', itemKey:'2', text:'快速起步', closable:true},
+                {tab: '帮助', itemKey:'3', text:'帮助'},
+            ]);
+            const close = (key)=>{
+                const newTabList = [...tabList];
+                const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
+                newTabList.splice(closeIndex, 1);
+                $tabList(newTabList);
+            }
+            return <Tabs type="card" defaultActiveKey="1" onTabClose={close}>
+            {
+                tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
+            }
+        </Tabs>
+        }
+
+        const demo = mount(<Demo />);
+        const firstTab = demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(0);
+        const secondTab = demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(1);
+        const thirdTab = demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(2);
+
+        expect(firstTab.exists(`.${BASE_CLASS_PREFIX}-tabs-tab-icon-close`)).toEqual(true);
+        expect(secondTab.exists(`.${BASE_CLASS_PREFIX}-tabs-tab-icon-close`)).toEqual(true);
+        expect(thirdTab.exists(`.${BASE_CLASS_PREFIX}-tabs-tab-icon-close`)).toEqual(false);
+
+        demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab-icon-close`).at(0).simulate('click');
+
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).length).toEqual(2)
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(0).hasClass(`${BASE_CLASS_PREFIX}-tabs-tab-active`)).toEqual(true);
+    });
+})

package/tabs/_story/Demo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Tabs from '../index';
+import TabPane from '../TabPane';
+
+const Demo = () => {
+    const tabPaneList = [
+        'a',
+        'b',
+        'c'
+    ];
+
+    return (
+        <div>
+            <Tabs defaultActiveKey="1"
+                tabPaneMotion>
+                {
+                    tabPaneList.map((item, index) => {
+                        return (
+                            <TabPane tab={item} itemKey={index.toString()} key={item}>
+                                { item + index }
+                            </TabPane>
+                        )
+                    })
+                }
+            </Tabs>
+        </div>
+    )
+}
+
+export default Demo