plain-design 1.0.0-beta.3 → 1.0.0-beta.5

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

@@ -1,235 +1,235 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {createCounter} from "plain-utils/utils/createCounter";
-import {getComponentCls, RenderNode, SimpleFunction} from "plain-design-composition";
-import {iPopupManagerHooks} from "./createPopupManagerHooks";
-import {iElementRect} from "../../../utils/getRowEl";
-import {ThemeSize, ThemeStatus} from "../../../uses/useStyle";
-import {createProvider} from "../../../utils/createProvider";
-
-/**
- * direction
- * @author  韦胜健
- * @date    2023.5.13 22:11
- */
-export const ePopupDirection = createEnum(['top', 'bottom', 'left', 'right'] as const);
-export type iPopupDirection = typeof ePopupDirection.TYPE
-
-/**
- * 对齐位置
- * @author  韦胜健
- * @date    2023.5.13 21:57
- */
-export const ePopupAlign = createEnum(['start', 'center', 'end'] as const);
-export type iPopupAlign = typeof ePopupAlign.TYPE
-
-/**
- * placement
- * @author  韦胜健
- * @date    2023.5.13 22:11
- */
-type _1<A = iPopupAlign, D = iPopupDirection> = D extends iPopupDirection ? D | (A extends iPopupAlign ? `${D}-${A}` : never) : never
-export type iPopupPlacement = _1
-
-/**
- * trigger
- * @author  韦胜健
- * @date    2023.5.13 22:11
- */
-export const ePopupTrigger = createEnum(['click', 'hover', 'focus', 'contextmenu', 'manual'] as const);
-export type iPopupTrigger = typeof ePopupTrigger.TYPE
-
-/**
- * animation
- * @author  韦胜健
- * @date    2023.5.13 22:11
- */
-export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide'] as const);
-export type iPopupAnimation = typeof ePopupAnimation.TYPE
-
-/*---------------------------------------popup utils-------------------------------------------*/
-
-export const nextPopupId = createCounter(getComponentCls('popup'));
-
-export const nextPopupType = createCounter(getComponentCls('popup_type'));
-
-export const nextPopupManagerId = createCounter(getComponentCls('popup_manager'));
-
-/*---------------------------------------option-------------------------------------------*/
-
-export interface iPopupDefaultOption {
-  type: string,                               // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
-  placement: iPopupPlacement,                 // 定位
-  trigger: iPopupTrigger,                     // 触发类型
-  animation: iPopupAnimation,                 // 动画类型
-  destroyOnClose: boolean,                    // 关闭的时候销毁popup
-  to: string,                                 // 挂载到某个dom节点下
-  offset: number,                             // 在direction方向上的距离
-  offsetAlign: number,                        // 在align方向上的偏移距离
-  autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction
-  size: typeof ThemeSize.TYPE,                // popup内容尺寸
-  arrowSize: number,                          // 箭头尺寸，为0则不渲染箭头
-  arrowScale: number,                         // 箭头缩放比例
-  refreshOnScroll: boolean,                   // 是否在reference的父节点滚动的情况下自动刷新定位
-  hideOnScroll: boolean,                      // 是否在reference的父节点滚动的情况下自动关闭
-  interactive: boolean,                       // 仅hover触发类型下有效，是否可以在popup内容区域交互，为false则当鼠标进入popup内容区域时仍会关闭popup
-  hideOnClickReference: boolean,              // 是否在点击reference的时候关闭popup（仅hover，contextmenu触发类型的情况下有效）
-  toggleOnClickReference: boolean,            // 是否在点击reference的时候自动切换隐藏/显示，否则的话点击reference 会一直显示，仅trigger为click下有效
-}
-
-export interface iPopupCustomOption {
-  id: string,                                 // 唯一标识
-  reference: HTMLElement,                     // 目标元素
-  render: () => RenderNode,                   // 渲染内容
-
-  sizeEqual?: boolean,                        // 是否在align方向上尺寸对其相等
-  stickyReference?: HTMLElement | null,       // sticky定位的元素
-  parentId?: string,                          // 父option的id
-  boundary?: iPopupBoundary,                  // 边界元素
-  noPadding?: boolean,                        // 去掉内边距
-  popperClass?: any,                          // 额外的class
-  externalClass?: any,                        // 额外的class
-  customRenderPopupItem?: boolean,            // 自定义渲染 popupItem
-  dark?: boolean,                             // 黑色主题
-  status?: typeof ThemeStatus.TYPE,           // 状态
-  noArrow?: boolean,                          // 禁用箭头
-  minWidth?: string | number,                 // 最小宽度
-  minHeight?: string | number,                // 最小高度
-  width?: string | number,                    // 固定宽度
-  height?: string | number,                   // 固定高度
-  noBackground?: boolean,                     // 禁用背景色
-  noTransition?: boolean,                     // 禁用过度动画
-  cover?: boolean,                            // 覆盖reference
-  noBorder?: boolean,                         // 无边框
-
-  onShow?: () => void,                        // 显示动作
-  onHide?: () => void,                        // 隐藏动作
-  onOpen?: () => void,                        // 已经完全显示
-  onClose?: () => void,                       // 已经完全关闭
-
-  beforeShow?: () => boolean | void,          // 显示之前
-  beforeHide?: () => boolean | void,          // 隐藏之前
-}
-
-/*边界类型*/
-export type iPopupBoundary = HTMLElement | string
-/*useOption类型，不带默认值*/
-export type iPopupUseOption = Partial<iPopupDefaultOption> & iPopupCustomOption
-/*popup最终的类型*/
-export type iPopupOption = iPopupDefaultOption & iPopupCustomOption & { useOption: iPopupUseOption }
-
-/*---------------------------------------manager-------------------------------------------*/
-
-export type iPopupManager = {
-  /*manager唯一标识*/
-  id: string,
-  /*内部状态*/
-  state: {
-    /*当前所有在运行的option*/
-    options: iPopupOption[],
-    /*保存显示的option的id*/
-    isShowMap: Record<string, boolean | undefined>,
-    /*保存完全打开的option的id*/
-    isOpenMap: Record<string, boolean | undefined>,
-  },
-  /*内部钩子*/
-  hooks: iPopupManagerHooks,
-  /*父manager*/
-  parent: iPopupManager | null,
-  /*暴露方法*/
-  methods: {
-    /*创建一个option，自动初始化其中的一些默认值*/
-    createOption: (option: iPopupUseOption) => iPopupOption,
-    /*显示一个*/
-    show: (option: iPopupUseOption) => { option: iPopupOption, hide: SimpleFunction },
-    /*绝对定位展示一个popper*/
-    absolute: (option: Omit<iPopupUseOption, 'id' | 'reference'> & { x: number, y: number }) => { option: iPopupOption, hide: SimpleFunction },
-    /*更新option*/
-    update: (option: iPopupUseOption) => void,
-    /*刷新popup的定位*/
-    refresh: (option: iPopupUseOption) => void,
-    /*隐藏popup，包括其子popup*/
-    hide: (id: string | string[]) => void,
-    /*隐藏popup自己*/
-    hideSelf: (id: string | string[]) => void,
-    /*直接移除一个popup*/
-    remove: (id: string | string[]) => void,
-    /*判断option对应的popup是否已经显示*/
-    isShow: (option: iPopupUseOption) => boolean,
-    /*判断option对应的popup是否已经完全打开*/
-    isOpen: (option: iPopupUseOption) => boolean,
-    /*获取option的所有父option*/
-    getParentOptions: (option: iPopupUseOption) => iPopupOption[],
-    /*获取option的所有子option*/
-    getChildrenOptions: (option: iPopupUseOption) => iPopupOption[],
-    /*单独渲染一个option，而不用manager来渲染这个popup-item，自定义单独渲染可以实现继承组件上下文的特性*/
-    renderPopupItem: (option: iPopupUseOption, content: RenderNode) => RenderNode,
-    /*清空所有popper*/
-    clear: () => void,
-  },
-  /*具体的渲染函数*/
-  render: () => RenderNode,
-  /*每种trigger的close定时器统一挂载到这里处理*/
-  closeTimer: Record<string, any>,
-}
-
-/*---------------------------------------refresh-------------------------------------------*/
-
-/**
- * 所有相关dom节点的引用
- * @author  韦胜健
- * @date    2023/5/16 17:07
- */
-export interface iPopupRefs {
-  directionReference: HTMLElement,
-  alignReference: HTMLElement,
-  boundary: HTMLElement | null,
-  popupEl: HTMLElement,
-  popupContent: HTMLElement,
-  popupArrow: HTMLElement | null,
-}
-
-/**
- * 在刷新定位期间的公共计算参数
- * @author  韦胜健
- * @date    2023/5/16 17:07
- */
-export interface iPopupRefreshParams {
-  option: iPopupOption,
-  transformLocation: boolean,
-  refs: iPopupRefs,
-}
-
-/**
- * 在刷新定位期间重新计算的参数
- * @author  韦胜健
- * @date    2023/5/16 17:07
- */
-export interface iPopupRefreshBuildParams extends iPopupRefreshParams {
-  rects: iPopupRects,
-  direction: iPopupDirection,
-  align: iPopupAlign,
-  isVertical: boolean,
-}
-
-/**
- * 所有相关dom节点的定位信息
- * @author  韦胜健
- * @date    2023/5/16 17:08
- */
-export interface iPopupRects {
-  directionReference: iElementRect,
-  alignReference: iElementRect,
-  boundary: iElementRect | null,
-  popupEl: iElementRect,
-  popupContent: iElementRect,
-  popupArrow: iElementRect | null,
-}
-
-/*---------------------------------------popup item-------------------------------------------*/
-
-export const PopupItemProvide = createProvider<{ option: { id: string } }>(getComponentCls('@@POPUP_ITEM_PROVIDER'));
-
-export function useParentPopupId() {
-  const popupItem = PopupItemProvide.inject(null);
-  return popupItem?.option.id;
-}
+import {createEnum} from "plain-utils/utils/createEnum";
+import {createCounter} from "plain-utils/utils/createCounter";
+import {getComponentCls, RenderNode, SimpleFunction} from "plain-design-composition";
+import {iPopupManagerHooks} from "./createPopupManagerHooks";
+import {iElementRect} from "../../../utils/getRowEl";
+import {ThemeSize, ThemeStatus} from "../../../uses/useStyle";
+import {createProvider} from "../../../utils/createProvider";
+
+/**
+ * direction
+ * @author  韦胜健
+ * @date    2023.5.13 22:11
+ */
+export const ePopupDirection = createEnum(['top', 'bottom', 'left', 'right'] as const);
+export type iPopupDirection = typeof ePopupDirection.TYPE
+
+/**
+ * 对齐位置
+ * @author  韦胜健
+ * @date    2023.5.13 21:57
+ */
+export const ePopupAlign = createEnum(['start', 'center', 'end'] as const);
+export type iPopupAlign = typeof ePopupAlign.TYPE
+
+/**
+ * placement
+ * @author  韦胜健
+ * @date    2023.5.13 22:11
+ */
+type _1<A = iPopupAlign, D = iPopupDirection> = D extends iPopupDirection ? D | (A extends iPopupAlign ? `${D}-${A}` : never) : never
+export type iPopupPlacement = _1
+
+/**
+ * trigger
+ * @author  韦胜健
+ * @date    2023.5.13 22:11
+ */
+export const ePopupTrigger = createEnum(['click', 'hover', 'focus', 'contextmenu', 'manual'] as const);
+export type iPopupTrigger = typeof ePopupTrigger.TYPE
+
+/**
+ * animation
+ * @author  韦胜健
+ * @date    2023.5.13 22:11
+ */
+export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide'] as const);
+export type iPopupAnimation = typeof ePopupAnimation.TYPE
+
+/*---------------------------------------popup utils-------------------------------------------*/
+
+export const nextPopupId = createCounter(getComponentCls('popup'));
+
+export const nextPopupType = createCounter(getComponentCls('popup_type'));
+
+export const nextPopupManagerId = createCounter(getComponentCls('popup_manager'));
+
+/*---------------------------------------option-------------------------------------------*/
+
+export interface iPopupDefaultOption {
+  type: string,                               // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
+  placement: iPopupPlacement,                 // 定位
+  trigger: iPopupTrigger,                     // 触发类型
+  animation: iPopupAnimation,                 // 动画类型
+  destroyOnClose: boolean,                    // 关闭的时候销毁popup
+  to: string,                                 // 挂载到某个dom节点下
+  offset: number,                             // 在direction方向上的距离
+  offsetAlign: number,                        // 在align方向上的偏移距离
+  autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction
+  size: typeof ThemeSize.TYPE,                // popup内容尺寸
+  arrowSize: number,                          // 箭头尺寸，为0则不渲染箭头
+  arrowScale: number,                         // 箭头缩放比例
+  refreshOnScroll: boolean,                   // 是否在reference的父节点滚动的情况下自动刷新定位
+  hideOnScroll: boolean,                      // 是否在reference的父节点滚动的情况下自动关闭
+  interactive: boolean,                       // 仅hover触发类型下有效，是否可以在popup内容区域交互，为false则当鼠标进入popup内容区域时仍会关闭popup
+  hideOnClickReference: boolean,              // 是否在点击reference的时候关闭popup（仅hover，contextmenu触发类型的情况下有效）
+  toggleOnClickReference: boolean,            // 是否在点击reference的时候自动切换隐藏/显示，否则的话点击reference 会一直显示，仅trigger为click下有效
+}
+
+export interface iPopupCustomOption {
+  id: string,                                 // 唯一标识
+  reference: HTMLElement,                     // 目标元素
+  render: () => RenderNode,                   // 渲染内容
+
+  sizeEqual?: boolean,                        // 是否在align方向上尺寸对其相等
+  stickyReference?: HTMLElement | null,       // sticky定位的元素
+  parentId?: string,                          // 父option的id
+  boundary?: iPopupBoundary,                  // 边界元素
+  noPadding?: boolean,                        // 去掉内边距
+  popperClass?: any,                          // 额外的class
+  externalClass?: any,                        // 额外的class
+  customRenderPopupItem?: boolean,            // 自定义渲染 popupItem
+  dark?: boolean,                             // 黑色主题
+  status?: typeof ThemeStatus.TYPE,           // 状态
+  noArrow?: boolean,                          // 禁用箭头
+  minWidth?: string | number,                 // 最小宽度
+  minHeight?: string | number,                // 最小高度
+  width?: string | number,                    // 固定宽度
+  height?: string | number,                   // 固定高度
+  noBackground?: boolean,                     // 禁用背景色
+  noTransition?: boolean,                     // 禁用过度动画
+  cover?: boolean,                            // 覆盖reference
+  noBorder?: boolean,                         // 无边框
+
+  onShow?: () => void,                        // 显示动作
+  onHide?: () => void,                        // 隐藏动作
+  onOpen?: () => void,                        // 已经完全显示
+  onClose?: () => void,                       // 已经完全关闭
+
+  beforeShow?: () => boolean | void,          // 显示之前
+  beforeHide?: () => boolean | void,          // 隐藏之前
+}
+
+/*边界类型*/
+export type iPopupBoundary = HTMLElement | string
+/*useOption类型，不带默认值*/
+export type iPopupUseOption = Partial<iPopupDefaultOption> & iPopupCustomOption
+/*popup最终的类型*/
+export type iPopupOption = iPopupDefaultOption & iPopupCustomOption & { useOption: iPopupUseOption }
+
+/*---------------------------------------manager-------------------------------------------*/
+
+export type iPopupManager = {
+  /*manager唯一标识*/
+  id: string,
+  /*内部状态*/
+  state: {
+    /*当前所有在运行的option*/
+    options: iPopupOption[],
+    /*保存显示的option的id*/
+    isShowMap: Record<string, boolean | undefined>,
+    /*保存完全打开的option的id*/
+    isOpenMap: Record<string, boolean | undefined>,
+  },
+  /*内部钩子*/
+  hooks: iPopupManagerHooks,
+  /*父manager*/
+  parent: iPopupManager | null,
+  /*暴露方法*/
+  methods: {
+    /*创建一个option，自动初始化其中的一些默认值*/
+    createOption: (option: iPopupUseOption) => iPopupOption,
+    /*显示一个*/
+    show: (option: iPopupUseOption) => { option: iPopupOption, hide: SimpleFunction },
+    /*绝对定位展示一个popper*/
+    absolute: (option: Omit<iPopupUseOption, 'id' | 'reference'> & { x: number, y: number }) => { option: iPopupOption, hide: SimpleFunction },
+    /*更新option*/
+    update: (option: iPopupUseOption) => void,
+    /*刷新popup的定位*/
+    refresh: (option: iPopupUseOption) => void,
+    /*隐藏popup，包括其子popup*/
+    hide: (id: string | string[]) => void,
+    /*隐藏popup自己*/
+    hideSelf: (id: string | string[]) => void,
+    /*直接移除一个popup*/
+    remove: (id: string | string[]) => void,
+    /*判断option对应的popup是否已经显示*/
+    isShow: (option: iPopupUseOption) => boolean,
+    /*判断option对应的popup是否已经完全打开*/
+    isOpen: (option: iPopupUseOption) => boolean,
+    /*获取option的所有父option*/
+    getParentOptions: (option: iPopupUseOption) => iPopupOption[],
+    /*获取option的所有子option*/
+    getChildrenOptions: (option: iPopupUseOption) => iPopupOption[],
+    /*单独渲染一个option，而不用manager来渲染这个popup-item，自定义单独渲染可以实现继承组件上下文的特性*/
+    renderPopupItem: (option: iPopupUseOption, content: RenderNode) => RenderNode,
+    /*清空所有popper*/
+    clear: () => void,
+  },
+  /*具体的渲染函数*/
+  render: () => RenderNode,
+  /*每种trigger的close定时器统一挂载到这里处理*/
+  closeTimer: Record<string, any>,
+}
+
+/*---------------------------------------refresh-------------------------------------------*/
+
+/**
+ * 所有相关dom节点的引用
+ * @author  韦胜健
+ * @date    2023/5/16 17:07
+ */
+export interface iPopupRefs {
+  directionReference: HTMLElement,
+  alignReference: HTMLElement,
+  boundary: HTMLElement | null,
+  popupEl: HTMLElement,
+  popupContent: HTMLElement,
+  popupArrow: HTMLElement | null,
+}
+
+/**
+ * 在刷新定位期间的公共计算参数
+ * @author  韦胜健
+ * @date    2023/5/16 17:07
+ */
+export interface iPopupRefreshParams {
+  option: iPopupOption,
+  transformLocation: boolean,
+  refs: iPopupRefs,
+}
+
+/**
+ * 在刷新定位期间重新计算的参数
+ * @author  韦胜健
+ * @date    2023/5/16 17:07
+ */
+export interface iPopupRefreshBuildParams extends iPopupRefreshParams {
+  rects: iPopupRects,
+  direction: iPopupDirection,
+  align: iPopupAlign,
+  isVertical: boolean,
+}
+
+/**
+ * 所有相关dom节点的定位信息
+ * @author  韦胜健
+ * @date    2023/5/16 17:08
+ */
+export interface iPopupRects {
+  directionReference: iElementRect,
+  alignReference: iElementRect,
+  boundary: iElementRect | null,
+  popupEl: iElementRect,
+  popupContent: iElementRect,
+  popupArrow: iElementRect | null,
+}
+
+/*---------------------------------------popup item-------------------------------------------*/
+
+export const PopupItemProvide = createProvider<{ option: { id: string } }>(getComponentCls('@@POPUP_ITEM_PROVIDER'));
+
+export function useParentPopupId() {
+  const popupItem = PopupItemProvide.inject(null);
+  return popupItem?.option.id;
+}

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

@@ -1,7 +1,7 @@
-export function stopPopup(e: any) {
-  e.__stop_poppeer_ = true;
-}
-
-export function isStopPopup(e: any) {
-  return !!e.__stop_poppeer_;
-}
+export function stopPopup(e: any) {
+  e.__stop_poppeer_ = true;
+}
+
+export function isStopPopup(e: any) {
+  return !!e.__stop_poppeer_;
+}