@tamagui/core 1.0.1-beta.138 → 1.0.1-beta.141

package/src/hooks/useFeatures.tsx

@@ -0,0 +1,288 @@
+import React from 'react'
+import { RefObject } from 'react'
+import { View, ViewStyle } from 'react-native'
+
+import { getConfig } from '../conf'
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { getSubStyle } from '../helpers/getSplitStyles'
+import {
+  PseudoStyles,
+  SplitStyleState,
+  StaticConfigParsed,
+  TamaguiComponentState,
+  TamaguiInternalConfig,
+  UseAnimationHook,
+  UseAnimationProps,
+} from '../types'
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'
+
+type FeatureDefinition = {
+  isEnabled: (props: any) => boolean
+  Component: any
+}
+
+type FeatureUtils = {
+  forceUpdate: Function
+  state: SplitStyleState
+  setStateShallow: (next: Partial<TamaguiComponentState>) => void
+  useAnimations?: UseAnimationHook
+  pseudos: PseudoStyles
+  style: ViewStyle | null | undefined
+  staticConfig: StaticConfigParsed
+  theme: any
+  onDidAnimate?: () => void
+  hostRef: RefObject<HTMLElement | View>
+}
+
+const createDefinition = ({
+  Component,
+  propNames,
+}: {
+  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void
+  propNames: string[]
+}): FeatureDefinition => ({
+  isEnabled: (props: any) => propNames.some((name) => !!props[name]),
+  Component,
+})
+
+let featureDefinitions: Record<string, FeatureDefinition> | null = null
+let tamaguiConfig: TamaguiInternalConfig
+
+type FeatureKeys = keyof ReturnType<typeof loadFeatures>
+
+export const useFeatures = (props: any, utils?: FeatureUtils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures()
+  }
+  const elements: JSX.Element[] = []
+  const enabled: { [key in FeatureKeys]?: boolean } = {}
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name]
+    if (isEnabled(props) && Component) {
+      enabled[name] = true
+      elements.push(<Component key={name} {...props} _utils={utils} />)
+    }
+  }
+  return {
+    elements,
+    enabled,
+  }
+}
+
+function loadFeatures() {
+  return {
+    // loads animations and sets state with the results
+    animation: loadAnimationFeature(),
+
+    // will update the parent whenever media query changes
+    // no need on web, media queries are inserted and run in css
+    mediaQuery: loadMediaQueryFeature(),
+  } as const
+}
+
+function loadAnimationFeature() {
+  tamaguiConfig = tamaguiConfig || getConfig()
+
+  return createDefinition({
+    Component: ({ _utils, ...props }) => {
+      const {
+        state,
+        useAnimations,
+        pseudos,
+        style: inStyle,
+        setStateShallow,
+        staticConfig,
+        theme,
+        onDidAnimate,
+      } = _utils
+
+      if (!useAnimations) {
+        console.error('no useAnimations hook provided')
+        return null
+      }
+
+      // we always have .animation set
+      const propsWithAnimation = props as UseAnimationProps
+
+      const res = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          // we have to merge such that transforms keys all exist
+          const style = inStyle || {}
+
+          const enterStyle = isEntering
+            ? enterVariant && staticConfig.variants?.[enterVariant]['true']
+              ? getSubStyle(
+                  '',
+                  staticConfig.variants?.[enterVariant]['true'],
+                  staticConfig,
+                  theme,
+                  props,
+                  state,
+                  tamaguiConfig
+                ) || pseudos.enterStyle
+              : null || pseudos.enterStyle
+            : null
+
+          const exitStyle = isExiting
+            ? exitVariant && staticConfig.variants?.[exitVariant]['true']
+              ? getSubStyle(
+                  '',
+                  staticConfig.variants?.[exitVariant]['true'],
+                  staticConfig,
+                  theme,
+                  props,
+                  state,
+                  tamaguiConfig
+                ) || pseudos.exitStyle
+              : null || pseudos.exitStyle
+            : null
+
+          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style
+          // no animation will run! this is really confusing. this will look at all variants,
+          // and fill in base styles if they don't exist. eg:
+          // input:
+          //   base: {}
+          //   hoverStyle: { scale: 2 }
+          //   enterStyle: { x: 100 }
+          // output:
+          //   base: { x: 0, scale: 1 }
+          ensureBaseHasDefaults(
+            style,
+            enterStyle,
+            pseudos.hoverStyle,
+            pseudos.focusStyle,
+            pseudos.pressStyle,
+            pseudos.pressStyle
+          )
+
+          enterStyle && merge(style, enterStyle)
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)
+          exitStyle && merge(style, exitStyle)
+
+          if (process.env.NODE_ENV === 'development') {
+            if (props['debug']) {
+              // eslint-disable-next-line no-console
+              console.log('animation style', style)
+            }
+          }
+
+          return style
+        },
+        //, delay
+      })
+
+      useIsomorphicLayoutEffect(() => {
+        setStateShallow({
+          animation: res,
+        })
+      }, [res])
+
+      return null
+    },
+    propNames: ['animation'],
+  })
+}
+
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: '0deg',
+  rotateY: '0deg',
+  rotateX: '0deg',
+}
+
+function ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {
+  for (const pseudo of pseudos) {
+    if (!pseudo) continue
+    for (const key in pseudo) {
+      const val = pseudo[key]
+      if (key === 'transform') {
+        if (typeof val === 'string') {
+          continue
+        }
+        for (const t of val) {
+          const tkey = Object.keys(t)[0]
+          const defaultVal = defaults[tkey]
+          const tDefaultVal = { [tkey]: defaultVal } as any
+          if (!base.transform) {
+            base.transform = [tDefaultVal]
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal)
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key]
+        }
+      }
+    }
+  }
+}
+
+function merge(base: ViewStyle, next: ViewStyle) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next)
+    return
+  }
+  const { transform, ...rest } = next
+  Object.assign(base, rest)
+  for (const t of transform) {
+    const key = Object.keys(t)[0]
+    const existing = base.transform.find((x) => key in x)
+    if (existing) {
+      existing[key] = t[key]
+    } else {
+      base.transform.push(t)
+    }
+  }
+}
+
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState)
+
+  return createDefinition({
+    Component: (props: any) => {
+      const mediaKeys = mediaPropNames.filter((x) => x in props)
+
+      useIsomorphicLayoutEffect(() => {
+        for (const key of mediaKeys) {
+          addMediaQueryListener(key, props._utils.forceUpdate)
+        }
+        return () => {
+          for (const key of mediaKeys) {
+            removeMediaQueryListener(key, props._utils.forceUpdate)
+          }
+        }
+      }, [mediaKeys.join(',')])
+
+      return null
+    },
+    propNames: mediaPropNames,
+  })
+}
+
+// TODO
+// measureLayout: createDefinition({
+//   Component: (props) => {
+//     console.log('measure', props)
+//     return null
+//   },
+//   propNames: ['onLayout'],
+// }),

