feat: add skipInitialTransition to make skipping opt-in

stipsan · Dec 29, 2020 · f200ad0 · f200ad0
1 parent 0871617
commit f200ad0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -205,6 +205,12 @@ Fired on: `CLOSE`.
 
 The `yin` to `onSpringStart`'s `yang`. It has the same characteristics. Including `async/await` and Promise support for delaying a transition. For `CLOSE` it gives you a hook into the step right after it has cleaned up everything after itself, and right before it unmounts itself. This can be useful if you have some logic that needs to perform some work before it's safe to unmount.
 
+### skipInitialTransition
+
+Type: `boolean`
+
+By default the initial open state is always transitioned to using an spring animation. Set `skipInitialTransition` to `true` and the initial `open` state will render as if it were the default state. Useful to avoid scenarios where the opening transition would be distracting.
+
 ## ref
 
 Methods available when setting a `ref` on the sheet:

diff --git a/pages/fixtures/scrollable.tsx b/pages/fixtures/scrollable.tsx
@@ -85,6 +85,7 @@ const ScrollableFixturePage: NextPage<GetStaticProps> = ({
         <SnapMarker style={{ top: '75vh', ['--size' as any]: '0.5vh' }} />
         <BottomSheet
           open
+          skipInitialTransition
           sibling={<CloseExample className="z-10" />}
           ref={sheetRef}
           initialFocusRef={focusRef}

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,7 @@ export type { RefHandles as BottomSheetRef } from './types'
 
 // Because SSR is annoying to deal with, and all the million complaints about window, navigator and dom elenents!
 export const BottomSheet = forwardRef<RefHandles, Props>(function BottomSheet(
-  { onSpringStart, onSpringEnd, ...props },
+  { onSpringStart, onSpringEnd, skipInitialTransition, ...props },
   ref
 ) {
   // Mounted state, helps SSR but also ensures you can't tab into the sheet while it's closed, or nav there in a screen reader
@@ -23,7 +23,7 @@ export const BottomSheet = forwardRef<RefHandles, Props>(function BottomSheet(
   // It's only when initialState and props.open is mismatching that a intial transition should happen
   // If they match then transitions will only happen when a user interaction or resize event happen.
   const initialStateRef = useRef<'OPEN' | 'CLOSED'>(
-    props.open ? 'OPEN' : 'CLOSED'
+    skipInitialTransition && props.open ? 'OPEN' : 'CLOSED'
   )
 
   // Using layout effect to support cases where the bottom sheet have to appear already open, no transition

diff --git a/src/types.ts b/src/types.ts
@@ -107,6 +107,9 @@ export type Props = {
 
   /* Configures body-scroll-lock to reserve scrollbar gap by setting padding on <body>, clears when closing the bottom sheet. on by default iff blocking=true  */
   reserveScrollBarGap?: boolean
+
+  /* Open immediatly instead of initially animating from a closed => open state, useful if the bottom sheet is visible by default and the animation would be distracting */
+  skipInitialTransition?: boolean
 } & Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'children'>
 
 export interface RefHandles {