@hanzogui/react-native-web-lite 2.0.0

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

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Pressable default 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable focus interaction 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable focus interaction 2`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style="outline: focus-ring;"
+  tabindex="0"
+>
+  <div
+    data-testid="focus-content"
+  />
+</div>
+`;
+
+exports[`components/Pressable focus interaction 3`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style=""
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable hover interaction 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable hover interaction 2`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style="outline: hover-ring;"
+  tabindex="0"
+>
+  <div
+    data-testid="hover-content"
+  />
+</div>
+`;
+
+exports[`components/Pressable hover interaction 3`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style=""
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable press interaction (keyboard) 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable press interaction (keyboard) 2`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style="outline: press-ring;"
+  tabindex="0"
+>
+  <div
+    data-testid="press-content"
+  />
+</div>
+`;
+
+exports[`components/Pressable press interaction (keyboard) 3`] = `null`;
+
+exports[`components/Pressable press interaction (pointer) 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable press interaction (pointer) 2`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style="outline: press-ring;"
+  tabindex="0"
+>
+  <div
+    data-testid="press-content"
+  />
+</div>
+`;
+
+exports[`components/Pressable press interaction (pointer) 3`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style=""
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "accessibilityLabel" value is set 1`] = `
+<div
+  aria-label="label"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "accessibilityLiveRegion" value is set 1`] = `
+<div
+  aria-live="polite"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "accessibilityRole" value alters HTML element 1`] = `
+<article
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  role="article"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  role="button"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  role="presentation"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "disabled" 1`] = `
+<div
+  aria-disabled="true"
+  class="css-view-175oi2r r-pointerEvents-633pao"
+  tabindex="-1"
+/>
+`;
+
+exports[`components/Pressable prop "href" 1`] = `
+<a
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  href="#href"
+/>
+`;
+
+exports[`components/Pressable prop "nativeID" value is set 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  id="nativeID"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "pointerEvents" 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 r-pointerEvents-ah5dr5"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "style" value is set 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Pressable prop "testID" value is set 1`] = `
+<div
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
+  data-testid="123"
+  tabindex="0"
+/>
+`;

package/src/Pressable/index.tsx

