@tamagui/core 1.0.1-beta.99 → 1.0.1-rc.0

package/src/helpers/expandStyles.ts

@@ -0,0 +1,106 @@
+import { isWeb } from '@tamagui/constants'
+
+import { getConfig } from '../config'
+import { expandStyle } from './expandStyle'
+import { colorToRGBA, normalizeColor } from './normalizeColor'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
+import { pseudoDescriptors } from './pseudoDescriptors'
+
+let shorthands: Record<string, string> | null = null
+export const defaultOffset = { height: 0, width: 0 }
+
+/**
+ * This is what you want to run before Object.assign() a style onto another.
+ * It does the following:
+ *   1. Turns user shorthands into longhands, ie px = paddingHorizontal
+ *   2. Normalizes various inconsistent styles to be more consistent
+ *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight
+ */
+
+export function expandStyles(style: Record<string, any>, config = getConfig()) {
+  const res: Record<string, any> = {}
+
+  for (let key in style) {
+    shorthands = shorthands || (config ? config.shorthands : null)
+    if (shorthands) {
+      key = shorthands[key] || key
+    }
+    if (key in pseudoDescriptors) {
+      res[key] = expandStyles(style[key])
+      continue
+    }
+    const val = normalizeValueWithProperty(style[key], key)
+    // expand react-native shorthands
+    const out = expandStyle(key, val)
+    if (out) {
+      Object.assign(res, Object.fromEntries(out))
+    } else {
+      res[key] = val
+    }
+  }
+
+  fixStyles(res)
+
+  return res
+}
+
+export function fixStyles(style: Record<string, any>) {
+  if (style.shadowRadius) {
+    Object.assign(style, normalizeShadow(style))
+  }
+
+  // ensure border style set by default to solid
+  for (const key in borderDefaults) {
+    if (style[key] && !style[borderDefaults[key]]) {
+      style[borderDefaults[key]] = 'solid'
+    }
+  }
+}
+
+const borderDefaults = {
+  borderWidth: 'borderStyle',
+  borderBottomWidth: 'borderBottomStyle',
+  borderTopWidth: 'borderTopStyle',
+  borderLeftWidth: 'borderLeftStyle',
+  borderRightWidth: 'borderRightStyle',
+}
+
+function normalizeShadow({
+  shadowColor,
+  shadowOffset,
+  shadowOpacity,
+  shadowRadius,
+}: Record<string, any>) {
+  const { height, width } = shadowOffset || defaultOffset
+  const colorStr = String(shadowColor || 'black')
+  return {
+    shadowOffset: {
+      width: normalizeValueWithProperty(width || 0),
+      height: normalizeValueWithProperty(height || 0),
+    },
+    shadowRadius: normalizeValueWithProperty(shadowRadius || 0),
+    ...(isWeb && {
+      shadowColor: normalizeColor(colorStr, shadowOpacity),
+    }),
+    ...(process.env.TAMAGUI_TARGET === 'native' &&
+      (() => {
+        // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity
+        const rgba = colorToRGBA(colorStr)
+        if (!rgba) {
+          if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
+            console.warn('No rgba form', colorStr)
+          }
+          return {
+            shadowColor,
+            shadowOpacity,
+          }
+        }
+        const [r, g, b, a] = rgba
+        return {
+          shadowColor: `rgb(${r},${g},${b})`,
+          shadowOpacity: shadowOpacity ?? a,
+        }
+      })()),
+  }
+}

package/src/helpers/extendStaticConfig.ts

