@hanzogui/react-native-web-lite 2.0.0

package/src/TouchableWithoutFeedback.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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
+ * @format
+ */
+
+import * as React from 'react'
+import { useMemo, useRef } from 'react'
+import { pick, useMergeRefs, usePressEvents } from '@hanzogui/react-native-web-internals'
+
+const forwardPropsList = {
+  accessibilityDisabled: true,
+  accessibilityLabel: true,
+  accessibilityLiveRegion: true,
+  accessibilityRole: true,
+  accessibilityState: true,
+  accessibilityValue: true,
+  children: true,
+  disabled: true,
+  focusable: true,
+  nativeID: true,
+  onBlur: true,
+  onFocus: true,
+  onLayout: true,
+  testID: true,
+}
+
+const pickProps = (props) => pick(props, forwardPropsList)
+
+function TouchableWithoutFeedbackImpl(props, forwardedRef) {
+  const {
+    delayPressIn,
+    delayPressOut,
+    delayLongPress,
+    disabled,
+    focusable,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+  } = props
+
+  const hostRef = useRef(null)
+
+  const pressConfig = useMemo(
+    () => ({
+      cancelable: !rejectResponderTermination,
+      disabled,
+      delayLongPress,
+      delayPressStart: delayPressIn,
+      delayPressEnd: delayPressOut,
+      onLongPress,
+      onPress,
+      onPressStart: onPressIn,
+      onPressEnd: onPressOut,
+    }),
+    [
+      disabled,
+      delayPressIn,
+      delayPressOut,
+      delayLongPress,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
+    ]
+  )
+
+  const pressEventHandlers = usePressEvents(hostRef, pressConfig)
+
+  const element = React.Children.only(props.children)
+  const children = [element.props.children]
+  const supportedProps = pickProps(props)
+  // @ts-ignore
+  supportedProps.accessibilityDisabled = disabled
+  // @ts-ignore
+  supportedProps.focusable = !disabled && focusable !== false
+  // @ts-ignore
+  supportedProps.ref = useMergeRefs(forwardedRef, hostRef, element.ref)
+
+  const elementProps = Object.assign(supportedProps, pressEventHandlers)
+
+  return React.cloneElement(element, elementProps, ...children)
+}
+
+export const TouchableWithoutFeedback = React.memo(
+  React.forwardRef(TouchableWithoutFeedbackImpl)
+)
+TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback'

package/src/UnimplementedView.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { View } from './View/index'
+
+export class UnimplementedView extends React.Component {
+  setNativeProps = () => {}
+  render() {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`Unimplemented view`)
+    }
+    return <View {...this.props} />
+  }
+}

package/src/Vibration/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+type VibratePattern = number | Array<number>
+
+const vibrate = (pattern: VibratePattern) => {
+  if ('vibrate' in window.navigator) {
+    window.navigator.vibrate(pattern)
+  }
+}
+
+export const Vibration = {
+  cancel() {
+    vibrate(0)
+  },
+  vibrate(pattern: VibratePattern = 400) {
+    vibrate(pattern)
+  },
+}

package/src/View/index.tsx

