plain-design 1.0.0-beta.130 → 1.0.0-beta.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.130",
+  "version": "1.0.0-beta.131",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@peryl/icon": "0.0.8",
-    "@peryl/utils": "^0.1.72",
+    "@peryl/utils": "^0.1.73",
     "@types/color": "3.0.6",
     "@types/react-transition-group": "4.4.10",
     "color": "4.2.3",

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

@@ -1,5 +1,5 @@
 import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {throttle} from "@peryl/utils/throttle";
@@ -10,6 +10,7 @@ import {Loading} from "../Loading";
 import {ButtonGroup} from "../ButtonGroup";
 import {AutoLoadingObserver} from "../AutoLoadingObserver";
 import {useCollapseStyles} from "../../uses/useCollapseStyles";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export const Button = designComponent({
   name: '-button',
@@ -82,16 +83,22 @@ export const Button = designComponent({
       },
     });
 
+    const { effects: throttleClickEffects } = createEffects();
+    onBeforeUnmount(() => {throttleClickEffects.clear();});
+
     watch(
       () => props.throttleClick,
       (val) => {
+        throttleClickEffects.clear();
         if (!val) {
           return state.handleClick = state.handleClickInner;
         }
         if (val === true) {
           val = 1000;
         }
-        state.handleClick = throttle(state.handleClickInner, val, { trailing: false });
+        const throttleClickHandler = throttle(state.handleClickInner, val, { trailing: false });
+        throttleClickEffects.push(() => throttleClickHandler.dispose());
+        state.handleClick = throttleClickHandler;
       },
       { immediate: true }
     );

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -63,6 +63,7 @@ export function createSingleCascadeRender(
       state.inputValue = null;
     },
     onBlur: (e: FocusEvent) => {
+      if (!event.emit) {return;}
       event.emit.onBlur(e);
       props.inputAttrs?.onBlur?.(e);
       state.isFocus = false;

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

@@ -1,4 +1,4 @@
-import {computed, createHooks, designComponent, getComponentCls, iMouseEvent, mergeAttrs, nextIndex, nextTick, Portal, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {computed, createHooks, designComponent, getComponentCls, iMouseEvent, mergeAttrs, nextIndex, nextTick, onBeforeUnmount, Portal, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {DialogAlign, DialogAnimations, DialogCloseType, DialogPositions} from "./utils/dialog.utils";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
 import {unit} from "@peryl/utils/unit";
@@ -81,7 +81,6 @@ export const Dialog = designComponent({
     const { styleComputed } = useStyle();
 
     const { emit } = event;
-
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const open = useModel(() => props.open, emit.onUpdateOpen);
 
@@ -320,6 +319,11 @@ export const Dialog = designComponent({
       }, 300, { trailing: false }),
     };
 
+    onBeforeUnmount(() => {
+      methods.confirm.dispose();
+      methods.cancel.dispose();
+    });
+
     watch(() => model.value, async show => {
       await nextTick();
       await (show ? methods.show() : methods.hide());

package/src/packages/components/Input/uses/useInputEnterHandler.tsx

@@ -40,15 +40,19 @@ export function useInputEnterHandler(
   };
 
   const enterHandler = reactive({ value: doNothing, });
+  const { effects: throttleEffects } = createEffects();
 
   watch(() => props.throttleEnter, (val) => {
+    throttleEffects.clear();
     if (!val) {
       enterHandler.value = innerHandler;
     }
     if (val === true) {
       val = 1000;
     }
-    enterHandler.value = throttle(innerHandler, val as number, { trailing: true });
+    const throttleHandler = throttle(innerHandler, val as number, { trailing: true });
+    throttleEffects.push(() => throttleHandler.dispose());
+    enterHandler.value = throttleHandler;
   }, { immediate: true });
 
   const handler = {
@@ -72,5 +76,8 @@ export function useInputEnterHandler(
     effects.push(() => {input.removeEventListener('keydown', handler.onKeydown);});
   });
 
-  onBeforeUnmount(() => effects.clear());
+  onBeforeUnmount(() => {
+    effects.clear();
+    throttleEffects.clear();
+  });
 }

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

@@ -354,6 +354,7 @@ export const Scroll = designComponent({
           popper.event.off.onOpen(handler.popperOpen)
           popper.event.off.onShow(handler.popperShow)
       }*/
+      handler.windowResize.dispose();
     });
 
     watch(() => props.refreshState, methods.refresh);

package/src/packages/components/Table/plc/useTablePlc.tsx

@@ -47,7 +47,7 @@ export function useTablePlc(
     getPlcTypeArr: null as null | (() => tPlcType[]),
   });
 
-  onBeforeUnmount(()=>{state.getTableEl = null})
+  onBeforeUnmount(() => {state.getTableEl = null;});
 
   hooks.onPlcTypes.use(list => {state.getPlcTypeArr = () => list;});
 
@@ -109,6 +109,7 @@ export function useTablePlc(
   const virtualFlatPlcList = (() => {
     const state = reactive({ scrollLeft: 0 });
     const setScrollLeft = throttle((scrollLeft: number) => {state.scrollLeft !== scrollLeft && (state.scrollLeft = scrollLeft);}, 50);
+    onBeforeUnmount(() => {setScrollLeft.dispose();});
     hooks.onScroll.use((e) => {setScrollLeft(e.target.scrollLeft);});
     return computed((): tPlc[] => {
       if (!plcData.value) {return [];}

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

@@ -1,6 +1,5 @@
 import {iPopupManager} from "../utils/popup.utils";
 import {onBeforeUnmount, onMounted} from "@peryl/react-compose";
-import {throttle} from "@peryl/utils/throttle";
 
 /**
  * 处理点击页面任何元素的时候检查是否触发了某个popup的click outside动作
@@ -13,28 +12,24 @@ export function useManagerTriggerClickOutside({ hooks }: iPopupManager) {
    * @author  韦胜健
    * @date    2023/5/16 16:23
    */
-  const onClick = throttle(
-    (e: MouseEvent) => {
-      const el = e.target as HTMLElement;
-      const list = hooks.onGetPopupElements.exec([]);
-      list.forEach(i => {
-        const { option, popupEl } = i();
-        const { reference } = option;
-        if (!popupEl) {return;}
-        if (reference.contains(el)) {
-          /*点击了reference*/
-          return;
-        }
-        if (popupEl.contains(el)) {
-          /*点击了popup*/
-          return;
-        }
-        hooks.onTriggerOutsideClick.exec({ e, option });
-      });
-    },
-    100,
-    { trailing: false }
-  );
+  const onClick = (e: MouseEvent) => {
+    const el = e.target as HTMLElement;
+    const list = hooks.onGetPopupElements.exec([]);
+    list.forEach(i => {
+      const { option, popupEl } = i();
+      const { reference } = option;
+      if (!popupEl) {return;}
+      if (reference.contains(el)) {
+        /*点击了reference*/
+        return;
+      }
+      if (popupEl.contains(el)) {
+        /*点击了popup*/
+        return;
+      }
+      hooks.onTriggerOutsideClick.exec({ e, option });
+    });
+  }
   onMounted(() => {
     window.addEventListener('mouseup', onClick, true);
   });