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

package/src/exports/TouchableHighlight/index.js

@@ -0,0 +1,218 @@
+/**
+ * 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
+ * @format
+ */
+
+'use client';
+
+import type { ColorValue } from '../../types';
+import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback';
+import type { ViewProps } from '../View';
+import type { TVViewProps } from '../TV/types';
+
+import * as React from 'react';
+import { useCallback, useMemo, useState, useRef } from 'react';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePressEvents from '../../modules/usePressEvents';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+//import { warnOnce } from '../../modules/warnOnce';
+
+type ViewStyle = $PropertyType<ViewProps, 'style'>;
+
+type Props = $ReadOnly<{|
+  ...TouchableWithoutFeedbackProps,
+  ...TVViewProps,
+  activeOpacity?: ?number,
+  onHideUnderlay?: ?() => void,
+  onShowUnderlay?: ?() => void,
+  style?: ViewStyle,
+  testOnly_pressed?: ?boolean,
+  underlayColor?: ?ColorValue
+|}>;
+
+type ExtraStyles = $ReadOnly<{|
+  child: ViewStyle,
+  underlay: ViewStyle
+|}>;
+
+function createExtraStyles(activeOpacity, underlayColor): ExtraStyles {
+  return {
+    child: { opacity: activeOpacity ?? 0.85 },
+    underlay: {
+      backgroundColor: underlayColor === undefined ? 'black' : underlayColor
+    }
+  };
+}
+
+function hasPressHandler(props): boolean {
+  return (
+    props.onPress != null ||
+    props.onPressIn != null ||
+    props.onPressOut != null ||
+    props.onLongPress != null
+  );
+}
+
+/**
+ * A wrapper for making views respond properly to touches.
+ * On press down, the opacity of the wrapped view is decreased, which allows
+ * the underlay color to show through, darkening or tinting the view.
+ *
+ * The underlay comes from wrapping the child in a new View, which can affect
+ * layout, and sometimes cause unwanted visual artifacts if not used correctly,
+ * for example if the backgroundColor of the wrapped view isn't explicitly set
+ * to an opaque color.
+ *
+ * TouchableHighlight must have one child (not zero or more than one).
+ * If you wish to have several child components, wrap them in a View.
+ */
+function TouchableHighlight(props: Props, forwardedRef): React.Node {
+  /*
+  warnOnce(
+    'TouchableHighlight',
+    'TouchableHighlight is deprecated. Please use Pressable.'
+  );
+  */
+
+  const {
+    activeOpacity,
+    children,
+    delayPressIn,
+    delayPressOut,
+    delayLongPress,
+    disabled,
+    focusable,
+    isTVSelectable,
+    onHideUnderlay,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onShowUnderlay,
+    rejectResponderTermination,
+    style,
+    testOnly_pressed,
+    underlayColor,
+    ...rest
+  } = props;
+
+  const hostRef = useRef(null);
+  const setRef = useMergeRefs(forwardedRef, hostRef);
+
+  const [extraStyles, setExtraStyles] = useState(
+    testOnly_pressed === true
+      ? createExtraStyles(activeOpacity, underlayColor)
+      : null
+  );
+
+  const showUnderlay = useCallback(() => {
+    if (!hasPressHandler(props)) {
+      return;
+    }
+    setExtraStyles(createExtraStyles(activeOpacity, underlayColor));
+    if (onShowUnderlay != null) {
+      onShowUnderlay();
+    }
+  }, [activeOpacity, onShowUnderlay, props, underlayColor]);
+
+  const hideUnderlay = useCallback(() => {
+    if (testOnly_pressed === true) {
+      return;
+    }
+    if (hasPressHandler(props)) {
+      setExtraStyles(null);
+      if (onHideUnderlay != null) {
+        onHideUnderlay();
+      }
+    }
+  }, [onHideUnderlay, props, testOnly_pressed]);
+
+  const pressConfig = useMemo(
+    () => ({
+      cancelable: !rejectResponderTermination,
+      disabled,
+      delayLongPress,
+      delayPressStart: delayPressIn,
+      delayPressEnd: delayPressOut,
+      onLongPress,
+      onPress,
+      onPressStart(event) {
+        showUnderlay();
+        if (onPressIn != null) {
+          onPressIn(event);
+        }
+      },
+      onPressEnd(event) {
+        hideUnderlay();
+        if (onPressOut != null) {
+          onPressOut(event);
+        }
+      }
+    }),
+    [
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
+      showUnderlay,
+      hideUnderlay
+    ]
+  );
+
+  const pressEventHandlers = usePressEvents(hostRef, pressConfig);
+
+  const child = React.Children.only(children);
+
+  return (
+    <View
+      {...rest}
+      {...pressEventHandlers}
+      accessibilityDisabled={disabled}
+      focusable={!disabled && focusable !== false}
+      pointerEvents={disabled ? 'box-none' : undefined}
+      ref={setRef}
+      style={[
+        styles.root,
+        style,
+        !disabled && styles.actionable,
+        extraStyles && extraStyles.underlay
+      ]}
+      tabIndex={focusable !== false && isTVSelectable !== false ? 0 : -1}
+    >
+      {React.cloneElement(child, {
+        style: [child.props.style, extraStyles && extraStyles.child]
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    userSelect: 'none'
+  },
+  actionable: {
+    cursor: 'pointer',
+    touchAction: 'manipulation'
+  }
+});
+
+const MemoedTouchableHighlight = React.memo(
+  React.forwardRef(TouchableHighlight)
+);
+MemoedTouchableHighlight.displayName = 'TouchableHighlight';
+
+export default (MemoedTouchableHighlight: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof View>
+>);

package/src/exports/TouchableNativeFeedback/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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 UnimplementedView from '../../modules/UnimplementedView';
+export default UnimplementedView;

package/src/exports/TouchableOpacity/index.js

@@ -0,0 +1,172 @@
+/**
+ * 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
+ * @format
+ */
+
+'use client';
+
+import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback';
+import type { TVViewProps } from '../TV/types';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import { useCallback, useMemo, useState, useRef } from 'react';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePressEvents from '../../modules/usePressEvents';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+//import { warnOnce } from '../../modules/warnOnce';
+
+type ViewStyle = $PropertyType<ViewProps, 'style'>;
+
+type Props = $ReadOnly<{|
+  ...TouchableWithoutFeedbackProps,
+  ...TVViewProps,
+  activeOpacity?: ?number,
+  style?: ?ViewStyle
+|}>;
+
+/**
+ * A wrapper for making views respond properly to touches.
+ * On press down, the opacity of the wrapped view is decreased, dimming it.
+ */
+function TouchableOpacity(props: Props, forwardedRef): React.Node {
+  /*
+  warnOnce(
+    'TouchableOpacity',
+    'TouchableOpacity is deprecated. Please use Pressable.'
+  );
+  */
+
+  const {
+    activeOpacity,
+    delayPressIn,
+    delayPressOut,
+    delayLongPress,
+    disabled,
+    focusable,
+    isTVSelectable,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+    style,
+    ...rest
+  } = props;
+
+  const hostRef = useRef(null);
+  const setRef = useMergeRefs(forwardedRef, hostRef);
+
+  const [duration, setDuration] = useState('0s');
+  const [opacityOverride, setOpacityOverride] = useState(null);
+
+  const setOpacityTo = useCallback(
+    (value: ?number, duration: number) => {
+      setOpacityOverride(value);
+      setDuration(duration ? `${duration / 1000}s` : '0s');
+    },
+    [setOpacityOverride, setDuration]
+  );
+
+  const setOpacityActive = useCallback(
+    (duration: number) => {
+      setOpacityTo(activeOpacity ?? 0.2, duration);
+    },
+    [activeOpacity, setOpacityTo]
+  );
+
+  const setOpacityInactive = useCallback(
+    (duration: number) => {
+      setOpacityTo(null, duration);
+    },
+    [setOpacityTo]
+  );
+
+  const pressConfig = useMemo(
+    () => ({
+      cancelable: !rejectResponderTermination,
+      disabled,
+      delayLongPress,
+      delayPressStart: delayPressIn,
+      delayPressEnd: delayPressOut,
+      onLongPress,
+      onPress,
+      onPressStart(event) {
+        const isGrant =
+          event.dispatchConfig != null
+            ? event.dispatchConfig.registrationName === 'onResponderGrant'
+            : event.type === 'keydown';
+        setOpacityActive(isGrant ? 0 : 150);
+        if (onPressIn != null) {
+          onPressIn(event);
+        }
+      },
+      onPressEnd(event) {
+        setOpacityInactive(250);
+        if (onPressOut != null) {
+          onPressOut(event);
+        }
+      }
+    }),
+    [
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
+      setOpacityActive,
+      setOpacityInactive
+    ]
+  );
+
+  const pressEventHandlers = usePressEvents(hostRef, pressConfig);
+
+  return (
+    <View
+      {...rest}
+      {...pressEventHandlers}
+      accessibilityDisabled={disabled}
+      focusable={!disabled && focusable !== false}
+      pointerEvents={disabled ? 'box-none' : undefined}
+      ref={setRef}
+      style={[
+        styles.root,
+        !disabled && styles.actionable,
+        style,
+        opacityOverride != null && { opacity: opacityOverride },
+        { transitionDuration: duration }
+      ]}
+      tabIndex={focusable !== false && isTVSelectable !== false ? 0 : -1}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    transitionProperty: 'opacity',
+    transitionDuration: '0.15s',
+    userSelect: 'none'
+  },
+  actionable: {
+    cursor: 'pointer',
+    touchAction: 'manipulation'
+  }
+});
+
+const MemoedTouchableOpacity = React.memo(React.forwardRef(TouchableOpacity));
+MemoedTouchableOpacity.displayName = 'TouchableOpacity';
+
+export default (MemoedTouchableOpacity: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof View>
+>);

package/src/exports/TouchableWithoutFeedback/index.js

@@ -0,0 +1,135 @@
+/**
+ * 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
+ * @format
+ */
+
+'use client';
+
+import type { PressResponderConfig } from '../../modules/usePressEvents/PressResponder';
+import type { TVParallaxPropertiesType } from '../TV/types';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import { useMemo, useRef } from 'react';
+import pick from '../../modules/pick';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePressEvents from '../../modules/usePressEvents';
+import { warnOnce } from '../../modules/warnOnce';
+
+export type Props = $ReadOnly<{|
+  accessibilityLabel?: $PropertyType<ViewProps, 'accessibilityLabel'>,
+  accessibilityLiveRegion?: $PropertyType<ViewProps, 'accessibilityLiveRegion'>,
+  accessibilityRole?: $PropertyType<ViewProps, 'accessibilityRole'>,
+  children?: ?React.Node,
+  delayLongPress?: ?number,
+  delayPressIn?: ?number,
+  delayPressOut?: ?number,
+  disabled?: ?boolean,
+  focusable?: ?boolean,
+  nativeID?: $PropertyType<ViewProps, 'nativeID'>,
+  onBlur?: $PropertyType<ViewProps, 'onBlur'>,
+  onFocus?: $PropertyType<ViewProps, 'onFocus'>,
+  onLayout?: $PropertyType<ViewProps, 'onLayout'>,
+  onLongPress?: $PropertyType<PressResponderConfig, 'onLongPress'>,
+  onPress?: $PropertyType<PressResponderConfig, 'onPress'>,
+  onPressIn?: $PropertyType<PressResponderConfig, 'onPressStart'>,
+  onPressOut?: $PropertyType<PressResponderConfig, 'onPressEnd'>,
+  rejectResponderTermination?: ?boolean,
+  testID?: $PropertyType<ViewProps, 'testID'>,
+  // Not used yet, probably never will be is is for iOS only
+  tvParallaxProperties?: TVParallaxPropertiesType
+|}>;
+
+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 TouchableWithoutFeedback(props: Props, forwardedRef): React.Node {
+  warnOnce(
+    'TouchableWithoutFeedback',
+    'TouchableWithoutFeedback is deprecated. Please use Pressable.'
+  );
+
+  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);
+  supportedProps.accessibilityDisabled = disabled;
+  supportedProps.focusable = !disabled && focusable !== false;
+  supportedProps.ref = useMergeRefs(forwardedRef, hostRef, element.ref);
+
+  const elementProps = Object.assign(supportedProps, pressEventHandlers);
+
+  return React.cloneElement(element, elementProps, ...children);
+}
+
+const MemoedTouchableWithoutFeedback = React.memo(
+  React.forwardRef(TouchableWithoutFeedback)
+);
+MemoedTouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
+
+export default (MemoedTouchableWithoutFeedback: React.AbstractComponent<
+  Props,
+  React.ElementRef<any>
+>);

