@lemon-fe/components 0.0.2 → 0.0.6

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

@@ -70,7 +70,7 @@ export default function Menu(props) {
   var activeMenu = useMemo(function () {
     var check = function check(path) {
       if (path) {
-        return new RegExp("".concat(path, "\\b")).test(location.pathname);
+        return new RegExp("".concat(path, "(?![^\\/])")).test(location.pathname);
       }
 
       return false;
@@ -115,7 +115,7 @@ export default function Menu(props) {
   }, [location.pathname, menus]);
 
   var openMenu = function openMenu(item, elm) {
-    if (item.children && item.children.length > 0) {
+    if (item.children !== undefined && item.children.length > 0 || collapsed) {
       setPopover(item);
       setTop(elm.offsetTop);
       setTimeout(function () {
@@ -123,20 +123,12 @@ export default function Menu(props) {
           popup.current.classList.add('animated');
         }
       }, 16);
+    } else {
+      setPopover(null);
     }
   };
 
-  var handleMouseEnter = useDebounce(openMenu, 200);
-
-  var toggleMenu = function toggleMenu() {
-    setCollapsed(function (prev) {
-      return !prev;
-    });
-  };
-
   var closeMenu = function closeMenu() {
-    handleMouseEnter.cancel();
-
     if (popup.current) {
       popup.current.classList.remove('animated');
 
@@ -151,6 +143,18 @@ export default function Menu(props) {
     }
   };
 
+  var toggle = useDebounce(function (handler) {
+    if (handler) {
+      handler();
+    }
+  }, 200);
+
+  var toggleCollapse = function toggleCollapse() {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+
   useEffect(function () {
     if (!visible) {
       return;
@@ -218,49 +222,61 @@ export default function Menu(props) {
 
   var renderDrawerItems = function renderDrawerItems() {
     var cols = [[], [], []];
-    menus.forEach(function (item, index) {
-      cols[index % 3].push(item);
-    });
-    return cols.map(function (items) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-menu-drawer-col")
-      }, items.map(function (item) {
-        var list = [/*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-menu-drawer-1"),
-          key: item.name,
-          onClick: function onClick() {
-            return handleClick(item);
-          }
-        }, item.name)];
-
-        if (item.children) {
-          item.children.forEach(function (subItem) {
-            list.push( /*#__PURE__*/React.createElement("div", {
-              className: "".concat(prefixCls, "-menu-drawer-2"),
-              key: subItem.name,
-              onClick: function onClick() {
-                return handleClick(subItem);
-              }
-            }, subItem.name));
-
-            if (subItem.children) {
-              subItem.children.forEach(function (child) {
-                list.push( /*#__PURE__*/React.createElement("div", {
-                  className: classNames("".concat(prefixCls, "-menu-drawer-3"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === child.path)),
-                  key: child.name,
-                  onClick: function onClick() {
-                    return handleClick(child);
-                  }
-                }, child.name));
-              });
+    var value = [0, 0, 0];
+    menus.forEach(function (item) {
+      var list = [/*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-menu-drawer-1"), _defineProperty({}, "".concat(prefixCls, "-menu-drawer-1-path"), item.path !== undefined)),
+        key: item.name,
+        onClick: function onClick() {
+          return handleClick(item);
+        }
+      }, item.name)];
+
+      if (item.children) {
+        item.children.forEach(function (subItem) {
+          list.push( /*#__PURE__*/React.createElement("div", {
+            className: "".concat(prefixCls, "-menu-drawer-2"),
+            key: "2-".concat(subItem.name),
+            onClick: function onClick() {
+              return handleClick(subItem);
             }
-          });
+          }, subItem.name));
+
+          if (subItem.children) {
+            subItem.children.forEach(function (child) {
+              list.push( /*#__PURE__*/React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-menu-drawer-3"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === child.path)),
+                key: "3-".concat(child.name),
+                onClick: function onClick() {
+                  return handleClick(child);
+                }
+              }, child.name));
+            });
+          }
+        });
+      }
+
+      var node = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-block")
+      }, /*#__PURE__*/React.createElement("div", null, list));
+      var target = 0;
+      var min = Infinity;
+
+      for (var i = 0; i < value.length; i++) {
+        if (value[i] < min) {
+          target = i;
+          min = value[i];
         }
+      }
 
-        return /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-menu-drawer-block")
-        }, /*#__PURE__*/React.createElement("div", null, list));
-      }));
+      value[target] += list.length;
+      cols[target].push(node);
+    });
+    return cols.map(function (items, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-col"),
+        key: index
+      }, items);
     });
   };
 
