Merge pull request #74 from kodai3/feat/body-scroll

fix: 🐛 allow body scroll to stop
ubie-oss · May 20, 2024 · 378e4f0 · 378e4f0
2 parents ebdd936 + f668904
commit 378e4f0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/ActionHalfModal/ActionHalfModal.module.css b/src/components/ActionHalfModal/ActionHalfModal.module.css
@@ -34,14 +34,17 @@
   max-height: calc(100% - 24px);
   padding: var(--size-spacing-lg) 0;
   margin: 0 auto;
-  overflow-y: auto;
   background: #fff;
   border-radius: 12px;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   transform: translate3d(-50%, 0, 0);
 }
 
+.modalBody.bodyScroll {
+  overflow-y: auto;
+}
+
 .modalBody.headerLess {
   padding-top: var(--size-spacing-xl);
 }

diff --git a/src/components/ActionHalfModal/ActionHalfModal.tsx b/src/components/ActionHalfModal/ActionHalfModal.tsx
@@ -54,6 +54,11 @@ type BaseProps = {
    * @default false
    */
   fullscreen?: boolean;
+  /**
+   * モーダルボディ部分のスクロールを許可するかどうか
+   * @default true
+   */
+  bodyScroll?: boolean;
 };
 
 type PrimaryActionProps = {
@@ -95,6 +100,7 @@ export const ActionHalfModal: FC<PropsWithChildren<Props>> = ({
   open = true,
   isStatic = false,
   fullscreen = false,
+  bodyScroll = true,
   ...props
 }) => {
   const opacityClassName = opacityToClassName(overlayOpacity);
@@ -127,7 +133,14 @@ export const ActionHalfModal: FC<PropsWithChildren<Props>> = ({
           leaveFrom={styles.panelLeaveFrom}
           leaveTo={styles.panelLeaveTo}
         >
-          <div className={clsx(styles.modalBody, !header && styles.headerLess, fullscreen && styles.fullscreen)}>
+          <div
+            className={clsx(
+              styles.modalBody,
+              !header && styles.headerLess,
+              fullscreen && styles.fullscreen,
+              bodyScroll && styles.bodyScroll,
+            )}
+          >
             {header && <Dialog.Title className={styles.header}>{header}</Dialog.Title>}
             <div className={styles.contents}>{children}</div>
             <div className={styles.buttonContainer}>