@hi-ui/hiui 2.15.11 → 2.15.12

package/es/tabs/__tests__/index.test.js

@@ -0,0 +1,329 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index"));
+
+function trigger(elem, event) {
+  var myEvent = document.createEvent('Event'); // 初始化这个事件对象，为它提高需要的“特性”
+
+  myEvent.initEvent(event, true, true); //执行事件
+
+  elem.dispatchEvent(myEvent);
+}
+
+describe('Tabs', function () {
+  var panes = [{
+    tabTitle: '我的订单',
+    tabId: 'tabId-1'
+  }, {
+    tabTitle: '团购订单',
+    tabId: 'tabId-2',
+    closeable: false
+  }, {
+    tabTitle: '以旧换新订单',
+    tabId: 'tabId-3',
+    disabled: true
+  }, {
+    tabTitle: '以旧换新订单4',
+    tabId: 'tabId-4'
+  }, {
+    tabTitle: '以旧换新订单5',
+    tabId: 'tabId-5'
+  }, {
+    tabTitle: '购买资格',
+    tabId: 'tabId-6',
+    disabled: true
+  }];
+  describe('PropTypes', function () {
+    it('defaultActiveId', function () {
+      var wrapperDefult = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        defaultActiveId: "tabId-2",
+        placement: "horizontal"
+      }, panes.map(function (pane, index) {
+        return _react["default"].createElement(_index["default"].Pane, {
+          tabTitle: pane.tabTitle,
+          tabId: pane.tabId,
+          closeable: pane.closeable,
+          key: index
+        }, _react["default"].createElement("div", {
+          style: {
+            padding: '16px'
+          }
+        }, pane.tabTitle));
+      })));
+      expect(wrapperDefult.find('.hi-tabs--card')).toHaveLength(1);
+      expect(wrapperDefult.find('.hi-tabs--horizontal')).toHaveLength(1);
+      expect(wrapperDefult.find('.hi-tabs__item').at(1).hasClass('hi-tabs__item--active')).toBeTruthy();
+      wrapperDefult.find('.hi-tabs__item').at(0).simulate('click');
+      expect(wrapperDefult.find('.hi-tabs__item--active')).toHaveLength(1);
+      expect(wrapperDefult.find('.hi-tabs__item').at(0).hasClass('hi-tabs__item--active')).toBeTruthy();
+      wrapperDefult.unmount();
+    });
+    it('placement', function () {
+      var wrapperVertical = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        defaultActiveId: "tabId-2",
+        placement: "vertical"
+      }, panes.map(function (pane, index) {
+        return _react["default"].createElement(_index["default"].Pane, {
+          tabTitle: pane.tabTitle,
+          tabId: pane.tabId,
+          closeable: pane.closeable,
+          key: index
+        }, _react["default"].createElement("div", {
+          style: {
+            padding: '16px'
+          }
+        }, pane.tabTitle));
+      })));
+      expect(wrapperVertical.find('.hi-tabs--card')).toHaveLength(1);
+      expect(wrapperVertical.find('.hi-tabs--vertical')).toHaveLength(1);
+      wrapperVertical.unmount();
+    });
+    it('max', function () {
+      var max = 4;
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        placement: "horizontal",
+        max: max
+      }, panes.map(function (pane, index) {
+        return _react["default"].createElement(_index["default"].Pane, {
+          tabTitle: pane.tabTitle,
+          tabId: pane.tabId,
+          closeable: pane.closeable,
+          disabled: pane.disabled,
+          key: index
+        }, _react["default"].createElement("div", {
+          style: {
+            padding: '16px'
+          }
+        }, pane.tabTitle));
+      })));
+      expect(wrapper.find('.hi-tabs-dropdown')).toHaveLength(1);
+      expect(document.querySelectorAll('.hi-popper__container')).toHaveLength(0);
+      wrapper.find('.hi-tabs-dropdown__toggle').simulate('click');
+      expect(document.querySelectorAll('.hi-popper__container')).toHaveLength(1);
+      trigger(document.querySelectorAll('.hi-tabs-dropdown__item')[0], 'click');
+      expect(document.querySelectorAll('.hi-popper__container--hide')).toHaveLength(1);
+      wrapper.find('.hi-tabs-dropdown__toggle').simulate('click');
+      expect(document.querySelectorAll('.hi-tabs-dropdown__item')).toHaveLength(2);
+      expect(document.querySelectorAll('.hi-popper__container--hide')).toHaveLength(0);
+      trigger(document.querySelectorAll('.hi-tabs-dropdown__item')[1], 'click');
+      expect(document.querySelectorAll('.hi-popper__container--hide')).toHaveLength(1);
+      wrapper.find('.hi-tabs-dropdown__toggle').simulate('click');
+      expect(document.querySelectorAll('.hi-popper__container--hide')).toHaveLength(0);
+      trigger(document, 'click');
+      expect(document.querySelectorAll('.hi-popper__container--hide')).toHaveLength(1);
+      wrapper.unmount();
+    });
+    it('type', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        placement: "horizontal",
+        type: "desc"
+      }, panes.map(function (pane, index) {
+        return _react["default"].createElement(_index["default"].Pane, {
+          tabTitle: pane.tabTitle,
+          tabId: pane.tabId,
+          closeable: pane.closeable,
+          key: index
+        }, _react["default"].createElement("div", {
+          style: {
+            padding: '16px'
+          }
+        }, pane.tabTitle));
+      })));
+      expect(wrapper.find('.hi-tabs--desc')).toHaveLength(1);
+      wrapper.unmount();
+    });
+    it('editable', function () {
+      var editableWrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        type: "editable",
+        activeId: "tabId-1"
+      }, panes.map(function (pane, index) {
+        return _react["default"].createElement(_index["default"].Pane, {
+          tabTitle: pane.tabTitle,
+          tabId: pane.tabId,
+          closeable: true,
+          key: index
+        }, _react["default"].createElement("div", {
+          style: {
+            padding: '16px'
+          }
+        }, pane.tabTitle));
+      })));
+      expect(editableWrapper.find('.hi-tabs--editable')).toHaveLength(1);
+      editableWrapper.find('.icon-close').at(0).simulate('click');
+      expect(editableWrapper.find('.hi-tabs__item')).toHaveLength(11);
+    });
+    it('activeId', function () {
+      var EditableTabs =
+      /*#__PURE__*/
+      function (_React$Component) {
+        (0, _inherits2["default"])(EditableTabs, _React$Component);
+
+        function EditableTabs() {
+          var _this;
+
+          (0, _classCallCheck2["default"])(this, EditableTabs);
+          _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(EditableTabs).call(this));
+          _this.state = {
+            tabId: 'tabId-1',
+            panes: [{
+              tabTitle: '团购订单',
+              tabId: 'tabId-1'
+            }, {
+              tabTitle: '团购订单2',
+              tabId: 'tabId-2'
+            }]
+          };
+          return _this;
+        }
+
+        (0, _createClass2["default"])(EditableTabs, [{
+          key: "onEdit",
+          value: function onEdit(action, index, tabId) {
+            this["".concat(action, "Tab")](index, tabId);
+          }
+        }, {
+          key: "addTab",
+          value: function addTab() {
+            var panes = this.state.panes;
+            this.setState({
+              panes: panes.concat([{
+                tabTitle: "\u65B0\u589E\u6807\u7B7E".concat(panes.length + 1),
+                tabId: "tabId-".concat(panes.length + 1)
+              }])
+            });
+          }
+        }, {
+          key: "deleteTab",
+          value: function deleteTab(index, tabId) {
+            var panes = this.state.panes.slice();
+            panes.splice(index, 1);
+            this.setState({
+              panes: panes
+            });
+          }
+        }, {
+          key: "render",
+          value: function render() {
+            return _react["default"].createElement(_index["default"], {
+              type: "editable",
+              activeId: this.state.tabId,
+              onTabClick: function onTabClick(tab, e) {
+                return void 0;
+              },
+              onEdit: this.onEdit.bind(this)
+            }, this.state.panes.map(function (pane, index) {
+              return _react["default"].createElement(_index["default"].Pane, {
+                tabTitle: pane.tabTitle,
+                tabId: pane.tabId,
+                closeable: true,
+                key: index
+              }, _react["default"].createElement("div", {
+                style: {
+                  padding: '16px'
+                }
+              }, pane.tabTitle));
+            }));
+          }
+        }]);
+        return EditableTabs;
+      }(_react["default"].Component);
+
+      var editableWrapper = (0, _enzyme.mount)(_react["default"].createElement(EditableTabs, null));
+      expect(editableWrapper.find('.hi-tabs--editable')).toHaveLength(1);
+      editableWrapper.setState({
+        tabId: 'tabId-2'
+      });
+      editableWrapper.find('.icon-close').at(1).simulate('click');
+      expect(editableWrapper.find('.hi-tabs__item').at(0).hasClass('hi-tabs__item--active')).toBeTruthy();
+      editableWrapper.find('.icon-close').at(0).simulate('click');
+      editableWrapper.setState({
+        panes: [{
+          tabTitle: '团购订单4',
+          tabId: 'tabId-4',
+          closeable: false
+        }]
+      });
+      expect(editableWrapper.find('.icon-close')).toHaveLength(1);
+      editableWrapper.find('.hi-tabs__add .icon-plus').simulate('click');
+      expect(editableWrapper.find('.icon-close')).toHaveLength(2);
+    });
+  });
+  describe('ItemDropdown', function () {
+    it('activeId', function () {
+      var EditableTabs =
+      /*#__PURE__*/
+      function (_React$Component2) {
+        (0, _inherits2["default"])(EditableTabs, _React$Component2);
+
+        function EditableTabs() {
+          var _this2;
+
+          (0, _classCallCheck2["default"])(this, EditableTabs);
+          _this2 = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(EditableTabs).call(this));
+          _this2.state = {
+            tabId: 'tabId-1',
+            panes: [{
+              tabTitle: '团购订单',
+              tabId: 'tabId-1'
+            }, {
+              tabTitle: '团购订单2',
+              tabId: 'tabId-2'
+            }, {
+              tabTitle: '团购订单3',
+              tabId: 'tabId-3'
+            }, {
+              tabTitle: '团购订单4',
+              tabId: 'tabId-4'
+            }]
+          };
+          return _this2;
+        }
+
+        (0, _createClass2["default"])(EditableTabs, [{
+          key: "render",
+          value: function render() {
+            return _react["default"].createElement(_index["default"], {
+              activeId: this.state.tabId,
+              max: 2
+            }, this.state.panes.map(function (pane, index) {
+              return _react["default"].createElement(_index["default"].Pane, {
+                tabTitle: pane.tabTitle,
+                tabId: pane.tabId,
+                closeable: true,
+                key: index
+              }, _react["default"].createElement("div", {
+                style: {
+                  padding: '16px'
+                }
+              }, pane.tabTitle));
+            }));
+          }
+        }]);
+        return EditableTabs;
+      }(_react["default"].Component);
+
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(EditableTabs, null));
+      expect(wrapper.find('.hi-tabs--card')).toHaveLength(1);
+      wrapper.setState({
+        tabId: 'tabId-2'
+      });
+      expect(wrapper.find('.hi-tabs-dropdown__toggle-title').text()).toEqual('更多');
+    });
+  });
+});

