amis 1.7.0 → 1.8.0-beta.13

package/lib/components/Spinner.js

@@ -13,46 +13,50 @@ var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var theme_1 = require("../theme");
 var Transition_1 = tslib_1.__importStar(require("react-transition-group/Transition"));
 var icons_1 = require("./icons");
+var icon_1 = require("../utils/icon");
 var fadeStyles = (_a = {},
-    _a[Transition_1.ENTERING] = 'in',
     _a[Transition_1.ENTERED] = 'in',
     _a);
 var Spinner = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(Spinner, _super);
     function Spinner() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.div = react_1.default.createRef();
-        _this.overlay = react_1.default.createRef();
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     Spinner.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, show = _a.show, cx = _a.classnames, spinnerClassName = _a.spinnerClassName, mode = _a.mode, size = _a.size, overlay = _a.overlay, icon = _a.icon;
-        return (react_1.default.createElement(Transition_1.default, { mountOnEnter: true, unmountOnExit: true, in: show, timeout: 350 }, function (status) {
-            var _a;
-            if (status === Transition_1.ENTERING) {
-                // force reflow
-                // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-                // 否则看不到动画。
-                // this.div.current!.offsetWidth;
-                _this.overlay.current && _this.overlay.current.offsetWidth;
-            }
+        var _a = this.props, cx = _a.classnames, show = _a.show, className = _a.className, spinnerClassName = _a.spinnerClassName, _b = _a.size, size = _b === void 0 ? '' : _b, overlay = _a.overlay, delay = _a.delay, icon = _a.icon, tip = _a.tip, _c = _a.tipPlacement, tipPlacement = _c === void 0 ? '' : _c;
+        var isCustomIcon = icon && react_1.default.isValidElement(icon);
+        var timeout = { enter: delay, exit: 0 };
+        return (react_1.default.createElement(Transition_1.default, { mountOnEnter: true, unmountOnExit: true, in: show, timeout: timeout }, function (status) {
+            var _a, _b, _c;
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                overlay ? (react_1.default.createElement("div", { ref: _this.overlay, className: cx("Spinner-overlay", fadeStyles[status]) })) : null,
-                react_1.default.createElement("div", { ref: _this.div, className: cx("Spinner", spinnerClassName, fadeStyles[status], (_a = {},
-                        _a["Spinner--".concat(mode)] = mode,
-                        _a["Spinner--overlay"] = overlay,
-                        _a["Spinner--".concat(size)] = size,
-                        _a["Spinner--icon"] = icon,
-                        _a)) }, icon ? react_1.default.createElement(icons_1.Icon, { icon: icon, className: "icon" }) : null)));
+                overlay ? (react_1.default.createElement("div", { className: cx("Spinner-overlay", fadeStyles[status]) })) : null,
+                react_1.default.createElement("div", { className: cx("Spinner", tip && (_a = {},
+                        _a["Spinner-tip--".concat(tipPlacement)] = [
+                            'top',
+                            'right',
+                            'bottom',
+                            'left'
+                        ].includes(tipPlacement),
+                        _a), (_b = {}, _b["Spinner--overlay"] = overlay, _b), fadeStyles[status], className) },
+                    react_1.default.createElement("div", { className: cx("Spinner-icon", (_c = {},
+                            _c["Spinner-icon--".concat(size)] = ['lg', 'sm'].includes(size),
+                            _c["Spinner-icon--default"] = !icon,
+                            _c["Spinner-icon--simple"] = !isCustomIcon && icon,
+                            _c["Spinner-icon--custom"] = isCustomIcon,
+                            _c), spinnerClassName) }, icon ? (isCustomIcon ? (icon) : (0, icons_1.hasIcon)(icon) ? (react_1.default.createElement(icons_1.Icon, { icon: icon, className: "icon" })) : ((0, icon_1.generateIcon)(cx, icon, 'icon'))) : null),
+                    tip ? react_1.default.createElement("span", { className: cx("Spinner-tip") }, tip) : '')));
         }));
     };
     Spinner.defaultProps = {
-        overlay: false,
+        show: true,
+        className: '',
         spinnerClassName: '',
-        mode: '',
         size: '',
-        show: true
+        icon: '',
+        tip: '',
+        tipPlacement: 'bottom',
+        delay: 0,
+        overlay: false
     };
     return Spinner;
 }(react_1.default.Component));

