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

package/src/exports/TV/types.js

@@ -0,0 +1,153 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+/**
+ * Apple TV parallax effect properties
+ * May not be needed to implement for Web TV
+ */
+export type TVParallaxPropertiesType = {|
+  /**
+   * If true, parallax effects are enabled.  Defaults to true.
+   */
+  enabled?: boolean,
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceX?: number,
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceY?: number,
+
+  /**
+   * Defaults to 0.05.
+   */
+  tiltAngle?: number,
+
+  /**
+   * Defaults to 1.0
+   */
+  magnification?: number,
+
+  /**
+   * Defaults to 1.0
+   */
+  pressMagnification?: number,
+
+  /**
+   * Defaults to 0.3
+   */
+  pressDuration?: number,
+
+  /**
+   * Defaults to 0.3
+   */
+  pressDelay?: number
+|};
+
+/**
+ * These props are for both Apple TV, Android TV, and Web TV.
+ * We follow the Android implemented props for Web TV and keep the rest unimplemented for now.
+ */
+export type TVViewProps = {|
+  /**
+   * @deprecated Replaced by `focusable`.
+   *
+   * @platform ios
+   */
+  isTVSelectable?: ?boolean,
+
+  /**
+   * Android TV only prop
+   * @platform android
+   */
+  tvFocusable?: ?boolean,
+
+  /**
+   * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
+   *
+   */
+  focusable?: ?boolean,
+
+  /**
+   * May be set to true to force the focus engine to move focus to this view.
+   *
+   */
+  hasTVPreferredFocus?: ?boolean,
+
+  /**
+   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
+   *
+   * @platform ios
+   */
+  tvParallaxProperties?: ?TVParallaxPropertiesType,
+
+  /**
+   * Additional properties needed for flow checks on TVFocusGuideView
+   */
+  destinations?: ?(Object[]),
+  enabled?: boolean,
+  autoFocus?: boolean,
+  safePadding?: string | null,
+  onPressIn?: (event: any) => void,
+  onPressOut?: (event: any) => void,
+
+  /**
+   * TV next focus forward (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusForward?: ?number,
+
+  /**
+   * TV next focus down (see documentation for the View component).
+   *
+   */
+  nextFocusDown?: ?number,
+
+  /**
+   * TV next focus left (see documentation for the View component).
+   *
+   */
+  nextFocusLeft?: ?number,
+
+  /**
+   * TV next focus right (see documentation for the View component).
+   *
+   */
+  nextFocusRight?: ?number,
+
+  /**
+   * TV next focus up (see documentation for the View component).
+   *
+   */
+  nextFocusUp?: ?number
+|};
+
+export type NativeMethods = {
+  requestTVFocus(): void
+};
+
+export type RemotePressEvent = $ReadOnly<{
+  target: number
+}>;
+
+export type TVRemoteEvent = $ReadOnly<{
+  tag?: number,
+  target?: number,
+  eventType: string,
+  eventKeyAction?: string,
+  // $FlowFixMe[unclear-type]
+  body?: any
+}>;

package/src/exports/TV/useTVEventHandler.js

