@lemon-fe/components 0.0.21 → 0.0.23

package/es/BaseTable/index.less

@@ -11,8 +11,6 @@
 }
 
 .ant-table-body {
-  scrollbar-width: thin;
-
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;

package/es/MainFramework/components/DownBar/index.d.ts

@@ -0,0 +1,10 @@
+export default function DownBar<T extends {
+    title: string;
+    closable?: boolean;
+}>(props: {
+    tabs: T[];
+    active: number;
+    visible?: boolean;
+    onClick: (active: number) => void;
+    onClose: (active: number) => void;
+}): JSX.Element;

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

@@ -0,0 +1,84 @@
+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';
+import classNames from 'classnames';
+import { PREFIX_CLS as prefixCls } from '../../../constants';
+import { Dropdown } from 'antd';
+export default function DownBar(props) {
+  var tabs = props.tabs,
+      active = props.active,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      _onClick = props.onClick,
+      onClose = props.onClose;
+
+  var handleClose = function handleClose(e, index) {
+    e.stopPropagation();
+    onClose(index);
+  };
+
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlayStyle: visible ? {
+      visibility: 'visible'
+    } : {
+      visibility: 'hidden'
+    },
+    placement: "bottomRight",
+    overlay: /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-down-tabs")
+    }, tabs.map(function (item, index) {
+      var key = item.title;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-down-tab"), _defineProperty({}, "".concat(prefixCls, "-down-tab-active"), index === active)),
+        onClick: function onClick() {
+          return _onClick(index);
+        },
+        key: key
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-down-tab-title")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-down-tab-inner")
+      }, item.title), item.closable !== false && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-down-tab-close"),
+        onClick: function onClick(e) {
+          return handleClose(e, index);
+        }
+      }, /*#__PURE__*/React.createElement("svg", {
+        width: "20",
+        height: "20",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "currentColor"
+      }, /*#__PURE__*/React.createElement("g", {
+        fillRule: "nonzero"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M7.74992318,2.75006802 L7.74992318,11.250068 C7.74992318,11.6642816 7.41413675,12.000068 6.99992318,12.000068 C6.58570962,12.000068 6.24992318,11.6642816 6.24992318,11.250068 L6.24992318,2.75006802 C6.24992318,2.33585446 6.58570962,2.00006802 6.99992318,2.00006802 C7.41413675,2.00006802 7.74992318,2.33585446 7.74992318,2.75006802 Z",
+        transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999923, 7.000068) rotate(45.000000) translate(-6.999923, -7.000068)"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M7.74994595,2.75007682 L7.74994595,11.2500768 C7.74994595,11.6642904 7.41415952,12.0000768 6.99994595,12.0000768 C6.58573239,12.0000768 6.24994595,11.6642904 6.24994595,11.2500768 L6.24994595,2.75007682 C6.24994595,2.33586325 6.58573239,2.00007682 6.99994595,2.00007682 C7.41415952,2.00007682 7.74994595,2.33586325 7.74994595,2.75007682 Z",
+        transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999946, 7.000077) rotate(-45.000000) translate(-6.999946, -7.000077)"
+      }))))))));
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-down-tab-icon"),
+    style: visible ? {
+      visibility: 'visible'
+    } : {
+      visibility: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z",
+    color: "#6D6D6D",
+    opacity: ".9",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }))));
+}

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

@@ -0,0 +1,108 @@
+.@{prefixCls}-down-tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 120px;
+  overflow-x: hidden;
+  background-color: #fcfcfc;
+  border-radius: 8px;
+  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
+    0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(13px);
+}
+
+.@{prefixCls}-down-tab {
+  position: relative;
+  box-sizing: content-box;
+  width: 100%;
+  height: 43px;
+  cursor: pointer;
+
+  &-title {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 0 12px;
+    transition: background-color 0.2s;
+  }
+
+  &:hover:not(&-active) &-title,
+  &:hover:not(&-active)::after {
+    background-color: #f2f2f2;
+  }
+
+  &-active &-title,
+  &-active::after {
+    background-color: #eeeeee;
+  }
+
+  &:hover::after {
+    z-index: 2;
+  }
+
+  &-active::after {
+    z-index: 3;
+  }
+
+  &-active::before,
+  &-active + &::before,
+  &:hover::before,
+  &:hover + &::before {
+    opacity: 0;
+  }
+
+  &-active &-inner {
+    opacity: 1;
+  }
+
+  &-inner {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: #333;
+    font-size: 14px;
+    line-height: 43px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.7;
+
+    &::after {
+      display: inline-block;
+      width: 16px;
+      content: ' ';
+    }
+  }
+
+  &-close {
+    display: none;
+  }
+  &:hover &-close {
+    display: block;
+    width: 14px;
+    height: 14px;
+    color: #c4c4c4;
+    line-height: 14px;
+    text-align: center;
+    border-radius: 50%;
+    &:hover {
+      color: #f2f2f2;
+      background-color: #c1c1c1;
+    }
+  }
+}
+
+.@{prefixCls}-down-tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  cursor: pointer;
+  &:hover {
+    background-color: #eeeeee;
+  }
+}

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

