@lemon-fe/components 0.0.29 → 0.1.0-alpha.0

package/es/Icons/Search.js

@@ -11,21 +11,17 @@ var Svg = function Svg(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread({
     width: "16",
     height: "16",
+    viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("circle", {
-    strokeOpacity: ".25",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    cx: "7",
-    cy: "7",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillOpacity: ".15",
     fill: "currentColor",
-    d: "m10.878 12.293 1.414-1.414L14.414 13l-1.415 1.414z"
+    fillRule: "evenodd",
+    opacity: ".7"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.5.5a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 1.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.03 12.03a.75.75 0 0 1 1.061 0l1.768 1.768a.75.75 0 1 1-1.06 1.06l-1.769-1.767a.75.75 0 0 1 0-1.06Z"
   })));
 };
 

package/es/Layout/index.js

@@ -1,9 +1,86 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Spin } from 'antd';
 import { PREFIX_CLS } from '../constants';
+
+function Sider(props) {
+  var prefixCls = props.prefixCls,
+      children = props.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-left"), _defineProperty({}, "".concat(prefixCls, "-left-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-left-body")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-left-content")
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-left-collapse"),
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    version: "1.1",
+    viewBox: "0 0 12 12"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: "1"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-463.000000, -140.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(463.000000, 140.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    opacity: "0.699999988",
+    transform: "translate(2.000000, 2.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9,0.75 C9,1.16421356 8.66421356,1.5 8.25,1.5 L5.75,1.5 C5.33578644,1.5 5,1.16421356 5,0.75 C5,0.335786438 5.33578644,7.6089797e-17 5.75,0 L8.25,0 C8.66421356,-7.6089797e-17 9,0.335786438 9,0.75 Z",
+    id: "Rectangle-393",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9,4 C9,4.41421356 8.66421356,4.75 8.25,4.75 L5.75,4.75 C5.33578644,4.75 5,4.41421356 5,4 C5,3.58578644 5.33578644,3.25 5.75,3.25 L8.25,3.25 C8.66421356,3.25 9,3.58578644 9,4 Z",
+    id: "Rectangle-394",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9,7.75 C9,8.16421356 8.66421356,8.5 8.25,8.5 L0.75,8.5 C0.335786438,8.5 5.07265313e-17,8.16421356 0,7.75 C-5.07265313e-17,7.33578644 0.335786438,7 0.75,7 L8.25,7 C8.66421356,7 9,7.33578644 9,7.75 Z",
+    id: "Rectangle-395",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.32842712,0.621320344 L1.32842712,0.621320344 L1.32842712,3.62132034",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    transform: "translate(2.828427, 2.121320) rotate(-45.000000) translate(-2.828427, -2.121320) "
+  }))))))));
+}
+
 export default function Layout(props) {
   var className = props.className,
       style = props.style,
@@ -23,8 +100,8 @@ export default function Layout(props) {
     className: "".concat(prefixCls, "-header")
   }, header) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")
-  }, left ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-left")
+  }, left ? /*#__PURE__*/React.createElement(Sider, {
+    prefixCls: prefixCls
   }, left) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-main")
   }, children)), footer ? /*#__PURE__*/React.createElement("div", {

package/es/Layout/index.less

@@ -3,48 +3,96 @@
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  padding: 0 @space;
   background: #f2f2f2;
 
   &-header {
-    padding: (@space - 3) @space 0;
-
-    .@{prefixCls}-actions {
-      display: inline-flex;
-      align-items: center;
-      height: 22px;
-    }
+    padding: @space 0;
   }
 
   &-content {
     display: flex;
     flex: 1;
-    padding: @space;
-  }
+    background-color: #fff;
+    background-clip: content-box;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 
-  &-header + &-content {
-    padding-top: @space - 3;
+    &:first-child {
+      margin-top: @space;
+    }
   }
 
   &-left {
-    display: flex;
-    flex: 0 0 242px;
-    flex-direction: column;
-    min-width: 0;
-    margin-right: @space;
-    overflow: auto;
-  }
+    position: relative;
 
-  &-main {
-    flex: 1;
-    min-width: 0;
+    &-body {
+      width: 242px;
+      height: 100%;
+      overflow-x: hidden;
+      transition: width 0.2s;
+    }
 
-    & > .@{prefixCls}-section:not(:first-child) {
-      margin-top: @space;
+    &-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 242px;
+      height: 100%;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 1px;
+        height: 100%;
+        background-color: #e6e6e6;
+        content: '';
+      }
+
+      & > .@{prefixCls}-tree-wrapper > .@{prefixCls}-tree-header {
+        padding-right: 12px;
+      }
     }
 
-    & > .@{prefixCls}-section-with-actions:not(:first-child) {
-      margin-top: @space / 2;
+    &-collapse {
+      position: absolute;
+      top: 16px;
+      right: 0;
+      z-index: 100;
+      box-sizing: border-box;
+      width: 16px;
+      height: 32px;
+      font-size: 14px;
+      line-height: 32px;
+      text-align: center;
+      text-decoration: underline overline;
+      background-color: #fff;
+      border: 1px solid #e6e6e6;
+      border-right: none;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      transform-origin: 100% 50%;
+      cursor: pointer;
+      transition: transform 0.3s;
+
+      &:hover {
+        color: @primary-color;
+      }
     }
+
+    &-collapsed &-body {
+      width: 0;
+    }
+
+    &-collapsed &-collapse {
+      transform: rotateY(180deg);
+    }
+  }
+
+  &-main {
+    flex: 1;
+    min-width: 0;
   }
 
   &-footer {

package/es/MainFramework/components/Menu/index.js

@@ -406,7 +406,7 @@ export default function Menu(props) {
         overflow: 'hidden'
       }
     }, item.name), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-menu-item-favorite"),
+      className: classNames("".concat(prefixCls, "-menu-item-favorite"), _defineProperty({}, "".concat(prefixCls, "-menu-item-favorite-active"), favorited)),
       onClick: function onClick(e) {
         toggleFavorite(e, item);
       }
@@ -544,11 +544,11 @@ export default function Menu(props) {
     strokeDasharray: "0,0",
     transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000) translate(8.535522, 10.000000) rotate(-45.000000) translate(-8.535522, -10.000000)"
   })))))), menus.map(function (item, index) {
-    var _classNames5;
+    var _classNames6;
 
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames5)),
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames6 = {}, _defineProperty(_classNames6, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames6, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames6)),
       onClick: function onClick() {
         return handleClick(item);
       },