@@ -0,0 +1,24 @@
+/*
+ * @flow
+ */
+
+import type { TVRemoteEvent } from './types';
+
+import { type EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
+import TVEventHandler from './TVEventHandler';
+import * as React from 'react';
+
+const useTVEventHandler = (handleEvent: (evt: TVRemoteEvent) => void) => {
+  React.useEffect(() => {
+    const subscription: EventSubscription = TVEventHandler.addListener(
+      function (evt) {
+        handleEvent(evt);
+      }
+    );
+    return () => {
+      subscription.remove();
+    };
+  }, [handleEvent]);
+};
+
+export default useTVEventHandler;

package/src/exports/TV/utils.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Douglas Lowder.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+const ID_LIMIT = 100000; // big enough to wrap around!
+let nextId = 0;
+function setupNodeId(node: HTMLElement): string {
+  let id = node.id?.length > 0 ? node.id : null;
+  if (!id) {
+    // Use a simple incremented number as id
+    id = `lrud-${nextId > ID_LIMIT ? 1 : ++nextId}`;
+    node.id = id;
+  }
+
+  return id;
+}
+
+export { setupNodeId };

package/src/exports/Text/TextAncestorContext.js

@@ -0,0 +1,17 @@
+/**
+ * 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
+ */
+
+'use client';
+
+import type { Context } from 'react';
+
+import { createContext } from 'react';
+
+const TextAncestorContext = createContext(false);
+export default (TextAncestorContext: Context<boolean>);

package/src/exports/Text/index.js

@@ -0,0 +1,241 @@
+/**
+ * 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
+ */
+
+'use client';
+
+import type { PlatformMethods } from '../../types';
+import type { TextProps } from './types';
+
+import * as React from 'react';
+import createElement from '../createElement';
+import * as forwardedProps from '../../modules/forwardedProps';
+import pick from '../../modules/pick';
+import useElementLayout from '../../modules/useElementLayout';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePlatformMethods from '../../modules/usePlatformMethods';
+import useResponderEvents from '../../modules/useResponderEvents';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from './TextAncestorContext';
+import { useLocaleContext, getLocaleDirection } from '../../modules/useLocale';
+//import { warnOnce } from '../../modules/warnOnce';
+
+const forwardPropsList = Object.assign(
+  {},
+  forwardedProps.defaultProps,
+  forwardedProps.accessibilityProps,
+  forwardedProps.clickProps,
+  forwardedProps.focusProps,
+  forwardedProps.keyboardProps,
+  forwardedProps.mouseProps,
+  forwardedProps.touchProps,
+  forwardedProps.styleProps,
+  {
+    href: true,
+    lang: true,
+    pointerEvents: true
+  }
+);
+
+const pickProps = (props) => pick(props, forwardPropsList);
+
+const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      hrefAttrs,
+      numberOfLines,
+      onClick,
+      onLayout,
+      onPress,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      selectable,
+      ...rest
+    } = props;
+
+    /*
+    if (selectable != null) {
+      warnOnce(
+        'selectable',
+        'selectable prop is deprecated. Use styles.userSelect.'
+      );
+    }
+    */
+
+    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
+    });
+
+    const handleClick = React.useCallback(
+      (e) => {
+        if (onClick != null) {
+          onClick(e);
+        } else if (onPress != null) {
+          e.stopPropagation();
+          onPress(e);
+        }
+      },
+      [onClick, onPress]
+    );
+
+    let component = hasTextAncestor ? 'span' : 'div';
+
+    const langDirection =
+      props.lang != null ? getLocaleDirection(props.lang) : null;
+    const componentDirection = props.dir || langDirection;
+    const writingDirection = componentDirection || contextDirection;
+
+    const supportedProps = pickProps(rest);
+    supportedProps.dir = componentDirection;
+    // 'auto' by default allows browsers to infer writing direction (root elements only)
+    if (!hasTextAncestor) {
+      supportedProps.dir =
+        componentDirection != null ? componentDirection : 'auto';
+    }
+
+    if (onClick || onPress) {
+      supportedProps.onClick = handleClick;
+    }
+
+    supportedProps.style = [
+      numberOfLines != null &&
+        numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
+      hasTextAncestor === true ? styles.textHasAncestor$raw : styles.text$raw,
+      numberOfLines === 1 && styles.textOneLine,
+      numberOfLines != null && numberOfLines > 1 && styles.textMultiLine,
+      props.style,
+      selectable === true && styles.selectable,
+      selectable === false && styles.notSelectable,
+      onPress && styles.pressable
+    ];
+
+    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;
+
+    const element = createElement(component, supportedProps, {
+      writingDirection
+    });
+
+    return hasTextAncestor ? (
+      element
+    ) : (
+      <TextAncestorContext.Provider value={true}>
+        {element}
+      </TextAncestorContext.Provider>
+    );
+  });
+
+Text.displayName = 'Text';
+
+const textStyle = {
+  backgroundColor: 'transparent',
+  border: '0 solid black',
+  boxSizing: 'border-box',
+  color: 'black',
+  display: 'inline',
+  font: '14px System',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  textAlign: 'start',
+  textDecoration: 'none',
+  whiteSpace: 'pre-wrap',
+  wordWrap: 'break-word'
+};
+
+const styles = StyleSheet.create({
+  text$raw: textStyle,
+  textHasAncestor$raw: {
+    ...textStyle,
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'inherit',
+    whiteSpace: 'inherit'
+  },
+  textOneLine: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal'
+  },
+  // See #13
+  textMultiLine: {
+    display: '-webkit-box',
+    maxWidth: '100%',
+    overflow: 'clip',
+    textOverflow: 'ellipsis',
+    WebkitBoxOrient: 'vertical'
+  },
+  notSelectable: {
+    userSelect: 'none'
+  },
+  selectable: {
+    userSelect: 'text'
+  },
+  pressable: {
+    cursor: 'pointer'
+  }
+});
+
+export default Text;

