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

README.md

@@ -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

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.2",
+  "version": "1.0.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -14,10 +14,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests --env=jest-environment-jsdom-sixteen",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "lint": "tsdx lint"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -50,12 +47,6 @@
   "module": "dist/mui-bottom-sheet.esm.js",
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-docs": "^5.3.18",
-    "@storybook/addon-info": "^5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/react": "^5.3.18",
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.2",
     "@types/jest": "^25.1.5",
@@ -67,6 +58,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",
@@ -79,9 +71,8 @@
   },
   "dependencies": {
     "@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"
   }

src/BottomSheet.tsx

@@ -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:{}}
@@ -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,
@@ -158,13 +167,22 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
     stops.push(max);
   }
 
-  /** Add peek heights if they are less than the max height */
-  peekHeights?.sort().forEach(peekHeight => {
+  /** Add peek heights if they are less than the max height.
+   * To don't mess with snap indexes we don't add the peek height if it already in the stops array
+   */
+  peekHeights?.forEach(peekHeight => {
     if (peekHeight < height && peekHeight < window.innerHeight) {
-      stops.push(stopPosition(peekHeight));
+      if (!stops.includes(stopPosition(peekHeight))) {
+        stops.push(stopPosition(peekHeight));
+      }
     }
   });
 
+  /** By using stopPosition, y-axis is defined from top to bottom,
+  but in peekHeights context, y-axis is defined from bottom to top,
+  so we have to use descending sort here to have a proper matching between stops and snap indexes */
+  stops.sort((a, b) => b - a);
+
   /** Track container scroll to prevent pulling when not at scrollTop */
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -175,7 +193,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;
@@ -194,7 +217,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 */
@@ -220,8 +243,9 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
       initial: () => [
         0,
         containerRef.current?.scrollTop
-          ? -containerRef.current.scrollTop + Math.min(...stops)
-          : y.getValue(),
+          ? // @ts-ignore
+            -containerRef.current.scrollTop + Math.min(...stops)
+          : y.goal,
       ],
       bounds: { top: 0 },
     }
@@ -242,18 +266,17 @@ 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 */
-  const backdropActiveAt = stops
-    .sort()
+  const backdropActiveAt = [...stops]
     .reverse()
     .find(n => n !== defaultPosition && n < defaultPosition);
 
@@ -283,22 +306,23 @@ 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, springConfig]);
 
   return (
     <>
       <a.div
         {...bind()}
         ref={containerRef}
+        // @ts-ignore
         style={{ ...styles.root, ...userStyles.root, y, ...sheetStyle }}
       >
         <div ref={measureRef}>{props.children}</div>
@@ -316,6 +340,7 @@ export const BottomSheet: FC<BottomSheetProps> = props => {
         </a.div>
       )}
       <a.div
+        // @ts-ignore
         style={{ ...styles.backdrop, ...userStyles.backdrop, ...backdropStyle }}
       />
     </>