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

package/dist/exports/TV/TVEventHandler.js.flow

@@ -0,0 +1,59 @@
+/**
+ * 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';
+
+import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';
+import NativeEventEmitter from '../NativeEventEmitter';
+import Platform from '../Platform';
+import type { EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
+type TVRemoteEventDefinitions = {
+  tag: [{
+    tag: number
+  }],
+  target: [{
+    target: number
+  }],
+  eventType: [{
+    eventType: string
+  }],
+  eventKeyAction: [{
+    eventKeyAction: string
+  }],
+  body: [{
+    body: any
+  }],
+};
+let __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEventDefinitions> = null;
+type TVEventHandlerCallback = (event: any) => void;
+type TVEventHandlerType = {
+  addListener: (callback: TVEventHandlerCallback) => EventSubscription
+};
+const TVEventHandler: TVEventHandlerType = {
+  addListener: (callback: TVEventHandlerCallback) => {
+    if (Platform.OS === 'ios' && !NativeTVNavigationEventEmitter) {
+      return {
+        remove: () => {}
+      };
+    }
+    if (!__nativeTVNavigationEventEmitter) {
+      __nativeTVNavigationEventEmitter = new NativeEventEmitter<TVRemoteEventDefinitions>(NativeTVNavigationEventEmitter);
+    }
+    const subscription: EventSubscription = __nativeTVNavigationEventEmitter.addListener(
+    // $FlowFixMe[prop-missing]
+    'onHWKeyEvent', (data: any) => {
+      if (callback) {
+        callback(data);
+      }
+    });
+    return subscription;
+  }
+};
+export default TVEventHandler;

package/dist/exports/TV/TVFocusEventHandler.js

@@ -0,0 +1,33 @@
+/**
+ * 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
+ * 
+ */
+
+'use strict';
+
+import Platform from '../Platform';
+import { default as TVEventHandler } from './TVEventHandler';
+class TVFocusEventHandler {
+  constructor() {
+    this.__subscription = null;
+    this.__callbackMap = new Map();
+    this.__subscription = TVEventHandler.addListener(data => {
+      var callback = this.__callbackMap.get(data.tag);
+      if (callback) {
+        callback(data);
+      }
+    });
+  }
+  register(componentTag, callback) {
+    this.__callbackMap.set(componentTag, callback);
+  }
+  unregister(componentTag) {
+    this.__callbackMap.delete(componentTag);
+  }
+}
+export var tvFocusEventHandler = Platform.isTV ? new TVFocusEventHandler() : null;

package/dist/exports/TV/TVFocusEventHandler.js.flow

