plain-design 1.0.0-beta.90 → 1.0.0-beta.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.90",
+  "version": "1.0.0-beta.92",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Popup/index.tsx

@@ -51,6 +51,10 @@ export const Popup = designComponent({
     noArrow: { type: Boolean, default: null },                                            // 是否去掉箭头
     minWidth: { type: [Number, String] },                                                 // 最小宽度
     minHeight: { type: [Number, String] },                                                // 最小高度
+    maxTop: { type: [Number, Function] as PropType<iPopupUseOption['maxTop']> },          // 最大top
+    minTop: { type: [Number, Function] as PropType<iPopupUseOption['minTop']> },          // 最小top
+    maxLeft: { type: [Number, Function] as PropType<iPopupUseOption['maxLeft']> },        // 最大left
+    minLeft: { type: [Number, Function] as PropType<iPopupUseOption['minLeft']> },        // 最小left
     noBackground: { type: Boolean },                                                      // 透明背景色
     cover: { type: Boolean },                                                             // 覆盖reference
     noBorder: { type: Boolean },                                                          // 无边框
@@ -247,6 +251,10 @@ export const Popup = designComponent({
         noArrow: props.noArrow,
         minHeight: props.minHeight,
         minWidth: props.minWidth,
+        maxTop: props.maxTop,
+        minTop: props.minTop,
+        maxLeft: props.maxLeft,
+        minLeft: props.minLeft,
         noBackground: props.noBackground,
         cover: props.cover,
         noBorder: props.noBorder,

package/src/packages/components/usePopup/refresh/MaxMinTopLeft.ts

@@ -0,0 +1,38 @@
+import {iPopupRefreshBuildParams} from "../utils/popup.utils";
+
+export function MaxMinTopLeft(
+  {
+    top,
+    left,
+    buildParams,
+    option,
+  }: {
+    top: number,
+    left: number,
+    buildParams: iPopupRefreshBuildParams,
+    option: {
+      maxTop?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+      minTop?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+      maxLeft?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+      minLeft?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+    }
+  }
+): { top: number, left: number } {
+  if (option.maxTop != null) {
+    const maxTop = typeof option.maxTop === "function" ? option.maxTop(buildParams) : option.maxTop;
+    if (top > maxTop) {top = maxTop;}
+  }
+  if (option.minTop != null) {
+    const minTop = typeof option.minTop === "function" ? option.minTop(buildParams) : option.minTop;
+    if (top < minTop) {top = minTop;}
+  }
+  if (option.maxLeft != null) {
+    const maxLeft = typeof option.maxLeft === "function" ? option.maxLeft(buildParams) : option.maxLeft;
+    if (left > maxLeft) {left = maxLeft;}
+  }
+  if (option.minLeft != null) {
+    const minLeft = typeof option.minLeft === "function" ? option.minLeft(buildParams) : option.minLeft;
+    if (left < minLeft) {left = minLeft;}
+  }
+  return { top, left };
+}

package/src/packages/components/usePopup/refresh/calcPosition.ts

@@ -1,5 +1,6 @@
 import {iPopupRefreshBuildParams} from "../utils/popup.utils";
 import {handleDirection} from "../utils/handleDirection";
+import {MaxMinTopLeft} from "./MaxMinTopLeft";
 
 /**
  * 计算popup根节点定位信息
@@ -7,13 +8,15 @@ import {handleDirection} from "../utils/handleDirection";
  * @date    2023/5/16 16:16
  */
 export function calcPosition(
-  {
+  buildParams: iPopupRefreshBuildParams
+): { top: number, left: number } {
+
+  const {
     direction,
     align,
     rects,
     option
-  }: iPopupRefreshBuildParams
-) {
+  } = buildParams;
 
   let top: number | null = null;
   let left: number | null = null;
@@ -81,5 +84,5 @@ export function calcPosition(
     if (left > maxLeft) {left = maxLeft;}
   }
 
-  return { top: top!, left: left! };
+  return MaxMinTopLeft({ top: top!, left: left!, buildParams, option, });
 }

package/src/packages/components/usePopup/refresh/refreshPopup.ts

@@ -5,6 +5,7 @@ import {calcPosition} from "./calcPosition";
 import {applyPosition} from "./applyPosition";
 import {refreshArrow} from "./refreshArrow";
 import {getRects} from "../utils/getRects";
+import {MaxMinTopLeft} from "./MaxMinTopLeft";
 
 /**
  * 刷新popup定位
@@ -64,7 +65,8 @@ export function refreshPopup(params: iPopupRefreshParams) {
     buildParams.rects = getRects(refs);
     refreshArrow(buildParams);
   } else {
-    const { top, left, height, width } = rects.alignReference;
+    const { top: _top, left: _left, height, width } = rects.alignReference;
+    const { top, left } = MaxMinTopLeft({ top: _top!, left: _left!, buildParams, option, });
     Object.assign(refs.popupEl.style, {
       ...params.transformLocation ? { transform: `translate3d(${left}px,${top}px,0)` } : { top: `${top}px`, left: `${left}px`, },
       height: `${height}px`,

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

@@ -97,6 +97,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