@lemon-fe/components 0.0.20 → 0.0.21

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

@@ -1,6 +1,8 @@
-import type { MenuItem } from '../../typings';
+import type { MenuFavorites, MenuItem } from '../../typings';
 interface Props {
     data: MenuItem[];
+    favorites?: MenuFavorites;
+    onFavoritesChange?: (items: MenuFavorites) => void;
     onClick: (item: MenuItem) => void;
 }
 export default function Menu(props: Props): JSX.Element;

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

@@ -1,4 +1,10 @@
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -12,11 +18,47 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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, { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { useDebounce } from '@lemon-fe/hooks';
 import { PREFIX_CLS as prefixCls } from '../../../constants';
+import { Divider } from 'antd';
+
+function Star(props) {
+  if (props.active) {
+    return /*#__PURE__*/React.createElement("svg", {
+      className: props.className,
+      width: "20",
+      height: "20",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "m9.666 15.526-3.584 1.27a1 1 0 0 1-1.334-.97l.1-3.8a1 1 0 0 0-.206-.636L2.326 8.373a1 1 0 0 1 .51-1.567l3.646-1.08a1 1 0 0 0 .54-.393L9.176 2.2a1 1 0 0 1 1.648 0l2.154 3.134a1 1 0 0 0 .54.393l3.646 1.08a1 1 0 0 1 .51 1.567l-2.316 3.017a1 1 0 0 0-.206.635l.1 3.801a1 1 0 0 1-1.334.97l-3.584-1.27a1 1 0 0 0-.668 0Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: props.className,
+    width: "20",
+    height: "20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m9.954 2.52 2.406 3.238c.227.33.56.573.945.687l3.646 1.08a.25.25 0 0 1 .179.22l-2.367 3.188a1.75 1.75 0 0 0-.36 1.112l.1 3.801a.25.25 0 0 1-.156.238l-3.77-1.267a1.75 1.75 0 0 0-1.161.002l-3.585 1.27a.25.25 0 0 1-.274-.075l.04-3.976a1.75 1.75 0 0 0-.36-1.105L2.92 7.917a.25.25 0 0 1-.014-.284l3.794-1.19a1.75 1.75 0 0 0 .94-.685l2.153-3.134a.25.25 0 0 1 .16-.104Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+}
+
 var drawerIcon = /*#__PURE__*/React.createElement("svg", {
   width: "20",
   height: "20",
@@ -39,9 +81,124 @@ var drawerIcon = /*#__PURE__*/React.createElement("svg", {
   opacity: ".7",
   transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
 })))));
+
+function FavoritesEmpty(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread(_objectSpread({}, props), {}, {
+    width: "72",
+    height: "72",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    d: "M3.2 0h27.475a3.2 3.2 0 0 1 2.262.937l10.126 10.126c.6.6.937 1.414.937 2.262V46.8a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 46.8V3.2A3.2 3.2 0 0 1 3.2 0Z",
+    id: "a"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.766 23.2h20.889a3.2 3.2 0 0 1 3.051 2.236l9.98 31.6a3.2 3.2 0 0 1-3.052 4.164H20.745a3.2 3.2 0 0 1-3.051-2.236l-9.98-31.6a3.2 3.2 0 0 1 3.052-4.164Z",
+    fill: "#E7E7E7",
+    opacity: ".4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#E7E7E7",
+    x: "49.2",
+    y: "11.2",
+    width: "14.8",
+    height: "14.8",
+    rx: "3.2"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(20 11.2)"
+  }, /*#__PURE__*/React.createElement("mask", {
+    id: "b",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "#E7E7E7",
+    xlinkHref: "#a"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#CFCFCF",
+    mask: "url(#b)",
+    cx: "31.8",
+    cy: "17",
+    r: "35.4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#BEBEBE",
+    mask: "url(#b)",
+    x: "29.2",
+    width: "14.8",
+    height: "14.8",
+    rx: "3.2"
+  })), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    x: "30",
+    y: "31.6",
+    width: "24",
+    height: "2.4",
+    rx: "1.2"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    x: "30",
+    y: "39.6",
+    width: "12.8",
+    height: "2.4",
+    rx: "1.2"
+  })));
+}
+
+var favoriteIcon = /*#__PURE__*/React.createElement("svg", {
+  width: "20px",
+  height: "20px",
+  viewBox: "0 0 20 20",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("rect", {
+  x: "0",
+  y: "0",
+  width: "20",
+  height: "20"
+})), /*#__PURE__*/React.createElement("g", {
+  stroke: "none",
+  strokeWidth: "1",
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(-1398.000000, -481.000000)"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(1398.000000, 481.000000)"
+}, /*#__PURE__*/React.createElement("mask", {
+  fill: "white"
+}, /*#__PURE__*/React.createElement("use", {
+  xlinkHref: "#path-1"
+})), /*#__PURE__*/React.createElement("use", {
+  fillOpacity: "0",
+  fill: "#C4C4C4",
+  xlinkHref: "#path-1"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.4350762,7.192388 L17.4350762,13.192388 C17.4350762,15.9538117 15.1964999,18.192388 12.4350762,18.192388 C9.67365243,18.192388 7.43507618,15.9538117 7.43507618,13.192388 L7.43507618,7.192388 C7.43507618,4.43096425 9.67365243,2.192388 12.4350762,2.192388 C15.1964999,2.192388 17.4350762,4.43096425 17.4350762,7.192388 Z",
+  fill: "currentColor",
+  opacity: "0.5",
+  mask: "url(#mask-2)",
+  transform: "translate(12.435076, 10.192388) rotate(45.000000) translate(-12.435076, -10.192388) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M13.192388,7.19236523 L13.192388,13.1923652 C13.192388,15.953789 10.9538117,18.1923652 8.192388,18.1923652 C5.43096425,18.1923652 3.192388,15.953789 3.192388,13.1923652 L3.192388,7.19236523 C3.192388,4.43094148 5.43096425,2.19236523 8.192388,2.19236523 C10.9538117,2.19236523 13.192388,4.43094148 13.192388,7.19236523 Z",
+  fill: "currentColor",
+  fillRule: "nonzero",
+  mask: "url(#mask-2)",
+  transform: "translate(8.192388, 10.192365) rotate(-45.000000) translate(-8.192388, -10.192365) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6,6 C5.5,6 4,6.5 4,8.5",
+  stroke: "#F2F2F2",
+  strokeLinecap: "round",
+  strokeDasharray: "0,0",
+  mask: "url(#mask-2)"
+})))));
 export default function Menu(props) {
   var menus = props.data,
-      onClick = props.onClick;
+      onClick = props.onClick,
+      onFavoritesChange = props.onFavoritesChange,
+      _props$favorites = props.favorites,
+      favorites = _props$favorites === void 0 ? [] : _props$favorites;
   var location = window.location;
 
   var _useState = useState(null),
@@ -67,6 +224,7 @@ export default function Menu(props) {
       top = _useState8[0],
       setTop = _useState8[1];
 
+  var FAVORITES_POPOVER = 'FAVORITES_POPOVER';
   var activeMenu = useMemo(function () {
     var check = function check(path) {
       if (path) {
@@ -115,7 +273,7 @@ export default function Menu(props) {
   }, [location.pathname, menus]);
 
   var openMenu = function openMenu(item, elm) {
-    if (item.children !== undefined && item.children.length > 0 || collapsed) {
+    if (item.name === FAVORITES_POPOVER || item.children !== undefined && item.children.length > 0 || collapsed) {
       setPopover(item);
       setTop(elm.offsetTop);
       setTimeout(function () {
@@ -210,14 +368,52 @@ export default function Menu(props) {
     }
   };
 
+  var favoritesMap = useMemo(function () {
+    return new Map(favorites.map(function (item) {
+      return [item.path || '', item];
+    }));
+  }, [favorites]);
+
+  var toggleFavorite = function toggleFavorite(e, item) {
+    e.stopPropagation();
+    var nextMap = new Map(favoritesMap);
+    var key = item.path || '';
+
+    if (nextMap.has(key)) {
+      nextMap.delete(key);
+    } else {
+      nextMap.set(key, {
+        name: item.name,
+        path: item.path
+      });
+    }
+
+    if (onFavoritesChange) {
+      onFavoritesChange(_toConsumableArray(nextMap.values()));
+    }
+  };
+
   var renderItem = function renderItem(item, index) {
+    var favorited = favoritesMap.has(item.path || '');
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: classNames("".concat(prefixCls, "-menu-item"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === item.path)),
       onClick: function onClick() {
         return handleClick(item);
       }
-    }, item.name);
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        overflow: 'hidden'
+      }
+    }, item.name), /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-menu-item-favorite"), _defineProperty({}, "".concat(prefixCls, "-menu-item-favorite-active"), favorited)),
+      onClick: function onClick(e) {
+        toggleFavorite(e, item);
+      }
+    }, /*#__PURE__*/React.createElement(Star, {
+      className: "".concat(prefixCls, "-menu-favorite-star"),
+      active: favorited
+    })));
   };
 
   var renderDrawerItems = function renderDrawerItems() {
@@ -285,7 +481,7 @@ export default function Menu(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-bar"),
     onMouseLeave: function onMouseLeave() {
-      return toggle(closeMenu);
+      toggle(closeMenu);
     }
   }, popover !== null && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup"),
@@ -296,7 +492,14 @@ export default function Menu(props) {
     onMouseEnter: function onMouseEnter() {
       return toggle.cancel();
     }
-  }, popover.children !== undefined ? /*#__PURE__*/React.createElement("div", {
+  }, popover.children !== undefined ? popover.name === FAVORITES_POPOVER ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body"),
+    key: "pop"
+  }, popover.children !== undefined && popover.children.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-block-favorite")
+  }, popover.children.map(renderItem)) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-block-empty")
+  }, /*#__PURE__*/React.createElement(FavoritesEmpty, null), /*#__PURE__*/React.createElement("span", null, "\u6682\u65E0\u6536\u85CF"))) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup-body"),
     key: "pop"
   }, popover.children.map(function (item, index) {
@@ -341,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);
       },
