@lemon-fe/kits 1.0.0-0 → 1.0.0-1

package/es/components/Section/TabBar.js

@@ -1,3 +1,5 @@
+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."); }
@@ -11,12 +13,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useState } from 'react';
-import { Radio } from 'antd';
+import classNames from 'classnames';
 export default function TabBar(props) {
-  var tabs = props.tabs,
+  var prefixCls = props.prefixCls,
+      tabs = props.tabs,
       onTabClick = props.onTabClick,
-      activeKey = props.activeKey,
-      prefixCls = props.prefixCls;
+      activeKey = props.activeKey;
 
   var getKey = function getKey() {
     return activeKey || (tabs.length > 0 ? tabs[0].key : undefined);
@@ -30,22 +32,17 @@ export default function TabBar(props) {
   useEffect(function () {
     setKey(getKey());
   }, [activeKey]);
-
-  var handleChange = function handleChange(key, index, e) {
-    setKey(key);
-    onTabClick(key, index, e);
-  };
-
-  return /*#__PURE__*/React.createElement(Radio.Group, {
-    value: key,
+  return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-tab")
-  }, tabs.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(Radio.Button, {
-      key: item.key,
-      value: item.key,
+  }, 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) {
-        return handleChange(item.key, index, e);
+        setKey(tab.key);
+        onTabClick(tab.key, index, e);
       }
-    }, item.title || item.key);
+    }, tab.title);
   }));
 }

package/es/components/Section/index.less

@@ -77,7 +77,12 @@
   }
 
   &-tab {
+    display: inline-flex;
+    align-self: flex-start;
     margin-bottom: @space-v;
+    padding: 2px;
+    background-color: #f2f2f2;
+    border-radius: 4px;
 
     .@{ant-prefix}-radio-button-wrapper-checked {
       box-shadow: none !important;
@@ -85,11 +90,10 @@
 
     &-item {
       position: relative;
-      min-width: 88px;
-      padding: (@space-v / 2) (@space-h / 2);
+      padding: (@space-v / 2) @space-h;
       color: rgba(51, 51, 51, 0.65);
       font-size: 14px;
-      line-height: 22px;
+      line-height: 16px;
       text-align: center;
       background-color: transparent;
       border-radius: 4px;
@@ -103,7 +107,7 @@
 
     &-item:not(&-item-active) + &-item:not(&-item-active)::before {
       position: absolute;
-      top: 12px;
+      top: 8px;
       left: 0;
       z-index: 1;
       display: block;

package/es/index.less

@@ -23,3 +23,4 @@
 @import './components/DataGrid/index.less';
 
 @import './layouts/BasicLayout/components/MainFramework/index.less';
+@import './layouts/Breadcrumb/index.less';

package/es/layouts/Breadcrumb/index.js

@@ -3,6 +3,8 @@ import { Link, matchPath, useRouteMatch } from 'react-router-dom';
 import { Breadcrumb as AntdBreadcrumb } from 'antd';
 import { uniqBy } from 'lodash';
 import { RouteTabContext } from "../components/RouteTab";
+import Icons from "../../components/Icons";
+import { PREFIX_CLS } from "../../constants";
 var BreadcrumbItem = AntdBreadcrumb.Item;
 export default function Breadcrumb(props) {
   var children = props.children;
@@ -65,7 +67,11 @@ export default function Breadcrumb(props) {
     style: {
       fontWeight: 'normal'
     }
-  }, children || items.map(function (item, index) {
+  }, items.length > 1 ? /*#__PURE__*/React.createElement("li", {
+    className: "".concat(PREFIX_CLS, "-breadcrumb-back")
+  }, /*#__PURE__*/React.createElement(Icons.Down, null), /*#__PURE__*/React.createElement(Link, {
+    to: items[items.length - 1].url
+  }, "\u8FD4\u56DE")) : null, children || items.map(function (item, index) {
     return /*#__PURE__*/React.createElement(BreadcrumbItem, {
       key: item.url
     }, item.url && index < items.length - 1 ? /*#__PURE__*/React.createElement(Link, {

package/es/layouts/Breadcrumb/index.less

@@ -0,0 +1,20 @@
+.@{prefixCls}-breadcrumb {
+  &-back {
+    display: flex;
+    align-items: center;
+
+    .anticon {
+      transform: rotate(90deg);
+      margin-right: 6px;
+    }
+
+    &::after {
+      display: inline-block;
+      width: 1px;
+      height: 12px;
+      margin: 0 12px;
+      background-color: #e7e5e5;
+      content: '';
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-0",
+  "version": "1.0.0-1",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -86,4 +86,4 @@
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0"
   }
-}
+}