chore: refactor API (stipsan#11)

Author: stipsan

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["next/babel"],
+  "env": {
+    "production": {
+      "plugins": ["transform-remove-console"]
+    }
+  }
+}

TODO.md

@@ -3,23 +3,16 @@ Stop relying on memo stuff.
 If react's render loop triggers, communicate to outside fn's via refs and the like.
 A change to snap points affects how far one can drag.
 
-```
-max-content
-  The intrinsic preferred width.
-min-content
-  The intrinsic minimum width.
-fit-content(<length-percentage>)
-  Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).
-
-```
-
-hmmmm
+fix uneven icon that is being animated, the corner is driving me crazy...
 
-- viewportHeight => maxHeight
-- initialHeight => initialSnapPoint => initialSnap => defaultSnap
-- setHeight => setSnapPoint => setSnap => snapTo
+# Remaining critical stuff
 
-fix uneven icon that is being animated, the corner is driving me crazy...
+- respond to viewport height changes
+- respond to snapTo callback
+- fire events when stopping the dragging and transition to snap.
+- respond to changes to snapPoints output
+- don't respond to changes to defaultSnap, it shouldn't act like controlled height.
+- optimize element resize observers, perhaps run them all in a chain.
 
 ## package.json stuffs
 
@@ -54,19 +47,15 @@ if (JSON.stringify(arr1) === JSON.stringify(arr2)) {
 }
 ```
 
+# useState bad, bad bad bad and useViewportHeight and useElementSizeObserver both use it
+
+Rewrite to refs, the nextTick system. Create an initial step for getting all dimensions. Then setup observers that set refs.
+
 Faux plugin architecture. "Plugins" or "hooks" can register in an es6 map if they want to do work before the animation starts, while the bottom sheet is resting in the final state but opacity: 0. This allows setting up focus lock, scroll lock and more ahead of time. Hopefully alleviating a lot of jank.
 
 a transition to close can be cancelled if the open state is changed back to `true`.
 open/close is fairly easy and stabl. snap to snap on the other hand, require diligence in making sure whoever cancels a snap transition, makes sure to send the animation on the right direction.
 
-## Changes that can happen from React's side of things at any time by means of a prop change
-
-And that may affect side effects that are running atm
-
-- isOpen
-- snapPoints
-- initialHeight
-
 ## Big picture state machines
 
 - transitioning from closed to open.
@@ -90,8 +79,4 @@ tailwind rsbs
 - blue gray shades on content below header
 
 important:
-lastSnap on initialSnap, to make it persist your choice.
-only fade out when dismissable
 show inertia location to predict where sheet slides on release
-don't fade in if not dismissable
-show resize cursor instead of pointer when not dismissable

docs/Hero.module.css

@@ -31,12 +31,12 @@
   opacity: 0;
 }
 .open .text {
-  transition-duration: 300ms;
   --tw-translate-y: 0px;
   opacity: 1;
 }
 /* Only set delay while open to avoid weird artifacts with fast toggling */
-.open .text {
+.open:not(.skip) .text {
+  transition-duration: 300ms;
   transition-delay: calc(150ms + 80ms * var(--index, 0));
 }
 .text + .text {

docs/Hero.tsx

@@ -61,12 +61,17 @@ const SvgText: React.FC<{ x?: string; y?: string; className?: string }> = ({
   </g>
 )
 
+let immediate = false
 export default function Hero({ className }: { className?: string }) {
-  const [open, setOpen] = useState(false)
+  // @TODO this whole monster needs a total rewrite O_O"
+  const [mounted, setMounted] = useState(false)
+  const skip = !mounted && immediate ? true : false
+  const [open, setOpen] = useState(true)
   const openClassRef = useRef(false)
   const classNameRef = useRef(null)
   const { y, state } = useSpring<any>({
     config: config.stiff,
+    immediate: skip,
     from: { y: '208px', state: 0 },
     to: {
       y: open ? '0px' : '208px',
@@ -75,20 +80,28 @@ export default function Hero({ className }: { className?: string }) {
     onFrame: ({ state }) => {
       if (state > 0) {
         if (!openClassRef.current) {
-          classNameRef.current.classList.add(styles.open)
+          classNameRef.current.classList.add(
+            styles.open,
+            skip ? styles.skip : undefined
+          )
           openClassRef.current = true
         }
       } else {
         if (openClassRef.current) {
-          classNameRef.current.classList.remove(styles.open)
+          classNameRef.current.classList.remove(styles.open, styles.skip)
           openClassRef.current = false
         }
       }
     },
+    onRest: () => {
+      if (mounted) {
+        immediate = true
+      }
+    },
   })
 
   useEffect(() => {
-    setOpen(true)
+    setMounted(true)
   }, [])
 
   return (

package-lock.json

@@ -51,8 +51,10 @@
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
+    "@use-it/interval": "^1.0.0",
     "autoprefixer": "10.0.4",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "classnames": "^2.2.6",
     "eslint": "^7.14.0",
     "eslint-config-react-app": "^6.0.0",

package.json

@@ -12,6 +12,7 @@ export default function AsideFixturePage() {
   const focusRef = useRef<HTMLButtonElement>()
 
   useEffect(() => {
+    // Setting focus is to aid keyboard and screen reader nav when activating this iframe
     focusRef.current.focus()
   }, [])
 
@@ -26,10 +27,7 @@ export default function AsideFixturePage() {
           open={open}
           onDismiss={() => setOpen(false)}
           blocking={false}
-          snapPoints={({ viewportHeight }) => [
-            viewportHeight / 4,
-            viewportHeight * 0.6,
-          ]}
+          snapPoints={({ maxHeight }) => [maxHeight / 4, maxHeight * 0.6]}
         >
           <SheetContent>
             <p>

pages/fixtures/aside.tsx

@@ -1,11 +1,14 @@
-import { useCallback, useMemo, useState } from 'react'
+import useInterval from '@use-it/interval'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import Button from '../../docs/fixtures/Button'
 import Code from '../../docs/fixtures/Code'
 import Container from '../../docs/fixtures/Container'
 import Kbd from '../../docs/fixtures/Kbd'
 import SheetContent from '../../docs/fixtures/SheetContent'
 import { BottomSheet } from '../../src'
-import { useInterval } from '../../src/hooks'
+
+// Just to test we can stop re-renders with this pattern when necessary
+const MemoBottomSheet = memo(BottomSheet)
 
 function One() {
   const [open, setOpen] = useState(false)
@@ -37,19 +40,19 @@ function One() {
     if (open) {
       setSeconds(seconds + 1)
     }
-  }, 10000)
+  }, 100)
 
   return (
     <>
       <Button onClick={() => setOpen(true)}>{seconds}</Button>
-      <BottomSheet
+      <MemoBottomSheet
         style={style}
         open={open}
         header={false}
         onDismiss={onDismiss}
       >
         {children}
-      </BottomSheet>
+      </MemoBottomSheet>
     </>
   )
 }
@@ -76,11 +79,8 @@ function Two() {
             Dismiss
           </Button>
         }
-        initialSnapPoint={({ footerHeight }) => footerHeight}
-        snapPoints={({ minHeight, footerHeight }) => [
-          footerHeight,
-          minHeight,
-        ]}
+        defaultSnap={({ footerHeight }) => footerHeight}
+        snapPoints={({ minHeight, footerHeight }) => [footerHeight, minHeight]}
       >
         <SheetContent>
           <p>
@@ -115,10 +115,7 @@ function Three() {
             Dismiss
           </Button>
         }
-        snapPoints={({ minHeight, headerHeight }) => [
-          headerHeight,
-          minHeight,
-        ]}
+        snapPoints={({ minHeight, headerHeight }) => [headerHeight, minHeight]}
       >
         <SheetContent>
           <p>
@@ -173,7 +170,10 @@ function Five() {
         open={open}
         footer={<strong>Sticky footer</strong>}
         onDismiss={onDismiss}
-        initialSnapPoint={({ lastSnap }) => lastSnap}
+        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,
           headerHeight + footerHeight,
@@ -192,6 +192,41 @@ function Five() {
   )
 }
 
+function Six() {
+  const [open, setOpen] = useState(false)
+  const [half, setHalf] = useState(false)
+  const [maxHeight, setMaxHeight] = useState(() =>
+    typeof window !== 'undefined'
+      ? half
+        ? window.innerHeight / 2
+        : window.innerHeight
+      : 0
+  )
+
+  useEffect(() => {
+    setMaxHeight(half ? window.innerHeight / 2 : window.innerHeight)
+  }, [half])
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>6</Button>
+      <BottomSheet
+        style={{ ['--rsbs-bg' as any]: '#EFF6FF' }}
+        open={open}
+        maxHeight={maxHeight}
+        onDismiss={() => setOpen(false)}
+        snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight]}
+      >
+        <SheetContent>
+          <Button onClick={() => setHalf((half) => !half)}>
+            {half ? 'maxHeight 100%' : 'maxHeight 50%'}
+          </Button>
+        </SheetContent>
+      </BottomSheet>
+    </>
+  )
+}
+
 export default function ExperimentsFixturePage() {
   return (
     <>
@@ -201,6 +236,7 @@ export default function ExperimentsFixturePage() {
         <Three />
         <Four />
         <Five />
+        <Six />
       </Container>
     </>
   )