plain-design 1.0.0-beta.16 → 1.0.0-beta.160

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
@@ -43,7 +42,7 @@ export type iPopupTrigger = typeof ePopupTrigger.TYPE
  * @author  韦胜健
  * @date    2023.5.13 22:11
  */
-export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide'] as const);
+export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide', 'clip'] as const);
 export type iPopupAnimation = typeof ePopupAnimation.TYPE
 
 /*---------------------------------------popup utils-------------------------------------------*/
@@ -62,7 +61,8 @@ export interface iPopupDefaultOption {
   trigger: iPopupTrigger,                     // 触发类型
   animation: iPopupAnimation,                 // 动画类型
   destroyOnClose: boolean,                    // 关闭的时候销毁popup
-  to: string,                                 // 挂载到某个dom节点下
+  appendToBody: boolean,                      // 挂载到某个dom节点下
+  transformRefreshOnScroll: boolean,          // scroll的时候refresh使用transform来优化
   offset: number,                             // 在direction方向上的距离
   offsetAlign: number,                        // 在align方向上的偏移距离
   autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction
@@ -96,6 +96,10 @@ export interface iPopupCustomOption {
   minHeight?: string | number,                // 最小高度
   width?: string | number,                    // 固定宽度
   height?: string | number,                   // 固定高度
+  maxTop?: number | ((param: iPopupRefreshBuildParams) => number),// 最大top值
+  minTop?: number | ((param: iPopupRefreshBuildParams) => number),// 最小top值
+  maxLeft?: number | ((param: iPopupRefreshBuildParams) => number),// 最大left值
+  minLeft?: number | ((param: iPopupRefreshBuildParams) => number),// 最小left值
   noBackground?: boolean,                     // 禁用背景色
   noTransition?: boolean,                     // 禁用过度动画
   cover?: boolean,                            // 覆盖reference

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,7 +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 "@peryl/utils/delay";
 
 /**
  * 提供两种用法，第一种实时地创建tooltip
@@ -9,7 +9,7 @@ import {iPopupUseOption} from "../usePopup/utils/popup.utils";
  * @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,
@@ -66,7 +66,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
       }
     };
     effects.push(
-      watch(
+      effectWatch(
         () => option.tooltip(),
         ({ message, reference }) => {
           if (!reference) {
@@ -107,7 +107,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
 
   const tooltipHandler = (() => {
     effects.push(
-      watch(
+      effectWatch(
         () => option.tooltip().message,
         val => {
           popup.$popup.update(getOption());
@@ -121,12 +121,15 @@ 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)) {
             return false;
           }
+          if (option.alwaysShow) {
+            return true;
+          }
           if (!state.isEnter) {
             return false;
           }
@@ -144,12 +147,15 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         },
       )
     );
-    const close = () => popup.$popup.hide(popup.popupId);
+    const close = () => {delay(23).then(() => {popup.$popup.hide(popup.popupId);});};
     effects.push(close);
     return { close };
   })();
 
-  const clear = () => {effects.clear();};
+  const clear = () => {
+    effects.clear();
+    popup.dispose();
+  };
 
   return { referenceEnterHandler, tooltipHandler, clear };
 }
@@ -164,11 +170,15 @@ 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;
 }
 
 export interface iTooltipServiceOption {
+  alwaysShow?: boolean,
   /*传递给tooltip的水星*/
   tooltip: () => Omit<iPopupUseOption, 'id' | 'reference' | 'render'> & { reference: HTMLElement | null | undefined, message: any },
   /*是否在文本溢出时才会显示消息*/

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;
@@ -13,7 +13,7 @@ export interface ResizeDetectFuncParam {
 
 export interface ResizeDetectFunc {(option: ResizeDetectFuncParam): void;}
 
-function createResizeDetector(el: HTMLElement, callback: ResizeDetectFunc) {
+function createResizeDetector(el: HTMLElement, callback: ResizeDetectFunc, mutateOption?: MutationObserverInit) {
 
   const state = {
     observer: undefined as undefined | MutationObserver,
@@ -44,6 +44,7 @@ function createResizeDetector(el: HTMLElement, callback: ResizeDetectFunc) {
       ret.oldHeight = state.height;
       state.height = height;
     }
+
     runCallback(ret);
   };
 
@@ -57,7 +58,11 @@ function createResizeDetector(el: HTMLElement, callback: ResizeDetectFunc) {
   const init = () => {
     if (!el) {return console.error(`el is ${typeof el}`);}
     state.observer = new MutationObserver(detect);
-    state.observer.observe(el, { childList: true, subtree: true });
+    state.observer.observe(el, {
+      childList: true,
+      subtree: true,
+      ...mutateOption,
+    });
     // const {width, height} = el.getBoundingClientRect()
     const { scrollHeight, scrollWidth } = el;
     state.width = scrollWidth;
@@ -79,9 +84,11 @@ export function useResizeDetector(
   {
     elGetter,
     onResize,
+    mutateOption,
   }: {
     elGetter: () => HTMLElement | undefined | null,
     onResize: ResizeDetectFunc,
+    mutateOption?: MutationObserverInit,
   }) {
 
   const state = { resizeDetector: null as null | ResizeDetector, };
@@ -90,7 +97,7 @@ export function useResizeDetector(
     await delay(0);
     if (!!state.resizeDetector) {state.resizeDetector.destroy();}
     state.resizeDetector = null;
-    !!el && (state.resizeDetector = createResizeDetector(el, onResize));
+    !!el && (state.resizeDetector = createResizeDetector(el, onResize, mutateOption));
   }, { immediate: true });
 
   !!state.resizeDetector && state.resizeDetector.detect();