package/src/exports/Text/types.js

@@ -0,0 +1,121 @@
+/**
+ * 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, GenericStyleProp } from '../../types';
+import type { ViewProps, ViewStyle } from '../View/types';
+
+type FontWeightValue =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+
+type NumberOrString = number | string;
+
+export type TextStyle = {
+  ...ViewStyle,
+  color?: ?ColorValue,
+  fontFamily?: ?string,
+  fontFeatureSettings?: ?string,
+  fontSize?: ?NumberOrString,
+  fontStyle?: 'italic' | 'normal',
+  fontWeight?: ?FontWeightValue,
+  fontVariant?: $ReadOnlyArray<
+    | 'small-caps'
+    | 'oldstyle-nums'
+    | 'lining-nums'
+    | 'tabular-nums'
+    | 'proportional-nums'
+  >,
+  letterSpacing?: ?NumberOrString,
+  lineHeight?: ?NumberOrString,
+  textAlign?:
+    | 'center'
+    | 'end'
+    | 'inherit'
+    | 'justify'
+    | 'justify-all'
+    | 'left'
+    | 'right'
+    | 'start',
+  textDecorationColor?: ?ColorValue,
+  textDecorationLine?:
+    | 'none'
+    | 'underline'
+    | 'line-through'
+    | 'underline line-through',
+  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
+  textIndent?: ?NumberOrString,
+  textOverflow?: ?string,
+  textRendering?:
+    | 'auto'
+    | 'geometricPrecision'
+    | 'optimizeLegibility'
+    | 'optimizeSpeed',
+  textShadow?: ?string,
+  textShadowColor?: ?ColorValue,
+  textShadowOffset?: {| width?: number, height?: number |},
+  textShadowRadius?: ?number,
+  textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase',
+  unicodeBidi?:
+    | 'normal'
+    | 'bidi-override'
+    | 'embed'
+    | 'isolate'
+    | 'isolate-override'
+    | 'plaintext',
+  userSelect?: 'none' | 'text',
+  verticalAlign?: ?string,
+  whiteSpace?: ?string,
+  wordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all',
+  wordWrap?: ?string,
+  writingDirection?: 'auto' | 'ltr' | 'rtl',
+  /* @platform web */
+  MozOsxFontSmoothing?: ?string,
+  WebkitFontSmoothing?: ?string,
+  // deprecated
+  textAlignVertical?: ?string
+};
+
+export type TextProps = {
+  ...ViewProps,
+  dir?: 'auto' | 'ltr' | 'rtl',
+  numberOfLines?: ?number,
+  role?:
+    | 'button'
+    | 'header'
+    | 'heading'
+    | 'label'
+    | 'link'
+    | 'listitem'
+    | 'none'
+    | 'text',
+  style?: GenericStyleProp<TextStyle>,
+  testID?: ?string,
+  // @deprecated
+  accessibilityRole?:
+    | 'button'
+    | 'header'
+    | 'heading'
+    | 'label'
+    | 'link'
+    | 'listitem'
+    | 'none'
+    | 'text',
+  onPress?: (e: any) => void,
+  selectable?: boolean
+};