plain-design 1.0.0-beta.107 → 1.0.0-beta.108

package/src/packages/uses/useFocusHandler.ts

@@ -1,5 +1,6 @@
-import {reactive, watchEffect} from "@peryl/react-compose";
+import {globalWatchEffect, onBeforeUnmount, reactive} from "@peryl/react-compose";
 import {toArray} from '@peryl/utils/toArray';
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 得到元素(input,textarea,editable div,button)的focus状态，如果是多个元素，则元素在失去焦点之后的100ms之后才会派发blur事件，否则期间任何一个元素获取焦点，都会取消派发blur事件这个动作
@@ -10,19 +11,26 @@ export function useFocusHandler(
   {
     getEls,
     onFocus,
-    onBlur
+    onBlur,
+    effects: setupEffects
   }: {
     getEls: () => (HTMLElement | null | undefined) | (HTMLElement | null | undefined)[],
     onFocus: (e: FocusEvent) => void,
     onBlur: (e: FocusEvent) => void,
+    effects?: iEffects,
   }
 ) {
 
+  if (!setupEffects) {
+    setupEffects = createEffects().effects;
+    onBeforeUnmount(() => setupEffects!.clear());
+  }
+
   const isFocus = reactive({ value: false });
+
   let blurTimer: any = null;
 
   const handler = {
-    elements: [] as (HTMLElement | null | undefined)[],
     onFocus: (e: FocusEvent) => {
       if (!!blurTimer) {
         clearTimeout(blurTimer);
@@ -41,20 +49,25 @@ export function useFocusHandler(
     },
   };
 
-  watchEffect(() => {
-    handler.elements.forEach(el => {
-      if (!el) {return;}
-      el.removeEventListener('focus', handler.onFocus);
-      el.removeEventListener('blur', handler.onBlur);
-    });
-    handler.elements = toArray(getEls());
-    handler.elements.forEach(el => {
+  const { effects } = createEffects();
+
+  setupEffects.push(globalWatchEffect(() => {
+    effects.clear();
+
+    const elements = toArray(getEls());
+    elements.forEach(el => {
       if (!el) {return;}
       el.addEventListener('focus', handler.onFocus);
       el.addEventListener('blur', handler.onBlur);
     });
+    effects.push(() => elements.forEach(el => {
+      if (!el) {return;}
+      el.removeEventListener('focus', handler.onFocus);
+      el.removeEventListener('blur', handler.onBlur);
+    }));
+  }));
 
-  });
+  setupEffects.push(() => effects.clear());
 
   return { isFocus };
 }

package/src/packages/uses/useMultipleModel.tsx

@@ -1,6 +1,7 @@
 import {UseModelConfig} from "@peryl/react-compose/src/use/useModel";
 import {useModel} from "@peryl/react-compose";
 import {createEnum} from "@peryl/utils/createEnum";
+import {iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 多选的时候值的类型
@@ -23,6 +24,7 @@ export function useMultipleModel<T>(
   emitter: (val: T) => void,
   props: { valueType?: typeof eMultipleValueType.TYPE, multiple?: boolean },
   config?: UseModelConfig<T>,
+  effects?: iEffects
 ) {
 
   /*最后一次emit的值*/
@@ -59,5 +61,5 @@ export function useMultipleModel<T>(
       }
       emitter(val);
     }
-  }, config);
+  }, config, effects);
 }