plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,57 @@
+import {PopupManager} from "./usePopupManager";
+import {iPopupManager, iPopupUseOption, nextPopupId} from "./utils/popup.utils";
+import {onBeforeUnmount, SimpleFunction} from "plain-design-composition";
+
+export function usePopup() {
+  const popupId = nextPopupId();
+  const popupManager = PopupManager.use();
+  const $popup = _createPopup(popupManager);
+  onBeforeUnmount(() => $popup.dispose());
+  return { $popup, popupId, dispose: $popup.dispose };
+}
+
+export function createPopup(onBeforeUnmount?: (handler: SimpleFunction) => void) {
+  const popupId = nextPopupId();
+  const popupManager = PopupManager.get();
+  const $popup = _createPopup(popupManager);
+  onBeforeUnmount?.(() => $popup.dispose());
+  return { $popup, popupId, dispose: $popup.dispose };
+}
+
+export function _createPopup(popupManager: iPopupManager) {
+
+  const idMap = {} as Record<string, boolean>;
+
+  const show: typeof popupManager.methods.show = (useOption) => {
+    const data = popupManager.methods.show(useOption);
+    idMap[data.option.id] = true;
+    return data;
+  };
+  const toggle = (option: iPopupUseOption) => {
+    if (popupManager.methods.isShow(option)) {
+      $popup.hide(option.id);
+    } else {
+      show(option);
+    }
+  };
+  const absolute: typeof popupManager.methods.absolute = (absluteOption) => {
+    const data = popupManager.methods.absolute(absluteOption);
+    idMap[data.option.id] = true;
+    return data;
+  };
+  const dispose = () => {Object.keys(idMap).forEach(id => {popupManager.methods.remove(id);});};
+
+  const $popup = {
+    manager: popupManager,
+    hide: popupManager.methods.hide,
+    update: popupManager.methods.update,
+    refresh: popupManager.methods.refresh,
+    show,
+    toggle,
+    dispose,
+    absolute,
+  };
+  return $popup;
+}
+
+export type iPopupService = ReturnType<typeof usePopup>

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

@@ -0,0 +1,313 @@
+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,
+        to: 'body',
+        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

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

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

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

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

@@ -0,0 +1,65 @@
+import {createHooks, createSyncHooks} from "plain-design-composition";
+import {iPopupOption, iPopupUseOption} from "./popup.utils";
+
+/**
+ * popup manager的内部事件钩子
+ * @author  韦胜健
+ * @date    2023/5/16 16:58
+ */
+export function createPopupManagerHooks() {
+  return {
+    /*popup根节点初始化*/
+    onGetPopupElements: createSyncHooks<(getters: (() => { option: iPopupOption, popupEl: HTMLDivElement | null | undefined })[]) => void>(),
+
+    /*通知popup-item显示*/
+    onCallShowPopup: createHooks<(option: iPopupOption) => void>(),
+    /*通知popup-item隐藏*/
+    onCallHidePopup: createHooks<(idMap: Record<string, true | undefined>) => void>(),
+    /*通知popup-item更新option*/
+    onCallUpdatePopup: createHooks<(option: iPopupOption) => void>(),
+    /*通知popup-item刷新定位*/
+    onCallRefreshPopup: createHooks<(option: iPopupUseOption) => void>(),
+
+    /*popup-item显示*/
+    onPopupItemShow: createHooks<(option: iPopupOption) => void>(),
+    /*popup-item隐藏*/
+    onPopupItemHide: createHooks<(option: iPopupOption) => void>(),
+    /*popup-item完全开启*/
+    onPopupItemOpen: createHooks<(option: iPopupOption) => void>(),
+    /*popup-item完全关闭*/
+    onPopupItemClose: createHooks<(option: iPopupOption) => void>(),
+    /*popup-item销毁*/
+    onPopupItemDestroy: createHooks<(option: iPopupOption) => void>(),
+
+    /*点击了reference*/
+    onTriggerReferenceClick: createSyncHooks<(data: { e: MouseEvent, option: iPopupUseOption }) => void>(),
+    /*鼠标摁下reference*/
+    onTriggerReferenceMousedown: createSyncHooks<(data: { e: MouseEvent, option: iPopupUseOption }) => void>(),
+    /*鼠标右击reference*/
+    onTriggerReferenceContextmenu: createSyncHooks<(data: { e: MouseEvent, option: iPopupUseOption }) => void>(),
+    /*reference获取焦点*/
+    onTriggerReferenceFocus: createSyncHooks<(data: { e: FocusEvent, option: iPopupUseOption }) => void>(),
+    /*reference失去焦点*/
+    onTriggerReferenceBlur: createSyncHooks<(data: { e: FocusEvent, option: iPopupUseOption }) => void>(),
+    /*鼠标进入reference*/
+    onTriggerReferenceEnter: createSyncHooks<(data: { e: MouseEvent, option: iPopupUseOption }) => void>(),
+    /*鼠标离开reference*/
+    onTriggerReferenceLeave: createSyncHooks<(data: { e: MouseEvent, option: iPopupUseOption }) => void>(),
+    /*鼠标在reference上移动*/
+    onTriggerReferenceMousemove: createSyncHooks<(data: { e: MouseEvent, option: iPopupUseOption }) => void>(),
+
+    /*点击popup区域*/
+    onTriggerPopupClick: createSyncHooks<(data: { e: MouseEvent, option: iPopupOption }) => void>(),
+    /*鼠标进入popup*/
+    onTriggerPopupEnter: createSyncHooks<(data: { e: MouseEvent, option: iPopupOption }) => void>(),
+    /*鼠标离开popup*/
+    onTriggerPopupLeave: createSyncHooks<(data: { e: MouseEvent, option: iPopupOption }) => void>(),
+    /*鼠标在popup区域移动*/
+    onTriggerPopupMousemove: createSyncHooks<(data: { e: MouseEvent, option: iPopupOption }) => void>(),
+
+    /*点击了某个popup的外部区域*/
+    onTriggerOutsideClick: createSyncHooks<(data: { e: MouseEvent, option: iPopupOption }) => void>(),
+  };
+}
+
+export type iPopupManagerHooks = ReturnType<typeof createPopupManagerHooks>

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