@@ -0,0 +1,236 @@
+/**
+ * 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
+ */
+
+'use strict'
+
+import { usePressEvents } from '@hanzogui/react-native-use-pressable'
+import type { PressResponderConfig } from '@hanzogui/react-native-use-pressable'
+import * as React from 'react'
+import { forwardRef, memo, useMemo, useRef, useState } from 'react'
+import { StyleSheet } from '@hanzogui/react-native-web-internals'
+import { useHover, useMergeRefs } from '@hanzogui/react-native-web-internals'
+
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+type HoverEventsConfig = any
+
+export type StateCallbackType = {
+  focused: boolean
+  hovered: boolean
+  pressed: boolean
+}
+
+type ViewStyleProp = ViewProps['style']
+
+type Props = ViewProps & {
+  children: React.ReactNode | ((state: StateCallbackType) => React.ReactNode)
+  // Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+  delayLongPress?: number | null
+  // Duration (in milliseconds) from `onPressStart` is called after pointerdown
+  delayPressIn?: number | null
+  // Duration (in milliseconds) from `onPressEnd` is called after pointerup.
+  delayPressOut?: number | null
+  // Whether the press behavior is disabled.
+  disabled?: boolean | null
+  // Called when the view is hovered
+  onHoverIn?: HoverEventsConfig['onHoverStart']
+  // Called when the view is no longer hovered
+  onHoverOut?: HoverEventsConfig['onHoverEnd']
+  // Called when this view's layout changes
+  onLayout?: ViewProps['onLayout']
+  // Called when a long-tap gesture is detected.
+  onLongPress?: PressResponderConfig['onLongPress']
+  // Called when a single tap gesture is detected.
+  onPress?: PressResponderConfig['onPress']
+  // Called when a touch is engaged, before `onPress`.
+  onPressIn?: PressResponderConfig['onPressStart']
+  // Called when a touch is moving, after `onPressIn`.
+  onPressMove?: PressResponderConfig['onPressMove']
+  // Called when a touch is released, before `onPress`.
+  onPressOut?: PressResponderConfig['onPressEnd']
+  style?: ViewStyleProp | ((state: StateCallbackType) => ViewStyleProp)
+  /**
+   * Used only for documentation or testing (e.g. snapshot testing).
+   */
+  testOnly_hovered?: boolean | null
+  testOnly_pressed?: boolean | null
+}
+
+/**
+ * Component used to build display components that should respond to whether the
+ * component is currently pressed or not.
+ */
+function Pressable(props: Props, forwardedRef): React.ReactNode {
+  const {
+    children,
+    delayLongPress,
+    delayPressIn,
+    delayPressOut,
+    disabled,
+    focusable,
+    onBlur,
+    onContextMenu,
+    onFocus,
+    onHoverIn,
+    onHoverOut,
+    onKeyDown,
+    onLongPress,
+    onPress,
+    onPressMove,
+    onPressIn,
+    onPressOut,
+    style,
+    testOnly_hovered,
+    testOnly_pressed,
+    ...rest
+  } = props
+
+  const [hovered, setHovered] = useForceableState(testOnly_hovered === true)
+  const [focused, setFocused] = useForceableState(false)
+  const [pressed, setPressed] = useForceableState(testOnly_pressed === true)
+
+  const hostRef = useRef(null)
+  const setRef = useMergeRefs(forwardedRef, hostRef)
+
+  const pressConfig = useMemo(
+    () => ({
+      delayLongPress,
+      delayPressStart: delayPressIn,
+      delayPressEnd: delayPressOut,
+      disabled,
+      onLongPress,
+      onPress,
+      onPressChange: setPressed,
+      onPressStart: onPressIn,
+      onPressMove,
+      onPressEnd: onPressOut,
+    }),
+    [
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressMove,
+      onPressOut,
+      setPressed,
+    ]
+  )
+
+  const pressEventHandlers = usePressEvents(hostRef, pressConfig)
+
+  const { onContextMenu: onContextMenuPress, onKeyDown: onKeyDownPress } =
+    pressEventHandlers
+
+  useHover(hostRef, {
+    contain: true,
+    disabled,
+    onHoverChange: setHovered,
+    onHoverStart: onHoverIn,
+    onHoverEnd: onHoverOut,
+  })
+
+  const interactionState = { hovered, focused, pressed }
+
+  const blurHandler = React.useCallback(
+    (e) => {
+      if (disabled) {
+        return
+      }
+      if (e.nativeEvent.target === hostRef.current) {
+        setFocused(false)
+        if (onBlur != null) {
+          onBlur(e)
+        }
+      }
+    },
+    [disabled, hostRef, setFocused, onBlur]
+  )
+
+  const focusHandler = React.useCallback(
+    (e) => {
+      if (disabled) {
+        return
+      }
+      if (e.nativeEvent.target === hostRef.current) {
+        setFocused(true)
+        if (onFocus != null) {
+          onFocus(e)
+        }
+      }
+    },
+    [disabled, hostRef, setFocused, onFocus]
+  )
+
+  const contextMenuHandler = React.useCallback(
+    (e) => {
+      if (onContextMenuPress != null) {
+        onContextMenuPress(e)
+      }
+      if (onContextMenu != null) {
+        onContextMenu(e)
+      }
+    },
+    [onContextMenu, onContextMenuPress]
+  )
+
+  const keyDownHandler = React.useCallback(
+    (e) => {
+      if (onKeyDownPress != null) {
+        onKeyDownPress(e)
+      }
+      if (onKeyDown != null) {
+        onKeyDown(e)
+      }
+    },
+    [onKeyDown, onKeyDownPress]
+  )
+
+  return (
+    <View
+      {...rest}
+      {...pressEventHandlers}
+      accessibilityDisabled={disabled}
+      focusable={!disabled && focusable !== false}
+      onBlur={blurHandler}
+      onContextMenu={contextMenuHandler}
+      onFocus={focusHandler}
+      onKeyDown={keyDownHandler}
+      pointerEvents={disabled ? 'none' : rest.pointerEvents}
+      ref={setRef}
+      style={[
+        !disabled && styles.root,
+        typeof style === 'function' ? style(interactionState) : style,
+      ]}
+    >
+      {typeof children === 'function' ? children(interactionState) : children}
+    </View>
+  )
+}
+
+function useForceableState(forced: boolean): [boolean, (boolean) => void] {
+  const [bool, setBool] = useState(false)
+  return [bool || forced, setBool]
+}
+
+const styles = StyleSheet.create({
+  root: {
+    cursor: 'pointer',
+    touchAction: 'manipulation',
+  },
+})
+
+const PressableComponent = memo(forwardRef(Pressable as any))
+PressableComponent.displayName = 'Pressable'
+
+export { PressableComponent as Pressable }
+export default PressableComponent