@@ -587,7 +587,11 @@ export default function Menu(props) {
     className: "".concat(prefixCls, "-menu-icon")
   }, favoriteIcon), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-title")
-  }, "\u6536\u85CF"))), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, "\u6536\u85CF")), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-divider-div"), _defineProperty({}, "".concat(prefixCls, "-menu-divider-div-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement(Divider, {
+    className: "".concat(prefixCls, "-menu-divider")
+  }))), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-gutter")
   }), collapsed ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-top-item"),

package/es/MainFramework/components/Menu/index.less

@@ -215,7 +215,7 @@
     &-favorite {
       display: none;
 
-      &:hover {
+      &-active {
         display: block;
       }
 

package/es/Portal/index.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+declare type ContentType = ReactNode | null;
+declare function PortalHost(props: {
+    children: ContentType;
+}): JSX.Element;
+declare function Portal(props: {
+    children?: ContentType;
+}): JSX.Element | null;
+declare namespace Portal {
+    var Host: typeof PortalHost;
+}
+export default Portal;

package/es/Portal/index.js

@@ -0,0 +1,72 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { uniqueId } from 'lodash';
+var Slot = /*#__PURE__*/memo(function Content(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+});
+var Context = /*#__PURE__*/createContext(null);
+
+function PortalHost(props) {
+  var children = props.children;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      content = _useState2[0],
+      setContent = _useState2[1];
+
+  var portal = useMemo(function () {
+    return {
+      add: function add(key, node) {
+        setContent({
+          key: key,
+          node: node
+        });
+      },
+      clear: function clear(key) {
+        setContent(function (prev) {
+          if ((prev === null || prev === void 0 ? void 0 : prev.key) === key) {
+            return null;
+          }
+
+          return prev;
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: portal
+  }, /*#__PURE__*/React.createElement(Slot, null, content ? content.node : null), /*#__PURE__*/React.createElement(Slot, null, children));
+}
+
+function Portal(props) {
+  var _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children;
+  var portal = useContext(Context);
+  var key = useMemo(function () {
+    return uniqueId('portal-');
+  }, []);
+  useEffect(function () {
+    if (portal !== null) {
+      portal.add(key, children);
+      return function () {
+        portal.clear(key);
+      };
+    }
+  }, [portal, key, children]);
+  return portal ? null : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+Portal.Host = PortalHost;
+export default Portal;

package/es/Section/TabBar.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEvent } from 'react';
+interface Props {
+    prefixCls: string;
+    tabs: {
+        title?: string;
+        key: string;
+    }[];
+    activeKey?: string;
+    onTabClick: (key: string, index: number, e: MouseEvent) => void;
+}
+export default function TabBar(props: Props): JSX.Element;
+export {};

package/es/Section/TabBar.js

@@ -0,0 +1,48 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+export default function TabBar(props) {
+  var prefixCls = props.prefixCls,
+      tabs = props.tabs,
+      onTabClick = props.onTabClick,
+      activeKey = props.activeKey;
+
+  var getKey = function getKey() {
+    return activeKey || (tabs.length > 0 ? tabs[0].key : undefined);
+  };
+
+  var _useState = useState(getKey()),
+      _useState2 = _slicedToArray(_useState, 2),
+      key = _useState2[0],
+      setKey = _useState2[1];
+
+  useEffect(function () {
+    setKey(getKey());
+  }, [activeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-tab")
+  }, tabs.map(function (_, index) {
+    var tab = tabs[index];
+    return /*#__PURE__*/React.createElement("div", {
+      key: tab.key,
+      className: classNames("".concat(prefixCls, "-tab-item"), _defineProperty({}, "".concat(prefixCls, "-tab-item-active"), key === tab.key)),
+      onClick: function onClick(e) {
+        setKey(tab.key);
+        onTabClick(tab.key, index, e);
+      }
+    }, tab.title);
+  }));
+}

package/es/Section/index.js

@@ -7,7 +7,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import classNames from 'classnames';
 import { Tabs } from 'antd';
+import { mapChildren } from '../utils';
 import { PREFIX_CLS } from '../constants';
+import TabBar from './TabBar';
 export default function Section(props) {
   var _classNames;
 
@@ -22,7 +24,7 @@ export default function Section(props) {
       actions = props.actions,
       flex = props.flex,
       activeKey = props.activeKey,
-      onTabClick = props.onTabClick;
+      _onTabClick = props.onTabClick;
   var prefixCls = PREFIX_CLS + '-section';
   var containerStyle = style;
 
@@ -30,69 +32,36 @@ export default function Section(props) {
     containerStyle = _objectSpread({
       flex: typeof flex === 'number' ? flex : 1
     }, containerStyle);
-  } // 不使用Children.map的原因是由于它会给子节点生成一个key与tabs的activeTabKey无法对应
-
-
-  var mapChildren = function mapChildren(children, cb) {
-    var nodes = [];
-
-    if (Array.isArray(children)) {
-      nodes = children;
-    } else {
-      nodes = [children];
-    }
-
-    return nodes.filter(function (item) {
-      return item !== null;
-    }).map(cb);
-  };
+  }
 
   var hasActions = !!actions;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _defineProperty(_classNames, "".concat(prefixCls, "-with-actions"), hasActions), _classNames), className),
+    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _classNames), className),
     style: containerStyle
-  }, !!title || hasActions ? /*#__PURE__*/React.createElement("div", {
+  }, title || hasActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-header")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-title")
-  }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
+  }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? Array.isArray(children) && children.length > 1 ? /*#__PURE__*/React.createElement(Tabs, {
     activeKey: activeKey,
-    onTabClick: onTabClick,
+    onTabClick: _onTabClick,
     renderTabBar: function renderTabBar(tabProps) {
-      var activeKey = tabProps.activeKey,
-          onTabClick = tabProps.onTabClick;
-      var active = tabs.findIndex(function (item) {
-        return item.key === activeKey;
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-tab")
-      }, tabs.map(function (_, index) {
-        var _classNames2;
-
-        var tab = tabs[index];
-        var key = tab.key;
-        return /*#__PURE__*/React.createElement("div", {
-          key: key,
-          className: classNames("".concat(prefixCls, "-tab-item"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active"), active === index), _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active-left"), index === active - 1), _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active-right"), index === active + 1), _classNames2)),
-          onClick: function onClick(e) {
-            if (key !== null) {
-              onTabClick(key, e);
-            }
+      var mKey = tabProps.activeKey,
+          mClick = tabProps.onTabClick;
+      return /*#__PURE__*/React.createElement(TabBar, {
+        activeKey: mKey,
+        tabs: tabs,
+        prefixCls: prefixCls,
+        onTabClick: function onTabClick(key, index, e) {
+          mClick(key, e);
 
-            if (key !== activeKey) {
-              if (onTabChange) {
-                onTabChange(tab.key, index);
-              }
+          if (key !== mKey) {
+            if (onTabChange) {
+              onTabChange(key, index);
             }
           }
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-tab-item-arc-left")
-        }), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-tab-item-content")
-        }, tab.title), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-tab-item-arc-right")
-        }));
-      }));
+        }
+      });
     }
   }, mapChildren(children, function (child, index) {
     var _tabs$index = tabs[index],
@@ -104,7 +73,23 @@ export default function Section(props) {
       className: "".concat(prefixCls, "-body"),
       style: bodyStyle
     }, child);
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
+    activeKey: activeKey,
+    tabs: tabs,
+    prefixCls: prefixCls,
+    onTabClick: function onTabClick(key, index, e) {
+      if (_onTabClick) {
+        _onTabClick(key, e);
+      }
+
+      if (key !== activeKey && onTabChange) {
+        onTabChange(key, index);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body"),
+    style: bodyStyle
+  }, children)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-body"),
     style: bodyStyle
   }, children));