@lemon-fe/components 0.1.85 → 0.1.91

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];
@@ -328,17 +330,17 @@ function Filter(props) {
     });
   };
 
+  var handleFinish = function handleFinish(val) {
+    if (onChange) {
+      onChange(_objectSpread(_objectSpread({}, value), val));
+    }
+  };
+
   var handleTabChange = function handleTabChange(index) {
     if (index !== active) {
       setActive(index);
       form.setFieldsValue(tabs[index].value);
-      handleFinish();
-    }
-  };
-
-  var handleFinish = function handleFinish() {
-    if (onChange) {
-      onChange(_objectSpread({}, form.getFieldsValue(true)));
+      handleFinish(form.getFieldsValue());
     }
   };
 
@@ -375,6 +377,12 @@ function Filter(props) {
   };
 
   var _useMemo = useMemo(function () {
+    var getSet = function getSet(items) {
+      return new Set(items.map(function (item) {
+        return item.key;
+      }));
+    };
+
     var result = data.filter(function (item) {
       if (activeKeys.has(item.key)) {
         return true;
@@ -384,7 +392,7 @@ function Filter(props) {
     });
 
     if (!width) {
-      return [result, false];
+      return [getSet(result), false];
     }
 
     var btnsWidth = simple ? 208 : 248;
@@ -410,10 +418,10 @@ function Filter(props) {
     btnsVisible = btnsVisible && result.length > 1;
 
     if (!collapsed) {
-      return [result, btnsVisible];
+      return [getSet(result), btnsVisible];
     }
 
-    return [result.slice(0, end), btnsVisible];
+    return [getSet(result.slice(0, end)), btnsVisible];
   }, [data, width, collapsed, simple, activeKeys]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       cols = _useMemo2[0],
@@ -464,10 +472,15 @@ function Filter(props) {
     className: "".concat(prefixCls, "-tab-bar")
   }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row"
-  }, cols.map(function (item) {
+  }, data.map(function (item) {
+    var className = classNames("".concat(prefixCls, "-form-item"), {
+      hidden: !cols.has(item.key) ? true : false
+    });
+
     if (item.renderFormItem) {
       return /*#__PURE__*/React.createElement("div", {
         style: getColStyle(item.colSpan),
+        className: className,
         key: item.key
       }, item.renderFormItem());
     }
@@ -484,6 +497,7 @@ function Filter(props) {
 
     return /*#__PURE__*/React.createElement("div", {
       style: getColStyle(item.colSpan || target.colSpan),
+      className: className,
       key: item.key
     }, /*#__PURE__*/React.createElement(Form.Item, {
       name: item.key,
@@ -609,4 +623,5 @@ function Filter(props) {
 
 Filter.setComponents = setComponents;
 Filter.setStorage = setStorage;
+Filter.defaultProps = {};
 export default Filter;

package/es/Filter/index.less

@@ -7,6 +7,14 @@
     }
   }
 
+  &-form-item {
+    display: block;
+
+    &.hidden {
+      display: none;
+    }
+  }
+
   &-btn {
     padding: 6px;
 

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.85",
+  "version": "0.1.91",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -16,23 +16,19 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.1.67",
+    "@lemon-fe/hooks": "^0.1.86",
     "classnames": "^2.2.6",
-    "lodash": "^4.17.21",
+    "color-string": "^1.9.0",
+    "lodash": "^4.17.0",
+    "rc-resize-observer": "^1.0.0",
     "react-color": "^2.19.3",
     "react-gcolor-picker": "^1.2.4",
     "react-resizable": "^3.0.4"
   },
   "peerDependencies": {
-    "@ant-design/icons": ">=4.0.0",
-    "antd": ">=4.17.0",
-    "classnames": ">=2.2.6",
-    "color-string": ">=1.0.0",
-    "lodash": ">=4.17.0",
-    "rc-resize-observer": "^1.0.0",
-    "rc-tree": ">=4.0.0",
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "antd": ">=4.20",
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "devDependencies": {
     "@types/color-string": "^1.5.2",
@@ -40,9 +36,8 @@
     "@types/react-color": "^3.0.6",
     "@types/react-resizable": "^1.7.4",
     "antd": "^4.21.6",
-    "rc-resize-observer": "^1.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "97e51c4121643b504bdde1044854e823f6d0865d"
+  "gitHead": "407f33c49a0de8ae9b3fc07002ee9eace8dbd179"
 }