package/es/tabs/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +13,12 @@ var _TabPane = _interopRequireDefault(require("./TabPane"));
 
 require("./style/index");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _SwitchVersion = _interopRequireDefault(require("../_util/SwitchVersion"));
+
+var _index2 = _interopRequireDefault(require("./tabs-legacy/index"));
 
-_Tabs["default"].Pane = _TabPane["default"];
-var _default = _Tabs["default"];
+var VTabs = (0, _SwitchVersion["default"])(_Tabs["default"], _index2["default"]);
+var VTabPane = (0, _SwitchVersion["default"])(_TabPane["default"], _index2["default"].Pane);
+VTabs.Pane = VTabPane;
+var _default = VTabs;
 exports["default"] = _default;

package/es/tabs/style/index.css

@@ -1 +1 @@
-.hi-tabs .hi-tabs__header{position:relative;font-size:14px;color:#333}.hi-tabs .hi-tabs__item{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;cursor:pointer;border:1px solid transparent}.hi-tabs .hi-tabs__item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hi-tabs .hi-tabs__item--active{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-tabs .hi-tabs__item .hi-icon:not(.icon-close){margin-right:4px}.hi-tabs .hi-tabs__add{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;color:#979797;border-radius:2px;border:1px solid #d8d8d8;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs .hi-tabs__item-close{margin-left:8px;font-size:12px}.hi-tabs--card .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.hi-tabs--card .hi-tabs__item{height:48px;line-height:48px;padding:0 16px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--card .hi-tabs__item:hover{color:#4284f5}.hi-tabs--card .hi-tabs__item--active{border:1px solid #e6e7e8;color:#4284f5}.hi-tabs--card.hi-tabs--top .hi-tabs__nav{margin-bottom:-1px}.hi-tabs--card.hi-tabs--top .hi-tabs__header{border-bottom:1px solid #e6e7e8}.hi-tabs--card.hi-tabs--top .hi-tabs__item{margin-right:16px}.hi-tabs--card.hi-tabs--top .hi-tabs__item--active{border-bottom-color:#fff}.hi-tabs--card.hi-tabs--left{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.hi-tabs--card.hi-tabs--left .hi-tabs__header{-webkit-box-flex:0;-ms-flex:none;flex:none;display:inline-block;border-right:1px solid #e6e7e8}.hi-tabs--card.hi-tabs--left .hi-tabs__nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:-1px}.hi-tabs--card.hi-tabs--left .hi-tabs__item--active{border-right-color:#fff}.hi-tabs--editable .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;margin-bottom:-1px;margin-right:40px}.hi-tabs--editable .hi-tabs__header{border-bottom:1px solid #e6e7e8}.hi-tabs--editable .hi-tabs__item{height:48px;min-width:48px;line-height:48px;margin-right:4px;padding:0 8px;background:#fafafa;border-radius:4px 4px 0 0;border:1px solid #e6e7e8;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--editable .hi-tabs__item:last-child{margin-right:0}.hi-tabs--editable .hi-tabs__item:hover:not(.hi-tabs__item--active){background-color:#e6e7e8}.hi-tabs--editable .hi-tabs__item--active{background-color:#fff;border-bottom-color:#fff;color:#4284f5}.hi-tabs--editable .hi-tabs__add{right:4px;bottom:12px}.hi-tabs--desc .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden}.hi-tabs--desc .hi-tabs__item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:16px 20px;text-align:center;border:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--desc .hi-tabs__item:not(:first-child){margin-left:-1px}.hi-tabs--desc .hi-tabs__item:hover{color:#4284f5}.hi-tabs--desc .hi-tabs__item:hover .hi-tabs__item-desc{color:#4284f5}.hi-tabs--desc .hi-tabs__item--active{color:#4284f5;border-color:#4284f5;z-index:1}.hi-tabs--desc .hi-tabs__item--active .hi-tabs__item-desc{color:#4284f5}.hi-tabs--desc .hi-tabs__item-name{margin-top:4px}.hi-tabs--desc .hi-tabs__item-desc{font-size:12px;color:#999}.hi-tabs--button .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.hi-tabs--button .hi-tabs__item{-webkit-box-flex:0;-ms-flex:none;flex:none;height:36px;line-height:36px;padding:0 20px;margin-right:32px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--button .hi-tabs__item:hover{color:#4284f5}.hi-tabs--button .hi-tabs__item--active{color:#4284f5;border:1px solid #4284f5;border-radius:18px}.hi-tabs-dropdown__toggle-title{margin-right:8px}.hi-tabs-dropdown__items{max-height:160px;padding:4px 0;overflow:auto;background-color:#fff;border-radius:2px;border:1px solid #e6e7e8;-webkit-box-shadow:0 2px 8px 0 rgba(56,62,71,0.1);box-shadow:0 2px 8px 0 rgba(56,62,71,0.1)}.hi-tabs-dropdown__item{height:36px;min-width:140px;line-height:36px;padding:0 16px;font-size:14px;color:#383e47;white-space:nowrap;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs-dropdown__item:hover{background-color:rgba(66,133,244,0.08)}.hi-tabs-dropdown__item--active{background-color:rgba(66,133,244,0.08)}
+.hi-tabs .hi-tabs__header{position:relative;font-size:14px;color:#333}.hi-tabs .hi-tabs__item{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;cursor:pointer;border:1px solid transparent}.hi-tabs .hi-tabs__item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hi-tabs .hi-tabs__item--active{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-tabs .hi-tabs__item .hi-icon:not(.icon-close){margin-right:4px}.hi-tabs .hi-tabs__add{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;color:#979797;border-radius:2px;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:16px}.hi-tabs .hi-tabs__item-close{margin-left:8px;font-size:16px}.hi-tabs--line>.hi-tabs__header .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-bottom:1px solid #e6e7e8}.hi-tabs--line>.hi-tabs__header .hi-tabs__item{position:relative;height:40px;line-height:40px;margin-right:32px;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;-webkit-transition:color 0.5s linear;transition:color 0.5s linear}.hi-tabs--line>.hi-tabs__header .hi-tabs__item::after{display:inline-block;position:absolute;content:'';height:2px;width:100%;background:#4284f5;bottom:0;left:0;opacity:0;-webkit-transition:opacity 0.5s linear;transition:opacity 0.5s linear}.hi-tabs--line>.hi-tabs__header .hi-tabs__item:hover{color:#4284f5}.hi-tabs--line>.hi-tabs__header .hi-tabs__item--active{color:#4284f5}.hi-tabs--line>.hi-tabs__header .hi-tabs__item--active::after{opacity:1}.hi-tabs--card>.hi-tabs__header .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.hi-tabs--card>.hi-tabs__header .hi-tabs__item{height:48px;line-height:46px;padding:0 16px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#4284f5}.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{border:1px solid #e6e7e8;border-radius:2px;color:#4284f5}.hi-tabs--card.hi-tabs--horizontal .hi-tabs__nav{margin-bottom:-1px}.hi-tabs--card.hi-tabs--horizontal .hi-tabs__header{border-bottom:1px solid #e6e7e8}.hi-tabs--card.hi-tabs--horizontal .hi-tabs__item--active{border-bottom-color:#fff}.hi-tabs--card.hi-tabs--vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.hi-tabs--card.hi-tabs--vertical .hi-tabs__header{-webkit-box-flex:0;-ms-flex:none;flex:none;display:inline-block;border-right:1px solid #e6e7e8}.hi-tabs--card.hi-tabs--vertical .hi-tabs__nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:-1px}.hi-tabs--card.hi-tabs--vertical .hi-tabs__item{border-top-left-radius:4px;border-bottom-left-radius:4px}.hi-tabs--card.hi-tabs--vertical .hi-tabs__item--active{border-right-color:#fff}.hi-tabs--editable>.hi-tabs__header{border-bottom:1px solid #e6e7e8}.hi-tabs--editable>.hi-tabs__header .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;margin-bottom:-1px;margin-right:40px;min-height:40px}.hi-tabs--editable>.hi-tabs__header .hi-tabs__item{height:40px;min-width:48px;line-height:40px;margin-right:4px;padding:0 8px;background:#fafafa;border-radius:2px 2px 0 0;border:1px solid #e6e7e8;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--editable>.hi-tabs__header .hi-tabs__item:last-child{margin-right:0}.hi-tabs--editable>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){background-color:#f0f0f0}.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{background-color:#fff;border-bottom-color:#fff;color:#4284f5}.hi-tabs--editable>.hi-tabs__header .hi-tabs__add{right:4px;bottom:12px}.hi-tabs--desc>.hi-tabs__header .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:16px 20px;text-align:center;border:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:not(:first-child){margin-left:-1px}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#4284f5}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#4284f5}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#4284f5;border-color:#4284f5;z-index:1}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#4284f5}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item-name{margin-top:4px}.hi-tabs--desc>.hi-tabs__header .hi-tabs__item-desc{font-size:12px;color:#999}.hi-tabs--button>.hi-tabs__header .hi-tabs__nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.hi-tabs--button>.hi-tabs__header .hi-tabs__item{-webkit-box-flex:0;-ms-flex:none;flex:none;height:36px;line-height:34px;padding:0 23px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:24px;border:1px solid #d8d8d8;border-radius:18px}.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#4284f5;border:1px solid #4284f5}.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{color:#fff;background-color:#4284f5;border:1px solid #4284f5}.hi-tabs-dropdown__toggle-title{margin-right:8px}.hi-tabs-dropdown__items{max-height:160px;padding:4px 0;overflow:auto;background-color:#fff;border-radius:2px;border:1px solid #e6e7e8;-webkit-box-shadow:0 2px 8px 0 rgba(56,62,71,0.1);box-shadow:0 2px 8px 0 rgba(56,62,71,0.1)}.hi-tabs-dropdown__item{height:36px;min-width:140px;line-height:36px;padding:0 16px;font-size:14px;color:#383e47;white-space:nowrap;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-tabs-dropdown__item:hover{background-color:rgba(66,133,244,0.08)}.hi-tabs-dropdown__item--active{background-color:rgba(66,133,244,0.08)}.theme__orange.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#f63}.theme__orange.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{color:#f63}.theme__orange.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{color:#f63}.theme__orange.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#f63}.theme__orange.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#f63}.theme__orange.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#f63;border-color:#f63}.theme__orange.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#f63}.theme__orange.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#f63;border:1px solid #f63}.theme__orange.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{background-color:#f63;border:1px solid #f63}.theme__orange.hi-tabs-dropdown__items .hi-tabs-dropdown__item:hover{background-color:rgba(255,102,51,0.1)}.theme__orange.hi-tabs-dropdown__items .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active{background-color:rgba(255,102,51,0.1)}.theme__cyan.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#46bc99}.theme__cyan.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{color:#46bc99}.theme__cyan.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{color:#46bc99}.theme__cyan.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#46bc99}.theme__cyan.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#46bc99}.theme__cyan.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#46bc99;border-color:#46bc99}.theme__cyan.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#46bc99}.theme__cyan.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#46bc99;border:1px solid #46bc99}.theme__cyan.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{background-color:#46bc99;border:1px solid #46bc99}.theme__cyan.hi-tabs-dropdown__items .hi-tabs-dropdown__item:hover{background-color:rgba(70,188,153,0.1)}.theme__cyan.hi-tabs-dropdown__items .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active{background-color:rgba(70,188,153,0.1)}.theme__magenta.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#ff5975}.theme__magenta.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{color:#ff5975}.theme__magenta.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{color:#ff5975}.theme__magenta.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#ff5975}.theme__magenta.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#ff5975}.theme__magenta.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#ff5975;border-color:#ff5975}.theme__magenta.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#ff5975}.theme__magenta.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#ff5975;border:1px solid #ff5975}.theme__magenta.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{background-color:#ff5975;border:1px solid #ff5975}.theme__magenta.hi-tabs-dropdown__items .hi-tabs-dropdown__item:hover{background-color:rgba(255,89,117,0.1)}.theme__magenta.hi-tabs-dropdown__items .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active{background-color:rgba(255,89,117,0.1)}.theme__lavender.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#b450de}.theme__lavender.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{color:#b450de}.theme__lavender.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{color:#b450de}.theme__lavender.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#b450de}.theme__lavender.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#b450de}.theme__lavender.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#b450de;border-color:#b450de}.theme__lavender.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#b450de}.theme__lavender.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#b450de;border:1px solid #b450de}.theme__lavender.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{background-color:#b450de;border:1px solid #b450de}.theme__lavender.hi-tabs-dropdown__items .hi-tabs-dropdown__item:hover{background-color:rgba(180,80,222,0.1)}.theme__lavender.hi-tabs-dropdown__items .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active{background-color:rgba(180,80,222,0.1)}.theme__blue.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#3da8f5}.theme__blue.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{color:#3da8f5}.theme__blue.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{color:#3da8f5}.theme__blue.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#3da8f5}.theme__blue.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#3da8f5}.theme__blue.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#3da8f5;border-color:#3da8f5}.theme__blue.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#3da8f5}.theme__blue.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#3da8f5;border:1px solid #3da8f5}.theme__blue.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{background-color:#3da8f5;border:1px solid #3da8f5}.theme__blue.hi-tabs-dropdown__items .hi-tabs-dropdown__item:hover{background-color:rgba(61,168,245,0.1)}.theme__blue.hi-tabs-dropdown__items .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active{background-color:rgba(61,168,245,0.1)}.theme__purple.hi-tabs--card>.hi-tabs__header .hi-tabs__item:hover{color:#8a8acb}.theme__purple.hi-tabs--card>.hi-tabs__header .hi-tabs__item--active{color:#8a8acb}.theme__purple.hi-tabs--editable>.hi-tabs__header .hi-tabs__item--active{color:#8a8acb}.theme__purple.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover{color:#8a8acb}.theme__purple.hi-tabs--desc>.hi-tabs__header .hi-tabs__item:hover .hi-tabs__item-desc{color:#8a8acb}.theme__purple.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active{color:#8a8acb;border-color:#8a8acb}.theme__purple.hi-tabs--desc>.hi-tabs__header .hi-tabs__item--active .hi-tabs__item-desc{color:#8a8acb}.theme__purple.hi-tabs--button>.hi-tabs__header .hi-tabs__item:hover:not(.hi-tabs__item--active){color:#8a8acb;border:1px solid #8a8acb}.theme__purple.hi-tabs--button>.hi-tabs__header .hi-tabs__item--active{background-color:#8a8acb;border:1px solid #8a8acb}.theme__purple.hi-tabs-dropdown__items .hi-tabs-dropdown__item:hover{background-color:rgba(138,138,203,0.1)}.theme__purple.hi-tabs-dropdown__items .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active{background-color:rgba(138,138,203,0.1)}

package/es/tabs/tabs-legacy/ItemDropdown.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _popper = _interopRequireDefault(require("../../popper"));
+
+var ItemDropdown =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(ItemDropdown, _Component);
+
+  function ItemDropdown(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ItemDropdown);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ItemDropdown).call(this, props));
+    _this.state = {
+      visible: false,
+      activeIndex: -1
+    };
+    _this.clickOutsideHandle = _this.clickOutside.bind((0, _assertThisInitialized2["default"])(_this));
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ItemDropdown, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (!nextProps.active) {
+        this.setState({
+          activeIndex: -1
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('click', this.clickOutsideHandle);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('click', this.clickOutsideHandle);
+    }
+  }, {
+    key: "clickOutside",
+    value: function clickOutside(e) {
+      if (_reactDom["default"].findDOMNode(this.toggleRef) && _reactDom["default"].findDOMNode(this.toggleRef).contains(e.target)) {
+        return;
+      }
+
+      this.toggle(true);
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.visible;
+      this.setState({
+        visible: !visible
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          items = _this$props.items,
+          onChoose = _this$props.onChoose,
+          localeDatas = _this$props.localeDatas;
+      var _this$state = this.state,
+          activeIndex = _this$state.activeIndex,
+          visible = _this$state.visible;
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-tabs-legacy-dropdown', {
+          'hi-tabs-legacy-dropdown--active': !!items[activeIndex]
+        })
+      }, _react["default"].createElement("div", {
+        className: "hi-tabs-legacy-dropdown__toggle",
+        ref: function ref(node) {
+          _this2.toggleRef = node;
+        },
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          _this2.toggle();
+        }
+      }, _react["default"].createElement("span", {
+        className: "hi-tabs-legacy-dropdown__toggle-title"
+      }, items[activeIndex] && items[activeIndex].tabName || localeDatas.tabs.more), _react["default"].createElement("i", {
+        className: "hi-icon icon-down"
+      })), _react["default"].createElement(_popper["default"], {
+        className: "hi-tabs-legacy-dropdown__popper",
+        show: visible,
+        attachEle: this.toggleRef,
+        zIndex: 1010,
+        width: "auto",
+        leftGap: -18,
+        topGap: 3
+      }, _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-tabs-legacy-dropdown__items')
+      }, items.map(function (item, index) {
+        return _react["default"].createElement("div", {
+          className: (0, _classnames["default"])('hi-tabs-legacy-dropdown__item', {
+            'hi-tabs-legacy-dropdown__item--active': index === activeIndex
+          }),
+          onClick: function onClick(e) {
+            _this2.setState({
+              activeIndex: index
+            }, function () {
+              _this2.toggle();
+
+              onChoose(item, e);
+            });
+          },
+          key: index
+        }, item.tabName);
+      }))));
+    }
+  }]);
+  return ItemDropdown;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(ItemDropdown, "propTypes", {
+  items: _propTypes["default"].array,
+  onChoose: _propTypes["default"].func,
+  active: _propTypes["default"].bool
+});
+
+var _default = (0, _context["default"])(ItemDropdown);
+
+exports["default"] = _default;

package/es/tabs/tabs-legacy/TabPane.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var TabPane =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TabPane, _Component);
+
+  function TabPane() {
+    (0, _classCallCheck2["default"])(this, TabPane);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TabPane).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(TabPane, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          prefixCls = _this$props.prefixCls,
+          children = _this$props.children,
+          show = _this$props.show;
+      var style = show ? {} : {
+        display: 'none'
+      };
+      return _react["default"].createElement("div", {
+        className: "".concat(prefixCls),
+        style: style
+      }, children);
+    }
+  }]);
+  return TabPane;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(TabPane, "defaultProps", {
+  prefixCls: 'hi-tabs-legacy-pane',
+  disabled: false,
+  closeable: true
+});
+(0, _defineProperty2["default"])(TabPane, "propTypes", {
+  tabName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+  tabDesc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+  tabKey: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  closeable: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool
+});
+var _default = TabPane;
+exports["default"] = _default;