package/src/RefreshControl/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { ReactNode } from 'react'
+
+import type { ColorValue } from '../types'
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+type RefreshControlProps = {
+  colors?: Array<ColorValue>
+  enabled?: boolean
+  onRefresh?: () => void
+  progressBackgroundColor?: ColorValue
+  progressViewOffset?: number
+  refreshing: boolean
+  size?: 0 | 1
+  tintColor?: ColorValue
+  title?: string
+  titleColor?: ColorValue
+} & ViewProps
+
+export function RefreshControl(props: RefreshControlProps): ReactNode {
+  const {
+    /* eslint-disable */
+    colors,
+    enabled,
+    onRefresh,
+    progressBackgroundColor,
+    progressViewOffset,
+    refreshing,
+    size,
+    tintColor,
+    title,
+    titleColor,
+    /* eslint-enable */
+    ...rest
+  } = props
+
+  return <View {...rest} />
+}
+
+export default RefreshControl

package/src/SafeAreaView/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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 * as React from 'react'
+import { StyleSheet, canUseDOM } from '@hanzogui/react-native-web-internals'
+
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+const cssFunction: 'constant' | 'env' = (() => {
+  if (
+    canUseDOM &&
+    window.CSS &&
+    window.CSS.supports &&
+    window.CSS.supports('top: constant(safe-area-inset-top)')
+  ) {
+    return 'constant'
+  }
+  return 'env'
+})()
+
+const SafeAreaView = React.forwardRef<typeof View, ViewProps>((props, ref) => {
+  const { style, ...rest } = props
+  return (
+    <View {...rest} ref={ref as any} style={StyleSheet.compose(styles.root, style)} />
+  )
+})
+
+SafeAreaView.displayName = 'SafeAreaView'
+
+const styles = StyleSheet.create({
+  root: {
+    paddingTop: `${cssFunction}(safe-area-inset-top)`,
+    paddingRight: `${cssFunction}(safe-area-inset-right)`,
+    paddingBottom: `${cssFunction}(safe-area-inset-bottom)`,
+    paddingLeft: `${cssFunction}(safe-area-inset-left)`,
+  },
+})
+
+export { SafeAreaView }
+export default SafeAreaView

package/src/ScrollView/ScrollViewBase.tsx