package/lib/components/Spinner.js.map

@@ -6,8 +6,8 @@
         "/src/components/Spinner.tsx"
     ],
     "names": [],
-    "mappings": ";AAAA;;;;;GAKG;;;;;AAEH,6DAA0B;AAC1B,kCAA+C;AAC/C,2FAAgF;AAChF,iCAA6B;AAE7B,IAAM,UAAU;IAGd,GAAC,qBAAQ,IAAG,IAAI;IAChB,GAAC,oBAAO,IAAG,IAAI;OAChB,CAAC;AAWF;IAA6B,wCAAqC;IAAlE;QAAA,qEA2DC;QAlDC,SAAG,GAAoC,eAAK,CAAC,SAAS,EAAE,CAAC;QACzD,aAAO,GAAoC,eAAK,CAAC,SAAS,EAAE,CAAC;;IAiD/D,CAAC;IA/CC,wBAAM,GAAN;QAAA,iBA8CC;QA7CO,IAAA,KAQF,IAAI,CAAC,KAAK,EAPZ,IAAI,UAAA,EACQ,EAAE,gBAAA,EACd,gBAAgB,sBAAA,EAChB,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,IAAI,UACQ,CAAC;QACf,OAAO,CACL,8BAAC,oBAAU,IAAC,YAAY,QAAC,aAAa,QAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAC1D,UAAC,MAAc;;YACd,IAAI,MAAM,KAAK,qBAAQ,EAAE;gBACvB,eAAe;gBACf,kEAAkE;gBAClE,WAAW;gBACX,iCAAiC;gBACjC,KAAI,CAAC,OAAO,CAAC,OAAO,IAAI,KAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;aAC1D;YAED,OAAO,CACL;gBACG,OAAO,CAAC,CAAC,CAAC,CACT,uCACE,GAAG,EAAE,KAAI,CAAC,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,GACpD,CACH,CAAC,CAAC,CAAC,IAAI;gBAER,uCACE,GAAG,EAAE,KAAI,CAAC,GAAG,EACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,CAAC;wBAC3D,GAAC,mBAAY,IAAI,CAAE,IAAG,IAAI;wBAC1B,GAAC,kBAAkB,IAAG,OAAO;wBAC7B,GAAC,mBAAY,IAAI,CAAE,IAAG,IAAI;wBAC1B,GAAC,eAAe,IAAG,IAAI;4BACvB,IAED,IAAI,CAAC,CAAC,CAAC,8BAAC,YAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAChD,CACL,CACJ,CAAC;QACJ,CAAC,CACU,CACd,CAAC;IACJ,CAAC;IAzDM,oBAAY,GAAG;QACpB,OAAO,EAAE,KAAK;QACd,gBAAgB,EAAE,EAAE;QACpB,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,EAAQ;QACd,IAAI,EAAE,IAAI;KACX,CAAC;IAoDJ,cAAC;CAAA,AA3DD,CAA6B,eAAK,CAAC,SAAS,GA2D3C;AA3DY,0BAAO;AA6DpB,kBAAe,IAAA,iBAAS,EAAC,OAAO,CAAC,CAAC",
+    "mappings": "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",
     "sourcesContent": [
-        "/**\n * @file Spinner\n * @description\n * @author fex\n * @date 2017-11-07\n */\n\nimport React from 'react';\nimport {themeable, ThemeProps} from '../theme';\nimport Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';\nimport {Icon} from './icons';\n\nconst fadeStyles: {\n  [propName: string]: string;\n} = {\n  [ENTERING]: 'in',\n  [ENTERED]: 'in'\n};\n\ninterface SpinnerProps extends ThemeProps {\n  overlay: boolean;\n  spinnerClassName: string;\n  mode: string;\n  size: 'sm' | 'lg' | '';\n  show: boolean;\n  icon?: string;\n}\n\nexport class Spinner extends React.Component<SpinnerProps, object> {\n  static defaultProps = {\n    overlay: false,\n    spinnerClassName: '',\n    mode: '',\n    size: '' as '',\n    show: true\n  };\n\n  div: React.RefObject<HTMLDivElement> = React.createRef();\n  overlay: React.RefObject<HTMLDivElement> = React.createRef();\n\n  render() {\n    const {\n      show,\n      classnames: cx,\n      spinnerClassName,\n      mode,\n      size,\n      overlay,\n      icon\n    } = this.props;\n    return (\n      <Transition mountOnEnter unmountOnExit in={show} timeout={350}>\n        {(status: string) => {\n          if (status === ENTERING) {\n            // force reflow\n            // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。\n            // 否则看不到动画。\n            // this.div.current!.offsetWidth;\n            this.overlay.current && this.overlay.current.offsetWidth;\n          }\n\n          return (\n            <>\n              {overlay ? (\n                <div\n                  ref={this.overlay}\n                  className={cx(`Spinner-overlay`, fadeStyles[status])}\n                />\n              ) : null}\n\n              <div\n                ref={this.div}\n                className={cx(`Spinner`, spinnerClassName, fadeStyles[status], {\n                  [`Spinner--${mode}`]: mode,\n                  [`Spinner--overlay`]: overlay,\n                  [`Spinner--${size}`]: size,\n                  [`Spinner--icon`]: icon\n                })}\n              >\n                {icon ? <Icon icon={icon} className=\"icon\" /> : null}\n              </div>\n            </>\n          );\n        }}\n      </Transition>\n    );\n  }\n}\n\nexport default themeable(Spinner);\n"
+        "/**\n * @file Spinner\n * @description\n * @author fex\n * @date 2017-11-07\n */\n\nimport React from 'react';\nimport {themeable, ThemeProps} from '../theme';\nimport Transition, {ENTERED} from 'react-transition-group/Transition';\nimport {Icon, hasIcon} from './icons';\nimport {generateIcon} from '../utils/icon';\n\nconst fadeStyles: {\n  [propName: string]: string;\n} = {\n  [ENTERED]: 'in'\n};\n\n// Spinner Props\nexport interface SpinnerProps extends ThemeProps {\n  show: boolean; // 控制Spinner显示与隐藏\n  className?: string; // 自定义最外层元素class\n  spinnerClassName?: string; // spin图标位置包裹元素的自定义class\n  /**\n   * @deprecated 已废弃，没有作用\n   */\n  mode?: string;\n  size?: 'sm' | 'lg' | ''; // spinner Icon 大小\n  icon?: string | React.ReactNode; // 自定义icon\n  tip?: string; // spinner文案\n  tipPlacement?: 'top' | 'right' | 'bottom' | 'left'; // spinner文案位置\n  delay?: number; // 延迟显示\n  overlay?: boolean; // 是否显示遮罩层，有children属性才生效\n}\n\nexport class Spinner extends React.Component<SpinnerProps> {\n  static defaultProps = {\n    show: true,\n    className: '',\n    spinnerClassName: '',\n    size: '' as '',\n    icon: '',\n    tip: '',\n    tipPlacement: 'bottom' as 'bottom',\n    delay: 0,\n    overlay: false\n  };\n\n  render() {\n    const {\n      classnames: cx,\n      show,\n      className,\n      spinnerClassName,\n      size = '',\n      overlay,\n      delay,\n      icon,\n      tip,\n      tipPlacement = ''\n    } = this.props;\n    const isCustomIcon = icon && React.isValidElement(icon);\n    const timeout = {enter: delay, exit: 0};\n\n    return (\n      <Transition mountOnEnter unmountOnExit in={show} timeout={timeout}>\n        {(status: string) => {\n          return (\n            <>\n              {/* 遮罩层 */}\n              {overlay ? (\n                <div className={cx(`Spinner-overlay`, fadeStyles[status])} />\n              ) : null}\n\n              {/* spinner图标和文案 */}\n              <div\n                className={cx(\n                  `Spinner`,\n                  tip && {\n                    [`Spinner-tip--${tipPlacement}`]: [\n                      'top',\n                      'right',\n                      'bottom',\n                      'left'\n                    ].includes(tipPlacement)\n                  },\n                  {[`Spinner--overlay`]: overlay},\n                  fadeStyles[status],\n                  className\n                )}\n              >\n                <div\n                  className={cx(\n                    `Spinner-icon`,\n                    {\n                      [`Spinner-icon--${size}`]: ['lg', 'sm'].includes(size),\n                      [`Spinner-icon--default`]: !icon,\n                      [`Spinner-icon--simple`]: !isCustomIcon && icon,\n                      [`Spinner-icon--custom`]: isCustomIcon\n                    },\n                    spinnerClassName\n                  )}\n                >\n                  {icon ? (\n                    isCustomIcon ? (\n                      icon\n                    ) : hasIcon(icon as string) ? (\n                      <Icon icon={icon} className=\"icon\" />\n                    ) : (\n                      generateIcon(cx, icon as string, 'icon')\n                    )\n                  ) : null}\n                </div>\n                {tip ? <span className={cx(`Spinner-tip`)}>{tip}</span> : ''}\n              </div>\n            </>\n          );\n        }}\n      </Transition>\n    );\n  }\n}\n\nexport default themeable(Spinner);\n"
     ]
 }

