@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/tabs/TabBar.tsx

@@ -1,264 +0,0 @@
-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} x-semi-prop="tabBarExtraContent">
-                    {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' });
-        }
-    };
-
-    handleKeyDown = (event: React.KeyboardEvent, itemKey: string, closable: boolean) => {
-        this.props.handleKeyDown(event, itemKey, closable);
-    }
-
-    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 aria-label="Close" role="button" 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 isSelected = this._isActive(key);
-        const className = cls(cssClasses.TABS_TAB, {
-            [cssClasses.TABS_TAB_ACTIVE]: isSelected,
-            [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
-            [`${cssClasses.TABS_TAB}-small`]: size === 'small',
-            [`${cssClasses.TABS_TAB}-medium`]: size === 'medium',
-        });
-        return (
-            <div
-                role="tab"
-                id={`semiTab${key}`}
-                data-tabkey={`semiTab${key}`}
-                aria-controls={`semiTabPanel${key}`}
-                aria-disabled={panel.disabled ? 'true' : 'false'}
-                aria-selected={isSelected ? 'true' : 'false'}
-                tabIndex={isSelected ? 0 : -1}
-                onKeyDown={e => this.handleKeyDown(e, key, panel.closable)}
-                {...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 (
-                <Button
-                    disabled={true}
-                    icon={icon}
-                    theme="borderless"
-                />
-            );
-        }
-        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 role="presentation" 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="tablist" aria-orientation={tabPosition === "left" ? "vertical" : "horizontal"} 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

@@ -1,128 +0,0 @@
-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 { TabContextValue } from './interface';
-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;
-    context: TabContextValue;
-
-    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;
-    };
-
-    /* istanbul ignore next */
-    hideScroll = (): void => {
-        if (this.ref && this.ref.current) {
-            this.ref.current.style.overflow = 'hidden';
-            this.isAnimating = true;
-        }
-    };
-
-    /* istanbul ignore next */
-    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="tabpanel"
-                id={`semiTabPanel${itemKey}`}
-                aria-labelledby={`semiTab${itemKey}`}
-                className={classNames}
-                style={style}
-                aria-hidden={active ? 'false' : 'true'}
-                tabIndex={0}
-                {...getDataAttr(restProps)}
-                x-semi-prop="children"
-            >
-                {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 }}
-                                x-semi-prop="children"
-                            >
-                                {shouldRender ? children : null}
-                            </div>
-                        )}
-                    </TabPaneTransition>
-                ) : shouldRender ? (
-                    children
-                ) : null}
-            </div>
-        );
-    }
-}
-
-export default TabPane;

package/tabs/TabPaneTransition.tsx

@@ -1,67 +0,0 @@
-/* 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

@@ -1,208 +0,0 @@
-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);
-    });
-})