@@ -0,0 +1,16 @@
+import {iPopupAlign, iPopupDirection, iPopupPlacement} from "./popup.utils";
+
+/**
+ * 解析placement
+ * @author  韦胜健
+ * @date    2022/4/6 10:43
+ */
+export function decodePlacement(placement?: iPopupPlacement | null) {
+  let placementArgs = (placement || 'bottom-start')?.split('-');
+  let direction: iPopupDirection = placementArgs[0] as any;
+  let align: iPopupAlign = placementArgs[1] as any || 'center';
+  const isVertical = direction === 'top' || direction === 'bottom';
+  return {
+    direction, align, isVertical,
+  };
+}

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

@@ -0,0 +1,91 @@
+import {iPopupDirection, iPopupOption, iPopupRects} from "./popup.utils";
+import {handleDirection} from "./handleDirection";
+
+/**
+ * 获取有效的方向。当boundary空间不够时，尝试切换direction是否能够得到足够的空间
+ * @author  韦胜健
+ * @date    2023/5/16 17:00
+ */
+export function getAvailableDirection(
+  {
+    direction,
+    rects,
+    option,
+  }: {
+    direction: iPopupDirection,
+    rects: iPopupRects,
+    option: iPopupOption,
+  }
+) {
+
+  if (!rects.boundary) {return direction;}
+
+  const args = { rects, option };
+
+  return handleDirection<iPopupDirection>(direction, {
+    top: () => {
+      if (isTopAvailable(args)) {
+        return 'top';
+      } else {
+        return isBottomAvailable(args) ? 'bottom' : 'top';
+      }
+    },
+    bottom: () => {
+      if (isBottomAvailable(args)) {
+        return 'bottom';
+      } else {
+        return isTopAvailable(args) ? 'top' : 'bottom';
+      }
+    },
+    left: () => {
+      if (isLeftAvailable(args)) {
+        return 'left';
+      } else {
+        return isRightAvailable(args) ? 'right' : 'left';
+      }
+    },
+    right: () => {
+      if (isRightAvailable(args)) {
+        return 'right';
+      } else {
+        return isLeftAvailable(args) ? 'left' : 'right';
+      }
+    },
+  });
+}
+
+/**
+ * 是否可以放在上边
+ * @author  韦胜健
+ * @date    2022/4/4 17:48
+ */
+function isTopAvailable({ rects, option }: { rects: iPopupRects, option: iPopupOption }): boolean {
+  return (rects.directionReference.top - rects.popupEl.height - option.offset) >= rects.boundary!.top;
+}
+
+/**
+ * 是否可以放在下边
+ * @author  韦胜健
+ * @date    2022/4/4 17:48
+ */
+function isBottomAvailable({ rects, option }: { rects: iPopupRects, option: iPopupOption }): boolean {
+  return (rects.directionReference.top + rects.directionReference.height + rects.popupEl.height + option.offset) <= rects.boundary!.top + rects.boundary!.height;
+}
+
+/**
+ * 是否可以放在左边
+ * @author  韦胜健
+ * @date    2022/4/4 17:48
+ */
+function isLeftAvailable({ rects, option }: { rects: iPopupRects, option: iPopupOption }): boolean {
+  return (rects.directionReference.left - rects.popupEl.width - option.offset) >= rects.boundary!.left;
+}
+
+/**
+ * 是否可以放在左边
+ * @author  韦胜健
+ * @date    2022/4/4 17:48
+ */
+function isRightAvailable({ rects, option }: { rects: iPopupRects, option: iPopupOption }): boolean {
+  return (rects.directionReference.left + rects.directionReference.width + rects.popupEl.width + option.offset) <= rects.boundary!.left + rects.boundary!.width;
+}

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

