From 51c8510d2f6b69476877fb549afba49aa5bda5de Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Thu, 21 Jan 2021 22:14:15 +0100
Subject: [PATCH] feat: add height getter to ref

---
 README.md                      | 26 ++++++++++++++++++++++++++
 pages/fixtures/experiments.tsx | 22 +++++++++-------------
 src/BottomSheet.tsx            |  3 +++
 src/types.ts                   |  6 ++++++
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 846ab4ee..c0a6d385 100644
--- a/README.md
+++ b/README.md
@@ -292,6 +292,32 @@ ref.current.snapTo(({ snapPoints }) => Math.min(...snapPoints), {
 })
 ```
 
+### height
+
+Type: `number`
+
+The current snap point, in other words the height, of the bottom sheet. This value is updated outside the React render cycle, for performance reasons.
+
+```jsx
+export default function Example() {
+  const sheetRef = React.useRef()
+  return (
+    <BottomSheet
+      ref={sheetRef}
+      onSpringStart={() => {
+        console.log('Transition from:', sheetRef.current.height)
+        requestAnimationFrame(() =>
+          console.log('Transition to:', sheetRef.current.height)
+        )
+      }}
+      onSpringEnd={() =>
+        console.log('Finished transition to:', sheetRef.current.height)
+      }
+    />
+  )
+}
+```
+
 # Credits
 
 - Play icon used on frame overlays: [font-awesome](https://fontawesome.com/icons/play-circle?style=regular)
diff --git a/pages/fixtures/experiments.tsx b/pages/fixtures/experiments.tsx
index 24dade9e..3b64b7a6 100644
--- a/pages/fixtures/experiments.tsx
+++ b/pages/fixtures/experiments.tsx
@@ -478,7 +478,6 @@ function Twelve() {
   const [open, setOpen] = useState(false)
   const sheetRef = useRef<BottomSheetRef>()
   const [height, setHeight] = useState(0)
-  const [updating, setUpdating] = useState(false)
 
   return (
     <>
@@ -495,24 +494,21 @@ function Twelve() {
         }
         onSpringStart={(event) => {
           console.log('onSpringStart', event, sheetRef.current.height)
-          setUpdating(true)
+          setHeight(sheetRef.current.height)
+          requestAnimationFrame(() => setHeight(sheetRef.current.height))
+          if (event.type === 'OPEN') {
+            setTimeout(() => setHeight(sheetRef.current.height), 100)
+          }
+        }}
+        onSpringCancel={(event) => {
+          console.log('onSpringCancel', event, sheetRef.current.height)
           setHeight(sheetRef.current.height)
         }}
         onSpringEnd={(event) => {
           console.log('onSpringEnd', event, sheetRef.current.height)
-          setUpdating(false)
           setHeight(sheetRef.current.height)
         }}
-        footer={
-          <div className="w-full text-center">
-            Height:{' '}
-            {updating ? (
-              <del key="height">{height}</del>
-            ) : (
-              <span key="height">{height}</span>
-            )}
-          </div>
-        }
+        footer={<div className="w-full text-center">Height: {height}</div>}
       >
         <SheetContent>
           <Expandable>
diff --git a/src/BottomSheet.tsx b/src/BottomSheet.tsx
index 5a5a997f..74655ce8 100644
--- a/src/BottomSheet.tsx
+++ b/src/BottomSheet.tsx
@@ -415,6 +415,9 @@ export const BottomSheet = React.forwardRef<
           },
         })
       },
+      get height() {
+        return heightRef.current
+      },
     }),
     [send]
   )
diff --git a/src/types.ts b/src/types.ts
index c3c73141..870bb910 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -151,4 +151,10 @@ export interface RefHandles {
     numberOrCallback: number | ((state: defaultSnapProps) => number),
     options?: { source?: string; velocity?: number }
   ) => void
+
+  /**
+   * Returns the current snap point, in other words the height.
+   * It's update lifecycle with events are onSpringStart and onSpringCancel will give you the old value, while onSpringEnd will give you the current one.
+   */
+  height: number
 }