@lemon-fe/components 0.1.90 → 0.1.95

package/es/Filter/index.d.ts

@@ -3,5 +3,6 @@ declare function Filter<T extends Record<string, any> = Record<string, any>>(pro
 declare namespace Filter {
     var setComponents: (items: ComponentOption[]) => void;
     var setStorage: <T>(getData: (storageKey: string) => T | Promise<T>, setData: <T_1>(storageKey: string, data: T_1) => void | Promise<void>) => void;
+    var defaultProps: Partial<FilterProps<Record<string, any>>>;
 }
 export default Filter;

package/es/Filter/index.js

@@ -111,7 +111,9 @@ function Filter(props) {
       storageKey = props.storageKey,
       onValuesChange = props.onValuesChange,
       style = props.style,
-      simple = props.simple;
+      simple = props.simple,
+      _props$defaultCollaps = props.defaultCollapsed,
+      defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps;
   var prefixCls = "".concat(PREFIX_CLS, "-filter");
   var defaultValue = useMemo(function () {
     return defaultValueProp || value;
@@ -172,7 +174,7 @@ function Filter(props) {
       width = _useState12[0],
       setWidth = _useState12[1];
 
-  var _useState13 = useState(true),
+  var _useState13 = useState(defaultCollapsed),
       _useState14 = _slicedToArray(_useState13, 2),
       collapsed = _useState14[0],
       setCollapsed = _useState14[1];
@@ -396,7 +398,7 @@ function Filter(props) {
     var btnsWidth = simple ? 208 : 248;
     var btnsVisible = false;
     var size = 0;
-    var end = result.length;
+    var end = 0;
 
     for (var i = 0; i < result.length; i++) {
       var _compMap$get;
@@ -406,20 +408,18 @@ function Filter(props) {
       size += itemWidth;
 
       if (size > width - btnsWidth) {
-        end = i;
         btnsVisible = true;
         break;
       }
-    }
 
-    end = end || 1;
-    btnsVisible = btnsVisible && result.length > 1;
+      end = i;
+    }
 
     if (!collapsed) {
       return [getSet(result), btnsVisible];
     }
 
-    return [getSet(result.slice(0, end)), btnsVisible];
+    return [getSet(result.slice(0, end + 1)), btnsVisible];
   }, [data, width, collapsed, simple, activeKeys]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       cols = _useMemo2[0],
@@ -621,4 +621,5 @@ function Filter(props) {
 
 Filter.setComponents = setComponents;
 Filter.setStorage = setStorage;
+Filter.defaultProps = {};
 export default Filter;

package/es/Filter/typings.d.ts

@@ -20,6 +20,7 @@ export interface FilterProps<T extends Record<string, any> = Record<string, any>
   defaultActiveKeys?: string[];
   storageKey?: string;
   style?: CSSProperties;
+  defaultCollapsed?: boolean;
   /**
    * @description 是否简化筛选器，简化版不包含标签以及选项保存
    */

package/es/Layout/index.less

@@ -106,6 +106,8 @@
     flex-direction: column;
     min-width: 0;
     overflow: auto;
+
+    .scrollBar(8px);
   }
 
   &-footer {

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

@@ -209,6 +209,7 @@ export default function Menu(props) {
       setPopover = _useState2[1];
 
   var popup = useRef(null);
+  var popupContainer = useRef(null);
   var drawer = useRef(null);
   var clientWidth = useRef(document.body.clientWidth);
 
@@ -275,9 +276,13 @@ export default function Menu(props) {
   }, [location.pathname, menus]);
 
   var openMenu = function openMenu(item, elm) {
-    if (item.name === FAVORITES_POPOVER || item.children !== undefined && item.children.length > 0 || collapsed) {
+    var isFavorite = item.name === FAVORITES_POPOVER;
+
+    if (isFavorite || item.children !== undefined && item.children.length > 0 || collapsed) {
+      var _popupContainer$curre;
+
       setPopover(item);
-      setTop(elm.offsetTop);
+      setTop(elm.offsetTop - (isFavorite ? 0 : ((_popupContainer$curre = popupContainer.current) === null || _popupContainer$curre === void 0 ? void 0 : _popupContainer$curre.scrollTop) || 0));
       setTimeout(function () {
         if (popup.current) {
           popup.current.classList.add('animated');
@@ -563,12 +568,15 @@ export default function Menu(props) {
     strokeLinejoin: "round",
     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) {
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-items"),
+    ref: popupContainer
+  }, menus.map(function (item, index) {
     var _classNames5;
 
     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"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-active"), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.path[0]) === index), _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames5)),
       onClick: function onClick() {
         return handleClick(item);
       },
@@ -578,6 +586,8 @@ export default function Menu(props) {
           return openMenu(item, target);
         });
       }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-top-item-content")
     }, typeof item.icon === 'string' ? /*#__PURE__*/React.createElement("img", {
       className: "".concat(prefixCls, "-menu-icon"),
       src: item.icon
@@ -585,8 +595,8 @@ export default function Menu(props) {
       className: "".concat(prefixCls, "-menu-icon")
     }, item.icon), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
-    }, item.name));
-  }), /*#__PURE__*/React.createElement("div", {
+    }, item.name)));
+  })), /*#__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")
@@ -603,11 +613,13 @@ export default function Menu(props) {
         }, target);
       });
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-item-content")
   }, /*#__PURE__*/React.createElement("div", {
     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")))), 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

@@ -17,8 +17,11 @@
   &-bar {
     position: relative;
     z-index: 3;
+    display: flex;
+    flex-direction: column;
     box-sizing: border-box;
     width: 100%;
+    height: 100%;
     background: #f2f2f2;
   }
 
@@ -49,11 +52,17 @@
     left: 52px;
   }
 
+  &-top-items {
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .scrollBar();
+  }
+
   &-top-item {
-    display: flex;
-    align-items: center;
     box-sizing: border-box;
     height: 44px;
+    min-height: 44px;
     padding: 0 16px;
     overflow: hidden;
     color: #333;
@@ -62,6 +71,15 @@
     cursor: pointer;
     .transition();
 
+    &-content {
+      position: relative;
+      left: 50%;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      transform: translateX(-50%);
+    }
+
     &:hover,
     &-popover-active {
       background: #e6e6e6;
@@ -84,6 +102,12 @@
     }
   }
 
+  &-collapsed &-top-item-content {
+    width: 100%;
+    min-width: 20px;
+    overflow: hidden;
+  }
+
   &-icon {
     width: 20px;
     height: 20px;

package/es/Portal/index.d.ts

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

package/es/Portal/index.js

@@ -10,63 +10,132 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 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';
+import React, { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
 var Slot = /*#__PURE__*/memo(function Content(props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+  return props.children;
 });
-var Context = /*#__PURE__*/createContext(null);
+var Context = /*#__PURE__*/createContext({
+  set: function set() {},
+  delete: function _delete() {},
+  observable: {
+    subscribe: function subscribe() {
+      return {
+        unsubscribe: function unsubscribe() {}
+      };
+    },
+    get: function get() {
+      return new Map();
+    }
+  }
+});
+
+function Subject(initialData) {
+  var observers = [];
+  var data = initialData;
+  return {
+    get: function get() {
+      return data;
+    },
+    next: function next(state) {
+      data = state;
+      observers.forEach(function (item) {
+        return item.next(state);
+      });
+    },
+    subscribe: function subscribe(observer) {
+      observers.push(observer);
+      return {
+        unsubscribe: function unsubscribe() {
+          var index = observers.findIndex(function (item) {
+            return item === observer;
+          });
+
+          if (index >= 0) {
+            observers.splice(index, 1);
+          }
+        }
+      };
+    }
+  };
+}
 
 function PortalHost(props) {
   var children = props.children;
 
-  var _useState = useState(null),
+  var _useState = useState(new Map()),
       _useState2 = _slicedToArray(_useState, 2),
-      content = _useState2[0],
-      setContent = _useState2[1];
+      nodes = _useState2[0],
+      setNodes = _useState2[1];
 
+  var observable = useMemo(function () {
+    return Subject(nodes);
+  }, []);
   var portal = useMemo(function () {
     return {
-      add: function add(key, node) {
-        setContent({
-          key: key,
-          node: node
+      set: function set(key, node) {
+        setNodes(function (prev) {
+          var next = new Map(prev);
+          next.set(key, node);
+          return next;
         });
       },
-      clear: function clear(key) {
-        setContent(function (prev) {
-          if ((prev === null || prev === void 0 ? void 0 : prev.key) === key) {
-            return null;
-          }
-
-          return prev;
+      delete: function _delete(key) {
+        setNodes(function (prev) {
+          var next = new Map(prev);
+          next.delete(key);
+          return next;
         });
-      }
+      },
+      observable: observable
     };
   }, []);
+  useEffect(function () {
+    observable.next(nodes);
+  }, [nodes]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: portal
-  }, /*#__PURE__*/React.createElement(Slot, null, content ? content.node : null), /*#__PURE__*/React.createElement(Slot, null, children));
+  }, /*#__PURE__*/React.createElement(Slot, null, children));
+}
+
+function PortalSlot(props) {
+  var slot = props.slot;
+
+  var _useContext = useContext(Context),
+      observable = _useContext.observable;
+
+  var _useState3 = useState(observable.get().get(slot) || null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      node = _useState4[0],
+      setNode = _useState4[1];
+
+  useEffect(function () {
+    var _observable$subscribe = observable.subscribe({
+      next: function next(state) {
+        setNode(state.get(slot) || null);
+      }
+    }),
+        unsubscribe = _observable$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [slot]);
+  return node;
 }
 
 function Portal(props) {
-  var _props$children = props.children,
-      children = _props$children === void 0 ? null : _props$children;
+  var slot = props.slot,
+      children = 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);
+    return function () {
+      portal.delete(slot);
+    };
+  }, [slot]);
+  useEffect(function () {
+    portal.set(slot, children);
+  }, [slot, children]);
+  return null;
 }
 
 Portal.Host = PortalHost;
+Portal.Slot = PortalSlot;
 export default Portal;

package/es/overrides.less

@@ -34,18 +34,7 @@ a[title='站长统计'] {
 }
 
 .ant-table-body {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #ddd;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #fff;
-  }
+  .scrollBar(8px);
 }
 
 .ant-table-tbody > tr.ant-table-row-selected > td {

package/es/utils.less

@@ -89,3 +89,22 @@
     }
   }
 }
+
+.scrollBar (@width: 6px) {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: @width;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #fff;
+    border-radius: 10px; // 滑块颜色
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #ddd;
+    border-radius: 10px; // 滑块颜色
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.90",
+  "version": "0.1.95",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -39,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "a663b35b1cddf3fde745eaa0750d98758c08bd64"
+  "gitHead": "baee38c98ffbc650e0e4ad350c6d40cd96686104"
 }