@tamagui/core 1.0.1-beta.214 → 1.0.1-beta.215

package/src/createComponent.tsx

@@ -3,6 +3,7 @@ import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/cons
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
+  stylePropsTransform,
   stylePropsView,
   validPseudoKeys,
   validStyles,
@@ -36,6 +37,7 @@ import {
 } from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
+import { mergeTransform } from './helpers/mergeTransform'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
 import { getRect, measureLayout, useElementLayout } from './hooks/useElementLayout'
@@ -46,6 +48,7 @@ import {
   SpaceDirection,
   SpaceTokens,
   SpacerProps,
+  SplitStyleState,
   StaticConfig,
   StaticConfigParsed,
   StylableComponent,
@@ -162,16 +165,6 @@ export function createComponent<
       ? `is_${props.componentName}`
       : defaultComponentClassName
 
-    if (debugProp) {
-      // eslint-disable-next-line no-console
-      console.log(`render ${componentName}`)
-    }
-
-    const forceUpdate = useForceUpdate()
-    const theme = useTheme(props.theme, componentName, props, forceUpdate)
-
-    // time`useTheme`
-
     /**
      * Component state for tracking animations, pseudos
      */
@@ -185,14 +178,46 @@ export function createComponent<
     const setState = states[1]
     const setStateShallow = useShallowSetState(setState, debugProp, componentName)
 
-    const shouldSetMounted = needsMount && !state.mounted
+    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
+    // conditional but if ever true stays true
+    const hasEverAnimated = useRef(false)
+    const isAnimated = (() => {
+      const next = !!(useAnimations && props.animation)
+      if (next && !hasEverAnimated.current) {
+        hasEverAnimated.current = true
+      }
+      return next || hasEverAnimated.current
+    })()
+    const isReactNative = Boolean(
+      staticConfig.isReactNative || (isAnimated && tamaguiConfig.animations.isReactNative)
+    )
+
+    if (process.env.NODE_ENV === 'development') {
+      if (props['debug']) {
+        const name = `${
+          componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
+        }`
+        const type = isReactNative ? '(rnw)' : ''
+        const dataIs = propsIn['data-is'] || ''
+        const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
+        // eslint-disable-next-line no-console
+        console.group(`%c ${banner}`, 'background: yellow;')
+        // eslint-disable-next-line no-console
+        console.log(`state`, state)
+      }
+    }
+
+    const forceUpdate = useForceUpdate()
+    const theme = useTheme(props.theme, componentName, props, forceUpdate)
+
+    const shouldSetMounted = needsMount && state.unmounted
     const setMounted = shouldSetMounted
       ? () => {
           // for some reason without some small delay it doesn't animate css
           setTimeout(
             () => {
               setStateShallow({
-                mounted: true,
+                unmounted: false,
               })
             },
             isWeb ? 10 : 0
@@ -201,41 +226,14 @@ export function createComponent<
       : undefined
 
     const shouldAvoidClasses =
-      !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
+      !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
 
     const shouldForcePseudo = !!propsIn.forceStyle
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
-    const splitStyleState =
-      !shouldAvoidClasses && !shouldForcePseudo
-        ? {
-            ...state,
-            hasTextAncestor,
-            dynamicStylesInline: true,
-          }
-        : ({
-            ...state,
-            noClassNames: true,
-            dynamicStylesInline: true,
-            hasTextAncestor,
-            resolveVariablesAs: 'value',
-          } as const)
-
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo
     const languageContext = isRSC ? null : useContext(FontLanguageContext)
-
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
-    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
-
-    // conditional but if ever true stays true
-    const hasEverAnimated = useRef(false)
-    const isAnimated = (() => {
-      const next = !!(useAnimations && props.animation)
-      if (next && !hasEverAnimated.current) {
-        hasEverAnimated.current = true
-      }
-      return next || hasEverAnimated.current
-    })()
-
     const isTaggable = !Component || typeof Component === 'string'
     // default to tag, fallback to component (when both strings)
     const element = isWeb
@@ -255,6 +253,13 @@ export function createComponent<
 
     // time`setupStateConf`
 
+    const splitStyleState: SplitStyleState = {
+      ...state,
+      noClassNames,
+      dynamicStylesInline: noClassNames,
+      hasTextAncestor,
+      resolveVariablesAs: 'value',
+    }
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
@@ -271,9 +276,6 @@ export function createComponent<
     const hostRef = useServerRef<TamaguiElement>(null)
 
     // animation setup
-    const isReactNative = Boolean(
-      staticConfig.isReactNative || (isAnimated && tamaguiConfig.animations.isReactNative)
-    )
     const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating
 
     if (process.env.NODE_ENV === 'development') {
@@ -283,22 +285,15 @@ export function createComponent<
       }
 
       if (debugProp) {
-        const name = `${
-          componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
-        }`
-        const type = isReactNative ? 'rnw' : 'tamagui'
-        const banner = `${name} ${propsIn['data-is'] || ''} ${type}`
         // eslint-disable-next-line no-console
-        console.group(`%c 🐛 ${banner}`, 'background: yellow;')
+        console.groupCollapsed('props')
         // eslint-disable-next-line no-console
-        console.groupCollapsed('initial props/state')
-        // eslint-disable-next-line no-console
-        console.log('propsIn', propsIn, 'turned into', props, 'order', Object.keys(props))
+        console.log('props in', propsIn, 'mapped to', props, 'in order', Object.keys(props))
         // eslint-disable-next-line no-console
         console.log('splitStyles', splitStyles)
         // eslint-disable-next-line no-console
         console.log('className', Object.values(splitStyles.classNames))
-        if (typeof window !== 'undefined') {
+        if (isClient) {
           // eslint-disable-next-line no-console
           console.log('ref', hostRef, '(click to view)')
         }
@@ -320,9 +315,6 @@ export function createComponent<
       mediaKeys,
     } = splitStyles
 
-    const animationFeatureStylesIn = props.animation
-      ? { ...defaultNativeStyle, ...splitStylesStyle }
-      : null
     const propsWithAnimation = props as UseAnimationProps
 
     // once you set animation prop don't remove it, you can set to undefined/false
@@ -336,9 +328,14 @@ export function createComponent<
         hostRef,
         staticConfig,
         getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          // TODO this function can mostly be moved entirely inside getSplitStyles
+          // I think theres bugs in merge(), and we can remove that fn entirely then
+          // also i think we need to merge both the exitVariant AND psuedos.exitStyle right now it chooses one
+
           // we have to merge such that transforms keys all exist
-          const style = animationFeatureStylesIn
+          const animationStyle = { ...defaultNativeStyle, ...splitStylesStyle }
 
+          // allows for enter/exit variants on styled()
           const enterStyle = isEntering
             ? enterVariant && staticConfig.variants?.[enterVariant]['true']
               ? getSubStyle(
@@ -349,8 +346,8 @@ export function createComponent<
                   props,
                   state,
                   tamaguiConfig
-                ) || pseudos.enterStyle
-              : pseudos.enterStyle
+                )
+              : null
             : null
 
           const exitStyle = isExiting
@@ -363,41 +360,18 @@ export function createComponent<
                   props,
                   state,
                   tamaguiConfig
-                ) || pseudos.exitStyle
+                )
               : 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
-          )
-
-          enterStyle && isEntering && 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 && isExiting && merge(style, exitStyle)
-
-          if (process.env.NODE_ENV === 'development') {
-            if (debugProp === 'verbose') {
-              // eslint-disable-next-line no-console
-              console.log('animation style', style)
-            }
+          if (isEntering && enterStyle) {
+            merge(animationStyle, enterStyle)
+          }
+          if (isExiting && exitStyle) {
+            merge(animationStyle, exitStyle)
           }
 
-          return style
+          return animationStyle
         },
         //, delay
       })
