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

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

@@ -1,6 +1,6 @@
 import {ePopupTrigger, iPopupManager, iPopupUseOption} from "../utils/popup.utils";
 import {createEffects} from "@peryl/utils/createEffects";
-import {onBeforeUnmount, SimpleFunction, watchEffect} from "@peryl/react-compose";
+import {globalWatchEffect, onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
 import {isStopPopup} from "../utils/stopPopup";
 
 /**
@@ -28,57 +28,63 @@ export function createReferenceTrigger(
   }
 ) {
   const { effects } = createEffects();
+  const { effects: setupEffects } = createEffects();
 
   let prev: ReturnType<typeof get> | null = null;
 
-  watchEffect(() => {
-    const { reference, trigger } = get();
-    if (!!prev && prev.trigger === trigger && prev.reference === reference) {
-      return;
-    }
-    effects.clear();
-    prev = { reference, trigger };
-
-    if (!reference) {return;}
-
-    const onClick = (e: MouseEvent) => {
-      if (isStopPopup(e)) {
+  setupEffects.push(
+    globalWatchEffect(() => {
+      const { reference, trigger } = get();
+      if (!!prev && prev.trigger === trigger && prev.reference === reference) {
         return;
       }
-      manager.hooks.onTriggerReferenceClick.exec({ e, option: getOption() });
-    };
-    const onContextmenu = (e: MouseEvent) => {
-      e.preventDefault();
-      manager.hooks.onTriggerReferenceContextmenu.exec({ e, option: getOption() });
-    };
-    const onMouseenter = (e: MouseEvent) => {manager.hooks.onTriggerReferenceEnter.exec({ e, option: getOption() });};
-    const onMouseleave = (e: MouseEvent) => {manager.hooks.onTriggerReferenceLeave.exec({ e, option: getOption() });};
-    const onMousedown = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousedown.exec({ e, option: getOption() });};
-    const onMousemove = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousemove.exec({ e, option: getOption() });};
-    const onFocus = (e: FocusEvent) => {manager.hooks.onTriggerReferenceFocus.exec({ e, option: getOption() });};
-    const onBlur = (e: FocusEvent) => {manager.hooks.onTriggerReferenceBlur.exec({ e, option: getOption() });};
+      effects.clear();
+      prev = { reference, trigger };
 
+      if (!reference) {return;}
 
-    reference.addEventListener('click', onClick);
-    reference.addEventListener('contextmenu', onContextmenu);
-    reference.addEventListener('mouseenter', onMouseenter);
-    reference.addEventListener('mouseleave', onMouseleave);
-    reference.addEventListener('mousedown', onMousedown);
-    reference.addEventListener('mousemove', onMousemove);
-    reference.addEventListener('focus', onFocus);
-    reference.addEventListener('blur', onBlur);
+      const onClick = (e: MouseEvent) => {
+        if (isStopPopup(e)) {
+          return;
+        }
+        manager.hooks.onTriggerReferenceClick.exec({ e, option: getOption() });
+      };
+      const onContextmenu = (e: MouseEvent) => {
+        e.preventDefault();
+        manager.hooks.onTriggerReferenceContextmenu.exec({ e, option: getOption() });
+      };
+      const onMouseenter = (e: MouseEvent) => {manager.hooks.onTriggerReferenceEnter.exec({ e, option: getOption() });};
+      const onMouseleave = (e: MouseEvent) => {manager.hooks.onTriggerReferenceLeave.exec({ e, option: getOption() });};
+      const onMousedown = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousedown.exec({ e, option: getOption() });};
+      const onMousemove = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousemove.exec({ e, option: getOption() });};
+      const onFocus = (e: FocusEvent) => {manager.hooks.onTriggerReferenceFocus.exec({ e, option: getOption() });};
+      const onBlur = (e: FocusEvent) => {manager.hooks.onTriggerReferenceBlur.exec({ e, option: getOption() });};
 
-    effects.push(() => {
-      reference.removeEventListener('click', onClick);
-      reference.removeEventListener('contextmenu', onContextmenu);
-      reference.removeEventListener('mouseenter', onMouseenter);
-      reference.removeEventListener('mouseleave', onMouseleave);
-      reference.removeEventListener('mousedown', onMousedown);
-      reference.removeEventListener('mousemove', onMousemove);
-      reference.removeEventListener('focus', onFocus);
-      reference.removeEventListener('blur', onBlur);
-    });
-  });
 
-  onBeforeUnmount(() => {effects.clear();});
+      reference.addEventListener('click', onClick);
+      reference.addEventListener('contextmenu', onContextmenu);
+      reference.addEventListener('mouseenter', onMouseenter);
+      reference.addEventListener('mouseleave', onMouseleave);
+      reference.addEventListener('mousedown', onMousedown);
+      reference.addEventListener('mousemove', onMousemove);
+      reference.addEventListener('focus', onFocus);
+      reference.addEventListener('blur', onBlur);
+
+      effects.push(() => {
+        reference.removeEventListener('click', onClick);
+        reference.removeEventListener('contextmenu', onContextmenu);
+        reference.removeEventListener('mouseenter', onMouseenter);
+        reference.removeEventListener('mouseleave', onMouseleave);
+        reference.removeEventListener('mousedown', onMousedown);
+        reference.removeEventListener('mousemove', onMousemove);
+        reference.removeEventListener('focus', onFocus);
+        reference.removeEventListener('blur', onBlur);
+      });
+    })
+  );
+
+  onBeforeUnmount(() => {
+    effects.clear();
+    setupEffects.clear();
+  });
 }

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

@@ -1,6 +1,5 @@
 import {iPopupEditorOption} from "./popup-editor.utils";
-import {computed, onBeforeUnmount, SimpleFunction, watch} from "@peryl/react-compose";
-import {createEffects} from "@peryl/utils/createEffects";
+import {createEffectsOfReaction, onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
 import {createPopup} from "../usePopup/usePopup";
 import {iPopupUseOption} from "../usePopup/utils/popup.utils";
 import {createReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
@@ -14,11 +13,11 @@ export function createPopupEditor(
   }
 ) {
 
-  const { effects } = createEffects();
+  const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
 
   const popup = createPopup(effects.push);
 
-  const reference = computed(() => {
+  const reference = effectComputed(() => {
     let reference = option.reference() as any;
     if (!reference) {return null;}
     if ('$el' in reference) {reference = reference.$el;}
@@ -90,11 +89,9 @@ export function createPopupEditor(
     isShow: () => popup.$popup.manager.methods.isShow(getOption())
   };
 
-  effects.push(
-    watch(() => option.popperAttrs?.(), () => {
-      popup.$popup.update(getOption());
-    })
-  );
+  effectWatch(() => option.popperAttrs?.(), () => {
+    popup.$popup.update(getOption());
+  });
 
   effects.push(() => {
     popup.$popup.manager.methods.remove(popup.popupId);

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

@@ -1,5 +1,4 @@
-import {createEffects} from '@peryl/utils/createEffects';
-import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "@peryl/react-compose";
+import {createEffectsOfReaction, getComponentCls, nextTick, onBeforeUnmount, reactive} from "@peryl/react-compose";
 import {iPopupService, usePopup} from "../usePopup/usePopup";
 import {iPopupUseOption} from "../usePopup/utils/popup.utils";
 import {delay} from "@peryl/utils/delay";
@@ -10,7 +9,7 @@ import {delay} from "@peryl/utils/delay";
  * @date    2023.1.21 14:06
  */
 export function createTooltip(option: iTooltipServiceOption, popup: iPopupService) {
-  const { effects } = createEffects();
+  const { effects, effectWatch } = createEffectsOfReaction();
 
   const state = reactive({
     isEnter: false,
@@ -67,7 +66,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
       }
     };
     effects.push(
-      watch(
+      effectWatch(
         () => option.tooltip(),
         ({ message, reference }) => {
           if (!reference) {
@@ -108,7 +107,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
 
   const tooltipHandler = (() => {
     effects.push(
-      watch(
+      effectWatch(
         () => option.tooltip().message,
         val => {
           popup.$popup.update(getOption());
@@ -122,7 +121,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
       )
     );
     effects.push(
-      watch(
+      effectWatch(
         (): boolean => {
           const { reference, message } = option.tooltip();
           if (reference == null || message == null || (typeof message === "string" && !message.trim().length)) {

package/src/packages/uses/useDragHorizontalScroll.ts

@@ -1,6 +1,5 @@
-import {createEffects} from "@peryl/utils/createEffects";
 import {ClientZoom} from "../utils/ClientZoom";
-import {watch} from "@peryl/react-compose";
+import {createEffectsOfReaction} from "@peryl/react-compose";
 
 export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined, config?: { onDragStart: () => void, onDragEnd: () => void }) {
 
@@ -17,7 +16,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
     }
   };
 
-  const { effects } = createEffects();
+  const { effects, effectWatch } = createEffectsOfReaction();
 
   const handler = {
     mousedown: (e: MouseEvent) => {
@@ -60,7 +59,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
     },
   };
 
-  effects.push(watch(() => getEl(), el => {
+  effectWatch(() => getEl(), el => {
     if (!!staticState.el) {
       staticState.el.removeEventListener('mousedown', handler.mousedown);
       staticState.el.removeEventListener('wheel', handler.onWheel);
@@ -69,7 +68,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
     if (!staticState.el) {return;}
     staticState.el.addEventListener('mousedown', handler.mousedown);
     staticState.el.addEventListener('wheel', handler.onWheel);
-  }));
+  });
 
   effects.push(() => {
     if (!!staticState.el) {

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);
 }