@hps1978/react-native-web-tv 0.21.2-tv.0

package/src/exports/Pressable/index.js

@@ -0,0 +1,253 @@
+/**
+ * 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 client';
+
+import type { HoverEventsConfig } from '../../modules/useHover';
+import type { PressResponderConfig } from '../../modules/usePressEvents/PressResponder';
+import type { ViewProps } from '../View';
+import type {
+  FocusEvent,
+  BlurEvent
+} from '../../vendor/react-native/Types/CoreEventTypes';
+
+import * as React from 'react';
+import { forwardRef, memo, useMemo, useState, useRef } from 'react';
+import useMergeRefs from '../../modules/useMergeRefs';
+import useHover from '../../modules/useHover';
+import usePressEvents from '../../modules/usePressEvents';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+
+export type StateCallbackType = $ReadOnly<{|
+  focused: boolean,
+  hovered: boolean,
+  pressed: boolean
+|}>;
+
+type ViewStyleProp = $PropertyType<ViewProps, 'style'>;
+
+type Props = {
+  ...ViewProps,
+  children: React.Node | ((state: StateCallbackType) => React.Node),
+  // Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+  delayLongPress?: ?number,
+  // Duration (in milliseconds) from `onPressStart` is called after pointerdown
+  delayPressIn?: ?number,
+  // Duration (in milliseconds) from `onPressEnd` is called after pointerup.
+  delayPressOut?: ?number,
+  // Whether the press behavior is disabled.
+  disabled?: ?boolean,
+  // Called when the view is hovered
+  onHoverIn?: $PropertyType<HoverEventsConfig, 'onHoverStart'>,
+  // Called when the view is no longer hovered
+  onHoverOut?: $PropertyType<HoverEventsConfig, 'onHoverEnd'>,
+  // Called when this view's layout changes
+  onLayout?: $PropertyType<ViewProps, 'onLayout'>,
+  // Called when a long-tap gesture is detected.
+  onLongPress?: $PropertyType<PressResponderConfig, 'onLongPress'>,
+  // Called when a single tap gesture is detected.
+  onPress?: $PropertyType<PressResponderConfig, 'onPress'>,
+  // Called when a touch is engaged, before `onPress`.
+  onPressIn?: $PropertyType<PressResponderConfig, 'onPressStart'>,
+  // Called when a touch is moving, after `onPressIn`.
+  onPressMove?: $PropertyType<PressResponderConfig, 'onPressMove'>,
+  // Called when a touch is released, before `onPress`.
+  onPressOut?: $PropertyType<PressResponderConfig, 'onPressEnd'>,
+  style?: ViewStyleProp | ((state: StateCallbackType) => ViewStyleProp),
+  /**
+   * Used only for documentation or testing (e.g. snapshot testing).
+   */
+  testOnly_hovered?: ?boolean,
+  testOnly_pressed?: ?boolean,
+  // Additional TV Props
+  onFocusCapture?: ?(event: FocusEvent) => void,
+  onBlurCapture?: ?(event: BlurEvent) => void
+};
+
+/**
+ * Component used to build display components that should respond to whether the
+ * component is currently pressed or not.
+ */
+function Pressable(props: Props, forwardedRef): React.Node {
+  const {
+    children,
+    delayLongPress,
+    delayPressIn,
+    delayPressOut,
+    disabled,
+    onBlur,
+    onContextMenu,
+    onFocus,
+    onHoverIn,
+    onHoverOut,
+    onKeyDown,
+    onLongPress,
+    onPress,
+    onPressMove,
+    onPressIn,
+    onPressOut,
+    style,
+    tabIndex,
+    testOnly_hovered,
+    testOnly_pressed,
+    focusable,
+    isTVSelectable,
+    ...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 (e.nativeEvent.target === hostRef.current) {
+        setFocused(false);
+        if (onBlur != null) {
+          onBlur(e);
+        }
+      }
+    },
+    [hostRef, setFocused, onBlur]
+  );
+
+  const focusHandler = React.useCallback(
+    (e) => {
+      if (e.nativeEvent.target === hostRef.current) {
+        setFocused(true);
+        if (onFocus != null) {
+          onFocus(e);
+        }
+      }
+    },
+    [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]
+  );
+
+  // Use tabindex to handle focusable
+  // as LRUD focus handling depends on it
+  let _tabIndex;
+  if (tabIndex !== undefined) {
+    _tabIndex = tabIndex;
+  } else {
+    _tabIndex = focusable !== false && isTVSelectable !== false ? 0 : -1;
+  }
+
+  return (
+    <View
+      {...rest}
+      {...pressEventHandlers}
+      aria-disabled={disabled}
+      onBlur={blurHandler}
+      onContextMenu={contextMenuHandler}
+      onFocus={focusHandler}
+      onKeyDown={keyDownHandler}
+      ref={setRef}
+      style={[
+        disabled ? styles.disabled : styles.active,
+        typeof style === 'function' ? style(interactionState) : style
+      ]}
+      tabIndex={_tabIndex}
+    >
+      {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({
+  active: {
+    cursor: 'pointer',
+    touchAction: 'manipulation'
+  },
+  disabled: {
+    pointerEvents: 'box-none'
+  }
+});
+
+const MemoedPressable = memo(forwardRef(Pressable));
+MemoedPressable.displayName = 'Pressable';
+
+export default (MemoedPressable: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof View>
+>);

package/src/exports/ProgressBar/index.js

@@ -0,0 +1,92 @@
+/**
+ * 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
+ */
+
+'use client';
+
+import type { ColorValue } from '../../types';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+
+type ProgressBarProps = {
+  ...ViewProps,
+  color?: ColorValue,
+  indeterminate?: boolean,
+  progress?: number,
+  trackColor?: ColorValue
+};
+
+const ProgressBar: React.AbstractComponent<
+  ProgressBarProps,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, ref) => {
+  const {
+    color = '#1976D2',
+    indeterminate = false,
+    progress = 0,
+    trackColor = 'transparent',
+    style,
+    ...other
+  } = props;
+
+  const percentageProgress = progress * 100;
+  const width = indeterminate ? '25%' : `${percentageProgress}%`;
+
+  return (
+    <View
+      {...other}
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={indeterminate ? null : percentageProgress}
+      ref={ref}
+      role="progressbar"
+      style={[styles.track, style, { backgroundColor: trackColor }]}
+    >
+      <View
+        style={[
+          { backgroundColor: color, width },
+          styles.progress,
+          indeterminate && styles.animation
+        ]}
+      />
+    </View>
+  );
+});
+
+ProgressBar.displayName = 'ProgressBar';
+
+const styles = StyleSheet.create({
+  track: {
+    forcedColorAdjust: 'none',
+    height: 5,
+    overflow: 'hidden',
+    userSelect: 'none',
+    zIndex: 0
+  },
+  progress: {
+    forcedColorAdjust: 'none',
+    height: '100%',
+    zIndex: -1
+  },
+  animation: {
+    animationDuration: '1s',
+    animationKeyframes: [
+      {
+        '0%': { transform: 'translateX(-100%)' },
+        '100%': { transform: 'translateX(400%)' }
+      }
+    ],
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite'
+  }
+});
+
+export default ProgressBar;