@@ -628,16 +602,7 @@ export function createComponent<
       }
     } else {
       styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias]
-      if (!animationStyles && initialSplitStyles) {
-        const initPseudos = initialSplitStyles.pseudos
-        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, 'enterStyle')
-        state.hover &&
-          addPseudoToStyles(styles, initPseudos, pseudos, 'hoverStyle', shouldForcePseudo)
-        state.focus &&
-          addPseudoToStyles(styles, initPseudos, pseudos, 'focusStyle', shouldForcePseudo)
-        state.press &&
-          addPseudoToStyles(styles, initPseudos, pseudos, 'pressStyle', shouldForcePseudo)
-      }
+
       // ugly but for now...
       if (shouldForcePseudo) {
         const next = {}
@@ -723,19 +688,14 @@ export function createComponent<
 
     // TODO need to loop active variants and see if they have matchin pseudos and apply as well
     const initialPseudos = initialSplitStyles?.pseudos
-    const attachPress = !!(
-      pseudos?.pressStyle ||
-      initialPseudos?.pressStyle ||
-      onPress ||
-      onPressOut ||
-      onPressIn ||
-      onClick
-    )
+    const runtimePressStyle = noClassNames && (pseudos?.pressStyle || initialPseudos?.pressStyle)
+    const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick)
 
     const isHoverable = isWeb