package/src/exports/UIManager/index.js

@@ -0,0 +1,132 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+import getBoundingClientRect from '../../modules/getBoundingClientRect';
+import setValueForStyles from '../../modules/setValueForStyles';
+
+const getRect = (node) => {
+  const height = node.offsetHeight;
+  const width = node.offsetWidth;
+  let left = node.offsetLeft;
+  let top = node.offsetTop;
+  node = node.offsetParent;
+
+  while (node && node.nodeType === 1 /* Node.ELEMENT_NODE */) {
+    left += node.offsetLeft + node.clientLeft - node.scrollLeft;
+    top += node.offsetTop + node.clientTop - node.scrollTop;
+    node = node.offsetParent;
+  }
+
+  top -= window.scrollY;
+  left -= window.scrollX;
+
+  return { width, height, top, left };
+};
+
+const measureLayout = (node, relativeToNativeNode, callback) => {
+  const relativeNode = relativeToNativeNode || (node && node.parentNode);
+  if (node && relativeNode) {
+    setTimeout(() => {
+      if (node.isConnected && relativeNode.isConnected) {
+        const relativeRect = getRect(relativeNode);
+        const { height, left, top, width } = getRect(node);
+        const x = left - relativeRect.left;
+        const y = top - relativeRect.top;
+        callback(x, y, width, height, left, top);
+      }
+    }, 0);
+  }
+};
+
+const elementsToIgnore = {
+  A: true,
+  BODY: true,
+  INPUT: true,
+  SELECT: true,
+  TEXTAREA: true
+};
+
+const UIManager = {
+  blur(node) {
+    try {
+      node.blur();
+    } catch (err) {}
+  },
+
+  focus(node) {
+    try {
+      const name = node.nodeName;
+      // A tabIndex of -1 allows element to be programmatically focused but
+      // prevents keyboard focus. We don't want to set the tabindex value on
+      // elements that should not prevent keyboard focus.
+      if (
+        node.getAttribute('tabIndex') == null &&
+        node.isContentEditable !== true &&
+        elementsToIgnore[name] == null
+      ) {
+        node.setAttribute('tabIndex', '-1');
+      }
+      node.focus();
+    } catch (err) {}
+  },
+
+  measure(node, callback) {
+    measureLayout(node, null, callback);
+  },
+
+  measureInWindow(node, callback) {
+    if (node) {
+      setTimeout(() => {
+        const { height, left, top, width } = getBoundingClientRect(node);
+        callback(left, top, width, height);
+      }, 0);
+    }
+  },
+
+  measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
+    measureLayout(node, relativeToNativeNode, onSuccess);
+  },
+
+  updateView(node, props) {
+    for (const prop in props) {
+      if (!Object.prototype.hasOwnProperty.call(props, prop)) {
+        continue;
+      }
+
+      const value = props[prop];
+      switch (prop) {
+        case 'style': {
+          setValueForStyles(node, value);
+          break;
+        }
+        case 'class':
+        case 'className': {
+          node.setAttribute('class', value);
+          break;
+        }
+        case 'text':
+        case 'value':
+          // native platforms use `text` prop to replace text input value
+          node.value = value;
+          break;
+        default:
+          node.setAttribute(prop, value);
+      }
+    }
+  },
+
+  configureNextLayoutAnimation(config, onAnimationDidEnd) {
+    onAnimationDidEnd();
+  },
+
+  // mocks
+  setLayoutAnimationEnabledExperimental() {}
+};
+
+export default UIManager;

package/src/exports/Vibration/index.js

@@ -0,0 +1,28 @@
+/**
+ * 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);
+  }
+};
+
+const Vibration = {
+  cancel() {
+    vibrate(0);
+  },
+  vibrate(pattern: VibratePattern = 400) {
+    vibrate(pattern);
+  }
+};
+
+export default Vibration;