@canvas-components/react-components 0.3.6 → 0.3.7

package/dist/index.d.cts

@@ -565,6 +565,8 @@ interface PopupAnchorRect {
     height: number;
 }
 interface ReactPopupProps {
+    /** 将面板高度限制在视口内，超出部分在面板内部滚动。 */
+    constrainHeight?: boolean;
     /**
      * 是否显示弹层。
      */

package/dist/index.d.ts

@@ -565,6 +565,8 @@ interface PopupAnchorRect {
     height: number;
 }
 interface ReactPopupProps {
+    /** 将面板高度限制在视口内，超出部分在面板内部滚动。 */
+    constrainHeight?: boolean;
     /**
      * 是否显示弹层。
      */

package/dist/index.js

@@ -298,6 +298,7 @@ function ReactPopup(props) {
     style,
     surfaceClassName,
     surfaceStyle,
+    constrainHeight = false,
     zIndex = 1200
   } = props;
   const { scale: contentScale } = useReactContentScale();
@@ -319,6 +320,7 @@ function ReactPopup(props) {
         return;
       }
       const nextPosition = resolvePopupPosition({
+        constrainHeight,
         anchor: nextAnchor,
         contentScale,
         matchAnchorWidth,
@@ -328,7 +330,7 @@ function ReactPopup(props) {
         popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
       });
       setPosition((prev) => {
-        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
+        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
           return prev;
         }
         return nextPosition;
@@ -355,6 +357,7 @@ function ReactPopup(props) {
     anchorRect,
     anchorRef,
     contentScale,
+    constrainHeight,
     matchAnchorWidth,
     minWidth,
     offset,
@@ -371,6 +374,7 @@ function ReactPopup(props) {
         return;
       }
       const nextPosition = resolvePopupPosition({
+        constrainHeight,
         anchor: nextAnchor,
         contentScale,
         matchAnchorWidth,
@@ -380,7 +384,7 @@ function ReactPopup(props) {
         popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
       });
       setPosition((prev) => {
-        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
+        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
           return prev;
         }
         return nextPosition;
@@ -398,6 +402,7 @@ function ReactPopup(props) {
     anchorRect,
     anchorRef,
     contentScale,
+    constrainHeight,
     matchAnchorWidth,
     minWidth,
     offset,
@@ -463,7 +468,7 @@ function ReactPopup(props) {
               transition.className,
               surfaceClassName
             ),
-            style: surfaceStyle,
+            style: resolvePopupSurfaceStyle(surfaceStyle, position.style.maxHeight),
             children
           }
         )
@@ -492,7 +497,8 @@ function resolvePopupPosition(params) {
     matchAnchorWidth ? anchor.width : 0
   );
   const popupWidth = preferredVisualWidth;
-  const popupHeight = popupRect?.height ?? 0;
+  const maxVisualHeight = Math.max(0, viewportHeight - margin * 2);
+  const popupHeight = params.constrainHeight ? Math.min(popupRect?.height ?? 0, maxVisualHeight) : popupRect?.height ?? 0;
   const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
   const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
   const preferredTop = resolveRawTop({
@@ -537,6 +543,7 @@ function resolvePopupPosition(params) {
       vertical: resolvedVertical
     }),
     style: {
+      ...params.constrainHeight ? { maxHeight: toContentLayoutSize(maxVisualHeight, contentScale) } : {},
       left,
       top,
       width: matchAnchorWidth ? layoutAnchorWidth : void 0,
@@ -544,6 +551,19 @@ function resolvePopupPosition(params) {
     }
   };
 }
+function resolvePopupSurfaceStyle(style, viewportMaxHeight) {
+  if (typeof viewportMaxHeight !== "number") return style;
+  const custom = style?.maxHeight;
+  const maxHeight = typeof custom === "number" ? Math.min(custom, viewportMaxHeight) : typeof custom === "string" && custom !== "none" ? `min(${custom}, ${viewportMaxHeight}px)` : viewportMaxHeight;
+  return {
+    ...style,
+    boxSizing: "border-box",
+    minHeight: 0,
+    maxHeight,
+    overflowY: "auto",
+    overscrollBehaviorY: "contain"
+  };
+}
 function resolvePlacement(params) {
   const { horizontal, isHorizontalPlacement, vertical } = params;
   if (isHorizontalPlacement) {