@@ -0,0 +1,24 @@
+/**
+ * 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';
+
+import type { TVRemoteEvent } from './types';
+import Platform from '../Platform';
+import { type EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
+import { default as TVEventHandler } from './TVEventHandler';
+declare class TVFocusEventHandler {
+  __subscription: ?EventSubscription,
+  __callbackMap: Map<any, Function>,
+  constructor(): any,
+  register(componentTag: ?any, callback: Function): void,
+  unregister(componentTag: ?any): void,
+}
+export const tvFocusEventHandler: TVFocusEventHandler | null = Platform.isTV ? new TVFocusEventHandler() : null;

package/dist/exports/TV/TVFocusGuideView.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * 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
+ */
+
+import Platform from '../Platform';
+import useMergeRefs from '../../modules/useMergeRefs';
+import View from '../View';
+// import {Commands} from '../View/ViewNativeComponent';
+import { setDestinations as setNavDestinations } from '../../modules/SpatialManager';
+import tagForComponentOrHandle from './tagForComponentOrHandle';
+import StyleSheet from '../StyleSheet';
+import * as React from 'react';
+var TVFocusGuideView = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _props$enabled = props.enabled,
+    enabled = _props$enabled === void 0 ? true : _props$enabled,
+    destinationsProp = props.destinations,
+    autoFocus = props.autoFocus,
+    focusable = props.focusable;
+  var focusGuideRef = React.useRef(null);
+  var setDestinations = React.useCallback(destinations => {
+    if (Platform.isTV) {
+      var focusGuideHost = focusGuideRef.current;
+      if (focusGuideHost != null) {
+        var resolvedDestinations = destinations == null ? void 0 : destinations.map(tagForComponentOrHandle);
+        setNavDestinations(focusGuideHost, resolvedDestinations);
+      } else {
+        console.warn('[TVFocusGuideView]: Cannot set destinations as focusGuideView ref unavailable for: ', destinations);
+      }
+    }
+  }, []);
+  var setLocalRef = React.useCallback(instance => {
+    // $FlowExpectedError[incompatible-type]
+    focusGuideRef.current = instance;
+    if (instance != null) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[unsafe-object-assign]
+      Object.assign(instance, {
+        setDestinations
+      });
+    }
+  }, [setDestinations]);
+  var mergedRef = useMergeRefs(setLocalRef, ref);
+  React.useEffect(() => {
+    if (focusable === false) {
+      setDestinations([]);
+    } else if (destinationsProp !== null && destinationsProp !== undefined) {
+      setDestinations(destinationsProp); // $FlowFixMe[incompatible-call]
+    }
+  }, [setDestinations, destinationsProp, focusable]);
+  var enabledStyle = {};
+  if (props.style) {
+    // If user passes a style we only use display: none if enabled is false.
+    enabledStyle = !enabled ? {
+      display: 'none'
+    } : {};
+  } else {
+    enabledStyle = {
+      display: enabled ? 'flex' : 'none'
+    };
+  }
+  var style = [styles.container, props.style, enabledStyle];
+
+  // If there are no destinations and the autoFocus is false the the default value of focusable should be false
+  // It is then properly handled by the native code
+  var tvOSSelectable = destinationsProp || autoFocus ? focusable !== false : false;
+  return (
+    /*#__PURE__*/
+    // $FlowFixMe[prop-missing]
+    React.createElement(View, _extends({}, props, {
+      autoFocus: focusable === false ? true : autoFocus,
+      collapsable: false,
+      isContainer: true // Sneak this through to allow setting correct DOM props as tvFocusable may be false
+      // tvOS only prop
+      ,
+      isTVSelectable: tvOSSelectable,
+      ref: mergedRef,
+      style: style
+      // Android TV only prop, but wait, now for web TVs as well ;-)!
+      ,
+      tvFocusable: focusable
+    }))
+  );
+});
+var styles = StyleSheet.create({
+  container: {
+    minWidth: 1,
+    minHeight: 1,
+    pointerEvents: 'box-none' // FocusGuides should not handle pointer events.
+  }
+});
+export default TVFocusGuideView;

package/dist/exports/TV/TVFocusGuideView.js.flow

