@hanzogui/react-native-web-internals 2.0.0

package/src/modules/setValueForStyles/dangerousStyleValue.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable */
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * From React 16.0.0
+ * @noflow
+ */
+
+import { unitlessNumbers as isUnitlessNumber } from '../unitlessNumbers/index'
+import { normalizeValueWithProperty } from '../../StyleSheet/compiler/normalizeValueWithProperty'
+
+/**
+ * Convert a value into the proper css writable value. The style name `name`
+ * should be logical (no hyphens), as specified
+ * in `CSSProperty.isUnitlessNumber`.
+ *
+ * @param {string} name CSS property name such as `topMargin`.
+ * @param {*} value CSS property value such as `10px`.
+ * @return {string} Normalized style value with dimensions applied.
+ */
+export function dangerousStyleValue(name, value, isCustomProperty) {
+  // Note that we've removed escapeTextForBrowser() calls here since the
+  // whole string will be escaped when the attribute is injected into
+  // the markup. If you provide unsafe user data here they can inject
+  // arbitrary CSS which may be problematic (I couldn't repro this):
+  // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
+  // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
+  // This is not an XSS hole but instead a potential CSS injection issue
+  // which has lead to a greater discussion about how we're going to
+  // trust URLs moving forward. See #2115901
+
+  var isEmpty = value == null || typeof value === 'boolean' || value === ''
+  if (isEmpty) {
+    return ''
+  }
+
+  // handle Animated.Value objects that have __getValue
+  if (typeof value === 'object' && typeof value.__getValue === 'function') {
+    value = value.__getValue()
+  }
+
+  // handle transform arrays: [{ translateY: 10 }, { scale: 2 }]
+  if (name === 'transform' && Array.isArray(value)) {
+    return value
+      .map((t) => {
+        const key = Object.keys(t)[0]
+        let val = t[key]
+        // resolve nested Animated.Value
+        if (typeof val === 'object' && typeof val.__getValue === 'function') {
+          val = val.__getValue()
+        }
+        if (key === 'matrix' || key === 'matrix3d') {
+          return `${key}(${val.join(',')})`
+        }
+        return `${key}(${normalizeValueWithProperty(val, key)})`
+      })
+      .join(' ')
+  }
+
+  if (
+    !isCustomProperty &&
+    typeof value === 'number' &&
+    value !== 0 &&
+    !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
+  ) {
+    return value + 'px' // Presumes implicit 'px' suffix for unitless numbers
+  }
+
+  return ('' + value).trim()
+}

package/src/modules/setValueForStyles/index.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * From React 16.3.0
+ * @noflow
+ */
+
+import { dangerousStyleValue } from './dangerousStyleValue'
+
+/**
+ * Sets the value for multiple styles on a node.  If a value is specified as
+ * '' (empty string), the corresponding style property will be unset.
+ *
+ * @param {DOMElement} node
+ * @param {object} styles
+ */
+export function setValueForStyles(node, styles) {
+  const style = node.style
+  for (let styleName in styles) {
+    if (!styles.hasOwnProperty(styleName)) {
+      continue
+    }
+    const isCustomProperty = styleName.indexOf('--') === 0
+    const styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty)
+    if (styleName === 'float') {
+      styleName = 'cssFloat'
+    }
+    if (isCustomProperty) {
+      style.setProperty(styleName, styleValue)
+    } else {
+      style[styleName] = styleValue
+    }
+  }
+}

package/src/modules/unitlessNumbers/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export const unitlessNumbers = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gap: true,
+  columnGap: true,
+  rowGap: 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,
+  // SVG-related
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+  // transform types
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  // RN properties
+  shadowOpacity: true,
+}
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+const prefixes = ['ms', 'Moz', 'O', 'Webkit']
+const prefixKey = (prefix: string, key: string) => {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1)
+}
+Object.keys(unitlessNumbers).forEach((prop) => {
+  prefixes.forEach((prefix) => {
+    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop]
+  })
+})

package/src/modules/useElementLayout/index.tsx

@@ -0,0 +1,28 @@
+import {
+  enable,
+  useElementLayout as useGuiElementLayout,
+} from '@hanzogui/use-element-layout'
+import { type RefObject, useEffect, useMemo } from 'react'
+import type { LayoutEvent } from '../../types'
+
+export function useElementLayout(
+  ref: RefObject<any>,
+  onLayout?: ((e: LayoutEvent) => void) | null
+) {
+  // translates to hanzo-gui style
+  const wrappedRef = useMemo(() => {
+    return {
+      current: {
+        get host() {
+          return ref.current
+        },
+      },
+    }
+  }, [ref])
+
+  useEffect(() => {
+    enable()
+  }, [])
+
+  return useGuiElementLayout(wrappedRef, onLayout)
+}