@@ -171,7 +171,7 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 22px;
-        opacity: 50%;
+        opacity: 0.5;
       }
     }
 
@@ -267,7 +267,7 @@
     font-weight: 400;
     font-size: 14px;
     line-height: 22px;
-    opacity: 50%;
+    opacity: 0.5;
   }
 
   &-more {

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

@@ -9,10 +9,10 @@
   &::before {
     position: absolute;
     top: 0;
-    left: 6px;
+    left: 0;
     z-index: 4;
     display: block;
-    width: 10px;
+    width: 16px;
     height: 100%;
     background-color: #fff;
     border-bottom-right-radius: 10px;
@@ -22,10 +22,10 @@
   &::after {
     position: absolute;
     top: 0;
-    right: 6px;
+    right: 0;
     z-index: 4;
     display: block;
-    width: 10px;
+    width: 16px;
     height: 100%;
     background-color: #fff;
     border-bottom-left-radius: 10px;
@@ -36,7 +36,7 @@
 .@{prefixCls}-nav-tab {
   position: relative;
   box-sizing: content-box;
-  min-width: 14px;
+  min-width: 66px;
   max-width: 120px;
   height: 43px;
   cursor: pointer;
@@ -109,7 +109,7 @@
 
   &-inner {
     flex: 1;
-    min-width: 0;
+    min-width: 28px;
     overflow: hidden;
     color: #333;
     font-size: 14px;

package/es/MainFramework/index.js

@@ -1,7 +1,21 @@
-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, { useEffect, useRef, useState } from 'react';
 import TabBar from './components/TabBar';
 import Menu from './components/Menu';
 import { PREFIX_CLS as prefixCls } from '../constants';
+import DownBar from './components/DownBar';
+import { useDebounce } from '@lemon-fe/hooks';
 export default function MainFramework(props) {
   var tabs = props.tabs,
       active = props.active,
@@ -15,10 +29,45 @@ export default function MainFramework(props) {
       title = props.title,
       favorites = props.favorites,
       onFavoritesChange = props.onFavoritesChange;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hideTabs = _useState2[0],
+      setHideTabs = _useState2[1];
+
+  var tabRef = useRef(null);
+  var handleDownBar = useDebounce(function () {
+    var _tabRef$current$query, _tabRef$current$query2;
+
+    if (tabRef.current === null) {
+      return;
+    }
+
+    var leftLength = (_tabRef$current$query = tabRef.current.querySelector(".".concat(prefixCls, "-nav-left"))) === null || _tabRef$current$query === void 0 ? void 0 : _tabRef$current$query.offsetWidth;
+    var rightLength = (_tabRef$current$query2 = tabRef.current.querySelector(".".concat(prefixCls, "-nav-right"))) === null || _tabRef$current$query2 === void 0 ? void 0 : _tabRef$current$query2.offsetWidth;
+    var minWidth = 66 * tabs.length + 32;
+    var width = window.innerWidth - (leftLength || 0) - (rightLength || 0);
+
+    if (tabs.length && minWidth >= width) {
+      setHideTabs(true);
+    } else if (minWidth < width) {
+      setHideTabs(false);
+    }
+  }, 300);
+  useEffect(function () {
+    window.addEventListener('resize', handleDownBar);
+    return function () {
+      window.removeEventListener('resize', handleDownBar);
+    };
+  }, []);
+  useEffect(function () {
+    handleDownBar();
+  }, [tabs, active]);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-main")
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-nav")
+    className: "".concat(prefixCls, "-nav"),
+    ref: tabRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-nav-left")
   }, logo !== false && /*#__PURE__*/React.createElement("div", {
@@ -43,7 +92,13 @@ export default function MainFramework(props) {
     onClose: onTabClose
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-nav-right")
-  }, right)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(DownBar, {
+    visible: hideTabs,
+    tabs: tabs,
+    active: active,
+    onClick: onTabClick,
+    onClose: onTabClose
+  }), right)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-body")
   }, /*#__PURE__*/React.createElement(Menu, {
     data: menus,

package/es/MainFramework/index.less

@@ -1,5 +1,6 @@
 @import './components/Menu/index.less';
 @import './components/TabBar/index.less';
+@import './components/DownBar/index.less';
 
 .@{prefixCls}-main {
   display: flex;
@@ -14,9 +15,10 @@
   position: relative;
   z-index: 4;
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
   box-sizing: border-box;
-  width: 100vw;
+  width: 100%;
   height: 50px;
   padding: 0 16px;
   background: #ffff;
@@ -54,8 +56,8 @@
   }
 
   &-right {
+    flex-shrink: 0;
     justify-content: flex-end;
-    min-width: 180px;
     margin-left: auto;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.21",
+    "@lemon-fe/hooks": "^0.0.23",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -39,5 +39,5 @@
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
   },
-  "gitHead": "800cd94fab88bdc749dc65602b9d15abbb89691d"
+  "gitHead": "51cd80caa890be326c23be9c84fa1dfb42226e8c"
 }