@@ -0,0 +1,139 @@
+/**
+ * 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
+ */
+
+import {
+  forwardPropsListView,
+  getLocaleDirection,
+  pick,
+  TextAncestorContext,
+  useElementLayout,
+  useLocaleContext,
+  useMergeRefs,
+  usePlatformMethods,
+  useResponderEvents,
+} from '@hanzogui/react-native-web-internals'
+import * as React from 'react'
+
+import { useCreateElement } from '../createElement/index'
+import type { PlatformMethods } from '../types'
+import type { ViewProps } from './types'
+
+const pickProps = (props) => pick(props, forwardPropsListView)
+
+const View = React.forwardRef<HTMLElement & PlatformMethods, ViewProps>(
+  (props, forwardedRef) => {
+    const {
+      hrefAttrs,
+      onLayout,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      ...rest
+    } = props
+
+    if (process.env.NODE_ENV !== 'production') {
+      React.Children.toArray(props.children).forEach((item) => {
+        if (typeof item === 'string') {
+          console.error(
+            `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
+          )
+        }
+      })
+    }
+
+    const hasTextAncestor = React.useContext(TextAncestorContext)
+    const hostRef = React.useRef(null)
+    const { direction: contextDirection } = useLocaleContext()
+
+    useElementLayout(hostRef, onLayout)
+    useResponderEvents(hostRef, {
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+    })
+
+    let component = 'div'
+
+    const langDirection = props.lang != null ? getLocaleDirection(props.lang) : null
+    const componentDirection = props.dir || langDirection
+    const writingDirection = componentDirection || contextDirection
+
+    const supportedProps = pickProps(rest) as any
+    supportedProps.dir = componentDirection
+    supportedProps.style = [styles.view, hasTextAncestor && styles.inline, props.style]
+    if (props.href != null) {
+      component = 'a'
+      if (hrefAttrs != null) {
+        const { download, rel, target } = hrefAttrs
+        if (download != null) {
+          supportedProps.download = download
+        }
+        if (rel != null) {
+          supportedProps.rel = rel
+        }
+        if (typeof target === 'string') {
+          supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target
+        }
+      }
+    }
+
+    const platformMethodsRef = usePlatformMethods(supportedProps)
+    const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef)
+
+    supportedProps.ref = setRef
+
+    return useCreateElement(component, supportedProps, { writingDirection })
+  }
+)
+
+View.displayName = 'View'
+
+const styles = {
+  view: {
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+  },
+  inline: {
+    display: 'inline-flex',
+  },
+}
+
+export { ViewProps, View }
+export default View

package/src/View/types.tsx

@@ -0,0 +1,170 @@
+/**
+ * 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
+ */
+
+import type {
+  AnimationStyles,
+  BorderStyles,
+  InteractionStyles,
+  LayoutStyles,
+  ShadowStyles,
+  TransformStyles,
+} from '../styleTypes'
+import type { ColorValue, GenericStyleProp, LayoutEvent } from '../types'
+
+type NumberOrString = number | string
+type OverscrollBehaviorValue = 'auto' | 'contain' | 'none'
+type idRef = string
+type idRefList = idRef | Array<idRef>
+
+export type AccessibilityProps = {
+  accessibilityActiveDescendant?: idRef | null
+  accessibilityAtomic?: boolean | null
+  accessibilityAutoComplete?: 'none' | 'list' | 'inline' | 'both' | null
+  accessibilityBusy?: boolean | null
+  accessibilityChecked?: boolean | 'mixed' | null
+  accessibilityColumnCount?: number | null
+  accessibilityColumnIndex?: number | null
+  accessibilityColumnSpan?: number | null
+  accessibilityControls?: idRefList | null
+  accessibilityCurrent?: boolean | 'page' | 'step' | 'location' | 'date' | 'time' | null
+  accessibilityDescribedBy?: idRefList | null
+  accessibilityDetails?: idRef | null
+  accessibilityDisabled?: boolean | null
+  accessibilityErrorMessage?: idRef | null
+  accessibilityExpanded?: boolean | null
+  accessibilityFlowTo?: idRefList | null
+  accessibilityHasPopup?: 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree' | false | null
+  accessibilityHidden?: boolean | null
+  accessibilityInvalid?: boolean | null
+  accessibilityKeyShortcuts?: Array<string> | null
+  accessibilityLabel?: string | null
+  accessibilityLabelledBy?: idRefList | null
+  accessibilityLevel?: number | null
+  accessibilityLiveRegion?: 'assertive' | 'none' | 'polite' | null
+  accessibilityModal?: boolean | null
+  accessibilityMultiline?: boolean | null
+  accessibilityMultiSelectable?: boolean | null
+  accessibilityOrientation?: 'horizontal' | 'vertical' | null
+  accessibilityOwns?: idRefList | null
+  accessibilityPlaceholder?: string | null
+  accessibilityPosInSet?: number | null
+  accessibilityPressed?: boolean | 'mixed' | null
+  accessibilityReadOnly?: boolean | null
+  accessibilityRequired?: boolean | null
+  accessibilityRole?: string | null
+  accessibilityRoleDescription?: string | null
+  accessibilityRowCount?: number | null
+  accessibilityRowIndex?: number | null
+  accessibilityRowSpan?: number | null
+  accessibilitySelected?: boolean | null
+  accessibilitySetSize?: number | null
+  accessibilitySort?: 'ascending' | 'descending' | 'none' | 'other' | null
+  accessibilityValueMax?: number | null
+  accessibilityValueMin?: number | null
+  accessibilityValueNow?: number | null
+  accessibilityValueText?: string | null
+  dataSet?: {}
+  focusable?: boolean | null
+  nativeID?: string | null
+}
+
+export type ViewStyle = {
+  backdropFilter?: string | null
+  backgroundAttachment?: string | null
+  backgroundBlendMode?: string | null
+  backgroundClip?: string | null
+  backgroundColor?: ColorValue | null
+  backgroundImage?: string | null
+  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box'
+  backgroundPosition?: string | null
+  backgroundRepeat?: string | null
+  backgroundSize?: string | null
+  boxShadow?: string | null
+  clip?: string | null
+  filter?: string | null
+  opacity?: number | null
+  outlineColor?: ColorValue | null
+  outlineOffset?: NumberOrString | null
+  outlineStyle?: string | null
+  outlineWidth?: NumberOrString | null
+  overscrollBehavior?: OverscrollBehaviorValue | null
+  overscrollBehaviorX?: OverscrollBehaviorValue | null
+  overscrollBehaviorY?: OverscrollBehaviorValue | null
+  scrollbarWidth?: 'auto' | 'none' | 'thin'
+  scrollSnapAlign?: string | null
+  scrollSnapType?: string | null
+  WebkitMaskImage?: string | null
+  WebkitOverflowScrolling?: 'auto' | 'touch'
+} & AnimationStyles &
+  BorderStyles &
+  InteractionStyles &
+  LayoutStyles &
+  ShadowStyles &
+  TransformStyles
+
+export type ViewProps = {
+  children?: any | null
+  dir?: 'ltr' | 'rtl'
+  focusable?: boolean | null
+  lang?: string
+  nativeID?: string | null
+  onBlur?: (e: any) => void
+  onClick?: (e: any) => void
+  onClickCapture?: (e: any) => void
+  onContextMenu?: (e: any) => void
+  onFocus?: (e: any) => void
+  onKeyDown?: (e: any) => void
+  onKeyUp?: (e: any) => void
+  onLayout?: (e: LayoutEvent) => void
+  onMoveShouldSetResponder?: (e: any) => boolean
+  onMoveShouldSetResponderCapture?: (e: any) => boolean
+  onResponderEnd?: (e: any) => void
+  onResponderGrant?: (e: any) => void | boolean
+  onResponderMove?: (e: any) => void
+  onResponderReject?: (e: any) => void
+  onResponderRelease?: (e: any) => void
+  onResponderStart?: (e: any) => void
+  onResponderTerminate?: (e: any) => void
+  onResponderTerminationRequest?: (e: any) => boolean
+  onScrollShouldSetResponder?: (e: any) => boolean
+  onScrollShouldSetResponderCapture?: (e: any) => boolean
+  onSelectionChangeShouldSetResponder?: (e: any) => boolean
+  onSelectionChangeShouldSetResponderCapture?: (e: any) => boolean
+  onStartShouldSetResponder?: (e: any) => boolean
+  onStartShouldSetResponderCapture?: (e: any) => boolean
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'
+  style?: GenericStyleProp<ViewStyle>
+  testID?: string | null
+  // unstable
+  dataSet?: object | null
+  onMouseDown?: (e: any) => void
+  onMouseEnter?: (e: any) => void
+  onMouseLeave?: (e: any) => void
+  onMouseMove?: (e: any) => void
+  onMouseOver?: (e: any) => void
+  onMouseOut?: (e: any) => void
+  onMouseUp?: (e: any) => void
+  onScroll?: (e: any) => void
+  onTouchCancel?: (e: any) => void
+  onTouchCancelCapture?: (e: any) => void
+  onTouchEnd?: (e: any) => void
+  onTouchEndCapture?: (e: any) => void
+  onTouchMove?: (e: any) => void
+  onTouchMoveCapture?: (e: any) => void
+  onTouchStart?: (e: any) => void
+  onTouchStartCapture?: (e: any) => void
+  onWheel?: (e: any) => void
+  href?: string | null
+  hrefAttrs?: {
+    download?: boolean | null
+    rel?: string | null
+    target?: string | null
+  } | null
+} & AccessibilityProps

package/src/VirtualizedList.tsx

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+
+export { default as VirtualizedList } from './vendor/react-native/VirtualizedList'
+export { VirtualizedList as default } from './vendor/react-native/VirtualizedList'

package/src/codegenNativeCommand.ts

@@ -0,0 +1,6 @@
+// compat with bad imports in native
+
+export function codegenNativeCommand() {
+  console.warn(`codegenNativeCommand on web is a no-op`)
+  return {}
+}

package/src/codegenNativeComponent.ts

@@ -0,0 +1,6 @@
+// compat with bad imports in native
+
+export function codegenNativeComponent() {
+  console.warn(`codegenNativeComponent on web is a no-op`)
+  return {}
+}

package/src/createElement/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`exports/createElement renders different DOM elements 1`] = `<span />`;
+
+exports[`exports/createElement renders different DOM elements 2`] = `<main />`;
+
+exports[`exports/createElement renders different DOM elements 3`] = `
+<svg>
+  <image
+    href="#href"
+  />
+</svg>
+`;