plain-design 1.0.0-beta.98 → 3.0.0

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

@@ -1,4 +1,4 @@
-import {createRenderHook} from "plain-design-composition";
+import {createRenderHook} from "@peryl/react-compose";
 
 export function usePageRenderContext() {
   const renderHook = createRenderHook();

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

@@ -1,17 +1,17 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
 import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {delay} from "plain-utils/utils/delay";
+import {createEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
 import './popup-item.scss';
 import {PopupManager} from "./usePopupManager";
 import {refreshPopup} from "./refresh/refreshPopup";
 import {getBoundary} from "./utils/getBoundary";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {getElementParents} from "plain-utils/dom/getElementParents";
+import {getElementParents} from "@peryl/utils/getElementParents";
 import {usePopupTrigger} from "./trigger/usePopupTrigger";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
-import {doNothing} from "plain-utils/utils/doNothing";
-import {unit} from "plain-utils/string/unit";
+import {doNothing} from "@peryl/utils/doNothing";
+import {unit} from "@peryl/utils/unit";
 import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
 
 export const PopupItem = designComponent({
@@ -39,7 +39,12 @@ export const PopupItem = designComponent({
 
     const manager = PopupManager.inject()!;
 
-    const state = reactive({
+    const state: {
+      option: iPopupOption,
+      isShow: boolean,
+      isAnimationReady: boolean,
+      zIndex: number,
+    } = reactive({
       /**
        * 当前popup item对应的option对象，不可以通过props.option来更新，必须调用manager.methods.update手动更新
        * @author  韦胜健
@@ -168,6 +173,7 @@ export const PopupItem = designComponent({
         };
 
         return (transformLocation?: boolean) => {
+          if (!state.option) {return;}
           if (state.option.animation !== ePopupAnimation.slide) {
             doRefresh(transformLocation);
           } else {
@@ -322,9 +328,9 @@ export const PopupItem = designComponent({
      * @author  韦胜健
      * @date    2023/5/16 17:14
      */
-    useWatchAutoClear(() => state.option.reference, () => {
-      const effects: SimpleFunction[] = [];
+    useWatchAutoClear(() => state.option.reference, (): (() => void) => {
       if (!state.option.reference) {return doNothing;}
+      const { effects } = createEffects();
       const parents = getElementParents(state.option.reference).concat(window as any);
       const onScroll = () => {
         if (state.option.hideOnScroll) {
@@ -341,7 +347,7 @@ export const PopupItem = designComponent({
         parent.addEventListener('scroll', onScroll);
         effects.push(() => {parent.removeEventListener('scroll', onScroll);});
       });
-      return () => {effects.forEach(i => i());};
+      return effects.clear;
     });
 
     /**
@@ -365,6 +371,7 @@ export const PopupItem = designComponent({
       if (manager.methods.isOpen(state.option)) {
         manager.hooks.onPopupItemClose.exec(state.option);
       }
+      delay().then(() => {state.option = null as any;});
     });
 
     PopupItemProvide.provide(state);

package/src/packages/components/usePopup/refresh/refreshArrow.ts

@@ -1,6 +1,6 @@
 import {iPopupRefreshBuildParams} from "../utils/popup.utils";
 import {handleDirection} from "../utils/handleDirection";
-import {getComponentCls} from "plain-design-composition";
+import {getComponentCls} from "@peryl/react-compose";
 
 /**
  * 更新箭头定位信息

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

@@ -1,6 +1,5 @@
 import {iPopupManager} from "../utils/popup.utils";
-import {onBeforeUnmount, onMounted} from "plain-design-composition";
-import {throttle} from "plain-utils/utils/throttle";
+import {onBeforeUnmount, onMounted} from "@peryl/react-compose";
 
 /**
  * 处理点击页面任何元素的时候检查是否触发了某个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);
   });

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

@@ -1,6 +1,6 @@
 import {ePopupTrigger, iPopupManager, iPopupOption} from "../utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {onBeforeUnmount, watchEffect} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {onBeforeUnmount, watchEffect} from "@peryl/react-compose";
 
 /**
  * 初始化监听popper根节点事件

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

@@ -1,6 +1,6 @@
 import {ePopupTrigger, iPopupManager, iPopupUseOption} from "../utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {onBeforeUnmount, SimpleFunction, watchEffect} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+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/usePopup/usePopup.tsx

@@ -1,7 +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";
+import {onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
 
 export function usePopup() {
   const popupId = nextPopupId();

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

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, inject, onBeforeUnmount, provide, reactive, RenderNode} from "plain-design-composition";
+import {computed, getComponentCls, inject, onBeforeUnmount, provide, reactive, RenderNode} from "@peryl/react-compose";
 import {ePopupAnimation, ePopupTrigger, iPopupDefaultOption, iPopupManager, iPopupOption, iPopupUseOption, nextPopupManagerId, nextPopupType} from "./utils/popup.utils";
 import {createPopupManagerHooks} from "./utils/createPopupManagerHooks";
 import {PopupItem} from "./PopupItem";
@@ -11,7 +11,8 @@ import {useManagerTriggerHover} from "./trigger/useManagerTrigger.hover";
 import {useManagerTriggerContextmenu} from "./trigger/useManagerTrigger.contextmenu";
 import {useManagerTriggerFocus} from "./trigger/useManagerTrigger.focus";
 import {useManagerTriggerClickOutside} from "./trigger/useManagerTrigger.clickOutside";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * popup item管理器
@@ -246,7 +247,17 @@ export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.T
 
   PopupManager.add(manager);
 
-  onBeforeUnmount(() => {PopupManager.remove(manager);});
+  onBeforeUnmount(() => {
+    PopupManager.remove(manager);
+    delay().then(() => {
+      Object.keys(findOption.value.id2option).forEach(k => {delete findOption.value.id2option[k];});
+      manager.state.options = [];
+      manager.state.isOpenMap = {};
+      manager.state.isShowMap = {};
+      manager.parent = null;
+      manager.render = () => null;
+    });
+  });
 
   return manager;
 }

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

@@ -1,4 +1,4 @@
-import {createHooks, createSyncHooks} from "plain-design-composition";
+import {createHooks, createSyncHooks} from "@peryl/react-compose";
 import {iPopupOption, iPopupUseOption} from "./popup.utils";
 
 /**

package/src/packages/components/usePopup/utils/ids2map.ts

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 
 export function ids2map(id: string | string[]): Record<string, true | undefined> {
   if (typeof id === "string") {

package/src/packages/components/usePopup/utils/popup.utils.ts

@@ -1,10 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {createCounter} from "plain-utils/utils/createCounter";
-import {getComponentCls, RenderNode, SimpleFunction} from "plain-design-composition";
+import {createEnum} from "@peryl/utils/createEnum";
+import {createCounter} from "@peryl/utils/createCounter";
+import {createProvider, getComponentCls, RenderNode, SimpleFunction} from "@peryl/react-compose";
 import {iPopupManagerHooks} from "./createPopupManagerHooks";
 import {iElementRect} from "../../../utils/getRowEl";
 import {ThemeSize, ThemeStatus} from "../../../uses/useStyle";
-import {createProvider} from "../../../utils/createProvider";
 
 /**
  * direction

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

@@ -1,6 +1,5 @@
 import {iPopupEditorOption} from "./popup-editor.utils";
-import {computed, onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
-import {createEffects} from "plain-utils/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/usePopupEditor/popup-editor.utils.ts

@@ -1,4 +1,4 @@
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 import {iPopupEditorUseOption} from "./index";
 
 export interface iPopupEditorOption {

package/src/packages/components/useTableFilter/index.ts

@@ -0,0 +1,73 @@
+import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import {computed, reactive, RenderNode} from "@peryl/react-compose";
+import {iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
+
+export function useTableFilter<T>(
+  {
+    modelValue,
+    option,
+    defaultValue,
+    display,
+    handleClickTip,
+    handleClear,
+    getQueryParam,
+    noClear,
+  }: {
+    option: TableOptionSpace.iTableOption,
+    display: (val: T) => RenderNode,
+    getQueryParam: (val: T) => iFilterQueryParam,
+    modelValue?: { set: (newVal: T | null) => void, get: () => T | null },
+    defaultValue?: T,
+    handleClickTip?: (val: T) => void,
+    handleClear?: (val: T) => void,
+    noClear?: boolean,
+  }) {
+
+  const model = (() => {
+    const _modelValue = modelValue || (() => {
+      const state = reactive({ value: defaultValue });
+      return { get: (): T | null => state.value as any, set: (newVal: T | null) => {state.value = newVal as any;} };
+    })();
+    return {
+      get: () => _modelValue.get(),
+      set: (newVal: T | null) => {_modelValue.set(newVal);}
+    };
+  })();
+
+  const clear = (val: T) => {
+    if (noClear) {return;}
+    !!handleClear ? handleClear(val) : model.set(null);
+  };
+
+  const tips = computed((): TableOptionSpace.iTableOptionTipMeta | null => {
+    const val = model.get();
+    if (val == null) {return null;}
+    return {
+      noClear,
+      display: () => display(val),
+      onClear: () => {
+        clear(val);
+        reload();
+      },
+      onClick: () => {handleClickTip?.(val);},
+    };
+  });
+
+  option.hooks.onClearFilter.use(() => {
+    const val = model.get();
+    if (val == null) {return;}
+    clear(val);
+  });
+
+  option.hooks.onTips.use((list) => {!!tips.value && list.unshift(tips.value);});
+
+  option.hooks.onQueryParam.use(async () => {
+    const val = model.get();
+    if (val == null) {return;}
+    return getQueryParam(val);
+  });
+
+  const reload = () => option.methods.pageMethods.reload();
+
+  return { model, reload };
+}

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

@@ -1,8 +1,7 @@
-import {createEffects} from 'plain-utils/utils/createEffects';
-import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "plain-design-composition";
+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 "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * 提供两种用法，第一种实时地创建tooltip
@@ -10,7 +9,7 @@ import {delay} from "plain-utils/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/directives/ClickWave/index.tsx

@@ -1,6 +1,6 @@
-import {onBeforeUnmount, watch} from 'plain-design-composition';
+import {onBeforeUnmount, watch} from '@peryl/react-compose';
 import './click-wave.scss';
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {ThemeSize} from "../../uses/useStyle";
 
 export interface ClickWaveOptions {

package/src/packages/directives/ResizeDetector/index.tsx

@@ -1,5 +1,5 @@
-import {onBeforeUnmount, watch} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {onBeforeUnmount, watch} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 
 export interface ResizeDetectFuncParam {
   width?: number;