@@ -268,18 +284,21 @@ export default function Menu(props) {
     className: classNames("".concat(prefixCls, "-menu"), _defineProperty({}, "".concat(prefixCls, "-menu-collapsed"), collapsed))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-bar"),
-    onMouseLeave: closeMenu
-  }, popover !== null && popover.children !== undefined && /*#__PURE__*/React.createElement("div", {
+    onMouseLeave: function onMouseLeave() {
+      return toggle(closeMenu);
+    }
+  }, popover !== null && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup"),
     style: {
       top: top
     },
     ref: popup,
     onMouseEnter: function onMouseEnter() {
-      return handleMouseEnter.cancel();
+      return toggle.cancel();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-menu-popup-body")
+  }, popover.children !== undefined ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body"),
+    key: "pop"
   }, popover.children.map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-block"),
@@ -287,9 +306,15 @@ export default function Menu(props) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-sub-item")
     }, item.name), item.children !== undefined && item.children.map(renderItem));
-  }))), /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-tip"),
+    key: "tip"
+  }, popover.name)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-collapse"),
-    onClick: toggleMenu
+    onClick: toggleCollapse,
+    onMouseEnter: function onMouseEnter() {
+      return toggle(closeMenu);
+    }
   }, /*#__PURE__*/React.createElement("svg", {
     width: "20",
     height: "20",
@@ -316,24 +341,29 @@ 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 _classNames4;
+    var _classNames5;
 
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames4, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames4)),
+      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)),
       onClick: function onClick() {
         return handleClick(item);
       },
       onMouseEnter: function onMouseEnter(e) {
-        return handleMouseEnter(item, e.currentTarget);
+        var target = e.currentTarget;
+        toggle(function () {
+          return openMenu(item, target);
+        });
       }
-    }, /*#__PURE__*/React.createElement("img", {
+    }, typeof item.icon === 'string' ? /*#__PURE__*/React.createElement("img", {
       className: "".concat(prefixCls, "-menu-icon"),
       src: item.icon
-    }), /*#__PURE__*/React.createElement("div", {
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-icon")
+    }, item.icon), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
     }, item.name));
-  }), /*#__PURE__*/React.createElement("div", {
+  })), 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

@@ -6,6 +6,8 @@
   flex: 0 0 200px;
   min-width: 0;
   height: 100%;
+  padding: 8px 0;
+  white-space: nowrap;
   transition: flex 0.1s;
 
   &-collapsed {
@@ -17,8 +19,6 @@
     z-index: 3;
     box-sizing: border-box;
     width: 100%;
-    padding: 16px 0;
-    white-space: nowrap;
     background: #f2f2f2;
   }
 
@@ -94,12 +94,8 @@
     width: 20px;
     height: 20px;
     margin-right: 8px;
+    color: rgba(108, 108, 108, 1);
     font-size: 16px;
-    opacity: 0.7;
-  }
-
-  &-top-item-active &-icon {
-    opacity: 1;
   }
 
   &-title {
@@ -108,6 +104,15 @@
     text-overflow: ellipsis;
   }
 
+  &-top-item:hover &-icon {
+    color: #333;
+  }
+
+  &-top-item&-top-item-active &-title,
+  &-top-item&-top-item-active &-icon {
+    color: .primary() [];
+  }
+
   &-popup {
     position: absolute;
     top: 0;
@@ -125,12 +130,27 @@
       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);
-      transform: translate3d(-40px, 0, 0);
+      transform: translate3d(-20px, 0, 0);
       opacity: 0;
-      transition: all 0.2s;
+      transition: all 0.15s;
     }
 
