Skip to content

Get modification from 1.0.3 on npm and replace getValue() by goal #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JF-Cozy wants to merge 5 commits into
base: master
Choose a base branch
from
+182 −100
Open

Get modification from 1.0.3 on npm and replace getValue() by goal #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aba5bef
📦 get v1.0.3 modification from npm
JF-Cozy Mar 11, 2021
63a070c
Merge branch 'feat/1.0.3'
JF-Cozy Mar 11, 2021
a6c0c05
📦 bump to 1.0.4
JF-Cozy Mar 11, 2021
10f2720
✨ update react-spring to v9.0.0-rc.3
JF-Cozy Mar 11, 2021
d912551
✨ getValue() doesn't exist anymore, use goal instead
JF-Cozy Mar 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,14 @@ export const App = () => {
| --------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `backdrop` | `boolean?` | Whether to show the transparent backdrop that fades in as you pull up. | `true` |
| `background` | `React.ReactElement?` | Background element that slides up behind the main bottom sheet. | `null` |
| `currentIndex` | `number?` | Pass in an index to control which stop height the sheet is at. Number should be in range of total stops: `[defaultHeight, ...peekHeights, fullHeight?]` | `undefined` |
| `currentIndex` | `number?` | Pass in an index to control which stop height the sheet is at. Number should be in range of total stops: `[defaultHeight, ...peekHeights, fullHeight?]`. | `undefined` |
| `defaultHeight` | `number?` | Default height when the sheet is closed. | `100` |
| `hidden` | `boolean?` | When true, the sheet will completely hide at the bottom of the screen. | `false` |
| `fullHeight` | `boolean?` | Whether to allow the sheet to go 100% of the screen height. If false, the highest it can go is the maximum of `peekHeights`. Otherwise it'll stick to `defaultHeight`. | `true` |
| `onIndexChange` | `(index:number) => void` | This will be fired when the user interacts with the sheet and moves it to a position other than the current one. | `undefined` |
| `onIndexChange` | `(index:number) => void?` | This will be fired when the user interacts with the sheet and moves it to a position other than the current one. | `undefined` |
| `peekHeights` | `number[]?` | Progressive peek heights for the bottom sheet to stop at. Use this to reveal more detailed information as the sheet is pulled up. | `[]` |
| `styles` | `{ root: {}, backdrop: {}, background: {} }` | Pass additional styles to either the sheet, the backdrop or the background components | `{ root: {}, backdrop: {}, background: {} }` |
| `springConfig` | `Record<string, any>?` | The [`react-spring` config](https://www.react-spring.io/docs/hooks/api#configs) used when snapping to heights. | `config.stiff` |
| `styles` | `{ root: {}, backdrop: {}, background: {} }` | Pass additional styles to either the sheet, the backdrop or the background components. | `{ root: {}, backdrop: {}, background: {} }` |
| `threshold` | `number?` | The threshold for over-dragging the sheet above its maximum height before it snaps to the highest position. | `70` |

## Upcoming
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "1.0.2",
"version": "1.0.4",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
Expand Down Expand Up @@ -67,6 +67,7 @@
"react-docgen-typescript-loader": "^3.7.2",
"react-dom": "^16.13.1",
"react-is": "^16.13.1",
"react-swipeable-views": "^0.13.9",
"ts-loader": "^6.2.2",
"tsdx": "^0.13.1",
"tslib": "^1.11.1",
Expand All @@ -81,7 +82,7 @@
"@juggle/resize-observer": "^3.1.3",
"@storybook/addon-knobs": "^5.3.18",
"jest-environment-jsdom-sixteen": "^1.0.3",
"react-spring": "^9.0.0-beta.34",
"react-spring": "9.0.0-rc.3",
"react-use-gesture": "^7.0.8",
"react-use-measure": "^2.0.0"
}
Expand Down
42 changes: 28 additions & 14 deletions src/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@ export interface bottomSheetOptions {
*/
peekHeights?: number[];

/**
* Which spring config to use for snapping the sheet
* @default config.stiff
*/
springConfig: Record<string, any>;

/**
* User styles for root, background and backdrop.
* @default {root:{},background:{},backdrop:{}}
Expand All @@ -80,25 +86,28 @@ export const defaultOptions = {
backdrop: true,
background: null,
defaultHeight: 100,
threshold: 70,
peekHeights: [],
hidden: false,
fullHeight: true,
hidden: false,
peekHeights: [],
springConfig: config.stiff,
styles: { root: {}, backdrop: {}, background: {} },
threshold: 70,
};

export const BottomSheet: FC<BottomSheetProps> = props => {
/** Merge defaults and provided options */
const {
backdrop,
background,
currentIndex,
defaultHeight,
fullHeight,
hidden,
currentIndex,
onIndexChange,
peekHeights,
springConfig,
styles: userStyles,
threshold,
styles: userStyles = { root: {}, backdrop: {} },
fullHeight,
} = {
...defaultOptions,
...props,
Expand Down Expand Up @@ -175,7 +184,12 @@ export const BottomSheet: FC<BottomSheetProps> = props => {

/** Handle draging */
const bind = useDrag(
({ last, cancel, movement: [, my] }) => {
({ last, cancel, movement: [, my], direction: [dx] }) => {
/** If the drag is feeling more horizontal than vertical, cancel */
if (dx < -0.8 || dx > 0.8) {
cancel && cancel();
}

/** Prevent drag if container isn't at top of scroll */
if (containerRef?.current?.scrollTop) {
return;
Expand All @@ -194,7 +208,7 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
const lastPosition = closest(my, stops);
set({
y: lastPosition,
config: config.stiff,
config: springConfig,
});

/** Call onIndexChange if it's set */
Expand All @@ -221,7 +235,7 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
0,
containerRef.current?.scrollTop
? -containerRef.current.scrollTop + Math.min(...stops)
: y.getValue(),
: y.goal,
],
bounds: { top: 0 },
}
Expand All @@ -242,13 +256,13 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
* Lock the scroll of the bottom sheet while it hasn't been
* pulled to its maximum possible height.
*/
const overflow = y.to(v => (v > Math.min(...stops) ? 'hidden' : 'scroll'));
const overflowY = y.to(v => (v > Math.min(...stops) ? 'hidden' : 'scroll'));

/** Aggregate main sheet props into an object for spreading */
const sheetStyle = {
y,
display,
overflow,
overflowY,
};

/** Animated styles for the backdrop based off the y position */
Expand Down Expand Up @@ -283,16 +297,16 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
* Handle controlled component changes
*/
useEffect(() => {
if (currentIndex !== undefined && y.getValue() !== stops[currentIndex]) {
if (currentIndex !== undefined && y.goal !== stops[currentIndex]) {
if (!stops[currentIndex]) {
console.warn('No stop exists for the index you set.');
}
set({
y: stops[currentIndex],
config: config.stiff,
config: springConfig,
});
}
}, [currentIndex, stops, set, y, config]);
}, [currentIndex, stops, set, y]);

return (
<>
Expand Down
Loading