+    const runtimeHoverStyle = noClassNames && (pseudos?.hoverStyle || initialPseudos.hoverStyle)
     const attachHover =
       isHoverable &&
-      !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+      !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
 
     const handlesPressEvents = !isWeb && !asChild
 
@@ -768,7 +728,7 @@ export function createComponent<
                   onMouseUp?.(e)
                 }
               : undefined,
-            ...(isHoverable && {
+            ...(attachHover && {
               onMouseEnter: attachHover
                 ? (e) => {
                     const next: Partial<typeof state> = {}
@@ -894,10 +854,7 @@ export function createComponent<
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
-      const attachFocus = !!(
-        (pseudos && pseudos.focusStyle) ||
-        (initialPseudos && initialPseudos.focusStyle)
-      )
+      const attachFocus = !!(pseudos.focusStyle || (initialPseudos && initialPseudos.focusStyle))
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true })
@@ -909,11 +866,8 @@ export function createComponent<
 
       // use Pressability to get smooth unPress when you press + hold + move out
       // only ever create once, use .configure() to update later
-      const pressability = usePressability(events)
+      const pressability = usePressability(events ? { ...events, hitSlop } : {})
       if (attachPress && events) {
-        if (hitSlop) {
-          viewProps.hitSlop = hitSlop
-        }
         for (const key in pressability) {
           const og = props[key]
           const val = pressability[key]
@@ -989,12 +943,12 @@ export function createComponent<
           press: false,
           pressIn: false,
           focus: false,
-          mounted: false,
+          unmounted: true,
           mediaState: getMediaStateObject(getInitialMediaState()),
         }
         defaultComponentStateMounted = {
           ...defaultComponentState,
-          mounted: true,
+          unmounted: false,
         }
       }
 
@@ -1052,14 +1006,13 @@ export function createComponent<
       staticConfig,
       initialTheme,
       {
-        mounted: true,
+        unmounted: false,
         hover: false,
         press: false,
         pressIn: false,
         focus: false,
         resolveVariablesAs: 'both',
         noClassNames,
-        keepVariantsAsProps: true,
       },
       undefined,
       undefined,
@@ -1071,7 +1024,7 @@ export function createComponent<
     // otherwise it confuses variant functions getting className props
     const [defaults, defaultsClassnames] = mergeProps(
       component.defaultProps as any,
-      initialSplitStyles.viewProps,
+      { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps },
       true
       // conf.inverseShorthands
     )
@@ -1330,23 +1283,6 @@ function isUnspaced(child: React.ReactNode) {
   return child?.['type']?.['isVisuallyHidden'] || child?.['type']?.['isUnspaced']
 }
 
-function addPseudoToStyles(
-  styles: any[],
-  initialPseudos: SplitStyleResult['pseudos'],
-  pseudos: any,
-  name: string,
-  force = false
-) {
-  // on web use pseudo object { hoverStyle } to keep specificity with concatClassName
-  const pseudoStyle = pseudos[name]
-  const shouldNestObject = isWeb && name !== 'enterStyle' && name !== 'exitStyle'
-  const defaultPseudoStyle = initialPseudos[name]
-  const style = defaultPseudoStyle ? { ...defaultPseudoStyle, ...pseudoStyle } : pseudoStyle
-  if (style) {
-    styles.push(shouldNestObject && !force ? { [name]: style } : style)
-  }
-}
-
 const DefaultProps = new Map()
 
 function mergeConfigDefaultProps(
@@ -1385,68 +1321,17 @@ function mergeConfigDefaultProps(
   return props
 }
 
-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]
-      // can we just use merge() here?
-      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]
-        }
-      }
-    }
-  }
-}
-
+// TODO need to delete existing prop because of weirdness in how we do this
+// real solution is to handle all this in getSplitStyle and have animation drviers
+// return a useAnimationIsExiting() so we can pass that as part of state: { exiting: true }
+// then we can remove this function and the getStyle() altogether
 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]
+  for (const key in next) {
+    const val = next[key]
+    if (key in stylePropsTransform) {
+      mergeTransform(base, key, val, true)
     } else {
-      base.transform.push(t)
+      base[key] = val
     }
   }
 }