package/lib/components/Steps.d.ts

@@ -54,6 +54,10 @@ export interface StepsSchema extends BaseSchema {
      * 展示模式
      */
     mode?: 'horizontal' | 'vertical';
+    /**
+     * 标签放置位置
+     */
+    labelPlacement?: 'horizontal' | 'vertical';
 }
 export interface StepsProps extends ThemeProps {
     steps: StepSchema[];
@@ -63,6 +67,8 @@ export interface StepsProps extends ThemeProps {
         [propName: string]: StepStatus;
     };
     mode?: 'horizontal' | 'vertical';
+    labelPlacement?: 'horizontal' | 'vertical';
+    progressDot?: boolean;
     useMobileUI?: boolean;
 }
 export declare function Steps(props: StepsProps): JSX.Element;

package/lib/components/Steps.js

@@ -14,7 +14,7 @@ var StepStatus;
     StepStatus["error"] = "error";
 })(StepStatus = exports.StepStatus || (exports.StepStatus = {}));
 function Steps(props) {
-    var stepsRow = props.steps, cx = props.classnames, className = props.className, current = props.current, status = props.status, _a = props.mode, mode = _a === void 0 ? 'horizontal' : _a, useMobileUI = props.useMobileUI;
+    var stepsRow = props.steps, cx = props.classnames, className = props.className, current = props.current, status = props.status, _a = props.mode, mode = _a === void 0 ? 'horizontal' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'horizontal' : _b, _c = props.progressDot, progressDot = _c === void 0 ? false : _c, useMobileUI = props.useMobileUI;
     var FINISH_ICON = 'check';
     var ERROR_ICON = 'close';
     function getStepStatus(step, i) {
@@ -43,18 +43,22 @@ function Steps(props) {
         };
     }
     var mobileUI = useMobileUI && (0, helper_1.isMobile)();
-    return (react_1.default.createElement("ul", { className: cx('Steps', "Steps--".concat(mode), mobileUI ? 'Steps-mobile' : '', className) }, stepsRow.map(function (step, i) {
+    return (react_1.default.createElement("ul", { className: cx(// 纵向步骤条暂时不支持labelPlacement属性
+        'Steps', "Steps--Placement-".concat((progressDot || (labelPlacement === 'vertical' && mode != 'vertical')) ? 'vertical' : ''), "Steps--".concat(progressDot ? 'ProgressDot' : ''), "Steps--".concat(mode), mobileUI ? 'Steps-mobile' : '', className) }, stepsRow.map(function (step, i) {
         var _a = getStepStatus(step, i), stepStatus = _a.stepStatus, icon = _a.icon;
-        return (react_1.default.createElement("li", { key: i, className: cx('StepsItem', "is-".concat(stepStatus), step.className) },
+        return (react_1.default.createElement("li", { key: i, className: cx('StepsItem', "is-".concat(stepStatus), step.className, "StepsItem-".concat(progressDot ? 'ProgressDot' : '')) },
             react_1.default.createElement("div", { className: cx('StepsItem-container') },
-                react_1.default.createElement("div", { className: cx('StepsItem-containerIcon', i < current && 'is-success') },
-                    react_1.default.createElement("span", { className: cx('StepsItem-icon') }, icon ? react_1.default.createElement(icons_1.Icon, { icon: icon, className: "icon" }) : i + 1)),
+                react_1.default.createElement("div", { className: cx('StepsItem-containerTail') }),
+                progressDot ? react_1.default.createElement("div", { className: cx('StepsItem-containerProgressDot') })
+                    : react_1.default.createElement("div", { className: cx('StepsItem-containerIcon', i < current && 'is-success') },
+                        react_1.default.createElement("span", { className: cx('StepsItem-icon') }, icon ? react_1.default.createElement(icons_1.Icon, { icon: icon, className: "icon" }) : i + 1)),
                 react_1.default.createElement("div", { className: cx('StepsItem-containerWrapper') },
                     react_1.default.createElement("div", { className: cx('StepsItem-body') },
-                        react_1.default.createElement("div", { className: cx('StepsItem-title', i < current && 'is-success') },
-                            react_1.default.createElement("span", null, step.title),
-                            react_1.default.createElement("span", { className: cx('StepsItem-subTitle') }, step.subTitle)),
-                        react_1.default.createElement("div", { className: cx('StepsItem-description') }, step.description))))));
+                        react_1.default.createElement("div", { className: cx('StepsItem-title', "StepsItem-".concat(progressDot ? 'vertical-ProgressDot' : ''), i < current && 'is-success') },
+                            react_1.default.createElement("span", { className: cx('StepsItem-ellText'), title: String(step.title) }, step.title),
+                            react_1.default.createElement("span", { className: cx('StepsItem-subTitle', 'StepsItem-ellText'), title: String(step.subTitle) }, step.subTitle)),
+                        react_1.default.createElement("div", { className: cx('StepsItem-description', 'StepsItem-ellText'), title: String(step.description) },
+                            react_1.default.createElement("span", null, step.description)))))));
     })));
 }
 exports.Steps = Steps;

package/lib/components/Steps.js.map

@@ -6,8 +6,8 @@
         "/src/components/Steps.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "import React from 'react';\nimport {themeable, ThemeProps} from '../theme';\nimport {Icon} from './icons';\nimport {BaseSchema} from '../Schema';\nimport {isMobile} from '../utils/helper';\n\nexport enum StepStatus {\n  wait = 'wait',\n  process = 'process',\n  finish = 'finish',\n  error = 'error'\n}\n\nexport type StepSchema = {\n  /**\n   * 标题\n   */\n  title?: string | JSX.Element;\n\n  /**\n   * 子标题\n   */\n  subTitle?: string | JSX.Element;\n\n  /**\n   * 图标\n   */\n  icon?: string;\n\n  value?: string | number;\n\n  /**\n   * 描述\n   */\n  description?: string | JSX.Element;\n\n  status?: StepStatus;\n} & Omit<BaseSchema, 'type'>;\n\nexport interface StepsSchema extends BaseSchema {\n  /**\n   * 指定为 Steps 步骤条渲染器\n   */\n  type: 'steps';\n\n  /**\n   * 步骤\n   */\n  steps?: Array<StepSchema>;\n\n  /**\n   * API 或 数据映射\n   */\n  source?: string;\n\n  /**\n   * 指定当前步骤\n   */\n  value?: number | string;\n\n  /**\n   * 变量映射\n   */\n  name?: string;\n\n  status: StepStatus;\n\n  /**\n   * 展示模式\n   */\n  mode?: 'horizontal' | 'vertical';\n}\n\nexport interface StepsProps extends ThemeProps {\n  steps: StepSchema[];\n  className: string;\n  current: number;\n  status?:\n    | StepStatus\n    | {\n        [propName: string]: StepStatus;\n      };\n  mode?: 'horizontal' | 'vertical';\n  useMobileUI?: boolean;\n}\n\nexport function Steps(props: StepsProps) {\n  const {\n    steps: stepsRow,\n    classnames: cx,\n    className,\n    current,\n    status,\n    mode = 'horizontal',\n    useMobileUI\n  } = props;\n  const FINISH_ICON = 'check';\n  const ERROR_ICON = 'close';\n\n  function getStepStatus(\n    step: StepSchema,\n    i: number\n  ): {stepStatus: StepStatus; icon?: string} {\n    let stepStatus: StepStatus = StepStatus.wait;\n    let icon = step.icon;\n\n    if (i < current) {\n      stepStatus = StepStatus.finish;\n      !icon && (icon = FINISH_ICON);\n    } else if (i === current) {\n      stepStatus = StepStatus.process;\n    }\n\n    if (typeof status === 'string') {\n      if (i === current) {\n        stepStatus = step.status || status || StepStatus.process;\n        stepStatus === StepStatus.error && !icon && (icon = ERROR_ICON);\n      }\n    } else if (typeof status === 'object') {\n      const key = step.value;\n      key && status[key] && (stepStatus = status[key]);\n    }\n\n    return {\n      stepStatus,\n      icon\n    };\n  }\n\n  const mobileUI = useMobileUI && isMobile();\n  return (\n    <ul\n      className={cx(\n        'Steps',\n        `Steps--${mode}`,\n        mobileUI ? 'Steps-mobile' : '',\n        className\n      )}\n    >\n      {stepsRow.map((step, i) => {\n        const {stepStatus, icon} = getStepStatus(step, i);\n\n        return (\n          <li\n            key={i}\n            className={cx('StepsItem', `is-${stepStatus}`, step.className)}\n          >\n            <div className={cx('StepsItem-container')}>\n              <div\n                className={cx(\n                  'StepsItem-containerIcon',\n                  i < current && 'is-success'\n                )}\n              >\n                <span className={cx('StepsItem-icon')}>\n                  {icon ? <Icon icon={icon} className=\"icon\" /> : i + 1}\n                </span>\n              </div>\n              <div className={cx('StepsItem-containerWrapper')}>\n                <div className={cx('StepsItem-body')}>\n                  <div\n                    className={cx(\n                      'StepsItem-title',\n                      i < current && 'is-success'\n                    )}\n                  >\n                    <span>{step.title}</span>\n                    <span className={cx('StepsItem-subTitle')}>\n                      {step.subTitle}\n                    </span>\n                  </div>\n                  <div className={cx('StepsItem-description')}>\n                    {step.description}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport default themeable(Steps);\n"
+        "import React from 'react';\nimport {themeable, ThemeProps} from '../theme';\nimport {Icon} from './icons';\nimport {BaseSchema} from '../Schema';\nimport {isMobile} from '../utils/helper';\n\nexport enum StepStatus {\n  wait = 'wait',\n  process = 'process',\n  finish = 'finish',\n  error = 'error'\n}\n\nexport type StepSchema = {\n  /**\n   * 标题\n   */\n  title?: string | JSX.Element;\n\n  /**\n   * 子标题\n   */\n  subTitle?: string | JSX.Element;\n\n  /**\n   * 图标\n   */\n  icon?: string;\n\n  value?: string | number;\n\n  /**\n   * 描述\n   */\n  description?: string | JSX.Element;\n\n  status?: StepStatus;\n} & Omit<BaseSchema, 'type'>;\n\nexport interface StepsSchema extends BaseSchema {\n  /**\n   * 指定为 Steps 步骤条渲染器\n   */\n  type: 'steps';\n\n  /**\n   * 步骤\n   */\n  steps?: Array<StepSchema>;\n\n  /**\n   * API 或 数据映射\n   */\n  source?: string;\n\n  /**\n   * 指定当前步骤\n   */\n  value?: number | string;\n\n  /**\n   * 变量映射\n   */\n  name?: string;\n\n  status: StepStatus;\n\n  /**\n   * 展示模式\n   */\n  mode?: 'horizontal' | 'vertical';\n\n  /**\n   * 标签放置位置\n   */\n   labelPlacement?: 'horizontal' | 'vertical';\n}\nexport interface StepsProps extends ThemeProps {\n  steps: StepSchema[];\n  className: string;\n  current: number;\n  status?:\n    | StepStatus\n    | {\n        [propName: string]: StepStatus;\n      };\n  mode?: 'horizontal' | 'vertical';\n  labelPlacement?: 'horizontal' | 'vertical';\n  progressDot?: boolean;\n  useMobileUI?: boolean;\n}\n\nexport function Steps(props: StepsProps) {\n  const {\n    steps: stepsRow,\n    classnames: cx,\n    className,\n    current,\n    status,\n    mode = 'horizontal',\n    labelPlacement = 'horizontal',\n    progressDot = false,\n    useMobileUI\n  } = props;\n  const FINISH_ICON = 'check';\n  const ERROR_ICON = 'close';\n\n  function getStepStatus(\n    step: StepSchema,\n    i: number\n  ): {stepStatus: StepStatus; icon?: string} {\n    let stepStatus: StepStatus = StepStatus.wait;\n    let icon = step.icon;\n\n    if (i < current) {\n      stepStatus = StepStatus.finish;\n      !icon && (icon = FINISH_ICON);\n    } else if (i === current) {\n      stepStatus = StepStatus.process;\n    }\n\n    if (typeof status === 'string') {\n      if (i === current) {\n        stepStatus = step.status || status || StepStatus.process;\n        stepStatus === StepStatus.error && !icon && (icon = ERROR_ICON);\n      }\n    } else if (typeof status === 'object') {\n      const key = step.value;\n      key && status[key] && (stepStatus = status[key]);\n    }\n\n    return {\n      stepStatus,\n      icon\n    };\n  }\n\n  const mobileUI = useMobileUI && isMobile();\n  return (\n    <ul className={cx( // 纵向步骤条暂时不支持labelPlacement属性\n      'Steps',\n      `Steps--Placement-${(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')) ? 'vertical' : ''}`,\n      `Steps--${progressDot ? 'ProgressDot' : ''}`, \n      `Steps--${mode}`,\n      mobileUI ? 'Steps-mobile' : '', className)}>\n      {stepsRow.map((step, i) => {\n        const {stepStatus, icon} = getStepStatus(step, i);\n        return (\n          <li\n            key={i}\n            className={cx('StepsItem', `is-${stepStatus}`, step.className, `StepsItem-${progressDot ? 'ProgressDot' : ''}`)}\n          >\n            <div className={cx('StepsItem-container')}>\n                <div className={cx('StepsItem-containerTail')}></div>\n                {progressDot ? <div className={cx('StepsItem-containerProgressDot')}></div>\n                  : <div className={cx('StepsItem-containerIcon', i < current && 'is-success')}>\n                      <span className={cx('StepsItem-icon')}>\n                          {icon ? <Icon icon={icon} className=\"icon\" /> : i + 1}\n                      </span>\n                    </div>}\n              <div className={cx('StepsItem-containerWrapper')}>\n                <div className={cx('StepsItem-body')}>\n                  <div\n                    className={cx(\n                      'StepsItem-title',\n                      `StepsItem-${progressDot ? 'vertical-ProgressDot' : ''}`,\n                      i < current && 'is-success'\n                    )}\n                  >\n                    <span className={cx('StepsItem-ellText')} title={String(step.title)}>{step.title}</span>\n                    <span className={cx('StepsItem-subTitle', 'StepsItem-ellText')} title={String(step.subTitle)}>{step.subTitle}</span>\n                  </div>\n                  <div className={cx('StepsItem-description', 'StepsItem-ellText')} title={String(step.description)}>\n                    <span>{step.description}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport default themeable(Steps);\n"
     ]
 }

package/lib/components/Tabs.d.ts

@@ -10,7 +10,7 @@ import { Schema } from '../types';
 import { ThemeProps } from '../theme';
 import { SchemaClassName } from '../Schema';
 import Sortable from 'sortablejs';
-export declare type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong';
+export declare type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong' | 'tiled' | 'sidebar';
 export interface TabProps extends ThemeProps {
     title?: string | React.ReactNode;
     icon?: string;
@@ -110,12 +110,14 @@ export interface TabsProps extends ThemeProps {
     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' | 'showTip' | 'showTipClassName'>;
+    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;
@@ -173,12 +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;
@@ -211,12 +215,12 @@ export declare class Tabs extends React.Component<TabsProps, any> {
     render(): JSX.Element | null;
 }
 declare const _default: {
-    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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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,24 +228,24 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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<{}>;
@@ -249,17 +253,17 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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" | "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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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">> & Partial<Pick<Pick<TabsProps, "mode" | "contentClassName" | "showTip" | "showTipClassName">, 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

@@ -18,6 +18,7 @@ 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',
@@ -47,10 +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,
@@ -98,7 +101,8 @@ var Tabs = /** @class */ (function (_super) {
         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, {
@@ -106,6 +110,9 @@ 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 () {
         // 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
@@ -116,6 +123,8 @@ var Tabs = /** @class */ (function (_super) {
     };
     Tabs.prototype.componentWillUnmount = function () {
         this.checkArrowStatus.cancel();
+        this.toDispose.forEach(function (fn) { return fn(); });
+        this.toDispose = [];
     };
     /**
      * 处理内容与容器之间的位置关系
@@ -123,7 +132,7 @@ var Tabs = /** @class */ (function (_super) {
     Tabs.prototype.computedWidth = function () {
         var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
         var mode = tabsMode || dMode;
-        if (mode === 'vertical') {
+        if (['vertical', 'sidebar'].includes(mode)) {
             return;
         }
         var navMainRef = this.navMain.current;
@@ -143,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;
+        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 (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;
         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'
             });
@@ -346,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;
@@ -362,27 +371,31 @@ var Tabs = /** @class */ (function (_super) {
     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, addable = _b.addable, draggable = _b.draggable;
+        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) },
-            !['vertical', 'chrome'].includes(mode) ? (react_1.default.createElement("div", { className: cx('Tabs-linksContainer-wrapper') },
+            !['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'), ref: this.navMain },
-                        react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
+                    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,
-                            toolbar)),
+                            !isOverflow && toolButtons)),
                     this.renderArrow('right')),
-                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') }),
-                    "\u589E\u52A0")))) : (react_1.default.createElement("div", { className: cx('Tabs-linksWrapper') },
+                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,
@@ -397,7 +410,9 @@ var Tabs = /** @class */ (function (_super) {
         mode: '',
         contentClassName: '',
         showTip: false,
-        showTipClassName: ''
+        showTipClassName: '',
+        sidePosition: 'left',
+        addBtnText: '增加'
     };
     Tabs.Tab = exports.Tab;
     (0, tslib_1.__decorate)([