@@ -0,0 +1,121 @@
+/**
+ * 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
+ * @format
+ */
+
+import type { ViewProps } from '../View/types';
+import type { ComponentOrHandleType } from './tagForComponentOrHandle';
+import Platform from '../Platform';
+import useMergeRefs from '../../modules/useMergeRefs';
+import View from '../View';
+// import {Commands} from '../View/ViewNativeComponent';
+import { setDestinations as setNavDestinations } from '../../modules/SpatialManager';
+import tagForComponentOrHandle from './tagForComponentOrHandle';
+import StyleSheet from '../StyleSheet';
+import * as React from 'react';
+type TVFocusGuideViewProps = $ReadOnly<{
+  ...ViewProps,
+  /**
+   * If the view should be "visible". display "flex" if visible, otherwise "none".
+   * Useful for absolute focus guides without children
+   * Defaults to true
+   */
+  enabled?: boolean,
+  /**
+   * The views the focus should go to
+   */
+  destinations?: ComponentOrHandleType[],
+  /**
+   * @deprecated Don't use it, no longer necessary.
+   */
+  safePadding?: 'vertical' | 'horizontal' | 'both' | null,
+  autoFocus?: boolean,
+  trapFocusUp?: boolean,
+  trapFocusDown?: boolean,
+  trapFocusLeft?: boolean,
+  trapFocusRight?: boolean,
+  /**
+   * When set to false, this view and all its subviews will be NOT focusable.
+   */
+  focusable?: boolean | void,
+}>;
+export type TVFocusGuideViewImperativeMethods = $ReadOnly<{
+  setDestinations: (destinations: ComponentOrHandleType[]) => void
+}>;
+const TVFocusGuideView: React.AbstractComponent<TVFocusGuideViewProps, React.ElementRef<typeof View>> = React.forwardRef((props, ref) => {
+  const {
+    enabled = true,
+    // safePadding,
+    destinations: destinationsProp,
+    autoFocus,
+    focusable
+  } = props;
+  const focusGuideRef = React.useRef<React.ElementRef<typeof View> | null>(null);
+  const setDestinations = React.useCallback((destinations: ?ComponentOrHandleType[]) => {
+    if (Platform.isTV) {
+      const focusGuideHost = focusGuideRef.current;
+      if (focusGuideHost != null) {
+        const resolvedDestinations = destinations?.map(tagForComponentOrHandle);
+        setNavDestinations(focusGuideHost, resolvedDestinations);
+      } else {
+        console.warn('[TVFocusGuideView]: Cannot set destinations as focusGuideView ref unavailable for: ', destinations);
+      }
+    }
+  }, []);
+  const setLocalRef = React.useCallback((instance: any /*HostInstance*/ | null) => {
+    // $FlowExpectedError[incompatible-type]
+    focusGuideRef.current = instance;
+    if (instance != null) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[unsafe-object-assign]
+      Object.assign(instance, {
+        setDestinations
+      });
+    }
+  }, [setDestinations]);
+  const mergedRef = useMergeRefs(setLocalRef, ref);
+  React.useEffect(() => {
+    if (focusable === false) {
+      setDestinations([]);
+    } else if (destinationsProp !== null && destinationsProp !== undefined) {
+      setDestinations(destinationsProp); // $FlowFixMe[incompatible-call]
+    }
+  }, [setDestinations, destinationsProp, focusable]);
+  let enabledStyle = {};
+  if (props.style) {
+    // If user passes a style we only use display: none if enabled is false.
+    enabledStyle = !enabled ? {
+      display: 'none'
+    } : {};
+  } else {
+    enabledStyle = {
+      display: enabled ? 'flex' : 'none'
+    };
+  }
+  const style = [styles.container, props.style, enabledStyle];
+
+  // If there are no destinations and the autoFocus is false the the default value of focusable should be false
+  // It is then properly handled by the native code
+  const tvOSSelectable = destinationsProp || autoFocus ? focusable !== false : false;
+  return (
+    // $FlowFixMe[prop-missing]
+    <View {...props} autoFocus={focusable === false ? true : autoFocus} collapsable={false} isContainer={true} // Sneak this through to allow setting correct DOM props as tvFocusable may be false
+    // tvOS only prop
+    isTVSelectable={tvOSSelectable} ref={mergedRef} style={style}
+    // Android TV only prop, but wait, now for web TVs as well ;-)!
+    tvFocusable={focusable} />
+  );
+});
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 1,
+    minHeight: 1,
+    pointerEvents: 'box-none' // FocusGuides should not handle pointer events.
+  }
+});
+export default TVFocusGuideView;