@@ -363,7 +566,32 @@ export default function Menu(props) {
     }, item.icon), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
     }, item.name));
-  })), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }), /*#__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")
+  })), !collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-other-title")
+  }, "\u529F\u80FD\u7BA1\u7406") : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-top-item"), _defineProperty({}, "".concat(prefixCls, "-menu-top-item-popover-active"), (popover === null || popover === void 0 ? void 0 : popover.name) === FAVORITES_POPOVER)),
+    onMouseEnter: function onMouseEnter(e) {
+      var target = e.currentTarget;
+      toggle(function () {
+        return openMenu({
+          name: 'FAVORITES_POPOVER',
+          children: _toConsumableArray(favoritesMap.values())
+        }, target);
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-icon")
+  }, favoriteIcon), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-title")
+  }, "\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

@@ -92,6 +92,10 @@
     font-size: 16px;
   }
 
+  &-favorite-star {
+    color: var(--ant-primary-color);
+  }
+
   &-title {
     overflow: hidden;
     white-space: nowrap;
@@ -120,7 +124,7 @@
       display: flex;
       margin-left: 4px;
       padding: 8px;
-      background: #f9f9f9;
+      background: #fff;
       border-radius: 10px;
       box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
         0 6px 16px -8px rgba(0, 0, 0, 0.08);
@@ -158,15 +162,24 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 100%;
-      padding: 0 16px;
-      writing-mode: horizontal-tb;
+      width: 256px;
+      height: 180px;
 
       & > span {
-        color: rgba(51, 51, 51, 0.65);
-        font-size: 12px;
+        margin-top: 24px;
+        color: #333333;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        opacity: 50%;
       }
     }
+
+    &-favorite {
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-rows: repeat(5, auto);
+    }
   }
 
   &-sub-item {
@@ -187,7 +200,7 @@
     box-sizing: border-box;
     width: 120px;
     height: 40px;
-    padding: 0 16px;
+    padding: 9px 4px 9px 16px;
     color: rgba(51, 51, 51, 1);
     font-size: 14px;
     line-height: 40px;
@@ -234,6 +247,29 @@
     line-height: 22px;
   }
 
+  &-divider-div {
+    padding-left: 16px;
+  }
+
+  &-divider-div-collapsed {
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
+  &-divider {
+    margin-top: 12px;
+    margin-bottom: 16px;
+  }
+
+  &-other-title {
+    margin: 0 0 8px 16px;
+    color: #000000;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    opacity: 50%;
+  }
+
   &-more {
     display: flex;
     align-items: center;

package/es/MainFramework/index.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { MenuItem } from './typings';
+import type { MenuFavorites, MenuItem } from './typings';
 interface Props<T> {
     active: number;
     tabs: T[];
@@ -11,6 +11,8 @@ interface Props<T> {
     children?: ReactNode;
     logo?: string | false | ReactElement;
     title: string | ReactNode;
+    favorites?: MenuFavorites;
+    onFavoritesChange?: (value: MenuFavorites) => void;
 }
 export default function MainFramework<TabType extends {
     title: string;

package/es/MainFramework/index.js

@@ -12,7 +12,9 @@ export default function MainFramework(props) {
       onMenuClick = props.onMenuClick,
       onTabClose = props.onTabClose,
       logo = props.logo,
-      title = props.title;
+      title = props.title,
+      favorites = props.favorites,
+      onFavoritesChange = props.onFavoritesChange;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-main")
   }, /*#__PURE__*/React.createElement("div", {
@@ -45,7 +47,9 @@ export default function MainFramework(props) {
     className: "".concat(prefixCls, "-body")
   }, /*#__PURE__*/React.createElement(Menu, {
     data: menus,
-    onClick: onMenuClick
+    onClick: onMenuClick,
+    favorites: favorites,
+    onFavoritesChange: onFavoritesChange
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")
   }, children)));

package/es/MainFramework/typings.d.ts

@@ -6,3 +6,5 @@ export type MenuItem = {
   icon?: string | ReactElement;
   children?: MenuItem[];
 };
+
+export type MenuFavorites = { name: string; path?: string }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.20",
+    "@lemon-fe/hooks": "^0.0.21",
     "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": "74a29e43bf5b94819763c3bd2ab188ee4f3dc8f1"
+  "gitHead": "800cd94fab88bdc749dc65602b9d15abbb89691d"
 }