feat: Add RESIZE events

la55u · Dec 5, 2020 · b3ff691 · b3ff691
1 parent f449e95
commit b3ff691
Show file tree

Hide file tree

Showing 10 changed files with 246 additions and 234 deletions.
diff --git a/docs/Hero.tsx b/docs/Hero.tsx
@@ -1,5 +1,4 @@
 import cx from 'classnames'
-import NextLink from 'next/link'
 import { forwardRef, useEffect, useRef, useState } from 'react'
 import { animated, config, useSpring } from 'react-spring'
 import styles from './Hero.module.css'
@@ -27,13 +26,15 @@ const Link: React.FC<{
 
 const Links = ({ className }: { className?: string }) => (
   <>
-    <NextLink href="/docs" passHref>
-      <Link className={className}>Get started</Link>
-    </NextLink>
+    <Link
+      className={className}
+      href="https://github.com/stipsan/react-spring-bottom-sheet/blob/main/GET_STARTED.md#get-started"
+    >
+      Get started
+    </Link>
     <Link
       className={className}
       href="https://github.com/stipsan/react-spring-bottom-sheet"
-      target="_blank"
     >
       GitHub
     </Link>

diff --git a/pages/fixtures/experiments.tsx b/pages/fixtures/experiments.tsx
@@ -88,8 +88,9 @@ function Two() {
             Dismiss
           </Button>
         }
-        defaultSnap={({ headerHeight, footerHeight }) =>
-          headerHeight + footerHeight
+        defaultSnap={({ headerHeight, footerHeight, minHeight }) =>
+          //headerHeight + footerHeight
+          minHeight
         }
         snapPoints={({ minHeight, headerHeight, footerHeight }) => [
           headerHeight + footerHeight,
@@ -185,9 +186,6 @@ function Five() {
         open={open}
         footer={<strong>Sticky footer</strong>}
         onDismiss={onDismiss}
-        onSpringStart={(event) => console.warn('onSpringStart', event)}
-        onSpringCancel={(event) => console.error('onSpringCancel', event)}
-        onSpringEnd={(event) => console.warn('onSpringEnd', event)}
         defaultSnap={({ lastSnap }) => lastSnap}
         snapPoints={({ minHeight, headerHeight, footerHeight }) => [
           headerHeight,
@@ -256,7 +254,7 @@ function Seven() {
     if (open) {
       setShift((shift) => !shift)
     }
-  }, 3000)
+  }, 1000)
 
   return (
     <>
@@ -326,6 +324,49 @@ function Eight() {
   )
 }
 
+function Nine() {
+  const [open, setOpen] = useState(false)
+  const [expandHeader, setExpandHeader] = useState(false)
+  const [expandContent, setExpandContent] = useState(false)
+  const [expandFooter, setExpandFooter] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>9</Button>
+      <BottomSheet
+        open={open}
+        onDismiss={() => setOpen(false)}
+        header={
+          <div>
+            <Button onClick={() => setExpandHeader(true)}>Expand</Button>
+            <br />
+            {expandHeader && (
+              <Button onClick={() => setExpandHeader(false)}>No!</Button>
+            )}
+          </div>
+        }
+        footer={
+          <>
+            <Button onClick={() => setExpandFooter(true)}>Expand</Button>
+            <br />
+            {expandFooter && (
+              <Button onClick={() => setExpandFooter(false)}>No!</Button>
+            )}
+          </>
+        }
+      >
+        <SheetContent>
+          <Button onClick={() => setExpandContent(true)}>Expand</Button>
+          <br />
+          {expandContent && (
+            <Button onClick={() => setExpandContent(false)}>No!</Button>
+          )}
+        </SheetContent>
+      </BottomSheet>
+    </>
+  )
+}
+
 export default function ExperimentsFixturePage() {
   return (
     <Container
@@ -342,6 +383,7 @@ export default function ExperimentsFixturePage() {
       <Six />
       <Seven />
       <Eight />
+      <Nine />
     </Container>
   )
 }