@tamagui/core 1.0.1-beta.148 → 1.0.1-beta.151

package/src/types.tsx

@@ -1,7 +1,7 @@
 // TODO split this into own package @tamagui/types to share with animations packages
 
 import { Properties } from 'csstype'
-import React from 'react'
+import React, { RefObject } from 'react'
 import {
   GestureResponderEvent,
   Image,
@@ -336,6 +336,8 @@ export type GenericFont<Key extends number | string = number | string> = {
   style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>
   transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>
   color?: Partial<{ [key in Key]: string | Variable }>
+  // for native use only, lets you map to alternative fonts
+  face?: { [key in FontWeightSteps]: { normal?: string; italic?: string } }
 }
 
 // media
@@ -429,9 +431,8 @@ export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
 export type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>
 export type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number
 export type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number
-export type FontWeightTokens =
-  | `$${GetTokenFontKeysFor<'weight'>}`
-  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps
 export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
 export type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number
 export type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']
@@ -1242,6 +1243,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
 export type UseAnimationHelpers = {
+  hostRef: RefObject<HTMLElement | View>
   staticConfig: StaticConfigParsed
   getStyle: (props?: {
     isEntering?: boolean
@@ -1262,6 +1264,6 @@ export type UseAnimationHelpers = {
 export type UseAnimationHook = (
   props: UseAnimationProps,
   helpers: UseAnimationHelpers
-) => {
+) => null | {
   style?: StackStylePropsBase | StackStylePropsBase[]
 }

package/types/helpers/getSplitStyles.d.ts

@@ -15,6 +15,7 @@ declare type StyleSplitter = (props: {
     rulesToInsert: RulesToInsert;
     viewProps: StackProps;
     fontFamily: string | undefined;
+    mediaKeys: string[];
 };
 export declare const PROP_SPLIT = "-";
 export declare const pseudoCNInverse: {

package/types/hooks/useFeatures.d.ts

@@ -16,7 +16,6 @@ declare type FeatureUtils = {
 export declare const useFeatures: (props: any, utils?: FeatureUtils) => {
     elements: JSX.Element[];
     enabled: {
-        animation?: boolean | undefined;
         mediaQuery?: boolean | undefined;
     };
 };

package/types/types.d.ts

@@ -1,5 +1,5 @@
 import { Properties } from 'csstype';
-import React from 'react';
+import React, { RefObject } from 'react';
 import { GestureResponderEvent, Image, PressableProps, TextProps as ReactTextProps, Text, TextInput, TextStyle, View, ViewProps, ViewStyle } from 'react-native';
 import { Variable } from './createVariable';
 import { ResolveVariableTypes } from './helpers/createPropMapper';
@@ -205,6 +205,12 @@ export declare type GenericFont<Key extends number | string = number | string> =
     color?: Partial<{
         [key in Key]: string | Variable;
     }>;
+    face?: {
+        [key in FontWeightSteps]: {
+            normal?: string;
+            italic?: string;
+        };
+    };
 };
 export declare type MediaQueryObject = {
     [key: string]: string | number | string;
@@ -264,7 +270,8 @@ export declare type RadiusTokens = GetTokenString<keyof Tokens['radius']> | numb
 export declare type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>;
 export declare type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number;
 export declare type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number;
-export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps;
 export declare type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number;
 export declare type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number;
 export declare type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle'];
@@ -492,6 +499,7 @@ export declare type AnimationDriver<A extends AnimationConfig = AnimationConfig>
 };
 export declare type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>;
 export declare type UseAnimationHelpers = {
+    hostRef: RefObject<HTMLElement | View>;
     staticConfig: StaticConfigParsed;
     getStyle: (props?: {
         isEntering?: boolean;
@@ -504,7 +512,7 @@ export declare type UseAnimationHelpers = {
     onDidAnimate?: any;
     delay?: number;
 };
-export declare type UseAnimationHook = (props: UseAnimationProps, helpers: UseAnimationHelpers) => {
+export declare type UseAnimationHook = (props: UseAnimationProps, helpers: UseAnimationHelpers) => null | {
     style?: StackStylePropsBase | StackStylePropsBase[];
 };
 export {};

package/src/hooks/useFeatures.tsx

@@ -1,289 +0,0 @@
-import React from 'react'
-import { RefObject } from 'react'
-import { View, ViewStyle } from 'react-native'
-
-import { getConfig } from '../config'
-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) {
-        // eslint-disable-next-line no-console
-        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'],
-// }),