package/src/hooks/useId.tsx

@@ -0,0 +1 @@
+export { useId } from 'react'

package/src/hooks/useIsMounted.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+
+export function useIsMounted() {
+  const isMounted = useRef(false)
+
+  useIsomorphicLayoutEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  return isMounted
+}

package/src/hooks/useIsSSR.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+import { isSSR, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { startTransition } from '../helpers/startTransition'
+
+// because any change before first useEffect causes hydration / mismatch issues
+
+export const useIsSSR = () => {
+  const [val, setVal] = useState(true)
+
+  useIsomorphicLayoutEffect(() => {
+    if (isWeb && !isSSR) {
+      startTransition(() => {
+        setVal(false)
+      })
+    }
+  }, [])
+
+  return val
+}

package/src/hooks/useIsTouchDevice.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+
+import { isSSR, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+
+// ssr friendly
+
+export const useIsTouchDevice = () => {
+  const [touchOnly, setTouchOnly] = useState(false)
+
+  if (isWeb && !isSSR) {
+    // only ever false on web SSR (env), so run effect conditionally
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsomorphicLayoutEffect(() => {
+      if (isTouchable) {
+        setTouchOnly(true)
+      }
+    }, [])
+  }
+
+  return touchOnly
+}

package/src/hooks/useMedia.tsx

@@ -0,0 +1,167 @@
+import { useMemo, useState } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { matchMedia } from '../helpers/matchMedia'
+import {
+  ConfigureMediaQueryOptions,
+  MediaQueries,
+  MediaQueryKey,
+  MediaQueryObject,
+  MediaQueryState,
+} from '../types'
+import { useSafeRef } from './useSafeRef'
+
+export const mediaState: MediaQueryState = {} as any
+const mediaQueryListeners: { [key: string]: Set<Function> } = {}
+
+export function addMediaQueryListener(key: MediaQueryKey, cb: any) {
+  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
+  mediaQueryListeners[key].add(cb)
+  return () => removeMediaQueryListener(key, cb)
+}
+
+export function removeMediaQueryListener(key: MediaQueryKey, cb: any) {
+  mediaQueryListeners[key]?.delete(cb)
+}
+
+export const mediaQueryConfig: MediaQueries = {}
+
+export const getMedia = () => {
+  return mediaState
+}
+
+const dispose = new Set<Function>()
+
+// for SSR capture it at time of startup
+let initialMediaState: MediaQueryState | null
+
+export const configureMedia = ({
+  queries,
+  defaultActive = {},
+}: ConfigureMediaQueryOptions = {}) => {
+  if (!queries) return
+
+  // support hot reload
+  if (initialMediaState) {
+    if (process.env.NODE_ENV === 'development') {
+      if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
+        // hmr avoid update
+        return
+      }
+    }
+    setupMediaListeners()
+  }
+
+  Object.assign(mediaQueryConfig, queries)
+  // start in the initial state
+  for (const key in queries) {
+    mediaState[key] = defaultActive[key] || false
+  }
+  initialMediaState = { ...mediaState }
+}
+
+function unlisten() {
+  dispose.forEach((cb) => cb())
+  dispose.clear()
+}
+
+function setupMediaListeners() {
+  // hmr, undo existing before re-binding
+  unlisten()
+
+  for (const key in mediaQueryConfig) {
+    const str = mediaObjectToString(mediaQueryConfig[key])
+    const getMatch = () => matchMedia(str)
+    const match = getMatch()
+    if (!match) {
+      throw new Error('⚠️ No match')
+    }
+    // react native needs these deprecated apis for now
+    match.addListener(update)
+    dispose.add(() => match.removeListener(update))
+    update()
+
+    function update() {
+      const next = !!getMatch().matches
+      if (next === mediaState[key]) return
+      mediaState[key] = next
+      const listeners = mediaQueryListeners[key]
+      if (listeners?.size) {
+        for (const cb of [...listeners]) {
+          cb()
+        }
+      }
+    }
+  }
+}
+
+export function useMediaQueryListeners() {
+  useIsomorphicLayoutEffect(() => {
+    setupMediaListeners()
+    return unlisten
+  }, [])
+}
+
+export function useMedia(): {
+  [key in MediaQueryKey]: boolean
+} {
+  const [state, setState] = useState(initialMediaState!)
+  const keys = useSafeRef({} as Record<string, boolean>)
+
+  function updateState() {
+    setState((prev) => {
+      for (const key in keys.current) {
+        if (prev[key] !== mediaState[key]) {
+          return { ...mediaState }
+        }
+      }
+      return prev
+    })
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const listeners: Function[] = []
+    for (const key in keys.current) {
+      listeners.push(addMediaQueryListener(key, updateState))
+    }
+    updateState()
+    return () => {
+      listeners.forEach((cb) => cb())
+    }
+  })
+
+  return useMemo(
+    () =>
+      new Proxy(state, {
+        get(_, key: string) {
+          if (!keys.current[key]) {
+            keys.current = { ...keys.current, [key]: true }
+          }
+          return Reflect.get(state, key)
+        },
+      }),
+    [state, keys]
+  )
+}
+
+function camelToHyphen(str: string) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
+}
+
+export function mediaObjectToString(query: string | MediaQueryObject) {
+  if (typeof query === 'string') {
+    return query
+  }
+  return Object.entries(query)
+    .map(([feature, value]) => {
+      feature = camelToHyphen(feature)
+      if (typeof value === 'string') {
+        return `(${feature}: ${value})`
+      }
+      if (typeof value === 'number' && /[height|width]$/.test(feature)) {
+        value = `${value}px`
+      }
+      return `(${feature}: ${value})`
+    })
+    .join(' and ')
+}

