🐛 fix: Refactor Modal component to handle dynamic content height

lobehub · Dec 25, 2023 · 5b79dfd · 5b79dfd
1 parent 614a0b6
commit 5b79dfd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/Modal/demos/index.tsx b/src/Modal/demos/index.tsx
@@ -23,9 +23,9 @@ export default () => {
         Open Modal
       </Button>
       <Modal onCancel={handleCancel} onOk={handleOk} open={isModalOpen} title="Basic Modal">
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
+        {Array.from({ length: 20 }).map((_, index) => (
+          <p key={index}>Some contents...</p>
+        ))}
       </Modal>
     </>
   );

diff --git a/src/Modal/index.tsx b/src/Modal/index.tsx
@@ -7,10 +7,11 @@ import { memo } from 'react';
 import ActionIcon from '@/ActionIcon';
 import Icon from '@/Icon';
 
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
+const useStyles = createStyles(({ css, token, prefixCls }, props: { maxHeight: string }) => ({
   content: css`
     .${prefixCls}-modal-body {
-      overflow: hidden;
+      overflow: scroll;
+      max-height: ${props.maxHeight};
       padding: 0 16px 16px;
     }
     .${prefixCls}-modal-footer {
@@ -38,7 +39,9 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
   `,
 }));
 
-export type ModalProps = AntModalProps;
+export type ModalProps = AntModalProps & {
+  maxHeight?: string;
+};
 
 const Modal = memo<ModalProps>(
   ({
@@ -50,10 +53,11 @@ const Modal = memo<ModalProps>(
     onCancel,
     open,
     destroyOnClose,
+    maxHeight = 'calc(70vh - 108px)', // or none; 108px = header + footer height;
     ...rest
   }) => {
     const { mobile } = useResponsive();
-    const { styles, cx, theme } = useStyles();
+    const { styles, cx, theme } = useStyles({ maxHeight });
 
     if (mobile)
       return (