@hanzogui/react-native-web-internals 2.0.0

package/src/modules/useMergeRefs/__tests__/index-test.tsx

@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+import { cleanup, render } from '@testing-library/react'
+import * as React from 'react'
+import { act } from 'react-dom/test-utils'
+
+import useMergeRefs from '..'
+
+describe('modules/useMergeRefs/index.js', () => {
+  function TestComponent({ refs, ...rest }) {
+    const mergedRef = useMergeRefs(...refs)
+    return <div ref={mergedRef} {...rest} />
+  }
+
+  afterEach(cleanup)
+
+  test('handles no refs', () => {
+    act(() => {
+      render(<TestComponent refs={[]} />)
+    })
+  })
+
+  test('merges any number of varying refs', () => {
+    const callbackRef1 = jest.fn()
+    const callbackRef2 = jest.fn()
+    const objectRef1 = React.createRef()
+    const objectRef2 = React.createRef()
+    const nullRef = null
+
+    act(() => {
+      render(
+        <TestComponent
+          refs={[callbackRef1, callbackRef2, objectRef1, objectRef2, nullRef]}
+        />
+      )
+    })
+
+    expect(callbackRef1).toHaveBeenCalledTimes(1)
+    expect(callbackRef2).toHaveBeenCalledTimes(1)
+    expect(objectRef1.current).toBeInstanceOf(HTMLDivElement)
+    expect(objectRef2.current).toBeInstanceOf(HTMLDivElement)
+  })
+
+  test('ref is called when ref changes', () => {
+    const ref = jest.fn()
+    const nextRef = jest.fn()
+    let rerender
+
+    act(() => {
+      ;({ rerender } = render(<TestComponent refs={[ref]} />))
+    })
+    expect(ref).toHaveBeenCalled()
+    act(() => {
+      rerender(<TestComponent refs={[nextRef]} />)
+    })
+    expect(nextRef).toHaveBeenCalled()
+  })
+
+  test('ref is not called for each rerender', () => {
+    const ref = jest.fn()
+    let rerender
+
+    act(() => {
+      ;({ rerender } = render(<TestComponent refs={[ref]} />))
+    })
+    expect(ref).toHaveBeenCalledTimes(1)
+    act(() => {
+      rerender(<TestComponent refs={[ref]} />)
+    })
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+
+  test('ref is not called for props changes', () => {
+    const ref = jest.fn()
+    let rerender
+
+    act(() => {
+      ;({ rerender } = render(<TestComponent id="foo" refs={[ref]} />))
+    })
+    expect(ref).toHaveBeenCalledTimes(1)
+    act(() => {
+      rerender(<TestComponent id="bar" refs={[ref]} />)
+    })
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})

package/src/modules/useMergeRefs/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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 strict-local
+ */
+
+import * as React from 'react'
+
+import { mergeRefs } from '../mergeRefs/index'
+
+export function useMergeRefs(
+  ...args: ReadonlyArray<React.Ref<any>>
+): (node: HTMLElement | null) => void {
+  return React.useMemo(
+    () => mergeRefs(...args),
+    // eslint-disable-next-line
+    [...args]
+  )
+}

package/src/modules/usePlatformMethods/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {
+  createMeasure,
+  createMeasureInWindow,
+  createMeasureLayout,
+} from '@hanzogui/use-element-layout'
+import type { GenericStyleProp } from '../../types'
+import { useStable } from '../useStable/index'
+
+/**
+ * Adds non-standard methods to the hode element. This is temporarily until an
+ * API like `ReactNative.measure(hostRef, callback)` is added to React Native.
+ */
+export function usePlatformMethods({
+  pointerEvents,
+  style,
+}: {
+  style?: GenericStyleProp<unknown>
+  pointerEvents?: any
+}): (hostNode: any) => void {
+  // Avoid creating a new ref on every render. The props only need to be
+  // available to 'setNativeProps' when it is called.
+  const ref = useStable(() => (hostNode: any) => {
+    if (hostNode != null) {
+      hostNode.measure = createMeasure(hostNode)
+      hostNode.measureLayout = createMeasureLayout(hostNode)
+      hostNode.measureInWindow = createMeasureInWindow(hostNode)
+    }
+  })
+
+  return ref
+}

package/src/modules/useStable/__tests__/index-test.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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
+ */
+
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { act } from 'react-dom/test-utils'
+
+import useStable from '..'
+
+function createRoot(rootNode) {
+  return {
+    render(element) {
+      ReactDOM.render(element, rootNode)
+    },
+  }
+}
+
+describe('useStable', () => {
+  let root
+  let rootNode
+  let spy = {}
+
+  const TestComponent = ({ initialValueCallback }): React.ReactNode => {
+    const value = useStable(initialValueCallback)
+    spy.value = value
+    return null
+  }
+
+  beforeEach(() => {
+    spy = {}
+    rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+    root = createRoot(rootNode)
+  })
+
+  afterEach(() => {
+    root.render(null)
+    document.body.removeChild(rootNode)
+    rootNode = null
+    root = null
+  })
+
+  test('correctly sets the initial value', () => {
+    const initialValueCallback = () => 5
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(spy.value).toBe(5)
+  })
+
+  test('does not change the value', () => {
+    let counter = 0
+    const initialValueCallback = () => counter++
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(spy.value).toBe(0)
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(spy.value).toBe(0)
+  })
+
+  test('only calls the callback once', () => {
+    let counter = 0
+    const initialValueCallback = () => counter++
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(counter).toBe(1)
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(counter).toBe(1)
+  })
+
+  test('does not change the value if the callback initially returns null', () => {
+    let counter = 0
+    const initialValueCallback = () => {
+      if (counter === 0) {
+        counter++
+        return null
+      }
+      return counter++
+    }
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(spy.value).toBe(null)
+    act(() => {
+      root.render(<TestComponent initialValueCallback={initialValueCallback} />)
+    })
+    expect(spy.value).toBe(null)
+  })
+})

package/src/modules/useStable/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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 strict-local
+ */
+
+import * as React from 'react'
+
+const UNINITIALIZED =
+  typeof Symbol === 'function' && typeof Symbol() === 'symbol'
+    ? Symbol()
+    : Object.freeze({})
+
+export function useStable<T>(getInitialValue: () => T): T {
+  const ref = React.useRef<any>(UNINITIALIZED)
+  if (ref.current === UNINITIALIZED) {
+    ref.current = getInitialValue()
+  }
+  // @ts-ignore  (#64650789) Trouble refining types where `Symbol` is concerned.
+  return ref.current
+}

package/src/styleTypes.ts

@@ -0,0 +1,321 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type { ColorValue, DimensionValue } from './types'
+
+type NumberOrString = number | string
+
+/**
+ * Animations and transitions
+ */
+
+type AnimationDirection = 'alternate' | 'alternate-reverse' | 'normal' | 'reverse'
+
+type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both'
+type AnimationIterationCount = number | 'infinite'
+type AnimationKeyframes = string | object
+type AnimationPlayState = 'paused' | 'running'
+
+export type AnimationStyles = {
+  animationDelay?: string | Array<string> | null
+  animationDirection?: AnimationDirection | Array<AnimationDirection> | null
+  animationDuration?: string | Array<string> | null
+  animationFillMode?: AnimationFillMode | Array<AnimationFillMode> | null
+  animationIterationCount?:
+    | AnimationIterationCount
+    | Array<AnimationIterationCount>
+    | null
+  animationKeyframes?: AnimationKeyframes | Array<AnimationKeyframes> | null
+  animationPlayState?: AnimationPlayState | Array<AnimationPlayState> | null
+  animationTimingFunction?: string | Array<string> | null
+  transitionDelay?: string | Array<string> | null
+  transitionDuration?: string | Array<string> | null
+  transitionProperty?: string | Array<string> | null
+  transitionTimingFunction?: string | Array<string> | null
+}
+
+/**
+ * Border
+ */
+
+type BorderRadiusValue = number | string
+
+type BorderStyleValue = 'solid' | 'dotted' | 'dashed'
+
+export type BorderStyles = {
+  borderColor?: ColorValue | null
+  borderBottomColor?: ColorValue | null
+  borderEndColor?: ColorValue | null
+  borderLeftColor?: ColorValue | null
+  borderRightColor?: ColorValue | null
+  borderStartColor?: ColorValue | null
+  borderTopColor?: ColorValue | null
+  borderRadius?: BorderRadiusValue | null
+  borderBottomEndRadius?: BorderRadiusValue | null
+  borderBottomLeftRadius?: BorderRadiusValue | null
+  borderBottomRightRadius?: BorderRadiusValue | null
+  borderBottomStartRadius?: BorderRadiusValue | null
+  borderTopEndRadius?: BorderRadiusValue | null
+  borderTopLeftRadius?: BorderRadiusValue | null
+  borderTopRightRadius?: BorderRadiusValue | null
+  borderTopStartRadius?: BorderRadiusValue | null
+  borderStyle?: BorderStyleValue | null
+  borderBottomStyle?: BorderStyleValue | null
+  borderEndStyle?: BorderStyleValue | null
+  borderLeftStyle?: BorderStyleValue | null
+  borderRightStyle?: BorderStyleValue | null
+  borderStartStyle?: BorderStyleValue | null
+  borderTopStyle?: BorderStyleValue | null
+}
+
+/**
+ * Interactions
+ */
+
+type CursorValue =
+  | 'alias'
+  | 'all-scroll'
+  | 'auto'
+  | 'cell'
+  | 'context-menu'
+  | 'copy'
+  | 'crosshair'
+  | 'default'
+  | 'grab'
+  | 'grabbing'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'text'
+  | 'vertical-text'
+  | 'move'
+  | 'none'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'zoom-in' // resize
+  | 'zoom-out'
+  | 'col-resize'
+  | 'e-resize'
+  | 'ew-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'ns-resize'
+  | 'nw-resize'
+  | 'row-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+
+type TouchActionValue =
+  | 'auto'
+  | 'inherit'
+  | 'manipulation'
+  | 'none'
+  | 'pan-down'
+  | 'pan-left'
+  | 'pan-right'
+  | 'pan-up'
+  | 'pan-x'
+  | 'pan-y'
+  | 'pinch-zoom'
+type UserSelect = 'all' | 'auto' | 'contain' | 'none' | 'text'
+
+export type InteractionStyles = {
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax
+  cursor?: CursorValue | null
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax
+  touchAction?: TouchActionValue | null
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2
+  userSelect?: UserSelect | null
+  willChange?: string | null
+}
+
+/**
+ * Layout
+ */
+
+type OverflowValue = 'auto' | 'hidden' | 'scroll' | 'visible'
+
+type VisiblilityValue = 'hidden' | 'visible'
+
+export type LayoutStyles = {
+  alignContent?:
+    | 'center'
+    | 'flex-end'
+    | 'flex-start'
+    | 'space-around'
+    | 'space-between'
+    | 'stretch'
+  alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | null
+  alignSelf?:
+    | 'auto'
+    | 'baseline'
+    | 'center'
+    | 'flex-end'
+    | 'flex-start'
+    | 'stretch'
+    | null
+  aspectRatio?: number | null
+  backfaceVisibility?: VisiblilityValue | null
+  borderWidth?: DimensionValue | null
+  borderBottomWidth?: DimensionValue | null
+  borderEndWidth?: DimensionValue | null
+  borderLeftWidth?: DimensionValue | null
+  borderRightWidth?: DimensionValue | null
+  borderStartWidth?: DimensionValue | null
+  borderTopWidth?: DimensionValue | null
+  bottom?: DimensionValue | null
+  boxSizing?: 'border-box' | 'content-box' | 'padding-box' | null
+  direction?: 'inherit' | 'ltr' | 'rtl' | null
+  display?: string | null
+  end?: DimensionValue | null
+  flex?: number | null
+  flexBasis?: DimensionValue | null
+  flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse' | null
+  flexGrow?: number | null
+  flexShrink?: number | null
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | null
+  height?: DimensionValue | null
+  justifyContent?:
+    | 'center'
+    | 'flex-end'
+    | 'flex-start'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly'
+    | null
+  left?: DimensionValue | null
+  margin?: DimensionValue | null
+  marginBottom?: DimensionValue | null
+  marginHorizontal?: DimensionValue | null
+  marginEnd?: DimensionValue | null
+  marginLeft?: DimensionValue | null
+  marginRight?: DimensionValue | null
+  marginStart?: DimensionValue | null
+  marginTop?: DimensionValue | null
+  marginVertical?: DimensionValue | null
+  maxHeight?: DimensionValue | null
+  maxWidth?: DimensionValue | null
+  minHeight?: DimensionValue | null
+  minWidth?: DimensionValue | null
+  order?: number | null
+  overflow?: OverflowValue | null
+  overflowX?: OverflowValue | null
+  overflowY?: OverflowValue | null
+  padding?: DimensionValue | null
+  paddingBottom?: DimensionValue | null
+  paddingHorizontal?: DimensionValue | null
+  paddingEnd?: DimensionValue | null
+  paddingLeft?: DimensionValue | null
+  paddingRight?: DimensionValue | null
+  paddingStart?: DimensionValue | null
+  paddingTop?: DimensionValue | null
+  paddingVertical?: DimensionValue | null
+  position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky' | null
+  right?: DimensionValue | null
+  start?: DimensionValue | null
+  top?: DimensionValue | null
+  visibility?: VisiblilityValue | null
+  width?: DimensionValue | null
+  zIndex?: number | null
+  /**
+   * @platform web
+   */
+  gridAutoColumns?: string | null
+  gridAutoFlow?: string | null
+  gridAutoRows?: string | null
+  gridColumnEnd?: string | null
+  gridColumnGap?: string | null
+  gridColumnStart?: string | null
+  gridRowEnd?: string | null
+  gridRowGap?: string | null
+  gridRowStart?: string | null
+  gridTemplateColumns?: string | null
+  gridTemplateRows?: string | null
+  gridTemplateAreas?: string | null
+}
+
+/**
+ * Shadows
+ */
+
+export type ShadowStyles = {
+  shadowColor?: ColorValue | null
+  shadowOffset?: {
+    width?: DimensionValue
+    height?: DimensionValue
+  }
+  shadowOpacity?: number | null
+  shadowRadius?: DimensionValue | null
+}
+
+/**
+ * Transforms
+ */
+
+export type TransformStyles = {
+  perspective?: NumberOrString | null
+  perspectiveOrigin?: string | null
+  transform?: Array<
+    | {
+        readonly perspective: NumberOrString
+      }
+    | {
+        readonly rotate: string
+      }
+    | {
+        readonly rotateX: string
+      }
+    | {
+        readonly rotateY: string
+      }
+    | {
+        readonly rotateZ: string
+      }
+    | {
+        readonly scale: number
+      }
+    | {
+        readonly scaleX: number
+      }
+    | {
+        readonly scaleY: number
+      }
+    | {
+        readonly scaleZ: number
+      }
+    | {
+        readonly scale3d: string
+      }
+    | {
+        readonly skewX: string
+      }
+    | {
+        readonly skewY: string
+      }
+    | {
+        readonly translateX: NumberOrString
+      }
+    | {
+        readonly translateY: NumberOrString
+      }
+    | {
+        readonly translateZ: NumberOrString
+      }
+    | {
+        readonly translate3d: string
+      }
+  >
+  transformOrigin?: string | null
+  transformStyle?: 'flat' | 'preserve-3d' | null
+}

package/src/types.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type ColorValue = null | string
+
+export type DimensionValue = null | number | string
+
+export type EdgeInsetsValue = {
+  top: number
+  left: number
+  right: number
+  bottom: number
+}
+
+export type GenericStyleProp<T> =
+  | null
+  | void
+  | T
+  | false
+  | ''
+  | ReadonlyArray<GenericStyleProp<T>>
+
+export type LayoutValue = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type LayoutEvent = {
+  nativeEvent: {
+    layout: LayoutValue
+    target: any
+  }
+  timeStamp: number
+}
+
+export type PointValue = {
+  x: number
+  y: number
+}
+
+type LayoutCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  left: number,
+  top: number
+) => void
+
+type MeasureInWindowCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number
+) => void
+
+// Mixin to HTMLElement that represents additions from the `usePlatformMethods` hook
+export interface PlatformMethods {
+  blur: () => void
+  focus: () => void
+  measure: (callback: LayoutCallback) => void
+  measureInWindow: (callback: MeasureInWindowCallback) => void
+  measureLayout: (
+    relativeToNativeNode: {},
+    onSuccess: LayoutCallback,
+    onFail: () => void
+  ) => void
+  setNativeProps: (nativeProps: {}) => void
+}

package/types/StyleSheet/compiler/createReactDOMStyle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+type Style = {
+    [K in string]: any;
+};
+export declare const createTransformValue: (style: Style) => string;
+/**
+ * Reducer
+ */
+export declare const createReactDOMStyle: (style: Style, isInline?: boolean) => Style;
+export {};
+//# sourceMappingURL=createReactDOMStyle.d.ts.map

package/types/StyleSheet/compiler/createReactDOMStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReactDOMStyle.d.ts","sourceRoot":"","sources":["../../../src/StyleSheet/compiler/createReactDOMStyle.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAKH,KAAK,KAAK,GAAG;KACV,CAAC,IAAI,MAAM,GAAG,GAAG;CACnB,CAAA;AAqFD,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,KAAG,MAMnD,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,EAAE,WAAW,OAAO,KAAG,KAsGtE,CAAA"}

package/types/StyleSheet/compiler/hash.d.ts

@@ -0,0 +1,2 @@
+export { simpleHash as default } from '@hanzogui/simple-hash';
+//# sourceMappingURL=hash.d.ts.map

package/types/StyleSheet/compiler/hash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash.d.ts","sourceRoot":"","sources":["../../../src/StyleSheet/compiler/hash.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAA"}