-    &.animated &-body {
+    &-tip {
+      height: 36px;
+      margin: 4px 0 0 4px;
+      padding: 0 16px;
+      color: #fff;
+      line-height: 36px;
+      text-align: center;
+      background-color: .primary() [];
+      border-radius: 22px;
+      transform: translate3d(-10px, 0, 0);
+      opacity: 0;
+      transition: all 0.15s;
+    }
+
+    &.animated &-body,
+    &.animated &-tip {
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
@@ -161,6 +181,7 @@
     height: 40px;
     padding: 0 16px;
     color: rgba(51, 51, 51, 0.5);
+    font-weight: 500;
     font-size: 14px;
     line-height: 40px;
   }
@@ -227,11 +248,11 @@
     width: 107px;
     height: 36px;
     margin-left: 12px;
-    color: rgba(5, 96, 253, 1);
+    color: .primary() [];
     font-size: 14px;
     text-align: center;
     background-color: #fff;
-    border: 1px solid rgba(5, 96, 253, 1);
+    border: 1px solid .primary() [];
     border-radius: 4px;
     cursor: pointer;
     user-select: none;
@@ -255,7 +276,7 @@
     height: 100vh;
     background-color: #fff;
     box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+      0 6px 16px -8px rgba(0, 0, 0, 0.08);
     transform: translate3d(60px, 0, 0);
     opacity: 0;
     transition: all 0.2s;
@@ -278,14 +299,16 @@
     }
 
     &-body {
-      display: flex;
+      height: calc(100vh - 56px);
       padding: 16px;
       overflow-x: hidden;
       overflow-y: auto;
     }
 
     &-col {
+      display: inline-block;
       width: 33.33333333%;
+      vertical-align: top;
     }
 
     .item() {
@@ -299,6 +322,16 @@
       color: rgba(51, 51, 51, 1);
       font-weight: 500;
       .item();
+
+      &-path {
+        cursor: pointer;
+        .transition();
+
+        &:hover {
+          color: .primary() [];
+          background-color: rgba(238, 238, 238, 1);
+        }
+      }
     }
 
     &-2 {
@@ -314,7 +347,7 @@
       .transition();
 
       &:hover {
-        color: rgba(5, 96, 253, 1);
+        color: .primary() [];
         background-color: rgba(238, 238, 238, 1);
       }
     }
@@ -323,6 +356,7 @@
       padding: 8px;
 
       & > div {
+        overflow: hidden;
         background-color: rgba(238, 238, 238, 0.5);
         border-radius: 8px;
       }
@@ -332,12 +366,12 @@
       cursor: pointer;
 
       &:hover {
-        color: rgba(5, 96, 253, 1);
+        color: .primary() [];
       }
     }
   }
 
   &-active {
-    color: rgba(5, 96, 253, 1);
+    color: .primary() [];
   }
 }

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

@@ -34,28 +34,22 @@ export default function TabBar(props) {
         return handleClose(e, index);
       }
     }, /*#__PURE__*/React.createElement("svg", {
-      width: "10",
-      height: "10",
-      viewBox: "0 0 9 9",
+      width: "14",
+      height: "14",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement("g", {
-      fill: "#000",
-      fillRule: "evenodd",
-      fillOpacity: ".25"
-    }, /*#__PURE__*/React.createElement("rect", {
-      transform: "rotate(45 4.559 4.559)",
-      x: "3.976",
-      y: ".059",
-      width: "1",
-      height: "9",
-      rx: ".5"
-    }), /*#__PURE__*/React.createElement("rect", {
-      transform: "rotate(-45 4.559 4.441)",
-      x: "3.976",
-      y: "-.059",
-      width: "1",
-      height: "9",
-      rx: ".5"
-    }))))));
+      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)"
+    }))))))));
   }));
 }

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

@@ -38,7 +38,7 @@
   box-sizing: content-box;
   min-width: 14px;
   max-width: 120px;
-  height: 49px;
+  height: 43px;
   cursor: pointer;
 
   &::before {
@@ -72,7 +72,7 @@
     z-index: 4;
     display: flex;
     align-items: center;
-    padding: 10px 10px 17px;
+    padding: 7px 12px 14px;
     background-color: #fff;
     border-radius: 10px;
     transition: background-color 0.2s;
@@ -128,12 +128,14 @@
   &-close {
     width: 14px;
     height: 14px;
+    color: #c4c4c4;
     line-height: 14px;
     text-align: center;
     border-radius: 50%;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.15);
+      color: #f2f2f2;
+      background-color: #c1c1c1;
     }
   }
 }

package/es/MainFramework/index.less

@@ -17,7 +17,7 @@
   align-items: center;
   box-sizing: border-box;
   width: 100vw;
-  height: 56px;
+  height: 50px;
   padding: 0 16px;
   background: #ffff;
 

package/es/MainFramework/typings.d.ts

@@ -1,6 +1,8 @@
+import type { ReactElement } from 'react';
+
 export type MenuItem = {
   name: string;
   path?: string;
-  icon?: string;
+  icon?: string | ReactElement;
   children?: MenuItem[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -12,8 +12,11 @@
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.2",
+    "@lemon-fe/hooks": "^0.0.6",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -36,5 +39,5 @@
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
   },
-  "gitHead": "fb99301b92d7fce50677a82ba546bf4309b33413"
+  "gitHead": "031652790452c9baca3ea69f2fc1982c6a8c7a18"
 }