package/dist/exports/TV/TVTextScrollView.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+/**
+ * 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
+ * 
+ */
+
+import tagForComponentOrHandle from './tagForComponentOrHandle';
+import ScrollView from '../ScrollView';
+import { scrollContainer, leaveKeyHandlerControl, takeKeyHandlerControl } from '../../modules/SpatialManager';
+import * as React from 'react';
+var _require = require('./TVFocusEventHandler'),
+  tvFocusEventHandler = _require.tvFocusEventHandler;
+
+/**
+ * Convenience wrapper to create a scroll view that will scroll correctly
+ * using swipe gestures on tvOS, even if the scroll view has no focusable
+ * subviews.
+ *
+ * The main use case would be when a large scrolling block of text needs
+ * to be presented to the user.
+ *
+ * Props:
+ *
+ */
+
+class TVTextScrollView extends React.Component {
+  constructor() {
+    super(...arguments);
+    this._setScrollViewRef = ref => {
+      this._scrollViewRef = ref;
+    };
+    this._handleDirectionalKeyFromSpatial = keyCode => {
+      var scrollableNode = this._keyControlOwner;
+      if (!scrollableNode) {
+        return false;
+      }
+      return scrollContainer(scrollableNode, keyCode, {
+        horizontal: this.props.horizontal === true,
+        pageSize: this.props.pageSize,
+        scrollDurationMs: Math.max(0, (this.props.scrollDuration || 0) * 1000),
+        snapToStart: this.props.snapToStart !== false,
+        snapToEnd: this.props.snapToEnd !== false
+      });
+    };
+    this._takeDirectionalKeyControl = () => {
+      var owner = this._getScrollableNode();
+      this._keyControlOwner = owner;
+      takeKeyHandlerControl(owner, this._handleDirectionalKeyFromSpatial);
+    };
+    this._releaseDirectionalKeyControl = () => {
+      leaveKeyHandlerControl(this._keyControlOwner);
+      this._keyControlOwner = null;
+    };
+  }
+  getScrollViewRef() {
+    return this._scrollViewRef;
+  }
+  _getScrollableNode() {
+    var scrollViewRef = this._scrollViewRef;
+    if (scrollViewRef && typeof scrollViewRef.getScrollableNode === 'function') {
+      return scrollViewRef.getScrollableNode();
+    }
+    return null;
+  }
+  componentDidMount() {
+    var cmp = this; // eslint-disable-line consistent-this
+    var myTag = tagForComponentOrHandle(this._scrollViewRef);
+    tvFocusEventHandler == null || tvFocusEventHandler.register(myTag, function (evt) {
+      if (myTag === evt.tag) {
+        if (evt.eventType === 'focus') {
+          cmp._takeDirectionalKeyControl();
+          cmp.props.onFocus && cmp.props.onFocus(evt);
+        } else if (evt.eventType === 'blur') {
+          cmp._releaseDirectionalKeyControl();
+          cmp.props.onBlur && cmp.props.onBlur(evt);
+        }
+      }
+    });
+  }
+  componentWillUnmount() {
+    this._releaseDirectionalKeyControl();
+    var myTag = tagForComponentOrHandle(this._scrollViewRef);
+    tvFocusEventHandler == null || tvFocusEventHandler.unregister(myTag);
+  }
+  render() {
+    var props = _objectSpread(_objectSpread({}, this.props), {}, {
+      tvParallaxProperties: {
+        pressDuration: this.props.scrollDuration || 0.0
+      },
+      isTVSelectable: true,
+      snapToInterval: this.props.pageSize || 0.0,
+      removeClippedSubviews: false,
+      automaticallyAdjustContentInsets: false
+    });
+    return /*#__PURE__*/React.createElement(ScrollView, _extends({}, props, {
+      ref: this._setScrollViewRef
+    }), this.props.children);
+  }
+}
+export default TVTextScrollView;

package/dist/exports/TV/TVTextScrollView.js.flow

