@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.210

package/src/helpers/mergeProps.ts

@@ -0,0 +1,56 @@
+/**
+ * Preserves prop ordering, so that the order most closely matches the last spread objects
+ * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept
+ *
+ *    Given:
+ *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })
+ *    The final key order will be:
+ *      b, a
+ *
+ * Handles a couple special tamagui cases
+ *   - classNames can be extracted out separately
+ *   - shorthands can be expanded before merging
+ */
+
+type StringRecord = Record<string, string>
+
+export const mergeProps = (
+  a: Object,
+  b: Object,
+  leaveOutClassNames = false,
+  inverseShorthands?: StringRecord
+) => {
+  const out: StringRecord = {}
+  const outCns: StringRecord = leaveOutClassNames ? {} : (null as any)
+  for (const key in a) {
+    mergeProp(out, outCns, a, b, key, leaveOutClassNames, inverseShorthands)
+  }
+  for (const key in b) {
+    mergeProp(out, outCns, b, undefined, key, leaveOutClassNames, inverseShorthands)
+  }
+  return [out, outCns] as const
+}
+
+function mergeProp(
+  out: StringRecord,
+  outCns: StringRecord,
+  a: Object,
+  b: Object | undefined,
+  key: string,
+  leaveOutClassNames: boolean,
+  inverseShorthands?: StringRecord
+) {
+  const val = a[key]
+  const shorthand = inverseShorthands ? inverseShorthands[key] : null
+  if (b && (key in b || (shorthand && shorthand in b))) {
+    return
+  }
+  if (shorthand) {
+    key = shorthand
+  }
+  if (leaveOutClassNames && val?.[0] === '_') {
+    outCns[key] = val
+  } else {
+    out[key] = val
+  }
+}

package/src/helpers/mergeTransform.ts

@@ -0,0 +1,16 @@
+import type { ViewStyle } from '@tamagui/types-react-native'
+
+export const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {
+  obj.transform ||= []
+  obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)
+}
+
+const mapTransformKeys = {
+  x: 'translateX',
+  y: 'translateY',
+}
+
+export const invertMapTransformKeys = {
+  translateX: 'x',
+  translateY: 'y',
+}

package/src/helpers/normalizeColor.ts

@@ -0,0 +1,53 @@
+import normalizeCSSColor from '@tamagui/normalize-css-color-lite'
+
+export const normalizeColor = (color?: number | string | null, opacity?: number) => {
+  if (color == null || color == undefined) {
+    return
+  }
+  if (
+    color[0] === '$' ||
+    (process.env.TAMAGUI_TARGET === 'web' &&
+      typeof color === 'string' &&
+      (webColors[color] || color[0] === '_' || color.startsWith('var(')))
+  ) {
+    return color
+  } else {
+    const rgba = colorToRGBA(color)
+    if (rgba != null) {
+      const [r, g, b, a] = rgba
+      const alpha = (opacity ?? a).toFixed(2)
+      return `rgba(${r},${g},${b},${alpha})`
+    }
+  }
+  return color
+}
+
+const webColors = {
+  currentColor: true,
+  currentcolor: true,
+  transparent: true,
+  inherit: true,
+}
+
+export function colorToRGBA(color: string | number) {
+  const colorInt = processColor(color)
+  if (colorInt != null) {
+    const r = (colorInt >> 16) & 255
+    const g = (colorInt >> 8) & 255
+    const b = colorInt & 255
+    const a = ((colorInt >> 24) & 255) / 255
+    return [r, g, b, a] as const
+  }
+  return null
+}
+
+const processColor = (color?: number | string) => {
+  if (color === undefined || color === null) {
+    return null
+  }
+  const intColor = normalizeCSSColor(color)
+  if (intColor === undefined || intColor === null) {
+    return null
+  }
+  return ((+intColor << 24) | (+intColor >>> 8)) >>> 0
+}

package/src/helpers/normalizeValueWithProperty.ts