package/src/exports/RefreshControl/index.js

@@ -0,0 +1,52 @@
+/**
+ * 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 { ColorValue } from '../../types';
+import type { ViewProps } from '../View';
+import type { Node } from 'React';
+
+import View from '../View';
+import React from 'react';
+
+type RefreshControlProps = {
+  ...ViewProps,
+  colors?: Array<ColorValue>,
+  enabled?: boolean,
+  onRefresh?: () => void,
+  progressBackgroundColor?: ColorValue,
+  progressViewOffset?: number,
+  refreshing: boolean,
+  size?: 0 | 1,
+  tintColor?: ColorValue,
+  title?: string,
+  titleColor?: ColorValue
+};
+
+function RefreshControl(props: RefreshControlProps): Node {
+  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/exports/SafeAreaView/index.js

@@ -0,0 +1,49 @@
+/**
+ * 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 { ViewProps } from '../View';
+
+import * as React from 'react';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+import canUseDOM from '../../modules/canUseDom';
+
+const cssFunction: 'constant' | 'env' = (function () {
+  if (
+    canUseDOM &&
+    window.CSS &&
+    window.CSS.supports &&
+    window.CSS.supports('top: constant(safe-area-inset-top)')
+  ) {
+    return 'constant';
+  }
+  return 'env';
+})();
+
+const SafeAreaView: React.AbstractComponent<
+  ViewProps,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, ref) => {
+  const { style, ...rest } = props;
+  return <View {...rest} ref={ref} style={[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 default SafeAreaView;

package/src/exports/ScrollView/ScrollViewBase.js

@@ -0,0 +1,186 @@
+/**
+ * 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 { ViewProps } from '../View';
+
+import * as React from 'react';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+import useMergeRefs from '../../modules/useMergeRefs';
+
+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.AbstractComponent<
+  Props,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    focusable,
+    isTVSelectable,
+    onScroll,
+    onTouchMove,
+    onWheel,
+    scrollEnabled = true,
+    scrollEventThrottle = 0,
+    showsHorizontalScrollIndicator,
+    showsVerticalScrollIndicator,
+    style,
+    ...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: Object) {
+    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);
+      }
+      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 hideScrollbar =
+    showsHorizontalScrollIndicator === false ||
+    showsVerticalScrollIndicator === false;
+
+  return (
+    <View
+      {...rest}
+      onScroll={handleScroll}
+      onTouchMove={createPreventableScrollHandler(onTouchMove)}
+      onWheel={createPreventableScrollHandler(onWheel)}
+      ref={useMergeRefs(scrollRef, forwardedRef)}
+      style={[
+        style,
+        !scrollEnabled && styles.scrollDisabled,
+        hideScrollbar && styles.hideScrollbar
+      ]}
+      tabIndex={focusable === true || isTVSelectable === true ? 0 : undefined}
+    />
+  );
+});
+
+// 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 = StyleSheet.create({
+  scrollDisabled: {
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    touchAction: 'none'
+  },
+  hideScrollbar: {
+    scrollbarWidth: 'none'
+  }
+});
+
+export default ScrollViewBase;