feat: add inWindow arg for calculate position

DevCloudFE · Sep 15, 2022 · f3e554c · f3e554c
1 parent 8a418f1
commit f3e554c
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 38 deletions.
diff --git a/packages/platform/src/app/routes/layout/header/Notification.tsx b/packages/platform/src/app/routes/layout/header/Notification.tsx
@@ -69,6 +69,7 @@ export function AppNotification(): JSX.Element | null {
       dTrigger="click"
       dPlacement="bottom-right"
       dArrow={false}
+      dInWindow
       afterVisibleChange={(visible) => {
         if (visible && tabsRef.current) {
           tabsRef.current.updateIndicator();

diff --git a/packages/ui/src/components/_date-input/DateInput.tsx b/packages/ui/src/components/_date-input/DateInput.tsx
@@ -130,7 +130,14 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
     if (dVisible) {
       if (boxRef.current && popupRef.current) {
         const { width, height } = getOriginalSize(popupRef.current);
-        const { top, left, transformOrigin } = getVerticalSidePosition(boxRef.current, { width, height }, dPlacement, 8);
+        const { top, left, transformOrigin } = getVerticalSidePosition(
+          boxRef.current,
+          { width, height },
+          {
+            placement: dPlacement,
+            inWindow: true,
+          }
+        );
         setPopupPositionStyle({
           top,
           left,

diff --git a/packages/ui/src/components/auto-complete/AutoComplete.tsx b/packages/ui/src/components/auto-complete/AutoComplete.tsx
@@ -112,8 +112,10 @@ function AutoComplete<T extends DAutoCompleteItem>(
         const { top, left, transformOrigin } = getVerticalSidePosition(
           boxEl,
           { width: Math.max(width, minWidth), height },
-          'bottom-left',
-          8
+          {
+            placement: 'bottom-left',
+            inWindow: true,
+          }
         );
 
         setPopupPositionStyle({

diff --git a/packages/ui/src/components/cascader/Cascader.tsx b/packages/ui/src/components/cascader/Cascader.tsx
@@ -380,7 +380,14 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
           dInputRef={dInputRef}
           dUpdatePosition={(boxEl, popupEl) => {
             const { width, height } = getOriginalSize(popupEl);
-            const { top, left, transformOrigin } = getVerticalSidePosition(boxEl, { width, height }, 'bottom-left', 8);
+            const { top, left, transformOrigin } = getVerticalSidePosition(
+              boxEl,
+              { width, height },
+              {
+                placement: 'bottom-left',
+                inWindow: true,
+              }
+            );
 
             return {
               position: {

diff --git a/packages/ui/src/components/dropdown/Dropdown.tsx b/packages/ui/src/components/dropdown/Dropdown.tsx
@@ -174,7 +174,14 @@ function Dropdown<ID extends DId, T extends DDropdownItem<ID>>(
     const triggerEl = document.getElementById(buttonId);
     if (triggerEl && dropdownRef.current) {
       const { width, height } = getOriginalSize(dropdownRef.current);
-      const { top, left, transformOrigin, arrowPosition } = getVerticalSidePosition(triggerEl, { width, height }, dPlacement, 8);
+      const { top, left, transformOrigin, arrowPosition } = getVerticalSidePosition(
+        triggerEl,
+        { width, height },
+        {
+          placement: dPlacement,
+          inWindow: true,
+        }
+      );
       setPopupPositionStyle({ top, left });
       setTransformOrigin(transformOrigin);
       setArrowPosition(arrowPosition);

diff --git a/packages/ui/src/components/dropdown/Sub.tsx b/packages/ui/src/components/dropdown/Sub.tsx
@@ -71,7 +71,14 @@ export function DSub(props: DSubProps): JSX.Element | null {
   const updatePosition = () => {
     if (ulRef.current && liRef.current) {
       const { width, height } = getOriginalSize(ulRef.current);
-      const { top, left, transformOrigin } = getHorizontalSidePosition(liRef.current, { width, height }, 'right', 10);
+      const { top, left, transformOrigin } = getHorizontalSidePosition(
+        liRef.current,
+        { width, height },
+        {
+          placement: 'right',
+          inWindow: true,
+        }
+      );
       setPopupPositionStyle({
         top,
         left,

diff --git a/packages/ui/src/components/menu/Sub.tsx b/packages/ui/src/components/menu/Sub.tsx
@@ -104,8 +104,24 @@ export function DSub(props: DSubProps): JSX.Element | null {
         }
 
         const { top, left, transformOrigin } = inHorizontalNav
-          ? getVerticalSidePosition(liRef.current, { width, height }, 'bottom', 12)
-          : getHorizontalSidePosition(liRef.current, { width, height }, 'right', dInNav ? 10 : 14);
+          ? getVerticalSidePosition(
+              liRef.current,
+              { width, height },
+              {
+                placement: 'bottom',
+                offset: 12,
+                inWindow: true,
+              }
+            )
+          : getHorizontalSidePosition(
+              liRef.current,
+              { width, height },
+              {
+                placement: 'right',
+                offset: dInNav ? 10 : 14,
+                inWindow: true,
+              }
+            );
         setPopupPositionStyle({
           top,
           left,

diff --git a/packages/ui/src/components/popover/Popover.tsx b/packages/ui/src/components/popover/Popover.tsx
@@ -31,6 +31,7 @@ export interface DPopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   dModal?: boolean;
   dDisabled?: boolean;
   dDistance?: number;
+  dInWindow?: boolean;
   dMouseEnterDelay?: number;
   dMouseLeaveDelay?: number;
   dZIndex?: number | string;
@@ -55,6 +56,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
     dModal = false,
     dDisabled = false,
     dDistance = 10,
+    dInWindow = false,
     dMouseEnterDelay = 150,
     dMouseLeaveDelay = 200,
     dZIndex,
@@ -138,7 +140,16 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
           containerRect.left,
         ];
       }
-      const position = getPopupPosition(popupRef.current, triggerEl, dPlacement, dDistance, space);
+      const position = getPopupPosition(
+        popupRef.current,
+        triggerEl,
+        {
+          placement: dPlacement,
+          offset: dDistance,
+          inWindow: dInWindow,
+        },
+        space
+      );
       if (position) {
         currentPlacement = position.placement;
         setPlacement(position.placement);
@@ -147,7 +158,11 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
           left: position.left,
         });
       } else {
-        const position = getPopupPosition(popupRef.current, triggerEl, placement, dDistance);
+        const position = getPopupPosition(popupRef.current, triggerEl, {
+          placement,
+          offset: dDistance,
+          inWindow: dInWindow,
+        });
         setPopupPositionStyle({
           top: position.top,
           left: position.left,

diff --git a/packages/ui/src/components/select/Select.tsx b/packages/ui/src/components/select/Select.tsx
@@ -446,7 +446,14 @@ function Select<V extends DId, T extends DSelectItem<V>>(
           dUpdatePosition={(boxEl, popupEl) => {
             const width = boxEl.getBoundingClientRect().width;
             const { height } = getOriginalSize(popupEl);
-            const { top, left, transformOrigin } = getVerticalSidePosition(boxEl, { width, height }, 'bottom', 8);
+            const { top, left, transformOrigin } = getVerticalSidePosition(
+              boxEl,
+              { width, height },
+              {
+                placement: 'bottom',
+                inWindow: true,
+              }
+            );
 
             return {
               position: {

diff --git a/packages/ui/src/components/tooltip/Tooltip.tsx b/packages/ui/src/components/tooltip/Tooltip.tsx
@@ -27,6 +27,7 @@ export interface DTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   dArrow?: boolean;
   dDisabled?: boolean;
   dDistance?: number;
+  dInWindow?: boolean;
   dMouseEnterDelay?: number;
   dMouseLeaveDelay?: number;
   dZIndex?: number | string;
@@ -48,6 +49,7 @@ function Tooltip(props: DTooltipProps, ref: React.ForwardedRef<DTooltipRef>): JS
     dArrow = true,
     dDisabled = false,
     dDistance = 10,
+    dInWindow = false,
     dMouseEnterDelay = 150,
     dMouseLeaveDelay = 200,
     dZIndex,
@@ -126,7 +128,16 @@ function Tooltip(props: DTooltipProps, ref: React.ForwardedRef<DTooltipRef>): JS
           containerRect.left,
         ];
       }
-      const position = getPopupPosition(popupRef.current, triggerEl, dPlacement, dDistance, space);
+      const position = getPopupPosition(
+        popupRef.current,
+        triggerEl,
+        {
+          placement: dPlacement,
+          offset: dDistance,
+          inWindow: dInWindow,
+        },
+        space
+      );
       if (position) {
         currentPlacement = position.placement;
         setPlacement(position.placement);
@@ -135,7 +146,11 @@ function Tooltip(props: DTooltipProps, ref: React.ForwardedRef<DTooltipRef>): JS
           left: position.left,
         });
       } else {
-        const position = getPopupPosition(popupRef.current, triggerEl, placement, dDistance);
+        const position = getPopupPosition(popupRef.current, triggerEl, {
+          placement,
+          offset: dDistance,
+          inWindow: dInWindow,
+        });
         setPopupPositionStyle({
           top: position.top,
           left: position.left,

diff --git a/packages/ui/src/components/tree-select/TreeSelect.tsx b/packages/ui/src/components/tree-select/TreeSelect.tsx
@@ -415,8 +415,10 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
             const { top, left, transformOrigin } = getVerticalSidePosition(
               boxEl,
               { width: Math.max(width, minWidth), height },
-              'bottom-left',
-              8
+              {
+                placement: 'bottom-left',
+                inWindow: true,
+              }
             );
 
             return {

diff --git a/packages/utils/src/position/getHorizontalSidePosition.ts b/packages/utils/src/position/getHorizontalSidePosition.ts
@@ -3,22 +3,29 @@ import { POSITION_CONFIG } from './config';
 export function getHorizontalSidePosition(
   targetEl: HTMLElement,
   popupSize: { width: number; height: number },
-  placement: 'right' | 'left',
-  offset = 10
+  config: {
+    placement: 'right' | 'left';
+    offset?: number;
+    inWindow?: boolean;
+  }
 ): {
   top: number;
   left: number;
   transformOrigin: string;
 } {
   const { width, height } = popupSize;
+  const { placement, offset = 10, inWindow = false } = config;
 
   const targetRect = targetEl.getBoundingClientRect();
 
   let top = targetRect.top;
-  top = Math.min(Math.max(top, POSITION_CONFIG.space), window.innerHeight - height - POSITION_CONFIG.space);
-
+  if (inWindow) {
+    top = Math.min(Math.max(top, POSITION_CONFIG.space), window.innerHeight - height - POSITION_CONFIG.space);
+  }
   let left = placement === 'right' ? targetRect.left + targetRect.width + offset : targetRect.left - width - offset;
-  left = Math.min(Math.max(left, POSITION_CONFIG.space), window.innerWidth - width - POSITION_CONFIG.space);
+  if (inWindow) {
+    left = Math.min(Math.max(left, POSITION_CONFIG.space), window.innerWidth - width - POSITION_CONFIG.space);
+  }
 
   const transformOrigin =
     placement === 'right'

diff --git a/packages/utils/src/position/getPopupPosition.ts b/packages/utils/src/position/getPopupPosition.ts
@@ -1,6 +1,7 @@
 import { isUndefined } from 'lodash';
 
 import { getOriginalSize } from '../getOriginalSize';
+import { POSITION_CONFIG } from './config';
 
 export type DPopupPlacement =
   | 'top'
@@ -19,25 +20,42 @@ export type DPopupPlacement =
 export function getPopupPosition(
   popupEl: HTMLElement,
   targetEl: HTMLElement,
-  placement: DPopupPlacement,
-  offset: number
+  config: {
+    placement: DPopupPlacement;
+    offset?: number;
+    inWindow?: boolean;
+  }
 ): { top: number; left: number };
 export function getPopupPosition(
   popupEl: HTMLElement,
   targetEl: HTMLElement,
-  placement: DPopupPlacement,
-  offset: number,
+  config: {
+    placement: DPopupPlacement;
+    offset?: number;
+    inWindow?: boolean;
+  },
   space: [number, number, number, number]
 ): { top: number; left: number; placement: DPopupPlacement } | undefined;
 export function getPopupPosition(
   popupEl: HTMLElement,
   targetEl: HTMLElement,
-  placement: DPopupPlacement,
-  offset = 10,
+  config: {
+    placement: DPopupPlacement;
+    offset?: number;
+    inWindow?: boolean;
+  },
   space?: [number, number, number, number]
 ): { top: number; left: number; placement?: DPopupPlacement } | undefined {
   const { width, height } = getOriginalSize(popupEl);
+  const { placement, offset = 10, inWindow = false } = config;
 
+  const updatePosition = (position: any) => {
+    if (inWindow) {
+      position.top = Math.min(Math.max(position.top, POSITION_CONFIG.space), window.innerHeight - height - POSITION_CONFIG.space);
+      position.left = Math.min(Math.max(position.left, POSITION_CONFIG.space), window.innerWidth - width - POSITION_CONFIG.space);
+    }
+    return position;
+  };
   const targetRect = targetEl.getBoundingClientRect();
 
   const getFixedPosition = (placement: DPopupPlacement) => {
@@ -191,17 +209,17 @@ export function getPopupPosition(
       ]);
     }
     return positionStyle
-      ? {
+      ? updatePosition({
           top: positionStyle.top,
           left: positionStyle.left,
           placement: positionStyle.placement,
-        }
+        })
       : undefined;
   } else {
     const positionStyle = getFixedPosition(placement);
-    return {
+    return updatePosition({
       top: positionStyle.top,
       left: positionStyle.left,
-    };
+    });
   }
 }