@tamagui/animate-presence 1.0.1-beta.59 → 1.0.1-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animate-presence",
-  "version": "1.0.1-beta.59",
+  "version": "1.0.1-beta.60",
   "source": "src/index.ts",
   "license": "MIT",
   "types": "./types/index.d.ts",
@@ -8,14 +8,15 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.59"
+    "@tamagui/core": "^1.0.1-beta.60"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.59"
+    "@tamagui/build": "^1.0.1-beta.60"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/AnimatePresence.tsx

@@ -0,0 +1,305 @@
+import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from '@tamagui/core'
+import React, {
+  Children,
+  ReactElement,
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  useContext,
+  useRef,
+  useState,
+} from 'react'
+
+import { LayoutGroupContext } from './LayoutGroupContext'
+import { PresenceChild } from './PresenceChild'
+
+React['keep']
+
+export interface AnimatePresenceProps {
+  /**
+   * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children
+   * that are present when the component is first rendered.
+   */
+  initial?: boolean
+
+  /**
+   * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`
+   * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.
+   * This will ensure all leaving components animate using the latest data.
+   */
+  exitVariant?: string | null
+
+  enterVariant?: string | null
+
+  /**
+   * Fires when all exiting nodes have completed animating out.
+   */
+  onExitComplete?: () => void
+
+  /**
+   * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
+   * will finish its exit animation before the entering component is rendered.
+   */
+  exitBeforeEnter?: boolean
+
+  /**
+   * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
+   * child being removed.
+   */
+  presenceAffectsLayout?: boolean
+}
+
+type ComponentKey = string | number
+
+const getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''
+
+const isDev = process.env.NODE_ENV !== 'production'
+
+function updateChildLookup(
+  children: ReactElement<any>[],
+  allChildren: Map<ComponentKey, ReactElement<any>>
+) {
+  const seenChildren = isDev ? new Set<ComponentKey>() : null
+
+  children.forEach((child) => {
+    const key = getChildKey(child)
+
+    if (isDev && seenChildren && seenChildren.has(key)) {
+      console.warn(`Children of AnimatePresence require unique keys. "${key}" is a duplicate.`)
+
+      seenChildren.add(key)
+    }
+
+    allChildren.set(key, child)
+  })
+}
+
+function onlyElements(children: ReactNode): ReactElement<any>[] {
+  const filtered: ReactElement<any>[] = []
+
+  // We use forEach here instead of map as map mutates the component key by preprending `.$`
+  Children.forEach(children, (child, index) => {
+    if (isValidElement(child)) {
+      if (!child.key) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(`No key given to AnimatePresence child, assigning index as key`)
+        }
+        filtered.push(
+          React.cloneElement(child, {
+            key: index,
+          })
+        )
+      } else {
+        filtered.push(child)
+      }
+    }
+  })
+
+  return filtered
+}
+
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```tsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `useEntering` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+export const AnimatePresence: React.FunctionComponent<
+  React.PropsWithChildren<AnimatePresenceProps>
+> = ({
+  children,
+  enterVariant,
+  exitVariant,
+  initial = true,
+  onExitComplete,
+  exitBeforeEnter,
+  presenceAffectsLayout = true,
+}) => {
+  // We want to force a re-render once all exiting animations have finished. We
+  // either use a local forceRender function, or one from a parent context if it exists.
+  let forceRender = useForceUpdate()
+  const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender
+  if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup
+
+  const [isMounted, setIsMounted] = useState(false)
+
+  useIsomorphicLayoutEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
+  const filteredChildren = onlyElements(children)
+  let childrenToRender = filteredChildren
+
+  const exiting = new Set<ComponentKey>()
+
+  // Keep a living record of the children we're actually rendering so we
+  // can diff to figure out which are entering and exiting
+  const presentChildren = useRef(childrenToRender)
+
+  // A lookup table to quickly reference components by key
+  const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current
+
+  // If this is the initial component render, just deal with logic surrounding whether
+  // we play onMount animations or not.
+  const isInitialRender = useRef(true)
+
+  useIsomorphicLayoutEffect(() => {
+    isInitialRender.current = false
+    updateChildLookup(filteredChildren, allChildren)
+    presentChildren.current = childrenToRender
+  })
+
+  useUnmountEffect(() => {
+    isInitialRender.current = true
+    allChildren.clear()
+    exiting.clear()
+  })
+
+  if (isInitialRender.current) {
+    return (
+      <>
+        {childrenToRender.map((child) => (
+          <PresenceChild
+            key={getChildKey(child)}
+            isEntering
+            exitVariant={exitVariant}
+            enterVariant={enterVariant}
+            initial={initial ? undefined : false}
+            presenceAffectsLayout={presenceAffectsLayout}
+          >
+            {child}
+          </PresenceChild>
+        ))}
+      </>
+    )
+  }
+
+  // If this is a subsequent render, deal with entering and exiting children
+  childrenToRender = [...childrenToRender]
+
+  // Diff the keys of the currently-present and target children to update our
+  // exiting list.
+  const presentKeys = presentChildren.current.map(getChildKey)
+  const targetKeys = filteredChildren.map(getChildKey)
+
+  // Diff the present children with our target children and mark those that are exiting
+  const numPresent = presentKeys.length
+  for (let i = 0; i < numPresent; i++) {
+    const key = presentKeys[i]
+
+    if (targetKeys.indexOf(key) === -1) {
+      exiting.add(key)
+    }
+  }
+
+  // If we currently have exiting children, and we're deferring rendering incoming children
+  // until after all current children have exiting, empty the childrenToRender array
+  if (exitBeforeEnter && exiting.size) {
+    childrenToRender = []
+  }
+
+  // Loop through all currently exiting components and clone them to overwrite `animate`
+  // with any `exit` prop they might have defined.
+  exiting.forEach((key) => {
+    // If this component is actually entering again, early return
+    if (targetKeys.indexOf(key) !== -1) return
+
+    const child = allChildren.get(key)
+    if (!child) return
+
+    const insertionIndex = presentKeys.indexOf(key)
+
+    childrenToRender.splice(
+      insertionIndex,
+      0,
+      <PresenceChild
+        key={getChildKey(child)}
+        isEntering={false}
+        onExitComplete={() => {
+          allChildren.delete(key)
+          exiting.delete(key)
+
+          // Remove this child from the present children
+          const removeIndex = presentChildren.current.findIndex(
+            (presentChild) => presentChild.key === key
+          )
+          presentChildren.current.splice(removeIndex, 1)
+
+          // Defer re-rendering until all exiting children have indeed left
+          if (!exiting.size) {
+            presentChildren.current = filteredChildren
+
+            if (isMounted === false) return
+
+            forceRender()
+            onExitComplete?.()
+          }
+        }}
+        exitVariant={exitVariant}
+        enterVariant={enterVariant}
+        presenceAffectsLayout={presenceAffectsLayout}
+      >
+        {child}
+      </PresenceChild>
+    )
+  })
+
+  // Add `MotionContext` even to children that don't need it to ensure we're rendering
+  // the same tree between renders
+  childrenToRender = childrenToRender.map((child) => {
+    const key = child.key as string | number
+    return exiting.has(key) ? (
+      child
+    ) : (
+      <PresenceChild
+        key={getChildKey(child)}
+        isEntering={undefined}
+        exitVariant={exitVariant}
+        enterVariant={enterVariant}
+        presenceAffectsLayout={presenceAffectsLayout}
+      >
+        {child}
+      </PresenceChild>
+    )
+  })
+
+  if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {
+    console.warn(
+      `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`
+    )
+  }
+
+  return (
+    <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>
+  )
+}
+
+AnimatePresence.displayName = 'AnimatePresence'

package/src/AnimatePresenceContext.tsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react'
+
+import { VariantLabels } from './types'
+
+export interface AnimatePresenceContextProps {
+  id: string
+  isEntering: boolean | undefined
+  register: (id: string) => () => void
+  onExitComplete?: (id: string) => void
+  initial?: false | VariantLabels
+  exitVariant?: string | null
+  enterVariant?: string | null
+}
+
+export const AnimatePresenceContext = createContext<AnimatePresenceContextProps | null>(null)

package/src/LayoutGroupContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface LayoutGroupContextProps {
+  id?: string
+  forceRender?: VoidFunction
+}
+
+export const LayoutGroupContext = createContext<LayoutGroupContextProps>({})

package/src/PresenceChild.tsx

@@ -0,0 +1,82 @@
+import { useConstant, useId } from '@tamagui/core'
+import * as React from 'react'
+
+import { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'
+import { VariantLabels } from './types'
+
+interface PresenceChildProps {
+  children: React.ReactElement<any>
+  isEntering: boolean | undefined
+  onExitComplete?: () => void
+  initial?: false | VariantLabels
+  exitVariant?: string | null
+  enterVariant?: string | null
+  presenceAffectsLayout: boolean
+}
+
+export const PresenceChild = ({
+  children,
+  initial,
+  isEntering,
+  onExitComplete,
+  exitVariant,
+  enterVariant,
+  presenceAffectsLayout,
+}: PresenceChildProps) => {
+  const presenceChildren = useConstant(newChildrenMap)
+  const id = useId() || ''
+
+  const context = React.useMemo(
+    (): AnimatePresenceContextProps => {
+      return {
+        id,
+        initial,
+        isEntering,
+        exitVariant,
+        enterVariant,
+        onExitComplete: (childId: string) => {
+          presenceChildren.set(childId, true)
+          for (const isComplete of presenceChildren.values()) {
+            if (!isComplete) {
+              return // can stop searching when any is incomplete
+            }
+          }
+          onExitComplete?.()
+        },
+        register: (childId: string) => {
+          presenceChildren.set(childId, false)
+          return () => presenceChildren.delete(childId)
+        },
+      }
+    },
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    presenceAffectsLayout ? undefined : [isEntering, onExitComplete, exitVariant, enterVariant]
+  )
+
+  // cant this be a useEffect?
+  React.useMemo(() => {
+    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))
+  }, [isEntering])
+
+  /**
+   * If there's no animated components to fire exit animations, we want to remove this
+   * component immediately.
+   */
+  React.useEffect(() => {
+    if (isEntering === false && !presenceChildren.size) {
+      onExitComplete?.()
+    }
+  }, [isEntering])
+
+  return (
+    <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>
+  )
+}
+
+function newChildrenMap(): Map<string, boolean> {
+  return new Map()
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './AnimatePresence'
+export * from './useEntering'
+export { AnimatePresenceContext } from './AnimatePresenceContext'

package/src/types.ts

@@ -0,0 +1,11 @@
+export interface Axis {
+  min: number
+  max: number
+}
+
+export interface Box {
+  x: Axis
+  y: Axis
+}
+
+export type VariantLabels = string | string[]

package/src/useEntering.ts

@@ -0,0 +1,43 @@
+import { useId } from '@tamagui/core'
+import { useContext, useEffect } from 'react'
+
+import { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'
+
+export type SafeToRemove = () => void
+
+export function useEntering(): [boolean | undefined, undefined | (() => void)] {
+  const context = useContext(AnimatePresenceContext)
+
+  if (context === null) {
+    return [undefined, undefined]
+  }
+
+  const { isEntering, onExitComplete, register } = context
+  const id = useId() || ''
+  const safeToRemove = () => onExitComplete?.(id)
+
+  // It's safe to call the following hooks conditionally (after an early return) because the context will always
+  // either be null or non-null for the lifespan of the component.
+
+  useEffect(() => {
+    register(id)
+  }, [])
+
+  return isEntering === false
+    ? [false, safeToRemove]
+    : isEntering === true
+    ? [true, safeToRemove]
+    : [undefined, safeToRemove]
+}
+
+/**
+ * Similar to `useEntering`, except `useIsEntering` simply returns whether or not the component is present.
+ * There is no `safeToRemove` function. ```
+ */
+export function useIsEntering() {
+  return isEntering(useContext(AnimatePresenceContext))
+}
+
+export function isEntering(context: AnimatePresenceContextProps | null) {
+  return context === null ? undefined : context.isEntering
+}