Refactor

cloudscape-design · Jan 21, 2025 · 731bb5c · 731bb5c
1 parent 9b68ef0
commit 731bb5c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 41 deletions.
diff --git a/src/internal/components/dropdown/dropdown-fit-handler.ts b/src/internal/components/dropdown/dropdown-fit-handler.ts
@@ -4,6 +4,7 @@ import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolk
 
 import { getBreakpointValue } from '../../breakpoints';
 import { BoundingBox, getOverflowParentDimensions, getOverflowParents } from '../../utils/scrollable-containers';
+import { LogicalDOMRect } from './dropdown-position';
 
 import styles from './styles.css.js';
 
@@ -361,7 +362,7 @@ export const calculatePosition = (
   isMobile: boolean,
   minWidth?: number,
   stretchBeyondTriggerWidth?: boolean
-): [DropdownPosition, DOMRect] => {
+): [DropdownPosition, LogicalDOMRect] => {
   // cleaning previously assigned values,
   // so that they are not reused in case of screen resize and similar events
   verticalContainerElement.style.maxBlockSize = '';
@@ -393,6 +394,6 @@ export const calculatePosition = (
         isMobile,
         stretchBeyondTriggerWidth,
       });
-  const triggerBox = triggerElement.getBoundingClientRect();
+  const triggerBox = getLogicalBoundingClientRect(triggerElement);
   return [position, triggerBox];
 };
diff --git a/src/internal/components/dropdown/dropdown-position.ts b/src/internal/components/dropdown/dropdown-position.ts
@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
+
+import { DropdownPosition } from './dropdown-fit-handler';
+
+export interface LogicalDOMRect {
+  blockSize: number;
+  inlineSize: number;
+  insetBlockStart: number;
+  insetBlockEnd: number;
+  insetInlineStart: number;
+  insetInlineEnd: number;
+}
+
+export function applyFixedDropdownPosition({
+  position,
+  dropdownElement,
+  triggerRect,
+}: {
+  position: DropdownPosition;
+  dropdownElement: HTMLElement;
+  triggerRect: LogicalDOMRect;
+}) {
+  const useAbsolutePositioning = window.visualViewport?.height && window.visualViewport.height < window.innerHeight;
+
+  const verticalScrollOffset = useAbsolutePositioning ? document.documentElement.scrollTop : 0;
+  const horizontalScrollOffset = useAbsolutePositioning
+    ? getIsRtl(document.body)
+      ? window.innerWidth - document.documentElement.scrollLeft
+      : document.documentElement.scrollLeft
+    : 0;
+
+  dropdownElement.style.position = useAbsolutePositioning ? 'absolute' : 'fixed';
+
+  if (position.dropBlockStart) {
+    dropdownElement.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerRect.insetBlockStart}px)`;
+  } else {
+    dropdownElement.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`;
+  }
+  if (position.dropInlineStart) {
+    dropdownElement.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${position.inlineSize})`;
+  } else {
+    dropdownElement.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`;
+  }
+}
diff --git a/src/internal/components/dropdown/index.tsx b/src/internal/components/dropdown/index.tsx
@@ -26,6 +26,7 @@ import {
   hasEnoughSpaceToStretchBeyondTriggerWidth,
   InteriorDropdownPosition,
 } from './dropdown-fit-handler';
+import { applyFixedDropdownPosition, LogicalDOMRect } from './dropdown-position';
 import { DropdownProps } from './interfaces';
 
 import styles from './styles.css.js';
@@ -196,7 +197,7 @@ const Dropdown = ({
 
   const setDropdownPosition = (
     position: DropdownPosition | InteriorDropdownPosition,
-    triggerBox: DOMRect,
+    triggerBox: LogicalDOMRect,
     target: HTMLDivElement,
     verticalContainer: HTMLDivElement
   ) => {
@@ -233,21 +234,11 @@ const Dropdown = ({
 
     // Position normal overflow dropdowns with fixed positioning relative to viewport
     if (expandToViewport && !interior) {
-      const isIOSVirtualKeyboardPresent =
-        window.visualViewport?.height && window.visualViewport.height < window.innerHeight;
-      target.style.position = isIOSVirtualKeyboardPresent ? 'absolute' : 'fixed';
-      const verticalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollTop : 0;
-      const horizontalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollLeft : 0;
-      if (position.dropBlockStart) {
-        target.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerBox.top}px)`;
-      } else {
-        target.style.insetBlockStart = `${verticalScrollOffset + triggerBox.bottom}px`;
-      }
-      if (position.dropInlineStart) {
-        target.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerBox.right}px - ${position.inlineSize})`;
-      } else {
-        target.style.insetInlineStart = `${horizontalScrollOffset + triggerBox.left}px`;
-      }
+      applyFixedDropdownPosition({
+        position,
+        dropdownElement: target,
+        triggerRect: triggerBox,
+      });
       // Keep track of the initial dropdown position and direction.
       // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.
       fixedPosition.current = position;
@@ -394,29 +385,12 @@ const Dropdown = ({
       return;
     }
     const updateDropdownPosition = () => {
-      if (triggerRef.current && dropdownRef.current && verticalContainerRef.current) {
-        const isIOSVirtualKeyboardPresent =
-          window.visualViewport?.height && window.visualViewport.height < window.innerHeight;
-
-        dropdownRef.current.style.position = isIOSVirtualKeyboardPresent ? 'absolute' : 'fixed';
-
-        const verticalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollTop : 0;
-        const horizontalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollLeft : 0;
-
-        const triggerRect = getLogicalBoundingClientRect(triggerRef.current);
-        const target = dropdownRef.current;
-        if (fixedPosition.current) {
-          if (fixedPosition.current.dropBlockStart) {
-            dropdownRef.current.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerRect.insetBlockStart}px)`;
-          } else {
-            target.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`;
-          }
-          if (fixedPosition.current.dropInlineStart) {
-            target.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${fixedPosition.current.inlineSize})`;
-          } else {
-            target.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`;
-          }
-        }
+      if (triggerRef.current && dropdownRef.current && verticalContainerRef.current && fixedPosition.current) {
+        applyFixedDropdownPosition({
+          position: fixedPosition.current,
+          dropdownElement: dropdownRef.current,
+          triggerRect: getLogicalBoundingClientRect(triggerRef.current),
+        });
       }
     };