Skip to content

Commit

Permalink
Merge pull request #171 from rogorman9/main
Browse files Browse the repository at this point in the history 
allow overriding drag behavior
  • Loading branch information
@Temzasse
Temzasse authored Oct 27, 2024
2 parents 0090207 + 372c6c2 commit 95c2a7a
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 25 deletions.
40 changes: 21 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,25 +70,27 @@ 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. |
| `disableScrollLocking` | no | false | Disable scroll locking for the `body` element while sheet is open. Can be useful if you face issues with input elements and the iOS virtual keyboard. See related [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). |
| 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 scroll locking for the `body` element while sheet is open. Can be useful if you face issues with input elements and the iOS virtual keyboard. See related [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). |
| `dragVelocityThreshold` | no | 500 | How fast the sheet must be flicked down to close. Higher values make the sheet harder to close. |
| `dragCloseThreshold` | no | 0.6 | The portion of the sheet which must be dragged off-screen before it will close. |

## ⚙️ Methods and properties

Expand Down
4 changes: 2 additions & 2 deletions src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ export const REDUCED_MOTION_TWEEN_CONFIG = {
duration: 0.01,
};

export const DRAG_CLOSE_THRESHOLD = 0.6;
export const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;

export const DRAG_VELOCITY_THRESHOLD = 500;
export const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
10 changes: 6 additions & 4 deletions src/sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ import {
import {
REDUCED_MOTION_TWEEN_CONFIG,
DEFAULT_TWEEN_CONFIG,
DRAG_CLOSE_THRESHOLD,
DRAG_VELOCITY_THRESHOLD,
DEFAULT_DRAG_CLOSE_THRESHOLD,
DEFAULT_DRAG_VELOCITY_THRESHOLD,
IS_SSR,
} from './constants';

Expand Down Expand Up @@ -63,6 +63,8 @@ const Sheet = forwardRef<any, SheetProps>(
disableDrag = false,
prefersReducedMotion = false,
tweenConfig = DEFAULT_TWEEN_CONFIG,
dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
...rest
},
ref
Expand Down Expand Up @@ -152,7 +154,7 @@ const Sheet = forwardRef<any, SheetProps>(
});

const onDragEnd = useEffectEvent((_, { velocity }: PanInfo) => {
if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
if (velocity.y > dragVelocityThreshold) {
// User flicked the sheet down
onClose();
} else {
Expand All @@ -174,7 +176,7 @@ const Sheet = forwardRef<any, SheetProps>(

// Get the closest snap point
snapTo = getClosest(snapToValues, currentY);
} else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {
} else if (currentY / sheetHeight > dragCloseThreshold) {
// Close if dragged over enough far
snapTo = sheetHeight;
}
Expand Down
2 changes: 2 additions & 0 deletions src/types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export type SheetProps = {
disableDrag?: boolean;
disableScrollLocking?: boolean;
prefersReducedMotion?: boolean;
dragVelocityThreshold?: number;
dragCloseThreshold?: number;
} & SheetEvents &
ComponentPropsWithoutRef<typeof motion.div>;

Expand Down

0 comments on commit 95c2a7a

Please sign in to comment.