@@ -0,0 +1,183 @@
+/**
+ * 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 { useMergeRefs } from '@hanzogui/react-native-web-internals'
+import * as React from 'react'
+
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+type Props = ViewProps & {
+  onMomentumScrollBegin?: (e: any) => void
+  onMomentumScrollEnd?: (e: any) => void
+  onScroll?: (e: any) => void
+  onScrollBeginDrag?: (e: any) => void
+  onScrollEndDrag?: (e: any) => void
+  onTouchMove?: (e: any) => void
+  onWheel?: (e: any) => void
+  scrollEnabled?: boolean
+  scrollEventThrottle?: number
+  showsHorizontalScrollIndicator?: boolean
+  showsVerticalScrollIndicator?: boolean
+}
+
+function normalizeScrollEvent(e) {
+  return {
+    nativeEvent: {
+      contentOffset: {
+        get x() {
+          return e.target.scrollLeft
+        },
+        get y() {
+          return e.target.scrollTop
+        },
+      },
+      contentSize: {
+        get height() {
+          return e.target.scrollHeight
+        },
+        get width() {
+          return e.target.scrollWidth
+        },
+      },
+      layoutMeasurement: {
+        get height() {
+          return e.target.offsetHeight
+        },
+        get width() {
+          return e.target.offsetWidth
+        },
+      },
+    },
+    timeStamp: Date.now(),
+  }
+}
+
+function shouldEmitScrollEvent(lastTick: number, eventThrottle: number) {
+  const timeSinceLastTick = Date.now() - lastTick
+  return eventThrottle > 0 && timeSinceLastTick >= eventThrottle
+}
+
+/**
+ * Encapsulates the Web-specific scroll throttling and disabling logic
+ */
+const ScrollViewBase = React.forwardRef((props: Props, forwardedRef) => {
+  const {
+    onScroll,
+    onTouchMove,
+    onWheel,
+    scrollEnabled = true,
+    scrollEventThrottle = 0,
+    showsHorizontalScrollIndicator,
+    showsVerticalScrollIndicator,
+    style,
+    // strip RN-only props that shouldn't reach the DOM
+    onMomentumScrollBegin,
+    onMomentumScrollEnd,
+    onScrollBeginDrag,
+    onScrollEndDrag,
+    ...rest
+  } = props
+
+  const scrollState = React.useRef({ isScrolling: false, scrollLastTick: 0 })
+  const scrollTimeout = React.useRef(null)
+  const scrollRef = React.useRef(null)
+
+  function createPreventableScrollHandler(handler: Function) {
+    return (e: object) => {
+      if (scrollEnabled) {
+        if (handler) {
+          handler(e)
+        }
+      }
+    }
+  }
+
+  function handleScroll(e: any) {
+    e.stopPropagation()
+    if (e.target === scrollRef.current) {
+      e.persist()
+      // A scroll happened, so the scroll resets the scrollend timeout.
+      if (scrollTimeout.current != null) {
+        clearTimeout(scrollTimeout.current)
+      }
+      // @ts-ignore
+      scrollTimeout.current = setTimeout(() => {
+        handleScrollEnd(e)
+      }, 100)
+      if (scrollState.current.isScrolling) {
+        // Scroll last tick may have changed, check if we need to notify
+        if (
+          shouldEmitScrollEvent(scrollState.current.scrollLastTick, scrollEventThrottle)
+        ) {
+          handleScrollTick(e)
+        }
+      } else {
+        // Weren't scrolling, so we must have just started
+        handleScrollStart(e)
+      }
+    }
+  }
+
+  function handleScrollStart(e: object) {
+    scrollState.current.isScrolling = true
+    handleScrollTick(e)
+  }
+
+  function handleScrollTick(e: object) {
+    scrollState.current.scrollLastTick = Date.now()
+    if (onScroll) {
+      onScroll(normalizeScrollEvent(e))
+    }
+  }
+
+  function handleScrollEnd(e: object) {
+    scrollState.current.isScrolling = false
+    if (onScroll) {
+      onScroll(normalizeScrollEvent(e))
+    }
+  }
+
+  const hideHorizontalScrollbar = showsHorizontalScrollIndicator === false
+  const hideVerticalScrollbar = showsVerticalScrollIndicator === false
+
+  return (
+    <View
+      {...rest}
+      className={
+        '_dsp_contents' +
+        (hideHorizontalScrollbar ? ' _hsb-x' : '') +
+        (hideVerticalScrollbar ? ' _hsb-y' : '')
+      }
+      onScroll={handleScroll}
+      onTouchMove={createPreventableScrollHandler(onTouchMove as any)}
+      onWheel={createPreventableScrollHandler(onWheel as any)}
+      ref={useMergeRefs(scrollRef, forwardedRef)}
+      style={[
+        style,
+        // @ts-ignore
+        !scrollEnabled && styles.scrollDisabled,
+      ]}
+    />
+  )
+})
+
+// Chrome doesn't support e.preventDefault in this case; touch-action must be
+// used to disable scrolling.
+// https://developers.google.com/web/updates/2017/01/scrolling-intervention
+const styles = {
+  scrollDisabled: {
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    touchAction: 'none',
+  },
+}
+
+export { ScrollViewBase }
+export default ScrollViewBase