fix: Fix dropdown content size bug

kufu · Oct 30, 2019 · 5d96292 · 5d96292
1 parent df50ca9
commit 5d96292
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Dropdown/DropdownContentInner.tsx b/src/components/Dropdown/DropdownContentInner.tsx
@@ -18,8 +18,9 @@ const DropdownContentInnerComponent: React.FC<Props & InjectedProps> = ({
   const [position, setPosition] = useState<Position>({
     top: 'auto',
     left: 'auto',
+    maxHeight: '',
   })
-  const wrapperRef = useRef(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     setIsMounted(true)
@@ -30,8 +31,8 @@ const DropdownContentInnerComponent: React.FC<Props & InjectedProps> = ({
       const contentPosition = getContentPositionStyle(
         triggerRect,
         {
-          width: (wrapperRef.current as any).offsetWidth,
-          height: (wrapperRef.current as any).offsetHeight,
+          width: wrapperRef.current.offsetWidth,
+          height: wrapperRef.current.offsetHeight,
         },
         {
           width: innerWidth,
@@ -77,6 +78,13 @@ const Wrapper = styled.div`
       &.active {
         visibility: visible;
       }
+
+      ${position.maxHeight
+        ? `
+          overflow-y: scroll;
+          max-height: ${position.maxHeight};
+      `
+        : ''}
     `
   }}
 `
diff --git a/src/components/Dropdown/dropdownHelper.ts b/src/components/Dropdown/dropdownHelper.ts
@@ -14,6 +14,7 @@ type Size = { width: number; height: number }
 export type Position = {
   top: string
   left: string
+  maxHeight: string
 }
 
 export function getContentPositionStyle(
@@ -28,6 +29,7 @@ export function getContentPositionStyle(
   const position: Position = {
     top: 'auto',
     left: 'auto',
+    maxHeight: '',
   }
   const triggerAlignCenter = triggerRect.left + (triggerRect.right - triggerRect.left) / 2
 
@@ -36,7 +38,9 @@ export function getContentPositionStyle(
   } else if (triggerRect.top - contentSize.height >= 0) {
     position.top = `${scroll.top + triggerRect.top - contentSize.height}px`
   } else {
+    const paddingBottom = 10
     position.top = `${scroll.top + triggerRect.bottom}px`
+    position.maxHeight = `${windowSize.height - triggerRect.bottom - paddingBottom}px`
   }
 
   if (triggerAlignCenter <= windowSize.width / 2) {