@tamagui/helpers 1.0.1-beta.59 → 1.0.1-beta.60

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tamagui/helpers",
-  "version": "1.0.1-beta.59",
+  "version": "1.0.1-beta.60",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -17,7 +18,7 @@
     "clean:build": "tamagui-build clean:build"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.59",
+    "@tamagui/build": "^1.0.1-beta.60",
     "react": "*",
     "react-native": "*"
   },

package/src/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, [min, max]: [number, number]): number {
+  return Math.min(max, Math.max(min, value))
+}

package/src/composeEventHandlers.ts

@@ -0,0 +1,17 @@
+import { FocusEvent } from 'react'
+import { GestureResponderEvent } from 'react-native'
+
+export type EventHandler<E extends Event | GestureResponderEvent | FocusEvent> = (event: E) => void
+
+export function composeEventHandlers<E extends Event | GestureResponderEvent | FocusEvent>(
+  og?: EventHandler<E>,
+  next?: EventHandler<E>,
+  { checkDefaultPrevented = true } = {}
+) {
+  return function composedEventHandler(event: E) {
+    og?.(event)
+    if (!checkDefaultPrevented || !event.defaultPrevented) {
+      return next?.(event)
+    }
+  }
+}

package/src/concatClassName.ts

@@ -0,0 +1,92 @@
+// perf sensitive so doing some weird stuff
+
+import { ViewStyle } from 'react-native'
+
+export function concatClassName(...args: any[]): any
+export function concatClassName(_cn: ViewStyle | null | undefined): string {
+  const cnOrPropObjcet = arguments
+  const usedPrefixes: string[] = []
+  let final = ''
+
+  const len = cnOrPropObjcet.length
+  let propObjects: any = null
+  for (let x = len; x >= 0; x--) {
+    const cns = cnOrPropObjcet[x]
+
+    if (!cns) continue
+    if (!Array.isArray(cns) && typeof cns !== 'string') {
+      // is prop object
+      propObjects = propObjects || []
+      propObjects.push(cns)
+      continue
+    }
+
+    const names = Array.isArray(cns) ? cns : cns.split(' ')
+    const numNames = names.length
+    for (let i = numNames - 1; i >= 0; i--) {
+      const name = names[i]
+
+      if (!name || name === ' ') continue
+      if (name[0] !== '_') {
+        // not snack style (todo slightly stronger heuristic)
+        final = name + ' ' + final
+        continue
+      }
+
+      const splitIndex = name.indexOf('-')
+      if (splitIndex < 1) {
+        final = name + ' ' + final
+        // if (shouldDebug) console.log('debug exclude:', name, final)
+        continue
+      }
+
+      const nextChar = name[splitIndex + 1]
+      // synced to static-ui constants
+      // MEDIA_SEP
+      const isMediaQuery = nextChar === '_'
+      // PSEUDO_SEP
+      // commenting out three things to make pseudos override properly
+      // (leave in for a bit to see if other bugs pop up later):
+      // 1. const isPsuedoQuery = nextChar === '0'
+      const styleKey = name.slice(1, name.lastIndexOf('-'))
+      // 2. isMediaQuery || isPsuedoQuery
+      const mediaKey = isMediaQuery ? name.slice(splitIndex + 2, splitIndex + 7) : null
+      const uid = mediaKey ? styleKey + mediaKey : styleKey
+      // 3. && !isPsuedoQuery
+
+      if (usedPrefixes.indexOf(uid) > -1) {
+        // if (shouldDebug) console.log('debug exclude:', usedPrefixes, name)
+        continue
+      }
+      usedPrefixes.push(uid)
+
+      // overrides for full safety
+      const propName = styleKey
+      if (propName && propObjects) {
+        if (
+          propObjects.some((po) => {
+            if (mediaKey) {
+              const propKey = pseudoInvert[mediaKey]
+              return po && po[propKey] && propName in po[propKey] && po[propKey] !== null
+            }
+            const res = po && propName in po && po[propName] !== null
+            return res
+          })
+        ) {
+          // if (shouldDebug) console.log('debug exclude:', name)
+          continue
+        }
+      }
+
+      final = name + ' ' + final
+    }
+  }
+
+  return final
+}
+
+const pseudoInvert = {
+  hover: 'hoverStyle',
+  focus: 'focusStyle',
+  press: 'pressStyle',
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './clamp'
+export * from './composeEventHandlers'
+export * from './concatClassName'
+export * from './validStyleProps'
+export * from './types'
+export * from './log'
+export * from './simpleHash'

package/src/log.ts

@@ -0,0 +1,4 @@
+export const log = (...args: any) => {
+  console.log(...args)
+  return args[0]
+}

package/src/simpleHash.ts

@@ -0,0 +1,9 @@
+export const simpleHash = (str: string) => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash &= hash // Convert to 32bit integer
+  }
+  return new Uint32Array([hash])[0].toString(36)
+}