@@ -0,0 +1,110 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+
+import { getAllSelectors } from './insertStyleRule'
+import { normalizeColor } from './normalizeColor'
+
+const cache = {}
+
+export function normalizeValueWithProperty(value: any, property?: string): any {
+  if (property && unitlessNumbers[property]) {
+    return value
+  }
+  const cached = cache[value]
+  if (cached !== undefined) {
+    return cached
+  }
+  let res = value
+  if (
+    process.env.TAMAGUI_TARGET === 'web' &&
+    typeof value === 'number' &&
+    (property === undefined || !unitlessNumbers[property])
+  ) {
+    res = `${value}px`
+  } else if (property && colorProps[property]) {
+    res = normalizeColor(value)
+    cache[value] = res
+  }
+  return res
+}
+
+// TODO react-native-web-lite
+
+const colorProps = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+}
+
+const unitlessNumbers = {
+  WebkitLineClamp: true,
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowGap: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnGap: true,
+  gridColumnStart: true,
+  lineClamp: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  shadowOpacity: true,
+}
+
+// getting real values for colors for animations (reverse mapped from CSS)
+// this isn't beautiful, but will do relatively fine performance for now
+const rcache = {}
+export function reverseMapClassNameToValue(key: string, className: string) {
+  const selectors = getAllSelectors()
+  const cssRule = selectors[className]
+  if (rcache[cssRule]) return rcache[cssRule]
+  if (!cssRule) {
+    return
+  }
+  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '')
+  let res: any
+  if (unitlessNumbers[key]) {
+    res = +cssVal
+  } else if (cssVal.endsWith('px')) {
+    res = +cssVal.replace('px', '')
+  } else {
+    res = cssVal
+  }
+  if (typeof res === 'string') {
+    res = res.trim()
+  }
+  rcache[cssRule] = res
+  return res
+}

package/src/helpers/proxyThemeVariables.tsx

@@ -0,0 +1,15 @@
+import { createProxy } from './createProxy'
+
+export function proxyThemeVariables<A extends Object>(obj: A): A {
+  return createProxy<A>(obj || {}, {
+    has(target, key) {
+      return Reflect.has(target, removeStarting$(key))
+    },
+    get(target, key) {
+      return Reflect.get(target, removeStarting$(key))
+    },
+  })
+}
+
+const removeStarting$ = (str: string | symbol) =>
+  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str

package/src/helpers/pseudoDescriptors.ts

@@ -0,0 +1,18 @@
+// *0 order matches to *1
+
+export const pseudoDescriptors = {
+  hoverStyle: {
+    name: 'hover',
+    priority: 1,
+  },
+  pressStyle: {
+    name: 'active',
+    priority: 2,
+  },
+  focusStyle: {
+    name: 'focus',
+    priority: 3,
+  },
+} as const
+
+export type PseudoDescriptor = typeof pseudoDescriptors[keyof typeof pseudoDescriptors]

package/src/helpers/registerCSSVariable.ts

@@ -0,0 +1,11 @@
+import { Variable, createCSSVariable } from '../createVariable'
+
+export const registerCSSVariable = (v: Variable) => {
+  tokensValueToVariable.set(v.val, v)
+}
+
+export const variableToCSS = (v: Variable) => {
+  return `--${createCSSVariable(v.name, false)}:${typeof v.val === 'number' ? `${v.val}px` : v.val}`
+}
+
+export const tokensValueToVariable = new Map<any, any>()

package/src/helpers/themeable.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import { ThemeName } from '../types'
+import { Theme } from '../views/Theme'
+import { ThemeInverse } from '../views/ThemeInverse'
+
+export interface ThemeableProps {
+  theme?: ThemeName | null
+  themeInverse?: boolean
+}
+
+export function themeable<Component extends (props: any) => any>(
+  component: Component,
+  opts?: { componentName?: string }
+) {
+  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {
+    const { themeInverse, theme, ...rest } = props
+    const element = React.createElement(component, { ...rest, ref } as any)
+    if (themeInverse) {
+      return <ThemeInverse>{element}</ThemeInverse>
+    }
+    if (theme || opts) {
+      return (
+        <Theme componentName={opts?.componentName} name={(theme as any) || null}>
+          {element}
+        </Theme>
+      )
+    }
+    return element
+  })
+
+  const withTheme: any = withThemeComponent
+  withTheme.displayName = `Themed(${
+    (component as any)?.displayName || (component as any)?.name || 'Anonymous'
+  })`
+
+  return withTheme as Component extends (props: infer P) => infer R
+    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R
+    : unknown
+}

package/src/helpers/themes.ts

@@ -0,0 +1,69 @@
+import { createVariable, isVariable } from '../createVariable'
+import { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'
+import { CreateTamaguiProps } from '../types'
+
+// mutates, freeze after
+// shared by createTamagui so extracted here
+export function ensureThemeVariable(theme: any, key: string) {
+  const val = theme[key]
+  const themeKey = key
+  if (!isVariable(val)) {
+    theme[key] = createVariable({
+      key: themeKey,
+      name: themeKey,
+      val,
+    })
+  } else {
+    if (val.name !== themeKey) {
+      // rename to theme name
+      theme[key] = createVariable({
+        key: val.name,
+        name: themeKey,
+        val: val.val,
+      })
+    }
+  }
+}
+
+export function proxyThemeToParents(
+  themeName: string,
+  theme: any,
+  themes: CreateTamaguiProps['themes']
+) {
+  // we could test if this is better as just a straight object spread or fancier proxy
+  const cur: string[] = []
+  // if theme is dark_blue_alt1_Button
+  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1"]
+  const parents = themeName
+    .split('_')
+    .slice(0, -1)
+    .map((part) => {
+      cur.push(part)
+      return cur.join('_')
+    })
+
+  const hasParents = parents.length
+
+  // proxy fallback values to parent theme values
+  return new Proxy(theme, {
+    get(target, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme
+      }
+      if (!hasParents || Reflect.has(target, key)) {
+        return Reflect.get(target, key)
+      }
+      // check parents
+      for (let i = parents.length - 1; i >= 0; i--) {
+        const parent = themes[parents[i]]
+        if (!parent) {
+          continue
+        }
+        if (Reflect.has(parent, key)) {
+          return Reflect.get(parent, key)
+        }
+      }
+      return Reflect.get(target, key)
+    },
+  })
+}