@@ -0,0 +1,25 @@
+import {iPopupBoundary} from "./popup.utils";
+
+const maps: Record<string, undefined | (() => HTMLElement)> = {
+  /*整个窗口*/
+  'window': () => window as any,
+  /*整个网页文档，这个是最理想的边界，当元素超过文档高度的时候才自动切换方向，而不是超过浏览器窗口就开始自动切换方向*/
+  'body': () => document.body,
+  /*浏览器窗口*/
+  'documentElement': () => document.documentElement,
+};
+
+/**
+ * 获取边界元素
+ * @author  韦胜健
+ * @date    2022/4/4 17:19
+ */
+export function getBoundary(boundary: iPopupBoundary | undefined | null): HTMLElement | null {
+  if (boundary == null) {return null;}
+  if (typeof boundary === "string") {
+    const result = maps[boundary];
+    if (!!result) {return result();}
+    return document.body.querySelector(boundary);
+  }
+  return boundary;
+}

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

@@ -0,0 +1,24 @@
+import {iPopupRects, iPopupRefs} from "./popup.utils";
+import {getElementRect} from "../../../utils/getElementRect";
+
+/**
+ * 获取popup在计算定位过程中的所有dom对象定位信息
+ * @author  韦胜健
+ * @date    2023/5/16 17:01
+ */
+export function getRects(refs: iPopupRefs): iPopupRects {
+  return {
+    /*popup在direction上定位的目标元素*/
+    directionReference: getElementRect(refs.directionReference),
+    /*popup在align上定位的目标元素*/
+    alignReference: getElementRect(refs.alignReference),
+    /*边界元素*/
+    boundary: !refs.boundary ? null : getElementRect(refs.boundary),
+    /*popup根节点元素*/
+    popupEl: getElementRect(refs.popupEl),
+    /*popup内部content节点元素*/
+    popupContent: getElementRect(refs.popupContent),
+    /*popup内部arrow节点元素*/
+    popupArrow: !refs.popupArrow ? null : getElementRect(refs.popupArrow),
+  };
+}

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

@@ -0,0 +1,10 @@
+/**
+ * 处理对象的方向函数
+ * @author  韦胜健
+ * @date    2022/4/4 17:52
+ */
+import {iPopupDirection} from "./popup.utils";
+
+export function handleDirection<T = void>(direction: iPopupDirection, handlers: Record<iPopupDirection, () => T>): T {
+  return handlers[direction]();
+}

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

@@ -0,0 +1,11 @@
+import {toArray} from "plain-utils/utils/toArray";
+
+export function ids2map(id: string | string[]): Record<string, true | undefined> {
+  if (typeof id === "string") {
+    return { [id]: true };
+  }
+  return toArray(id).reduce((prev, i) => {
+    prev[i] = true;
+    return prev;
+  }, {} as Record<string, true | undefined>);
+}