package/src/types.ts

@@ -0,0 +1,8 @@
+export type StyleObject = {
+  property: string
+  pseudo?: 'hover' | 'focus' | 'active'
+  value: string
+  className: string
+  identifier: string
+  rules: string[]
+}

package/src/validStyleProps.ts

@@ -0,0 +1,163 @@
+// flat transform props
+export const stylePropsTransform = Object.freeze({
+  x: true,
+  y: true,
+  scale: true,
+  perspective: true,
+  scaleX: true,
+  scaleY: true,
+  skewX: true,
+  skewY: true,
+  matrix: true,
+  rotate: true,
+  rotateY: true,
+  rotateX: true,
+  rotateZ: true,
+})
+
+export const stylePropsView = Object.freeze({
+  backfaceVisibility: true,
+  backgroundColor: true,
+  borderBottomColor: true,
+  borderBottomStyle: true,
+  borderTopStyle: true,
+  borderLeftStyle: true,
+  borderRightStyle: true,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderBottomWidth: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderLeftWidth: true,
+  borderRadius: true,
+  borderRightColor: true,
+  borderRightWidth: true,
+  borderStartColor: true,
+  borderStyle: true,
+  borderTopColor: true,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  borderTopWidth: true,
+  borderWidth: true,
+  opacity: true,
+  transform: true,
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  aspectRatio: true,
+  borderEndWidth: true,
+  borderStartWidth: true,
+  bottom: true,
+  display: true,
+  end: true,
+  flex: true,
+  flexBasis: true,
+  flexDirection: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexWrap: true,
+  height: true,
+  justifyContent: true,
+  left: true,
+  margin: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  overflow: true,
+  padding: true,
+  paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
+  position: true,
+  right: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
+  direction: true,
+  shadowColor: true,
+  shadowOffset: true,
+  shadowOpacity: true,
+  shadowRadius: true,
+  ...stylePropsTransform,
+
+  // allow a few web only ones
+  ...(process.env.TAMAGUI_TARGET === 'web' && {
+    overflowX: true,
+    overflowY: true,
+    userSelect: true,
+    cursor: true,
+    contain: true,
+    pointerEvents: true,
+    boxSizing: true,
+    boxShadow: true,
+  }),
+})
+
+export const stylePropsTextOnly = Object.freeze({
+  color: true,
+  fontFamily: true,
+  fontSize: true,
+  fontStyle: true,
+  fontWeight: true,
+  letterSpacing: true,
+  lineHeight: true,
+  textAlign: true,
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+  textShadowOffset: true,
+  textShadowRadius: true,
+  textTransform: true,
+
+  // allow some web only ones
+  ...(process.env.TAMAGUI_TARGET === 'web' && {
+    whiteSpace: true,
+    wordWrap: true,
+    textOverflow: true,
+    textDecorationDistance: true,
+    userSelect: true,
+    selectable: true,
+    cursor: true,
+  }),
+})
+
+export const stylePropsText = Object.freeze({
+  ...stylePropsView,
+  ...stylePropsTextOnly,
+})
+
+export const stylePropsAll = stylePropsText
+
+export const validPseudoKeys = Object.freeze({
+  enterStyle: true,
+  exitStyle: true,
+  hoverStyle: true,
+  pressStyle: true,
+  focusStyle: true,
+})
+
+export const validStyles = Object.freeze({
+  ...validPseudoKeys,
+  ...stylePropsView,
+})