@@ -0,0 +1,78 @@
+/**
+ * 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
+ */
+
+import type { ScrollViewProps } from '../ScrollView/types';
+import tagForComponentOrHandle from './tagForComponentOrHandle';
+import ScrollView from '../ScrollView';
+import { scrollContainer, leaveKeyHandlerControl, takeKeyHandlerControl } from '../../modules/SpatialManager';
+import * as React from 'react';
+const {
+  tvFocusEventHandler
+} = require('./TVFocusEventHandler');
+
+/**
+ * Convenience wrapper to create a scroll view that will scroll correctly
+ * using swipe gestures on tvOS, even if the scroll view has no focusable
+ * subviews.
+ *
+ * The main use case would be when a large scrolling block of text needs
+ * to be presented to the user.
+ *
+ * Props:
+ *
+ */
+declare class TVTextScrollView extends React.Component<{
+  ...ScrollViewProps,
+  /**
+   * The duration of the scroll animation when a swipe is detected.
+   * Default value is 0.3 s
+   */
+  scrollDuration?: number,
+  /**
+   * Scrolling distance when a swipe is detected
+   * Default value is half the visible height (vertical scroller)
+   * or width (horizontal scroller)
+   */
+  pageSize?: number,
+  /**
+   * If true, will scroll to start when focus moves out past the beginning
+   * of the scroller
+   * Defaults to true
+   */
+  snapToStart?: boolean,
+  /**
+   * If true, will scroll to end when focus moves out past the end of the
+   * scroller
+   * Defaults to true
+   */
+  snapToEnd?: boolean,
+  /**
+   * Called when the scroller comes into focus (e.g. for highlighting)
+   */
+  onFocus?: (evt: Event) => void,
+  /**
+   * Called when the scroller goes out of focus
+   */
+  onBlur?: (evt: Event) => void,
+}> {
+  _subscription: any,
+  _scrollViewRef: ?React.ElementRef<typeof ScrollView>,
+  _keyControlOwner: ?HTMLElement,
+  _setScrollViewRef: any,
+  getScrollViewRef(): ?React.ElementRef<typeof ScrollView>,
+  _getScrollableNode(): ?HTMLElement,
+  _handleDirectionalKeyFromSpatial: any,
+  _takeDirectionalKeyControl: any,
+  _releaseDirectionalKeyControl: any,
+  componentDidMount(): any,
+  componentWillUnmount(): any,
+  render(): $FlowFixMe,
+}
+export default TVTextScrollView;

package/dist/exports/TV/tagForComponentOrHandle.js

@@ -0,0 +1,39 @@
+/*
+ * Replacement for findNodeHandle, since we need this for converting
+ * components to tags when rendering nextFocus props
+ * 
+ */
+
+// TODO: make this work for Fabric
+
+import * as React from 'react';
+
+// import { findNodeHandle } from '../findNodeHandle';
+
+var tagForComponentOrHandle = component => {
+  if (component === null || component === undefined) {
+    return undefined;
+  }
+
+  // if (component.id) {
+  //   return component.id;
+  // }
+
+  // return undefined;
+
+  return component;
+  // return findNodeHandle(component, true); // suppress warning
+  /*
+  if (typeof component === 'number') {
+    return component;
+  }
+  if (typeof component?._nativeTag === 'number') {
+    return component?._nativeTag;
+  }
+  if (typeof component?.canonical?._nativeTag === 'number') {
+    return component?.canonical?._nativeTag;
+  }
+  return undefined;
+  */
+};
+export default tagForComponentOrHandle;

package/dist/exports/TV/tagForComponentOrHandle.js.flow

@@ -0,0 +1,16 @@
+/*
+ * Replacement for findNodeHandle, since we need this for converting
+ * components to tags when rendering nextFocus props
+ * @flow
+ */
+
+// TODO: make this work for Fabric
+
+import * as React from 'react';
+
+// import { findNodeHandle } from '../findNodeHandle';
+
+export type ComponentOrHandleType = ?React.ElementRef<React.ElementType>;
+export type TagForComponentOrHandleType = (component: ComponentOrHandleType) => ?HTMLElement;
+declare var tagForComponentOrHandle: (component: any) => any;
+export default tagForComponentOrHandle;

package/dist/exports/TV/types.js

@@ -0,0 +1,16 @@
+/**
+ * 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
+ * 
+ */
+
+'use strict';
+
+/**
+ * Apple TV parallax effect properties
+ * May not be needed to implement for Web TV
+ */