plain-design 1.0.0-beta.40 → 1.0.0-beta.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.40",
+  "version": "1.0.0-beta.42",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -34,7 +34,7 @@
     "color": "^4.2.3",
     "dayjs": "^1.10.4",
     "plain-icons": "0.0.7",
-    "plain-utils": "0.1.56",
+    "plain-utils": "0.1.57",
     "react-flip-move": "^3.0.4",
     "react-transition-group": "^4.4.1"
   },
@@ -69,7 +69,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.185",
+    "plain-design-composition": "^0.0.186",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/components/usePopup/trigger/useManagerTrigger.clickOutside.tsx

@@ -36,9 +36,9 @@ export function useManagerTriggerClickOutside({ hooks }: iPopupManager) {
     { trailing: false }
   );
   onMounted(() => {
-    window.addEventListener('click', onClick, true);
+    window.addEventListener('mouseup', onClick, true);
   });
   onBeforeUnmount(() => {
-    window.removeEventListener('click', onClick, true);
+    window.removeEventListener('mouseup', onClick, true);
   });
 }

package/src/packages/components/usePopup/usePopup.tsx

@@ -1,6 +1,7 @@
 import {PopupManager} from "./usePopupManager";
 import {iPopupManager, iPopupUseOption, nextPopupId} from "./utils/popup.utils";
 import {onBeforeUnmount, SimpleFunction} from "plain-design-composition";
+import {toArray} from "plain-utils/utils/toArray";
 
 export function usePopup() {
   const popupId = nextPopupId();
@@ -20,8 +21,21 @@ export function createPopup(onBeforeUnmount?: (handler: SimpleFunction) => void)
 
 export function _createPopup(popupManager: iPopupManager) {
 
+  /*记录操作过的popup id，在销毁的时候将这些popup option在manager中全部注销*/
   const idMap = {} as Record<string, boolean>;
 
+  const hide: typeof popupManager.methods.hide = (ids) => {
+    toArray(ids).forEach(id => idMap[id] = true);
+    return popupManager.methods.hide(ids);
+  };
+  const update: typeof popupManager.methods.update = (option) => {
+    idMap[option.id] = true;
+    return popupManager.methods.update(option);
+  };
+  const refresh: typeof popupManager.methods.refresh = (option) => {
+    idMap[option.id] = true;
+    return popupManager.methods.refresh(option);
+  };
   const show: typeof popupManager.methods.show = (useOption) => {
     const data = popupManager.methods.show(useOption);
     idMap[data.option.id] = true;
@@ -29,23 +43,25 @@ export function _createPopup(popupManager: iPopupManager) {
   };
   const toggle = (option: iPopupUseOption) => {
     if (popupManager.methods.isShow(option)) {
-      $popup.hide(option.id);
+      hide(option.id);
     } else {
       show(option);
     }
   };
-  const absolute: typeof popupManager.methods.absolute = (absluteOption) => {
-    const data = popupManager.methods.absolute(absluteOption);
+  const absolute: typeof popupManager.methods.absolute = (absoluteOption) => {
+    const data = popupManager.methods.absolute(absoluteOption);
     idMap[data.option.id] = true;
     return data;
   };
-  const dispose = () => {Object.keys(idMap).forEach(id => {popupManager.methods.remove(id);});};
+  const dispose = () => {
+    Object.keys(idMap).forEach(id => {popupManager.methods.remove(id);});
+  };
 
   const $popup = {
     manager: popupManager,
-    hide: popupManager.methods.hide,
-    update: popupManager.methods.update,
-    refresh: popupManager.methods.refresh,
+    hide,
+    update,
+    refresh,
     show,
     toggle,
     dispose,

package/src/packages/components/useTooltip/index.tsx

@@ -149,7 +149,10 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
     return { close };
   })();
 
-  const clear = () => {effects.clear();};
+  const clear = () => {
+    effects.clear();
+    popup.dispose();
+  };
 
   return { referenceEnterHandler, tooltipHandler, clear };
 }
@@ -164,7 +167,10 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
 export function useTooltip(option: iTooltipServiceOption) {
   const popup = usePopup();
   const val = createTooltip(option, popup);
-  onBeforeUnmount(() => {val.clear();});
+  onBeforeUnmount(() => {
+    val.clear();
+    popup.dispose();
+  });
   return val;
 }
 

package/src/packages/utils/watchEffectAutoClear.ts

@@ -1,4 +1,5 @@
-import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
+import {onBeforeUnmount, watch} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
 
 /**
  * watch函数封装，支持清理副作用
@@ -6,11 +7,22 @@ import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
  * @date    2022.7.3 13:15
  */
 export function useWatchAutoClear<T>(watcher: () => T, handler: (newVal: T, oldVal: undefined | T) => (() => void)) {
-  let clear: SimpleFunction | null = null;
-  watch(() => watcher(), (newVal, oldVal) => {
-    clear?.();
-    clear = handler(newVal, oldVal);
-  }, { immediate: true });
 
-  onBeforeUnmount(() => clear?.());
+  const { effects: setupEffects } = createEffects();
+  const { effects: watchEffects } = createEffects();
+
+  setupEffects.push(
+    watch(() => watcher(), (newVal, oldVal) => {
+      watchEffects.clear();
+      watchEffects.push(
+        handler(newVal, oldVal)
+      );
+    }, { immediate: true })
+  );
+
+  onBeforeUnmount(() => {
+    setupEffects.clear();
+    watchEffects.clear();
+  });
 }
+