plain-design 1.0.0-beta.72 → 1.0.0-beta.74

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

@@ -1,314 +1,314 @@
-import {computed, getComponentCls, inject, onBeforeUnmount, provide, reactive, RenderNode} from "plain-design-composition";
-import {ePopupAnimation, ePopupTrigger, iPopupDefaultOption, iPopupManager, iPopupOption, iPopupUseOption, nextPopupManagerId, nextPopupType} from "./utils/popup.utils";
-import {createPopupManagerHooks} from "./utils/createPopupManagerHooks";
-import {PopupItem} from "./PopupItem";
-import {ApplicationHooks} from "../Application/utils/application.utils";
-import {ids2map} from "./utils/ids2map";
-import {ThemeSize} from "../../uses/useStyle";
-import {clearFields} from "../../utils/clearFields";
-import {useManagerTriggerClick} from "./trigger/useManagerTrigger.click";
-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";
-
-/**
- * popup item管理器
- * @author  韦胜健
- * @date    2023/5/16 17:17
- */
-export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.TYPE }) {
-
-  /*manager唯一标识*/
-  const id = nextPopupManagerId();
-
-  /*内部事件*/
-  const hooks = createPopupManagerHooks();
-
-  /*内部状态*/
-  const state: iPopupManager['state'] = reactive({
-    options: [],
-    isShowMap: {} as Record<string, boolean | undefined>,
-    isOpenMap: {} as Record<string, boolean | undefined>,
-  });
-
-  /*关闭popup-item的定时器，这里统一管理，以便于父子popup-item互相之前控制显影*/
-  const closeTimer = {} as Record<string, any>;
-
-  /**
-   * 通过id找到option
-   * @author  韦胜健
-   * @date    2023/5/16 17:18
-   */
-  const findOption = computed(() => {
-    const id2option = {} as Record<string, undefined | iPopupOption>;
-    state.options.forEach(o => {
-      id2option[o.id] = o;
-    });
-    return { id2option };
-  });
-
-  /**
-   * 看类型
-   * @author  韦胜健
-   * @date    2023/5/16 17:18
-   */
-  const methods: iPopupManager['methods'] = {
-    createOption: (useOption: iPopupUseOption): iPopupOption => {
-      const defaultOption: iPopupDefaultOption = {
-        type: useOption.type || nextPopupType(),
-        placement: 'top',
-        trigger: ePopupTrigger.hover,
-        animation: ePopupAnimation.fade,
-        destroyOnClose: true,
-        appendToBody: true,
-        transformRefreshOnScroll: true,
-        offset: 0,
-        offsetAlign: 0,
-        autoSwitchDirection: true,
-        size: getSize(),
-        arrowSize: 8,
-        arrowScale: 0.7,
-        refreshOnScroll: true,
-        hideOnScroll: false,
-        interactive: true,
-        hideOnClickReference: true,
-        toggleOnClickReference: true,
-      };
-      const option: iPopupOption = {
-        ...defaultOption,
-        ...clearFields(useOption, (key, val) => val === undefined) as iPopupUseOption,
-        useOption,
-      };
-      if (option.cover) {
-        option.noBackground = true;
-        option.noTransition = true;
-        option.noBorder = true;
-      }
-      if (option.noBackground) {
-        option.noArrow = true;
-        option.noPadding = true;
-      }
-      return option;
-    },
-    show: (useOption: iPopupUseOption) => {
-      const option = methods.createOption(useOption);
-      const findIndex = state.options.findIndex(i => i.id === option.id);
-      if (findIndex > -1) {
-        /*已经存在同样popup，只是希望打开这个popup或者更新popup的配置选项*/
-        hooks.onCallShowPopup.exec(option);
-      } else {
-        /*创建新的popup*/
-        const newOptions = state.options.filter(i => i.type !== option.type);
-        state.options = [...newOptions, option,];
-      }
-      return { option, hide: () => methods.hide(option.id) };
-    },
-    update: async (useOption) => {
-      const option = methods.createOption(useOption);
-      await hooks.onCallUpdatePopup.exec(option);
-    },
-    refresh: async (option) => {
-      await hooks.onCallRefreshPopup.exec(option);
-    },
-    hide: async (id: string | string[]) => {
-      const closeIdList: string[] = [];
-      toArray(id)
-        .map(i => findOption.value.id2option[i])
-        .filter(Boolean)
-        .forEach(o => {
-          if (!o) {return;}
-          closeIdList.push(o.id, ...methods.getChildrenOptions(o).map(i => i.id));
-        });
-      await hooks.onCallHidePopup.exec(ids2map(closeIdList));
-    },
-    hideSelf: async (id: string | string[]) => {
-      await hooks.onCallHidePopup.exec(ids2map(id));
-    },
-    remove: (id: string | string[]) => {
-      const idMap = ids2map(id);
-      state.options = state.options.filter(i => !idMap[i.id]);
-    },
-    isShow: ({ id }) => !!state.isShowMap[id],
-    isOpen: ({ id }) => !!state.isOpenMap[id],
-    renderPopupItem: (useOption: iPopupUseOption, content: RenderNode) => {
-      const option = findOption.value.id2option[useOption.id];
-      return !!option ? (<PopupItem option={option} key={option.id}>{content}</PopupItem>) : null;
-    },
-    getParentOptions: (option) => {
-      const parentOptions: iPopupOption[] = [];
-      let parentOption = !option.parentId ? null : findOption.value.id2option[option.parentId];
-      while (!!parentOption) {
-        parentOptions.push(parentOption);
-        parentOption = !parentOption.parentId ? null : findOption.value.id2option[parentOption.parentId];
-      }
-      return parentOptions;
-    },
-    getChildrenOptions: (option) => {
-      const childrenOptions: iPopupOption[] = [];
-      const iterateOptions = [option];
-
-      while (iterateOptions.length) {
-        const option = iterateOptions.shift()!;
-        const children = state.options.filter(i => i.parentId === option.id);
-        childrenOptions.push(...children);
-        iterateOptions.push(...children);
-      }
-
-      return childrenOptions;
-    },
-    clear: () => {state.options = [];},
-    /**
-     * 绝对定位打开一个popup
-     * @author  韦胜健
-     * @date    2023.5.21 12:56
-     */
-    absolute: (absoluteOption) => {
-
-      const { x, y, ...useOption } = absoluteOption;
-
-      const id = `abs_${x}_${y}`;
-
-      const reference = (() => {
-        const el = document.createElement('div');
-        el.style.position = 'fixed';
-        el.style.top = `${y}px`;
-        el.style.left = `${x}px`;
-        el.style.height = '1px';
-        el.style.width = '1px';
-        document.body.appendChild(el);
-        const eject = hooks.onPopupItemDestroy.use((option) => {
-          if (option.id === id) {
-            eject();
-            document.body.removeChild(el);
-          }
-        });
-        return el;
-      })();
-
-      return methods.show({
-        id,
-        reference,
-        ...useOption,
-      });
-    },
-  };
-
-  /**
-   * 父manager
-   * @author  韦胜健
-   * @date    2023/5/16 17:18
-   */
-  const parent = PopupManager.inject();
-
-  const render = () => state.options.filter(i => !i.customRenderPopupItem).map(option => (<PopupItem option={option} key={option.id}/>));
-
-  const manager: iPopupManager = { state, hooks, id, parent, methods, closeTimer, render };
-
-  hooks.onPopupItemShow.use((option) => {
-    state.isShowMap = { ...state.isShowMap, [option.id]: true };
-    option.onShow?.();
-  });
-  hooks.onPopupItemHide.use((option) => {
-    state.isShowMap = { ...state.isShowMap, [option.id]: false };
-    option.onHide?.();
-  });
-  hooks.onPopupItemOpen.use((option) => {
-    state.isOpenMap = { ...state.isOpenMap, [option.id]: true };
-    option.onOpen?.();
-  });
-  hooks.onPopupItemClose.use((option) => {
-    state.isOpenMap = { ...state.isOpenMap, [option.id]: false };
-    option.onClose?.();
-    if (option.destroyOnClose) {
-      methods.remove(option.id);
-    }
-  });
-
-  /*---------------------------------------trigger-------------------------------------------*/
-
-  /**
-   * 初始化各个popup-item的trigger处理动作
-   * @author  韦胜健
-   * @date    2023/5/16 17:18
-   */
-
-  useManagerTriggerClickOutside(manager);
-  useManagerTriggerClick(manager);
-  useManagerTriggerHover(manager);
-  useManagerTriggerContextmenu(manager);
-  useManagerTriggerFocus(manager);
-
-  /*---------------------------------------context-------------------------------------------*/
-
-  PopupManager.provide(manager);
-
-  PopupManager.add(manager);
-
-  onBeforeUnmount(() => {PopupManager.remove(manager);});
-
-  return manager;
-}
-
-export function useApplicationPopup({ getSize }: { getSize: () => typeof ThemeSize.TYPE }) {
-  const manager = usePopupManager({ getSize });
-
-  /**
-   * 默认情况下通过ApplicationHooks.onRender降popup-item渲染到application下
-   * @author  韦胜健
-   * @date    2023/5/16 17:19
-   */
-  onBeforeUnmount(
-    ApplicationHooks.onRender.use({
-      processor: ({ list, render }) => {list.push({ render, key: 'popup-manager', seq: 2 });},
-      render: manager.render,
-    })
-  );
-
-  return manager;
-}
-
-/**
- * 管理多个PopupManager，以便于usePopper能够取到有效的manager实例
- * @author  韦胜健
- * @date    2023/5/16 17:20
- */
-export const PopupManager = (() => {
-
-  const POPUP_MANAGER_PROVIDER = getComponentCls('@@POPUP_MANAGER_PROVIDER');
-
-  const managers: iPopupManager[] = [];
-
-  const add = (manager: iPopupManager) => {
-    const index = managers.findIndex(i => i.id === manager.id);
-    index === -1 && managers.push(manager);
-  };
-
-  const remove = (manager: iPopupManager) => {
-    const index = managers.findIndex(i => i.id === manager.id);
-    index > -1 && (managers.splice(index, 1));
-  };
-
-  const get = (): iPopupManager => {
-    const rootManager = managers.find(i => !i.parent);
-    if (!rootManager) {
-      throw new Error('请先初始化PopupManager');
-    }
-    return rootManager;
-  };
-
-  const use = () => {
-    const manager = _inject();
-    return manager || get();
-  };
-
-  const _provide = (manager: iPopupManager) => {
-    provide(POPUP_MANAGER_PROVIDER, manager);
-  };
-  const _inject = () => {
-    return inject<iPopupManager | null>(POPUP_MANAGER_PROVIDER, null);
-  };
-
-  return { managers, add, remove, provide: _provide, inject: _inject, get, use };
-})();
+import {computed, getComponentCls, inject, onBeforeUnmount, provide, reactive, RenderNode} from "plain-design-composition";
+import {ePopupAnimation, ePopupTrigger, iPopupDefaultOption, iPopupManager, iPopupOption, iPopupUseOption, nextPopupManagerId, nextPopupType} from "./utils/popup.utils";
+import {createPopupManagerHooks} from "./utils/createPopupManagerHooks";
+import {PopupItem} from "./PopupItem";
+import {ApplicationHooks} from "../Application/utils/application.utils";
+import {ids2map} from "./utils/ids2map";
+import {ThemeSize} from "../../uses/useStyle";
+import {clearFields} from "../../utils/clearFields";
+import {useManagerTriggerClick} from "./trigger/useManagerTrigger.click";
+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";
+
+/**
+ * popup item管理器
+ * @author  韦胜健
+ * @date    2023/5/16 17:17
+ */
+export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.TYPE }) {
+
+  /*manager唯一标识*/
+  const id = nextPopupManagerId();
+
+  /*内部事件*/
+  const hooks = createPopupManagerHooks();
+
+  /*内部状态*/
+  const state: iPopupManager['state'] = reactive({
+    options: [],
+    isShowMap: {} as Record<string, boolean | undefined>,
+    isOpenMap: {} as Record<string, boolean | undefined>,
+  });
+
+  /*关闭popup-item的定时器，这里统一管理，以便于父子popup-item互相之前控制显影*/
+  const closeTimer = {} as Record<string, any>;
+
+  /**
+   * 通过id找到option
+   * @author  韦胜健
+   * @date    2023/5/16 17:18
+   */
+  const findOption = computed(() => {
+    const id2option = {} as Record<string, undefined | iPopupOption>;
+    state.options.forEach(o => {
+      id2option[o.id] = o;
+    });
+    return { id2option };
+  });
+
+  /**
+   * 看类型
+   * @author  韦胜健
+   * @date    2023/5/16 17:18
+   */
+  const methods: iPopupManager['methods'] = {
+    createOption: (useOption: iPopupUseOption): iPopupOption => {
+      const defaultOption: iPopupDefaultOption = {
+        type: useOption.type || nextPopupType(),
+        placement: 'top',
+        trigger: ePopupTrigger.hover,
+        animation: ePopupAnimation.fade,
+        destroyOnClose: true,
+        appendToBody: true,
+        transformRefreshOnScroll: true,
+        offset: 0,
+        offsetAlign: 0,
+        autoSwitchDirection: true,
+        size: getSize(),
+        arrowSize: 8,
+        arrowScale: 0.7,
+        refreshOnScroll: true,
+        hideOnScroll: false,
+        interactive: true,
+        hideOnClickReference: true,
+        toggleOnClickReference: true,
+      };
+      const option: iPopupOption = {
+        ...defaultOption,
+        ...clearFields(useOption, (key, val) => val === undefined) as iPopupUseOption,
+        useOption,
+      };
+      if (option.cover) {
+        option.noBackground = true;
+        option.noTransition = true;
+        option.noBorder = true;
+      }
+      if (option.noBackground) {
+        option.noArrow = true;
+        option.noPadding = true;
+      }
+      return option;
+    },
+    show: (useOption: iPopupUseOption) => {
+      const option = methods.createOption(useOption);
+      const findIndex = state.options.findIndex(i => i.id === option.id);
+      if (findIndex > -1) {
+        /*已经存在同样popup，只是希望打开这个popup或者更新popup的配置选项*/
+        hooks.onCallShowPopup.exec(option);
+      } else {
+        /*创建新的popup*/
+        const newOptions = state.options.filter(i => i.type !== option.type);
+        state.options = [...newOptions, option,];
+      }
+      return { option, hide: () => methods.hide(option.id) };
+    },
+    update: async (useOption) => {
+      const option = methods.createOption(useOption);
+      await hooks.onCallUpdatePopup.exec(option);
+    },
+    refresh: async (option) => {
+      await hooks.onCallRefreshPopup.exec(option);
+    },
+    hide: async (id: string | string[]) => {
+      const closeIdList: string[] = [];
+      toArray(id)
+        .map(i => findOption.value.id2option[i])
+        .filter(Boolean)
+        .forEach(o => {
+          if (!o) {return;}
+          closeIdList.push(o.id, ...methods.getChildrenOptions(o).map(i => i.id));
+        });
+      await hooks.onCallHidePopup.exec(ids2map(closeIdList));
+    },
+    hideSelf: async (id: string | string[]) => {
+      await hooks.onCallHidePopup.exec(ids2map(id));
+    },
+    remove: (id: string | string[]) => {
+      const idMap = ids2map(id);
+      state.options = state.options.filter(i => !idMap[i.id]);
+    },
+    isShow: ({ id }) => !!state.isShowMap[id],
+    isOpen: ({ id }) => !!state.isOpenMap[id],
+    renderPopupItem: (useOption: iPopupUseOption, content: RenderNode) => {
+      const option = findOption.value.id2option[useOption.id];
+      return !!option ? (<PopupItem option={option} key={option.id}>{content}</PopupItem>) : null;
+    },
+    getParentOptions: (option) => {
+      const parentOptions: iPopupOption[] = [];
+      let parentOption = !option.parentId ? null : findOption.value.id2option[option.parentId];
+      while (!!parentOption) {
+        parentOptions.push(parentOption);
+        parentOption = !parentOption.parentId ? null : findOption.value.id2option[parentOption.parentId];
+      }
+      return parentOptions;
+    },
+    getChildrenOptions: (option) => {
+      const childrenOptions: iPopupOption[] = [];
+      const iterateOptions = [option];
+
+      while (iterateOptions.length) {
+        const option = iterateOptions.shift()!;
+        const children = state.options.filter(i => i.parentId === option.id);
+        childrenOptions.push(...children);
+        iterateOptions.push(...children);
+      }
+
+      return childrenOptions;
+    },
+    clear: () => {state.options = [];},
+    /**
+     * 绝对定位打开一个popup
+     * @author  韦胜健
+     * @date    2023.5.21 12:56
+     */
+    absolute: (absoluteOption) => {
+
+      const { x, y, ...useOption } = absoluteOption;
+
+      const id = `abs_${x}_${y}`;
+
+      const reference = (() => {
+        const el = document.createElement('div');
+        el.style.position = 'fixed';
+        el.style.top = `${y}px`;
+        el.style.left = `${x}px`;
+        el.style.height = '1px';
+        el.style.width = '1px';
+        document.body.appendChild(el);
+        const eject = hooks.onPopupItemDestroy.use((option) => {
+          if (option.id === id) {
+            eject();
+            document.body.removeChild(el);
+          }
+        });
+        return el;
+      })();
+
+      return methods.show({
+        id,
+        reference,
+        ...useOption,
+      });
+    },
+  };
+
+  /**
+   * 父manager
+   * @author  韦胜健
+   * @date    2023/5/16 17:18
+   */
+  const parent = PopupManager.inject();
+
+  const render = () => state.options.filter(i => !i.customRenderPopupItem).map(option => (<PopupItem option={option} key={option.id}/>));
+
+  const manager: iPopupManager = { state, hooks, id, parent, methods, closeTimer, render };
+
+  hooks.onPopupItemShow.use((option) => {
+    state.isShowMap = { ...state.isShowMap, [option.id]: true };
+    option.onShow?.();
+  });
+  hooks.onPopupItemHide.use((option) => {
+    state.isShowMap = { ...state.isShowMap, [option.id]: false };
+    option.onHide?.();
+  });
+  hooks.onPopupItemOpen.use((option) => {
+    state.isOpenMap = { ...state.isOpenMap, [option.id]: true };
+    option.onOpen?.();
+  });
+  hooks.onPopupItemClose.use((option) => {
+    state.isOpenMap = { ...state.isOpenMap, [option.id]: false };
+    option.onClose?.();
+    if (option.destroyOnClose) {
+      methods.remove(option.id);
+    }
+  });
+
+  /*---------------------------------------trigger-------------------------------------------*/
+
+  /**
+   * 初始化各个popup-item的trigger处理动作
+   * @author  韦胜健
+   * @date    2023/5/16 17:18
+   */
+
+  useManagerTriggerClickOutside(manager);
+  useManagerTriggerClick(manager);
+  useManagerTriggerHover(manager);
+  useManagerTriggerContextmenu(manager);
+  useManagerTriggerFocus(manager);
+
+  /*---------------------------------------context-------------------------------------------*/
+
+  PopupManager.provide(manager);
+
+  PopupManager.add(manager);
+
+  onBeforeUnmount(() => {PopupManager.remove(manager);});
+
+  return manager;
+}
+
+export function useApplicationPopup({ getSize }: { getSize: () => typeof ThemeSize.TYPE }) {
+  const manager = usePopupManager({ getSize });
+
+  /**
+   * 默认情况下通过ApplicationHooks.onRender降popup-item渲染到application下
+   * @author  韦胜健
+   * @date    2023/5/16 17:19
+   */
+  onBeforeUnmount(
+    ApplicationHooks.onRender.use({
+      processor: ({ list, render }) => {list.push({ render, key: 'popup-manager', seq: 2 });},
+      render: manager.render,
+    })
+  );
+
+  return manager;
+}
+
+/**
+ * 管理多个PopupManager，以便于usePopper能够取到有效的manager实例
+ * @author  韦胜健
+ * @date    2023/5/16 17:20
+ */
+export const PopupManager = (() => {
+
+  const POPUP_MANAGER_PROVIDER = getComponentCls('@@POPUP_MANAGER_PROVIDER');
+
+  const managers: iPopupManager[] = [];
+
+  const add = (manager: iPopupManager) => {
+    const index = managers.findIndex(i => i.id === manager.id);
+    index === -1 && managers.push(manager);
+  };
+
+  const remove = (manager: iPopupManager) => {
+    const index = managers.findIndex(i => i.id === manager.id);
+    index > -1 && (managers.splice(index, 1));
+  };
+
+  const get = (): iPopupManager => {
+    const rootManager = managers.find(i => !i.parent);
+    if (!rootManager) {
+      throw new Error('请先初始化PopupManager');
+    }
+    return rootManager;
+  };
+
+  const use = () => {
+    const manager = _inject();
+    return manager || get();
+  };
+
+  const _provide = (manager: iPopupManager) => {
+    provide(POPUP_MANAGER_PROVIDER, manager);
+  };
+  const _inject = () => {
+    return inject<iPopupManager | null>(POPUP_MANAGER_PROVIDER, null);
+  };
+
+  return { managers, add, remove, provide: _provide, inject: _inject, get, use };
+})();

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

@@ -1,5 +1,5 @@
-import {PopupManager} from "../usePopupManager";
-
-export function closeAllPopup() {
-  PopupManager.managers.forEach(i => i.methods.clear());
-}
+import {PopupManager} from "../usePopupManager";
+
+export function closeAllPopup() {
+  PopupManager.managers.forEach(i => i.methods.clear());
+}

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

@@ -1,5 +1,5 @@
-import {iPopupEditorUseOption} from "../../usePopupEditor";
-
-export function createPopupAttrsGetter(fn: () => iPopupEditorUseOption) {
-  return fn;
-}
+import {iPopupEditorUseOption} from "../../usePopupEditor";
+
+export function createPopupAttrsGetter(fn: () => iPopupEditorUseOption) {
+  return fn;
+}