package/src/helpers/useShallowSetState.tsx

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react'
+
+export function useShallowSetState<State extends Object>(
+  setter: React.Dispatch<React.SetStateAction<State>>
+) {
+  return useCallback(
+    (next: Partial<State>) => {
+      setter((prev) => {
+        for (const key in next) {
+          if (prev[key] !== next[key]) {
+            return { ...prev, ...next }
+          }
+        }
+        return prev
+      })
+    },
+    [setter]
+  )
+}

package/src/helpers/withStaticProperties.tsx

@@ -0,0 +1,7 @@
+export const withStaticProperties = function <A extends Function, B>(
+  component: A,
+  staticProps: B
+): A & B {
+  Object.assign(component, staticProps)
+  return component as any
+}

package/src/hooks/getThemeUnwrapped.tsx

@@ -0,0 +1,7 @@
+export const getThemeUnwrapped = (theme: any) => {
+  if (!theme) return null
+  const first = theme[GetThemeUnwrapped]
+  return first?.[GetThemeUnwrapped] || first || theme
+}
+
+export const GetThemeUnwrapped = Symbol()

package/src/hooks/useElementLayout.tsx

@@ -0,0 +1,90 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { getBoundingClientRect } from '@tamagui/react-native-use-responder-events'
+import { useEvent } from '@tamagui/use-event'
+import { RefObject } from 'react'
+
+const LayoutHandlers = new WeakMap<Element, Function>()
+
+export type LayoutValue = {
+  x: number
+  y: number
+  width: number
+  height: number
+  left: number
+  top: number
+}
+
+export type LayoutEvent = {
+  nativeEvent: {
+    layout: LayoutValue
+    target: any
+  }
+  timeStamp: number
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const { target } of entries) {
+      const onLayout = LayoutHandlers.get(target)
+      if (typeof onLayout !== 'function') return
+      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {
+        onLayout({
+          nativeEvent: {
+            layout: { x, y, width, height, left, top },
+            target,
+          },
+          timeStamp: Date.now(),
+        })
+      })
+    }
+  })
+}
+
+export const getRect = (node: HTMLElement) => {
+  const rect = getBoundingClientRect(node)
+  if (!rect) return
+  const { x, y, top, left } = rect
+  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }
+}
+
+export const measureLayout = (
+  node: HTMLElement,
+  relativeTo: HTMLElement | null,
+  callback: Function
+) => {
+  const relativeNode = relativeTo || node?.parentNode
+  if (relativeNode instanceof HTMLElement) {
+    setTimeout(() => {
+      const relativeRect = getBoundingClientRect(relativeNode)!
+      const { height, left, top, width } = getRect(node)!
+      const x = left - relativeRect.left
+      const y = top - relativeRect.top
+      callback(x, y, width, height, left, top)
+    }, 0)
+  }
+}
+
+const idFn = () => {}
+
+export function useElementLayout(
+  ref: RefObject<Element>,
+  onLayout?: ((e: LayoutEvent) => void) | null
+) {
+  const hasLayoutEvent = !!onLayout
+  const onLayoutEvent = useEvent(onLayout || idFn)
+
+  // Observing is done in a separate effect to avoid this effect running
+  // when 'onLayout' changes.
+  useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver || !hasLayoutEvent) return
+    const node = ref.current
+    if (!node) return
+    LayoutHandlers.set(node, onLayoutEvent)
+    resizeObserver.observe(node)
+    return () => {
+      resizeObserver?.unobserve(node)
+    }
+  }, [ref, hasLayoutEvent])
+}

package/src/hooks/useId.tsx

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

package/src/hooks/useIsTouchDevice.tsx

@@ -0,0 +1,6 @@
+import { isTouchable, isWeb } from '@tamagui/constants'
+import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
+
+export const useIsTouchDevice = () => {
+  return !isWeb ? true : useDidFinishSSR() ? isTouchable : false
+}