plain-design 1.0.0-beta.147 → 1.0.0-beta.149

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

@@ -1,65 +1,65 @@
-import {createHooks, createSyncHooks} from "@peryl/react-compose";
-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>
+import {createHooks, createSyncHooks} from "@peryl/react-compose";
+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

@@ -1,16 +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,
-  };
-}
+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

@@ -1,91 +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;
-}
+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

@@ -1,25 +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;
-}
+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

@@ -1,24 +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),
-  };
-}
+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

@@ -1,10 +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]();
-}
+/**
+ * 处理对象的方向函数
+ * @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

@@ -1,11 +1,11 @@
-import {toArray} from "@peryl/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>);
-}
+import {toArray} from "@peryl/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>);
+}