@tamagui/core 1.0.1-beta.19 → 1.0.1-beta.190

package/src/helpers/matchMedia.native.ts

@@ -0,0 +1,6 @@
+import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
+
+export const matchMedia = (media: string) => new MediaQueryList(media)
+
+// @ts-ignore
+globalThis['matchMedia'] = matchMedia

package/src/helpers/matchMedia.ts

@@ -0,0 +1,16 @@
+export const matchMedia = (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback
+
+function matchMediaFallback(query: string): MediaQueryList {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    !process.env.IS_STATIC &&
+    process.env.TAMAGUI_TARGET !== 'web'
+  ) {
+    console.log('warning: matchMedia not loading! Native not picking up .native.js files?')
+  }
+  return {
+    addListener() {},
+    removeListener() {},
+    matches: false,
+  } as any
+}

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 '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,80 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+
+import { normalizeColor } from './normalizeColor'
+
+const cache = {}
+
+export function normalizeValueWithProperty(value: any, property?: string): any {
+  const cached = cache[value]
+  if (cached) {
+    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,
+}

package/src/helpers/proxyThemeVariables.tsx

@@ -0,0 +1,18 @@
+export function proxyThemeVariables<A extends Object>(obj: A): A {
+  if (process.env.NODE_ENV === 'development' && !obj) {
+    // eslint-disable-next-line no-console
+    console.trace(`empty value for proxyThemeVariables`, obj)
+    return obj
+  }
+  return new Proxy<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/startTransition.ts

@@ -0,0 +1,4 @@
+import React from 'react'
+
+// backwards compat
+export const startTransition = React.startTransition || ((cb) => cb())

package/src/helpers/themeable.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react'
+
+import { ThemeName } from '../types'
+import { Theme } from '../views/Theme'
+import { ThemeInverse } from '../views/ThemeInverse'
+
+export type ThemeableProps = {
+  theme?: ThemeName | string | 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'> & {
+          theme?: ThemeName | null
+          themeInverse?: boolean
+        }
+      ) => 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,20 @@
+import React, { useCallback } from 'react'
+
+export function useShallowSetState<State extends Object>(
+  setter: React.Dispatch<React.SetStateAction<State>>
+) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  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/validate.ts

@@ -0,0 +1,80 @@
+// // published a patched version that works on native
+// // @ts-ignore
+// import { default as ow } from '@tamagui/ow/dev-only'
+
+// let Config: any
+// let Tokens: any
+// let FontRequired: any
+// let FontOptional: any
+
+// export const validateConfig = (conf: any) => {
+//   if (!conf) {
+//     console.warn('no conf?')
+//     return
+//   }
+//   try {
+//     ow(conf, Config)
+//   } catch (err: any) {
+//     console.warn('Given config:\n', JSON.stringify(conf, null, 2), err)
+//   }
+// }
+
+// export const validateTokens = (tokens: any) => {
+//   try {
+//     ow(tokens, Tokens)
+//   } catch (err: any) {
+//     console.warn('Given tokens:\n', JSON.stringify(tokens, null, 2), err)
+//   }
+// }
+
+// export const validateFont = (font: any) => {
+//   try {
+//     const { style, transform, color, ...required } = font
+//     ow(required, FontRequired)
+//     ow({ style, transform, color }, FontOptional)
+//   } catch (err: any) {
+//     console.warn('Given font:\n', JSON.stringify(font, null, 2), err)
+//   }
+// }
+
+// if (process.env.NODE_ENV === 'development') {
+//   const fontReq = {
+//     family: ow.string,
+//     size: ow.object.nonEmpty.valuesOfType(ow.number),
+//     lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+//     weight: ow.object.nonEmpty.valuesOfType(ow.string),
+//     letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),
+//   }
+//   const fontOpt = {
+//     style: ow.optional.object.valuesOfType(ow.string),
+//     transform: ow.optional.object.valuesOfType(ow.string),
+//     color: ow.optional.object.valuesOfType(ow.any(ow.string, ow.object)),
+//   }
+
+//   Config = ow.object.exactShape({
+//     defaultTheme: ow.optional.string,
+//     disableRootThemeClass: ow.optional.boolean,
+//     shorthands: ow.optional.object.valuesOfType(ow.string),
+//     themes: ow.object.valuesOfType(ow.object),
+//     tokens: ow.object.valuesOfType(ow.object),
+//     media: ow.object.valuesOfType(ow.object),
+//     animations: ow.object.valuesOfType(ow.object),
+//     fonts: ow.object.valuesOfType(
+//       ow.object.partialShape({
+//         ...fontReq,
+//         ...fontOpt,
+//       })
+//     ),
+//   })
+
+//   FontRequired = ow.object.exactShape(fontReq)
+//   FontOptional = ow.object.partialShape(fontOpt)
+
+//   Tokens = ow.object.exactShape({
+//     size: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
+//     space: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
+//     zIndex: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
+//     radius: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
+//     color: ow.object.nonEmpty.valuesOfType(ow.any(ow.string, ow.object)),
+//   })
+// }

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,8 @@
+export const getThemeUnwrapped = (theme: any) => {
+  if (!theme) return null
+  const first = theme[GetThemeUnwrapped]
+  if (first) return first[GetThemeUnwrapped] || first
+  return theme
+}
+
+export const GetThemeUnwrapped = Symbol()

package/src/hooks/useConstant.tsx

@@ -0,0 +1,19 @@
+import { useMemo, useRef } from 'react'
+
+type ResultBox<T> = { v: T }
+
+export function useConstant<T>(fn: () => T): T {
+  // RSC compat
+  if (typeof document === 'undefined') {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(() => fn(), [])
+  }
+
+  const ref = useRef<ResultBox<T>>()
+
+  if (!ref.current) {
+    ref.current = { v: fn() }
+  }
+
+  return ref.current.v
+}

package/src/hooks/useId.tsx

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

package/src/hooks/useIsMounted.ts

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

package/src/hooks/useIsTouchDevice.tsx

@@ -0,0 +1,20 @@
+import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { useState } from 'react'
+
+// ssr friendly
+
+export const useIsTouchDevice = () => {
+  const [touchOnly, setTouchOnly] = useState(false)
+
+  if (isWeb && !isServer) {
+    // 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
+}