package/src/hooks/usePressable.tsx

@@ -0,0 +1,9 @@
+import { Pressable, PressableProps } from 'react-native'
+
+const getPressable = Pressable?.['type']?.['render']
+
+export const usePressable = (props: PressableProps) => {
+  const out = getPressable(props)
+  const { children, style, ...pressableProps } = out.props
+  return [pressableProps, style] as const
+}

package/src/hooks/useSafeRef.ts

@@ -0,0 +1,50 @@
+import { useRef } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+
+// dai-shi 🙏
+// https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325
+
+type Raw<T> = {
+  isRendering: boolean
+  comittedValue: T
+  currentValue: T
+  ref: { current: T }
+}
+
+export const useSafeRef = <T>(initialValue: T) => {
+  const rawRef = useRef<Raw<T>>()
+
+  const raw: Raw<T> =
+    rawRef.current ??
+    (rawRef.current = {
+      isRendering: true,
+      comittedValue: initialValue,
+      currentValue: initialValue,
+      ref: {
+        get current() {
+          if (raw.isRendering) {
+            return raw.currentValue
+          } else {
+            return raw.comittedValue
+          }
+        },
+        set current(v) {
+          if (!raw.isRendering) {
+            raw.comittedValue = v
+          }
+          raw.currentValue = v
+        },
+      },
+    })
+
+  raw.isRendering = true
+  Promise.resolve().then(() => (raw.isRendering = false))
+  raw.currentValue = raw.comittedValue
+
+  useIsomorphicLayoutEffect(() => {
+    raw.comittedValue = raw.currentValue
+  })
+
+  return raw.ref
+}