@@ -0,0 +1,75 @@
+import { stylePropsView } from '@tamagui/helpers'
+
+import { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'
+import { createPropMapper } from './createPropMapper'
+import { mergeProps } from './mergeProps'
+
+export function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {
+  if (!parent || !('staticConfig' in parent)) {
+    return parseStaticConfig(config)
+  }
+
+  const parentStaticConf = parent.staticConfig as StaticConfig
+  const variants = {
+    ...parentStaticConf.variants,
+  }
+
+  // merge variants... can we type this?
+  if (config.variants) {
+    for (const key in config.variants) {
+      if (variants[key]) {
+        variants[key] = {
+          ...variants[key],
+          ...config.variants[key],
+        }
+      } else {
+        variants[key] = config.variants[key]
+      }
+    }
+  }
+
+  // include our own
+  const parentNames = [...(parentStaticConf.parentNames || [])]
+  if (parentStaticConf.componentName) {
+    parentNames.push(parentStaticConf.componentName)
+  }
+
+  const deoptProps = config.deoptProps || new Set<string>()
+  // deoptProps.add('style')
+
+  return parseStaticConfig({
+    ...parentStaticConf,
+    ...config,
+    deoptProps,
+    variants,
+    parentNames,
+    validStyles: config.validStyles
+      ? {
+          ...parentStaticConf.validStyles,
+          ...config.validStyles,
+        }
+      : parentStaticConf.validStyles || stylePropsView,
+    defaultProps: mergeProps(
+      {
+        ...parentStaticConf.defaultProps,
+        ...parentStaticConf.defaultVariants,
+      },
+      {
+        ...config.defaultProps,
+        ...config.defaultVariants,
+      }
+    )[0],
+  })
+}
+
+export const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {
+  const parsed = {
+    defaultProps: {},
+    ...config,
+    parsed: true,
+  } as const
+  return {
+    ...parsed,
+    propMapper: createPropMapper(parsed as StaticConfigParsed),
+  }
+}

package/src/helpers/fixNativeShadow.tsx

@@ -0,0 +1,2 @@
+// only native of course
+export const fixNativeShadow = (a: any) => {}

package/src/helpers/getAnimationDriver.tsx

@@ -0,0 +1,5 @@
+import { getConfig } from '../config'
+
+export function getAnimationDriver() {
+  return getConfig().animations
+}

package/src/helpers/getBoundingClientRect.tsx

@@ -0,0 +1,7 @@
+export const getBoundingClientRect = (node: HTMLElement | null): void | DOMRect => {
+  if (!node) return
+  if (node.nodeType !== 1) return
+  if (node.getBoundingClientRect) {
+    return node.getBoundingClientRect()
+  }
+}

package/src/helpers/getExpandedShorthands.ts

@@ -0,0 +1,15 @@
+import { getConfig } from '../config'
+import { Shorthands } from '../types'
+
+export function getExpandedShorthands<A extends Object>(props: A): Omit<A, keyof Shorthands> {
+  const shorthands = getConfig().shorthands
+  if (!shorthands) {
+    return props
+  }
+  const res: A = {} as any
+  for (const key in props) {
+    // @ts-ignore
+    res[shorthands[key] || key] = props[key]
+  }
+  return res
+}

package/src/helpers/getFontLanguage.ts

@@ -0,0 +1,2 @@
+export const getFontLanguage = (fontFamily: string) =>
+  fontFamily.includes('_') ? fontFamily.split('_')[1] : null

package/src/helpers/getRect.tsx

@@ -0,0 +1,8 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+
+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 }
+}

package/src/helpers/getSize.ts

@@ -0,0 +1,22 @@
+import { getTokens } from '../config'
+import { SizeTokens, SpaceTokens } from '../types'
+
+export const getSize = (size?: SizeTokens | undefined, shift = 0, bounds = [0]) => {
+  return stepTokenUpOrDown(getTokens(true).size, size, shift, bounds)
+}
+
+export const stepTokenUpOrDown = (
+  tokens: Object,
+  current?: SizeTokens | SpaceTokens | string,
+  shift = 0,
+  bounds = [0]
+) => {
+  const sizeNames = Object.keys(tokens)
+  const currentKeyNum = (typeof current === 'string' ? current.replace('$', '') : current) || '4'
+  const nextKeyName = `$${+currentKeyNum + shift}`
+  const min = bounds[0] ?? 0
+  const max = bounds[1] ?? sizeNames.length - 1
+  const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)))
+  const key = sizeNames[index]
+  return tokens[key] || tokens['$4']
+}