From 17f850030ecb32cd6e3daffffa4faf5805808df5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20Fr=C3=B6lich?= Date: Sat, 7 Oct 2023 13:16:26 +0200 Subject: [PATCH] feat: adds prop to opt-out of scroll-locking (#138) * feat: adds opt-out prop for scroll locking * wip --- README.md | 37 +++++++++++++++++++------------------ package.json | 2 +- src/sheet.tsx | 3 ++- src/types.tsx | 1 + 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index a2b8a21..67c2a82 100644 --- a/README.md +++ b/README.md @@ -71,24 +71,25 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any ## Props -| Name | Required | Default | Description | -| ---------------------- | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet. | -| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not. | -| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user. | -| `disableDrag` | no | false | Disable drag for the whole sheet. | -| `detent` | no | `'full-height'` | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`. | -| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts. | -| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed. | -| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts. | -| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed. | -| `onSnap` | no | | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop. | -| `snapPoints` | no | | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen. | -| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). | -| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. | -| `tweenConfig` | no | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point. | -| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. | -| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location). | +| Name | Required | Default | Description | +| ---------------------- | -------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet. | +| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not. | +| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user. | +| `disableDrag` | no | false | Disable drag for the whole sheet. | +| `disableScrollLocking` | no | false | Disable's scroll locking for the documents `body` element while sheet is opened. Can be useful if you face issues with input elements and the iOS software keyboard. See [this Issue](https://github.com/Temzasse/react-modal-sheet/issues/135) | +| `detent` | no | `'full-height'` | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`. | +| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts. | +| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed. | +| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts. | +| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed. | +| `onSnap` | no | | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop. | +| `snapPoints` | no | | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen. | +| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). | +| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. | +| `tweenConfig` | no | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point. | +| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. | +| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location). | ## Methods and properties diff --git a/package.json b/package.json index 43c52a8..c57972f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "name": "react-modal-sheet", "description": "Flexible bottom sheet component for your React apps", diff --git a/src/sheet.tsx b/src/sheet.tsx index c9d5786..df3f22e 100644 --- a/src/sheet.tsx +++ b/src/sheet.tsx @@ -43,6 +43,7 @@ const Sheet = React.forwardRef( onCloseEnd, onSnap, children, + disableScrollLocking = false, isOpen, snapPoints, rootId, @@ -207,7 +208,7 @@ const Sheet = React.forwardRef( // Framer Motion should handle body scroll locking but it's not working // properly on iOS. Scroll locking from React Aria seems to work much better. - usePreventScroll({ isDisabled: !isOpen }); + usePreventScroll({ isDisabled: disableScrollLocking === true || !isOpen }); const dragProps = React.useMemo(() => { const dragProps: SheetContextType['dragProps'] = { diff --git a/src/types.tsx b/src/types.tsx index 45e4f2d..04302d9 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -37,6 +37,7 @@ export type SheetProps = { initialSnap?: number; // index of snap points array tweenConfig?: SheetTweenConfig; disableDrag?: boolean; + disableScrollLocking?: boolean; prefersReducedMotion?: boolean; } & SheetEvents & React.ComponentPropsWithoutRef;