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

package/src/exports/ActivityIndicator/index.js

@@ -0,0 +1,119 @@
+/**
+ * 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 { ViewProps } from '../View';
+
+import * as React from 'react';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+
+const createSvgCircle = (style) => (
+  <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
+);
+
+type ActivityIndicatorProps = {
+  ...ViewProps,
+  animating?: boolean,
+  color?: ?string,
+  hidesWhenStopped?: boolean,
+  size?: 'small' | 'large' | number
+};
+
+const ActivityIndicator: React.AbstractComponent<
+  ActivityIndicatorProps,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    animating = true,
+    color = '#1976D2',
+    hidesWhenStopped = true,
+    size = 'small',
+    style,
+    ...other
+  } = props;
+
+  const svg = (
+    <svg height="100%" viewBox="0 0 32 32" width="100%">
+      {createSvgCircle({
+        stroke: color,
+        opacity: 0.2
+      })}
+      {createSvgCircle({
+        stroke: color,
+        strokeDasharray: 80,
+        strokeDashoffset: 60
+      })}
+    </svg>
+  );
+
+  return (
+    <View
+      {...other}
+      aria-valuemax={1}
+      aria-valuemin={0}
+      ref={forwardedRef}
+      role="progressbar"
+      style={[styles.container, style]}
+    >
+      <View
+        children={svg}
+        style={[
+          typeof size === 'number'
+            ? { height: size, width: size }
+            : indicatorSizes[size],
+          styles.animation,
+          !animating && styles.animationPause,
+          !animating && hidesWhenStopped && styles.hidesWhenStopped
+        ]}
+      />
+    </View>
+  );
+});
+
+ActivityIndicator.displayName = 'ActivityIndicator';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  hidesWhenStopped: {
+    visibility: 'hidden'
+  },
+  animation: {
+    animationDuration: '0.75s',
+    animationKeyframes: [
+      {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
+    ],
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite'
+  },
+  animationPause: {
+    animationPlayState: 'paused'
+  }
+});
+
+const indicatorSizes = StyleSheet.create({
+  small: {
+    width: 20,
+    height: 20
+  },
+  large: {
+    width: 36,
+    height: 36
+  }
+});
+
+export default ActivityIndicator;

package/src/exports/Alert/index.js

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+
+class Alert {
+  static alert() {}
+}
+
+export default Alert;

package/src/exports/Animated/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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 Animated from '../../vendor/react-native/Animated/Animated';
+export default Animated;

package/src/exports/AppRegistry/AppContainer.js

@@ -0,0 +1,55 @@
+/**
+ * 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 from '../StyleSheet';
+import View from '../View';
+
+type Props = {
+  WrapperComponent?: ?React.ComponentType<*>,
+  // $FlowFixMe
+  children?: React.Children,
+  rootTag: any
+};
+
+const RootTagContext: React.Context<any> = React.createContext(null);
+
+const AppContainer: React.AbstractComponent<Props> = React.forwardRef(
+  (props: Props, forwardedRef?: React.Ref<any>) => {
+    const { children, WrapperComponent } = props;
+
+    let innerView = (
+      <View children={children} key={1} style={styles.appContainer} />
+    );
+
+    if (WrapperComponent) {
+      innerView = <WrapperComponent>{innerView}</WrapperComponent>;
+    }
+
+    return (
+      <RootTagContext.Provider value={props.rootTag}>
+        <View ref={forwardedRef} style={styles.appContainer}>
+          {innerView}
+        </View>
+      </RootTagContext.Provider>
+    );
+  }
+);
+
+AppContainer.displayName = 'AppContainer';
+
+export default AppContainer;
+
+const styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+    pointerEvents: 'box-none'
+  }
+});

package/src/exports/AppRegistry/index.js

@@ -0,0 +1,153 @@
+/**
+ * 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 { Application } from './renderApplication';
+import type { ComponentType, Node } from 'react';
+import { setupSpatialNavigation } from '../../modules/SpatialManager';
+
+import invariant from 'fbjs/lib/invariant';
+import unmountComponentAtNode from '../unmountComponentAtNode';
+import renderApplication, { getApplication } from './renderApplication';
+
+type AppParams = Object;
+type Runnable = {|
+  getApplication?: (AppParams) => {|
+    element: Node,
+    getStyleElement: (any) => Node
+  |},
+  run: (AppParams) => any
+|};
+
+export type ComponentProvider = () => ComponentType<any>;
+export type ComponentProviderInstrumentationHook = (
+  component: ComponentProvider
+) => ComponentType<any>;
+export type WrapperComponentProvider = (any) => ComponentType<*>;
+
+export type AppConfig = {
+  appKey: string,
+  component?: ComponentProvider,
+  run?: Function,
+  section?: boolean
+};
+
+const emptyObject = {};
+const runnables: {| [appKey: string]: Runnable |} = {};
+
+let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook =
+  (component: ComponentProvider) => component();
+let wrapperComponentProvider: ?WrapperComponentProvider;
+
+/**
+ * `AppRegistry` is the JS entry point to running all React Native apps.
+ */
+export default class AppRegistry {
+  static getAppKeys(): Array<string> {
+    return Object.keys(runnables);
+  }
+
+  static getApplication(
+    appKey: string,
+    appParameters?: AppParams
+  ): {| element: Node, getStyleElement: (any) => Node |} {
+    invariant(
+      runnables[appKey] && runnables[appKey].getApplication,
+      `Application ${appKey} has not been registered. ` +
+        'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+    );
+
+    return runnables[appKey].getApplication(appParameters);
+  }
+
+  static registerComponent(
+    appKey: string,
+    componentProvider: ComponentProvider
+  ): string {
+    runnables[appKey] = {
+      getApplication: (appParameters) =>
+        getApplication(
+          componentProviderInstrumentationHook(componentProvider),
+          appParameters ? appParameters.initialProps : emptyObject,
+          wrapperComponentProvider && wrapperComponentProvider(appParameters)
+        ),
+      run: (appParameters): Application =>
+        renderApplication(
+          componentProviderInstrumentationHook(componentProvider),
+          wrapperComponentProvider && wrapperComponentProvider(appParameters),
+          appParameters.callback,
+          {
+            hydrate: appParameters.hydrate || false,
+            initialProps: appParameters.initialProps || emptyObject,
+            mode: appParameters.mode || 'concurrent',
+            rootTag: appParameters.rootTag
+          }
+        )
+    };
+    return appKey;
+  }
+
+  static registerConfig(config: Array<AppConfig>) {
+    config.forEach(({ appKey, component, run }) => {
+      if (run) {
+        AppRegistry.registerRunnable(appKey, run);
+      } else {
+        invariant(component, 'No component provider passed in');
+        AppRegistry.registerComponent(appKey, component);
+      }
+    });
+  }
+
+  // TODO: fix style sheet creation when using this method
+  static registerRunnable(appKey: string, run: Function): string {
+    runnables[appKey] = { run };
+    return appKey;
+  }
+
+  static runApplication(appKey: string, appParameters: Object): Application {
+    const isDevelopment =
+      process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test';
+    if (isDevelopment) {
+      const params = { ...appParameters };
+      params.rootTag = `#${params.rootTag.id}`;
+
+      console.log(
+        `Running application "${appKey}" with appParams:\n`,
+        params,
+        `\nDevelopment-level warnings: ${isDevelopment ? 'ON' : 'OFF'}.` +
+          `\nPerformance optimizations: ${isDevelopment ? 'OFF' : 'ON'}.`
+      );
+    }
+
+    invariant(
+      runnables[appKey] && runnables[appKey].run,
+      `Application "${appKey}" has not been registered. ` +
+        'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+    );
+    // TODO: Find a better place to do this
+    setupSpatialNavigation(appParameters.rootTag);
+    return runnables[appKey].run(appParameters);
+  }
+
+  static setComponentProviderInstrumentationHook(
+    hook: ComponentProviderInstrumentationHook
+  ) {
+    componentProviderInstrumentationHook = hook;
+  }
+
+  static setWrapperComponentProvider(provider: WrapperComponentProvider) {
+    wrapperComponentProvider = provider;
+  }
+
+  static unmountApplicationComponentAtRootTag(rootTag: Object) {
+    unmountComponentAtNode(rootTag);
+  }
+}

package/src/exports/AppRegistry/renderApplication.js

@@ -0,0 +1,72 @@
+/**
+ * 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 { ComponentType, Node } from 'react';
+
+import AppContainer from './AppContainer';
+import invariant from 'fbjs/lib/invariant';
+import render, { hydrate } from '../render';
+import StyleSheet from '../StyleSheet';
+import React from 'react';
+
+export type Application = {
+  unmount: () => void
+};
+
+export default function renderApplication<Props: Object>(
+  RootComponent: ComponentType<Props>,
+  WrapperComponent?: ?ComponentType<*>,
+  callback?: () => void,
+  options: {
+    hydrate: boolean,
+    initialProps: Props,
+    rootTag: any
+  }
+): Application {
+  const { hydrate: shouldHydrate, initialProps, rootTag } = options;
+  const renderFn = shouldHydrate ? hydrate : render;
+
+  invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
+
+  return renderFn(
+    <AppContainer
+      WrapperComponent={WrapperComponent}
+      ref={callback}
+      rootTag={rootTag}
+    >
+      <RootComponent {...initialProps} />
+    </AppContainer>,
+    rootTag
+  );
+}
+
+export function getApplication(
+  RootComponent: ComponentType<Object>,
+  initialProps: Object,
+  WrapperComponent?: ?ComponentType<*>
+): {| element: Node, getStyleElement: (Object) => Node |} {
+  const element = (
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={{}}>
+      <RootComponent {...initialProps} />
+    </AppContainer>
+  );
+  // Don't escape CSS text
+  const getStyleElement = (props) => {
+    const sheet = StyleSheet.getSheet();
+    return (
+      <style
+        {...props}
+        dangerouslySetInnerHTML={{ __html: sheet.textContent }}
+        id={sheet.id}
+      />
+    );
+  };
+  return { element, getStyleElement };
+}

package/src/exports/AppState/index.js

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+'use client';
+
+import invariant from 'fbjs/lib/invariant';
+import EventEmitter from '../../vendor/react-native/vendor/emitter/EventEmitter';
+import canUseDOM from '../../modules/canUseDom';
+
+// Android 4.4 browser
+const isPrefixed =
+  canUseDOM &&
+  !document.hasOwnProperty('hidden') &&
+  document.hasOwnProperty('webkitHidden');
+
+const EVENT_TYPES = ['change', 'memoryWarning'];
+const VISIBILITY_CHANGE_EVENT = isPrefixed
+  ? 'webkitvisibilitychange'
+  : 'visibilitychange';
+const VISIBILITY_STATE_PROPERTY = isPrefixed
+  ? 'webkitVisibilityState'
+  : 'visibilityState';
+
+const AppStates = {
+  BACKGROUND: 'background',
+  ACTIVE: 'active'
+};
+
+let changeEmitter = null;
+
+export default class AppState {
+  static isAvailable = canUseDOM && !!document[VISIBILITY_STATE_PROPERTY];
+
+  static get currentState() {
+    if (!AppState.isAvailable) {
+      return AppStates.ACTIVE;
+    }
+
+    switch (document[VISIBILITY_STATE_PROPERTY]) {
+      case 'hidden':
+      case 'prerender':
+      case 'unloaded':
+        return AppStates.BACKGROUND;
+      default:
+        return AppStates.ACTIVE;
+    }
+  }
+
+  static addEventListener(type: string, handler: Function) {
+    if (AppState.isAvailable) {
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      );
+      if (type === 'change') {
+        if (!changeEmitter) {
+          changeEmitter = new EventEmitter();
+
+          document.addEventListener(
+            VISIBILITY_CHANGE_EVENT,
+            () => {
+              if (changeEmitter) {
+                changeEmitter.emit('change', AppState.currentState);
+              }
+            },
+            false
+          );
+        }
+        return changeEmitter.addListener(type, handler);
+      }
+    }
+  }
+}

package/src/exports/Appearance/index.js

@@ -0,0 +1,65 @@
+/**
+ * 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 canUseDOM from '../../modules/canUseDom';
+
+export type ColorSchemeName = 'light' | 'dark';
+
+export type AppearancePreferences = {|
+  colorScheme: ColorSchemeName
+|};
+
+type AppearanceListener = (preferences: AppearancePreferences) => void;
+type DOMAppearanceListener = (ev: MediaQueryListEvent) => any;
+
+function getQuery(): MediaQueryList | null {
+  return canUseDOM && window.matchMedia != null
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null;
+}
+
+const query = getQuery();
+const listenerMapping = new WeakMap<
+  AppearanceListener,
+  DOMAppearanceListener
+>();
+
+const Appearance = {
+  getColorScheme(): ColorSchemeName {
+    return query && query.matches ? 'dark' : 'light';
+  },
+
+  addChangeListener(listener: AppearanceListener): { remove: () => void } {
+    let mappedListener = listenerMapping.get(listener);
+    if (!mappedListener) {
+      mappedListener = ({ matches }: MediaQueryListEvent) => {
+        listener({ colorScheme: matches ? 'dark' : 'light' });
+      };
+      listenerMapping.set(listener, mappedListener);
+    }
+    if (query) {
+      query.addListener(mappedListener);
+    }
+
+    function remove(): void {
+      const mappedListener = listenerMapping.get(listener);
+      if (query && mappedListener) {
+        query.removeListener(mappedListener);
+      }
+      listenerMapping.delete(listener);
+    }
+
+    return { remove };
+  }
+};
+
+export default Appearance;

package/src/exports/BackHandler/index.js

@@ -0,0 +1,108 @@
+/**
+ * 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
+ */
+
+// On Web this basically uses ios stub implementation.
+// But for Web TV platforms we will allow App to configure the key through window.appConfig.keyMap
+// with keyMap.Back set to the keycode of the key they want to use as back button for specific TV platform.
+
+import TVEventHandler from '../TV/TVEventHandler';
+import Platform from '../Platform';
+
+type BackPressEventName = 'backPress' | 'hardwareBackPress';
+type BackPressHandler = () => ?boolean;
+
+function emptyFunction(): void {}
+
+type TBackHandler = {
+  exitApp(): void,
+  addEventListener(
+    eventName: BackPressEventName,
+    handler: BackPressHandler
+  ): { remove: () => void, ... },
+  removeEventListener(
+    eventName: BackPressEventName,
+    handler: BackPressHandler
+  ): void
+};
+
+let BackHandler: TBackHandler = {
+  exitApp: emptyFunction,
+  addEventListener: function (
+    _eventName: BackPressEventName,
+    _handler: BackPressHandler
+  ): { remove: () => void, ... } {
+    console.warn(
+      'BackHandler is only supported if window.appConfig.keyMap.Back is configured for Web TV platforms.'
+    );
+    return {
+      remove: emptyFunction
+    };
+  },
+  removeEventListener: function (
+    eventName: BackPressEventName,
+    handler: BackPressHandler
+  ): void {
+    console.warn(
+      'BackHandler is only supported if window.appConfig.keyMap.Back is configured for Web TV platforms.'
+    );
+    return;
+  }
+};
+
+if (
+  Platform.isTV &&
+  typeof window !== 'undefined' &&
+  window?.appConfig?.keyMap?.['Back']
+) {
+  const _backPressSubscriptions = new Set<() => ?boolean>();
+
+  TVEventHandler.addListener(function (evt) {
+    if (evt && evt.keyCode === window?.appConfig?.keyMap?.['Back']) {
+      let invokeDefault = true;
+      const subscriptions = Array.from(
+        _backPressSubscriptions.values()
+      ).reverse();
+
+      for (let i = 0; i < subscriptions.length; ++i) {
+        if (subscriptions[i]()) {
+          invokeDefault = false;
+          break;
+        }
+      }
+
+      if (invokeDefault) {
+        BackHandler.exitApp();
+      }
+    }
+  });
+
+  BackHandler = {
+    exitApp: emptyFunction,
+
+    addEventListener: function (
+      _eventName: BackPressEventName,
+      _handler: () => ?boolean
+    ): { remove: () => void, ... } {
+      _backPressSubscriptions.add(_handler);
+      return {
+        remove: () => BackHandler.removeEventListener(_eventName, _handler)
+      };
+    },
+
+    removeEventListener: function (
+      _eventName: BackPressEventName,
+      _handler: () => ?boolean
+    ) {
+      _backPressSubscriptions.delete(_handler);
+    }
+  };
+}
+
+export default BackHandler;