amis 1.6.5-beta.3 → 1.8.0-beta.0

package/lib/components/Tabs.d.ts

@@ -9,7 +9,8 @@ import React from 'react';
 import { Schema } from '../types';
 import { ThemeProps } from '../theme';
 import { SchemaClassName } from '../Schema';
-export declare type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome';
+import Sortable from 'sortablejs';
+export declare type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong' | 'tiled' | 'sidebar';
 export interface TabProps extends ThemeProps {
     title?: string | React.ReactNode;
     icon?: string;
@@ -98,10 +99,25 @@ export interface TabsProps extends ThemeProps {
     tabs?: Array<TabProps>;
     tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
     toolbar?: React.ReactNode;
+    addable?: boolean;
+    onAdd?: () => void;
+    closable?: boolean;
+    onClose?: (index: number, key: string | number) => void;
+    draggable?: boolean;
+    onDragChange?: (e: any) => void;
+    showTip?: boolean;
+    showTipClassName?: string;
     scrollable?: boolean;
+    editable?: boolean;
+    onEdit?: (index: number, text: string) => void;
+    sidePosition?: 'left' | 'right';
+    addBtnText?: string;
+}
+export interface IDragInfo {
+    nodeId: string;
 }
 export declare class Tabs extends React.Component<TabsProps, any> {
-    static defaultProps: Pick<TabsProps, 'mode' | 'contentClassName'>;
+    static defaultProps: Pick<TabsProps, 'mode' | 'contentClassName' | 'showTip' | 'showTipClassName' | 'sidePosition' | 'addBtnText'>;
     static Tab: {
         new (props: (Omit<TabProps, keyof ThemeProps> & import("../theme").ThemeOutterProps) | Readonly<Omit<TabProps, keyof ThemeProps> & import("../theme").ThemeOutterProps>): {
             render(): JSX.Element;
@@ -159,8 +175,14 @@ export declare class Tabs extends React.Component<TabsProps, any> {
     } & import("hoist-non-react-statics").NonReactStatics<typeof TabComponent, {}> & {
         ComposedComponent: typeof TabComponent;
     };
-    navMain: React.RefObject<HTMLDivElement>;
+    navMain: React.RefObject<HTMLUListElement>;
     scroll: boolean;
+    sortable?: Sortable;
+    dragTip?: HTMLElement;
+    id: string;
+    draging: boolean;
+    toDispose: Array<() => void>;
+    resizeDom: React.RefObject<HTMLDivElement>;
     checkArrowStatus: import("lodash").DebouncedFunc<() => void>;
     constructor(props: TabsProps);
     componentDidMount(): void;
@@ -175,6 +197,12 @@ export declare class Tabs extends React.Component<TabsProps, any> {
      */
     showSelected(key?: string | number): void;
     handleSelect(key: string | number): void;
+    handleStartEdit(index: number, title: string): void;
+    handleEditInputChange(e: React.ChangeEvent<HTMLInputElement>): void;
+    handleEdit(): void;
+    dragTipRef(ref: any): void;
+    destroyDragging(): void;
+    initDragging(): void;
     handleArrow(type: 'left' | 'right'): void;
     /**
      * 监听导航上的滚动事件
@@ -183,15 +211,16 @@ export declare class Tabs extends React.Component<TabsProps, any> {
     renderNav(child: any, index: number): JSX.Element | undefined;
     renderTab(child: any, index: number): React.DetailedReactHTMLElement<any, HTMLElement> | undefined;
     renderArrow(type: 'left' | 'right'): JSX.Element | null | undefined;
+    handleAddBtn(): void;
     render(): JSX.Element | null;
 }
 declare const _default: {
-    new (props: (Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps) | Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>): {
+    new (props: (Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps) | Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>): {
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -199,24 +228,24 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps, context: any): {
+    new (props: Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps, context: any): {
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -224,17 +253,17 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onSelect" | "tabs" | "tabsMode" | "activeKey" | "linksClassName" | "scrollable" | "additionBtns" | "tabRender"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TabsProps, keyof ThemeProps>, "toolbar" | "onClose" | "onEdit" | "onAdd" | "onSelect" | "tabs" | "draggable" | "addable" | "tabsMode" | "editable" | "activeKey" | "linksClassName" | "scrollable" | "closable" | "additionBtns" | "tabRender" | "onDragChange"> & Partial<Pick<Omit<TabsProps, keyof ThemeProps>, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName" | "sidePosition" | "addBtnText">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     contextType: React.Context<string>;

package/lib/components/Tabs.js

@@ -14,7 +14,12 @@ var theme_1 = require("../theme");
 var uncontrollable_1 = require("uncontrollable");
 var icon_1 = require("../utils/icon");
 var helper_1 = require("../utils/helper");
+var icons_1 = require("./icons");
 var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
+var react_dom_1 = require("react-dom");
+var TooltipWrapper_1 = (0, tslib_1.__importDefault)(require("./TooltipWrapper"));
+var resize_sensor_1 = require("../utils/resize-sensor");
+var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
 var transitionStyles = (_a = {},
     _a[Transition_1.ENTERING] = 'in',
     _a[Transition_1.ENTERED] = 'in',
@@ -43,8 +48,12 @@ var Tabs = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(Tabs, _super);
     function Tabs(props) {
         var _this = _super.call(this, props) || this;
-        _this.navMain = react_1.default.createRef();
+        _this.navMain = react_1.default.createRef(); // HTMLDivElement
         _this.scroll = false;
+        _this.id = (0, helper_1.guid)();
+        _this.draging = false;
+        _this.toDispose = [];
+        _this.resizeDom = react_1.default.createRef();
         _this.checkArrowStatus = (0, debounce_1.default)(function () {
             var _a = _this.navMain.current || {
                 scrollLeft: 0,
@@ -83,12 +92,17 @@ var Tabs = /** @class */ (function (_super) {
         _this.state = {
             isOverflow: false,
             arrowLeftDisabled: false,
-            arrowRightDisabled: false
+            arrowRightDisabled: false,
+            dragIndicator: null,
+            editingIndex: null,
+            editInputText: null,
+            editOriginText: null
         };
         return _this;
     }
     Tabs.prototype.componentDidMount = function () {
-        var _a;
+        var _this = this;
+        var _a, _b;
         this.computedWidth();
         if (this.navMain) {
             (_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.handleWheel, {
@@ -96,24 +110,29 @@ var Tabs = /** @class */ (function (_super) {
             });
             this.checkArrowStatus();
         }
+        ((_b = this.resizeDom) === null || _b === void 0 ? void 0 : _b.current) && this.toDispose.push((0, resize_sensor_1.resizeSensor)(this.resizeDom.current, function () {
+            return _this.computedWidth();
+        }));
     };
     Tabs.prototype.componentDidUpdate = function () {
         // 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
-        if (!this.scroll) {
+        if (!this.scroll && !this.draging) {
             this.computedWidth();
         }
         this.scroll = false;
     };
     Tabs.prototype.componentWillUnmount = function () {
         this.checkArrowStatus.cancel();
+        this.toDispose.forEach(function (fn) { return fn(); });
+        this.toDispose = [];
     };
     /**
      * 处理内容与容器之间的位置关系
      */
     Tabs.prototype.computedWidth = function () {
-        var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode, scrollable = _a.scrollable;
+        var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
         var mode = tabsMode || dMode;
-        if (!scrollable || mode === 'vertical') {
+        if (['vertical', 'sidebar'].includes(mode)) {
             return;
         }
         var navMainRef = this.navMain.current;
@@ -124,7 +143,8 @@ var Tabs = /** @class */ (function (_super) {
         if (isOverflow !== this.state.isOverflow) {
             this.setState({ isOverflow: isOverflow });
         }
-        if (isOverflow) {
+        // 正在拖动的不自动定位
+        if (isOverflow && !this.draging) {
             this.showSelected();
         }
     };
@@ -132,32 +152,32 @@ var Tabs = /** @class */ (function (_super) {
      * 保证选中的tab始终显示在可视区域
      */
     Tabs.prototype.showSelected = function (key) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h = this.props, dMode = _h.mode, tabsMode = _h.tabsMode, scrollable = _h.scrollable;
+        var _a, _b, _c, _d, _e, _f;
+        var _g = this.props, dMode = _g.mode, tabsMode = _g.tabsMode;
         var isOverflow = this.state.isOverflow;
         var mode = tabsMode || dMode;
-        if (!scrollable || mode === 'vertical' || !isOverflow) {
+        if (['vertical', 'sidebar'].includes(mode) || !isOverflow) {
             return;
         }
-        var _j = this.props, activeKey = _j.activeKey, children = _j.children;
+        var _h = this.props, activeKey = _h.activeKey, children = _h.children;
         var currentKey = key !== undefined ? key : activeKey;
         var currentIndex = (_a = children) === null || _a === void 0 ? void 0 : _a.findIndex(function (item) { return item.props.eventKey === currentKey; });
-        var li = ((_c = (_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.children) || [];
+        var li = ((_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.children) || [];
         var currentLi = li[currentIndex];
-        var liOffsetLeft = (currentLi === null || currentLi === void 0 ? void 0 : currentLi.offsetLeft) - 20;
+        var liOffsetLeft = currentLi === null || currentLi === void 0 ? void 0 : currentLi.offsetLeft;
         var liClientWidth = currentLi === null || currentLi === void 0 ? void 0 : currentLi.clientWidth;
-        var scrollLeft = ((_d = this.navMain.current) === null || _d === void 0 ? void 0 : _d.scrollLeft) || 0;
-        var clientWidth = ((_e = this.navMain.current) === null || _e === void 0 ? void 0 : _e.clientWidth) || 0;
+        var scrollLeft = ((_c = this.navMain.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) || 0;
+        var clientWidth = ((_d = this.navMain.current) === null || _d === void 0 ? void 0 : _d.clientWidth) || 0;
         // 左边被遮住了
         if (scrollLeft > liOffsetLeft) {
-            (_f = this.navMain.current) === null || _f === void 0 ? void 0 : _f.scrollTo({
+            (_e = this.navMain.current) === null || _e === void 0 ? void 0 : _e.scrollTo({
                 left: liOffsetLeft,
                 behavior: 'smooth'
             });
         }
         // 右边被遮住了
         if (liOffsetLeft + liClientWidth > scrollLeft + clientWidth) {
-            (_g = this.navMain.current) === null || _g === void 0 ? void 0 : _g.scrollTo({
+            (_f = this.navMain.current) === null || _f === void 0 ? void 0 : _f.scrollTo({
                 left: liOffsetLeft + liClientWidth - clientWidth,
                 behavior: 'smooth'
             });
@@ -172,6 +192,75 @@ var Tabs = /** @class */ (function (_super) {
         }, 500);
         onSelect && onSelect(key);
     };
+    Tabs.prototype.handleStartEdit = function (index, title) {
+        this.setState({
+            editingIndex: index,
+            editInputText: title,
+            editOriginText: title
+        });
+    };
+    Tabs.prototype.handleEditInputChange = function (e) {
+        this.setState({
+            editInputText: e.currentTarget.value
+        });
+    };
+    Tabs.prototype.handleEdit = function () {
+        var _a = this.state, editingIndex = _a.editingIndex, editInputText = _a.editInputText, editOriginText = _a.editOriginText;
+        var onEdit = this.props.onEdit;
+        this.setState({
+            editingIndex: null,
+            editInputText: null,
+            editOriginText: null
+        });
+        onEdit
+            && (editInputText = String(editInputText).trim())
+            && (editInputText !== editOriginText)
+            && onEdit(editingIndex, editInputText);
+    };
+    Tabs.prototype.dragTipRef = function (ref) {
+        if (!this.dragTip && ref) {
+            this.initDragging();
+        }
+        else if (this.dragTip && !ref) {
+            this.destroyDragging();
+        }
+        this.dragTip = ref;
+    };
+    Tabs.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    Tabs.prototype.initDragging = function () {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, onDragChange = _a.onDragChange;
+        var dom = (0, react_dom_1.findDOMNode)(this);
+        this.sortable = new sortablejs_1.default(dom.querySelector(".".concat(ns, "Tabs-links")), {
+            group: this.id,
+            animation: 250,
+            handle: ".".concat(ns, "Tabs-link"),
+            ghostClass: "".concat(ns, "Tabs-link--dragging"),
+            onStart: function () {
+                _this.draging = true;
+            },
+            onEnd: function (e) {
+                // 没有移动
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                // 再交换回来
+                var parent = e.to;
+                if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                setTimeout(function () {
+                    _this.draging = false;
+                });
+                onDragChange && onDragChange(e);
+            }
+        });
+    };
     Tabs.prototype.handleArrow = function (type) {
         var _a, _b, _c;
         var _d = this.navMain.current || {
@@ -224,20 +313,29 @@ var Tabs = /** @class */ (function (_super) {
         if (!child) {
             return;
         }
-        var _a = this.props, cx = _a.classnames, activeKeyProp = _a.activeKey, mode = _a.mode;
-        var _b = child.props, eventKey = _b.eventKey, disabled = _b.disabled, icon = _b.icon, iconPosition = _b.iconPosition, title = _b.title, toolbar = _b.toolbar, tabClassName = _b.tabClassName;
+        var _a = this.props, cx = _a.classnames, activeKeyProp = _a.activeKey, mode = _a.mode, closable = _a.closable, draggable = _a.draggable, showTip = _a.showTip, showTipClassName = _a.showTipClassName, editable = _a.editable;
+        var _b = child.props, eventKey = _b.eventKey, disabled = _b.disabled, icon = _b.icon, iconPosition = _b.iconPosition, title = _b.title, toolbar = _b.toolbar, tabClassName = _b.tabClassName, tabClosable = _b.closable;
+        var _c = this.state, editingIndex = _c.editingIndex, editInputText = _c.editInputText;
         var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
         var iconElement = (0, icon_1.generateIcon)(cx, icon, 'Icon');
-        return (react_1.default.createElement("li", { className: cx('Tabs-link', activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', tabClassName), key: eventKey !== null && eventKey !== void 0 ? eventKey : index, onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); } },
-            react_1.default.createElement("a", null,
-                icon ? (iconPosition === 'right' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    title,
-                    " ",
-                    iconElement)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    iconElement,
-                    " ",
-                    title))) : (title),
-                react_1.default.isValidElement(toolbar) ? toolbar : null),
+        var link = (react_1.default.createElement("a", null, editable && editingIndex === index ? (react_1.default.createElement("input", { className: cx('Tabs-link-edit'), type: "text", value: editInputText, autoFocus: true, onFocus: function (e) { return e.currentTarget.select(); }, onChange: this.handleEditInputChange, onBlur: this.handleEdit, onKeyPress: function (e) { return e && e.key === 'Enter' && _this.handleEdit(); } })) : (react_1.default.createElement(react_1.default.Fragment, null,
+            icon ? (iconPosition === 'right' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                title,
+                " ",
+                iconElement)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                iconElement,
+                " ",
+                title))) : (title),
+            react_1.default.isValidElement(toolbar) ? toolbar : null))));
+        return (react_1.default.createElement("li", { className: cx('Tabs-link', activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', tabClassName), key: eventKey !== null && eventKey !== void 0 ? eventKey : index, onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); }, onDoubleClick: function () {
+                editable && _this.handleStartEdit(index, title);
+            } },
+            showTip ? (react_1.default.createElement(TooltipWrapper_1.default, { placement: 'top', tooltip: title, trigger: 'hover', tooltipClassName: showTipClassName }, link)) : link,
+            (tabClosable !== null && tabClosable !== void 0 ? tabClosable : closable) && (react_1.default.createElement("span", { className: cx('Tabs-link-close'), onClick: function (e) {
+                    e.stopPropagation();
+                    _this.props.onClose && _this.props.onClose(index, eventKey !== null && eventKey !== void 0 ? eventKey : index);
+                } },
+                react_1.default.createElement(icons_1.Icon, { icon: "close", className: cx('Tabs-link-close-icon') }))),
             mode === 'chrome' ? (react_1.default.createElement("div", { className: "chrome-tab-background" },
                 react_1.default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--right" },
                     react_1.default.createElement("path", { d: "M0,0 C0,68.483309 55.516691,124 124,124 L0,124 L0,-1 C0.00132103964,-0.667821298 0,-0.334064922 0,0 Z" })),
@@ -257,7 +355,7 @@ var Tabs = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
         var mode = tabsMode || dMode;
-        if (mode === 'vertical') {
+        if (['vertical', 'sidebar'].includes(mode)) {
             return;
         }
         var cx = this.props.classnames;
@@ -266,43 +364,97 @@ var Tabs = /** @class */ (function (_super) {
         return isOverflow ? (react_1.default.createElement("div", { onClick: function () { return _this.handleArrow(type); }, className: cx('Tabs-linksContainer-arrow', 'Tabs-linksContainer-arrow--' + type, disabled && 'Tabs-linksContainer-arrow--disabled') },
             react_1.default.createElement("i", { className: 'iconfont icon-arrow-' + type }))) : null;
     };
+    Tabs.prototype.handleAddBtn = function () {
+        var onAdd = this.props.onAdd;
+        onAdd && onAdd();
+    };
     Tabs.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, cx = _b.classnames, contentClassName = _b.contentClassName, className = _b.className, dMode = _b.mode, tabsMode = _b.tabsMode, children = _b.children, additionBtns = _b.additionBtns, toolbar = _b.toolbar, linksClassName = _b.linksClassName, scrollable = _b.scrollable;
+        var _b = this.props, cx = _b.classnames, contentClassName = _b.contentClassName, className = _b.className, dMode = _b.mode, tabsMode = _b.tabsMode, children = _b.children, additionBtns = _b.additionBtns, toolbar = _b.toolbar, linksClassName = _b.linksClassName, addable = _b.addable, draggable = _b.draggable, sidePosition = _b.sidePosition, addBtnText = _b.addBtnText;
         var isOverflow = this.state.isOverflow;
         if (!Array.isArray(children)) {
             return null;
         }
         var mode = tabsMode || dMode;
+        var toolButtons = (react_1.default.createElement(react_1.default.Fragment, null,
+            addable && (react_1.default.createElement("div", { className: cx('Tabs-addable'), onClick: function () { return _this.handleAddBtn(); } },
+                react_1.default.createElement(icons_1.Icon, { icon: "plus", className: cx('Tabs-addable-icon') }),
+                addBtnText)),
+            toolbar));
         return (react_1.default.createElement("div", { className: cx("Tabs", (_a = {},
                 _a["Tabs--".concat(mode)] = mode,
+                _a["sidebar--".concat(sidePosition)] = mode === 'sidebar',
                 _a), className) },
-            scrollable && !['vertical', 'chrome'].includes(mode) ? (react_1.default.createElement("div", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
-                this.renderArrow('left'),
-                react_1.default.createElement("div", { className: cx('Tabs-linksContainer-main'), ref: this.navMain },
-                    react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
-                        children.map(function (tab, index) { return _this.renderNav(tab, index); }),
-                        additionBtns,
-                        toolbar)),
-                this.renderArrow('right'))) : (react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
-                children.map(function (tab, index) { return _this.renderNav(tab, index); }),
-                additionBtns,
-                toolbar)),
+            !['vertical', 'sidebar', 'chrome'].includes(mode) ? (react_1.default.createElement("div", { className: cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar'), ref: this.resizeDom },
+                react_1.default.createElement("div", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
+                    this.renderArrow('left'),
+                    react_1.default.createElement("div", { className: cx('Tabs-linksContainer-main') },
+                        react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist", ref: this.navMain },
+                            children.map(function (tab, index) { return _this.renderNav(tab, index); }),
+                            additionBtns,
+                            !isOverflow && toolButtons)),
+                    this.renderArrow('right')),
+                isOverflow && toolButtons)) : (react_1.default.createElement("div", { className: cx('Tabs-linksWrapper') },
+                react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
+                    children.map(function (tab, index) { return _this.renderNav(tab, index); }),
+                    additionBtns,
+                    toolbar))),
             react_1.default.createElement("div", { className: cx('Tabs-content', contentClassName) }, children.map(function (child, index) {
                 return _this.renderTab(child, index);
-            }))));
+            })),
+            draggable && (react_1.default.createElement("div", { className: cx('Tabs-drag-tip'), ref: this.dragTipRef }))));
     };
-    var _b;
+    var _b, _c;
     Tabs.defaultProps = {
         mode: '',
-        contentClassName: ''
+        contentClassName: '',
+        showTip: false,
+        showTipClassName: '',
+        sidePosition: 'left',
+        addBtnText: '增加'
     };
     Tabs.Tab = exports.Tab;
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof WheelEvent !== "undefined" && WheelEvent) === "function" ? _b : Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [Number, String]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tabs.prototype, "handleStartEdit", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.ChangeEvent) === "function" ? _b : Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tabs.prototype, "handleEditInputChange", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tabs.prototype, "handleEdit", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tabs.prototype, "dragTipRef", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tabs.prototype, "destroyDragging", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tabs.prototype, "initDragging", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_c = typeof WheelEvent !== "undefined" && WheelEvent) === "function" ? _c : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], Tabs.prototype, "handleWheel", null);
     return Tabs;