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

package/src/exports/Button/index.js

@@ -0,0 +1,90 @@
+/**
+ * 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 TouchableOpacity from '../TouchableOpacity';
+import Text from '../Text';
+//import { warnOnce } from '../../modules/warnOnce';
+
+type ButtonProps = {|
+  accessibilityLabel?: ?string,
+  color?: ?string,
+  disabled?: boolean,
+  hasTVPreferredFocus?: ?boolean,
+  onPress?: ?(e: any) => void,
+  testID?: ?string,
+  title: string
+|};
+
+const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof TouchableOpacity>
+> = React.forwardRef((props, forwardedRef) => {
+  // warnOnce('Button', 'Button is deprecated. Please use Pressable.');
+
+  const {
+    accessibilityLabel,
+    color,
+    disabled,
+    hasTVPreferredFocus,
+    onPress,
+    testID,
+    title
+  } = props;
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      disabled={disabled}
+      focusable={!disabled}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+      onPress={onPress}
+      ref={forwardedRef}
+      style={[
+        styles.button,
+        color && { backgroundColor: color },
+        disabled && styles.buttonDisabled
+      ]}
+      testID={testID}
+    >
+      <Text style={[styles.text, disabled && styles.textDisabled]}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+});
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#2196F3',
+    borderRadius: 2
+  },
+  text: {
+    color: '#fff',
+    fontWeight: '500',
+    padding: 8,
+    textAlign: 'center',
+    textTransform: 'uppercase'
+  },
+  buttonDisabled: {
+    backgroundColor: '#dfdfdf'
+  },
+  textDisabled: {
+    color: '#a1a1a1'
+  }
+});
+
+export type { ButtonProps };
+
+export default Button;

package/src/exports/CheckBox/index.js

@@ -0,0 +1,143 @@
+/**
+ * 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 { ColorValue } from '../../types';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import createElement from '../createElement';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+
+type CheckBoxProps = {
+  ...ViewProps,
+  color?: ?ColorValue,
+  disabled?: boolean,
+  onChange?: ?(e: any) => void,
+  onValueChange?: ?(e: any) => void,
+  readOnly?: boolean,
+  value?: boolean
+};
+
+const CheckBox: React.AbstractComponent<
+  CheckBoxProps,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    'aria-readonly': ariaReadOnly,
+    color,
+    disabled,
+    onChange,
+    onValueChange,
+    readOnly,
+    style,
+    value,
+    ...other
+  } = props;
+
+  function handleChange(event: Object) {
+    const value = event.nativeEvent.target.checked;
+    event.nativeEvent.value = value;
+    onChange && onChange(event);
+    onValueChange && onValueChange(value);
+  }
+
+  const fakeControl = (
+    <View
+      style={[
+        styles.fakeControl,
+        value && styles.fakeControlChecked,
+        // custom color
+        value && color && { backgroundColor: color, borderColor: color },
+        disabled && styles.fakeControlDisabled,
+        value && disabled && styles.fakeControlCheckedAndDisabled
+      ]}
+    />
+  );
+
+  const nativeControl = createElement('input', {
+    checked: value,
+    disabled: disabled,
+    onChange: handleChange,
+    readOnly:
+      readOnly === true ||
+      ariaReadOnly === true ||
+      other.accessibilityReadOnly === true,
+    ref: forwardedRef,
+    style: [styles.nativeControl, styles.cursorInherit],
+    type: 'checkbox'
+  });
+
+  return (
+    <View
+      {...other}
+      aria-disabled={disabled}
+      aria-readonly={ariaReadOnly}
+      style={[styles.root, style, disabled && styles.cursorDefault]}
+    >
+      {fakeControl}
+      {nativeControl}
+    </View>
+  );
+});
+
+CheckBox.displayName = 'CheckBox';
+
+const styles = StyleSheet.create({
+  root: {
+    cursor: 'pointer',
+    height: 16,
+    userSelect: 'none',
+    width: 16
+  },
+  cursorDefault: {
+    cursor: 'default'
+  },
+  cursorInherit: {
+    cursor: 'inherit'
+  },
+  fakeControl: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderColor: '#657786',
+    borderRadius: 2,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  fakeControlChecked: {
+    backgroundColor: '#009688',
+    backgroundImage:
+      'url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")',
+    backgroundRepeat: 'no-repeat',
+    borderColor: '#009688'
+  },
+  fakeControlDisabled: {
+    borderColor: '#CCD6DD'
+  },
+  fakeControlCheckedAndDisabled: {
+    backgroundColor: '#AAB8C2',
+    borderColor: '#AAB8C2'
+  },
+  nativeControl: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    margin: 0,
+    appearance: 'none',
+    padding: 0,
+    width: '100%'
+  }
+});
+
+export default CheckBox;

package/src/exports/Clipboard/index.js

@@ -0,0 +1,63 @@
+/**
+ * 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';
+
+let clipboardAvailable;
+
+export default class Clipboard {
+  static isAvailable(): boolean {
+    if (clipboardAvailable === undefined) {
+      clipboardAvailable =
+        typeof document.queryCommandSupported === 'function' &&
+        document.queryCommandSupported('copy');
+    }
+    return clipboardAvailable;
+  }
+
+  static getString(): Promise<string> {
+    return Promise.resolve('');
+  }
+
+  static setString(text: string): boolean {
+    let success = false;
+    const body = document.body;
+
+    if (body) {
+      // add the text to a hidden node
+      const node = document.createElement('span');
+      node.textContent = text;
+      node.style.opacity = '0';
+      node.style.position = 'absolute';
+      node.style.whiteSpace = 'pre-wrap';
+      node.style.userSelect = 'auto';
+      body.appendChild(node);
+
+      // select the text
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      selection.addRange(range);
+
+      // attempt to copy
+      try {
+        document.execCommand('copy');
+        success = true;
+      } catch (e) {}
+
+      // remove selection and node
+      selection.removeAllRanges();
+      body.removeChild(node);
+    }
+
+    return success;
+  }
+}

package/src/exports/DeviceEventEmitter/index.js

@@ -0,0 +1,2 @@
+import RCTDeviceEventEmitter from '../../vendor/react-native/EventEmitter/RCTDeviceEventEmitter';
+export default RCTDeviceEventEmitter;

package/src/exports/Dimensions/index.js

@@ -0,0 +1,160 @@
+/**
+ * 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 { EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
+import invariant from 'fbjs/lib/invariant';
+import canUseDOM from '../../modules/canUseDom';
+
+export type DisplayMetrics = {|
+  fontScale: number,
+  height: number,
+  scale: number,
+  width: number
+|};
+
+type DimensionsValue = {|
+  window: DisplayMetrics,
+  screen: DisplayMetrics
+|};
+
+type DimensionKey = 'window' | 'screen';
+
+type DimensionEventListenerType = 'change';
+
+const dimensions = {
+  window: {
+    fontScale: 1,
+    height: 0,
+    scale: 1,
+    width: 0
+  },
+  screen: {
+    fontScale: 1,
+    height: 0,
+    scale: 1,
+    width: 0
+  }
+};
+const listeners = {};
+
+let shouldInit = canUseDOM;
+
+function update() {
+  if (!canUseDOM) {
+    return;
+  }
+
+  const win = window;
+  let height;
+  let width;
+
+  /**
+   * iOS does not update viewport dimensions on keyboard open/close.
+   * window.visualViewport(https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
+   * is used instead of document.documentElement.clientHeight (which remains as a fallback)
+   */
+  if (win.visualViewport) {
+    const visualViewport = win.visualViewport;
+    /**
+     * We are multiplying by scale because height and width from visual viewport
+     * also react to pinch zoom, and become smaller when zoomed. But it is not desired
+     * behaviour, since originally documentElement client height and width were used,
+     * and they do not react to pinch zoom.
+     */
+    height = Math.round(visualViewport.height * visualViewport.scale);
+    width = Math.round(visualViewport.width * visualViewport.scale);
+  } else {
+    const docEl = win.document.documentElement;
+    height = docEl.clientHeight;
+    width = docEl.clientWidth;
+  }
+
+  dimensions.window = {
+    fontScale: 1,
+    height,
+    scale: win.devicePixelRatio || 1,
+    width
+  };
+
+  dimensions.screen = {
+    fontScale: 1,
+    height: win.screen.height,
+    scale: win.devicePixelRatio || 1,
+    width: win.screen.width
+  };
+}
+
+function handleResize() {
+  update();
+  if (Array.isArray(listeners['change'])) {
+    listeners['change'].forEach((handler) => handler(dimensions));
+  }
+}
+
+export default class Dimensions {
+  static get(dimension: DimensionKey): DisplayMetrics {
+    if (shouldInit) {
+      shouldInit = false;
+      update();
+    }
+    invariant(dimensions[dimension], `No dimension set for key ${dimension}`);
+    return dimensions[dimension];
+  }
+
+  static set(initialDimensions: ?DimensionsValue): void {
+    if (initialDimensions) {
+      if (canUseDOM) {
+        invariant(false, 'Dimensions cannot be set in the browser');
+      } else {
+        if (initialDimensions.screen != null) {
+          dimensions.screen = initialDimensions.screen;
+        }
+        if (initialDimensions.window != null) {
+          dimensions.window = initialDimensions.window;
+        }
+      }
+    }
+  }
+
+  static addEventListener(
+    type: DimensionEventListenerType,
+    handler: (DimensionsValue) => void
+  ): EventSubscription {
+    listeners[type] = listeners[type] || [];
+    listeners[type].push(handler);
+
+    return {
+      remove: () => {
+        this.removeEventListener(type, handler);
+      }
+    };
+  }
+
+  static removeEventListener(
+    type: DimensionEventListenerType,
+    handler: (DimensionsValue) => void
+  ): void {
+    if (Array.isArray(listeners[type])) {
+      listeners[type] = listeners[type].filter(
+        (_handler) => _handler !== handler
+      );
+    }
+  }
+}
+
+if (canUseDOM) {
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', handleResize, false);
+  } else {
+    window.addEventListener('resize', handleResize, false);
+  }
+}

package/src/exports/Easing/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 Easing from '../../vendor/react-native/Animated/Easing';
+export default Easing;

package/src/exports/FlatList/index.js

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

package/src/exports/I18nManager/index.js

@@ -0,0 +1,35 @@
+/**
+ * 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 I18nManagerStatus = {
+  allowRTL: (allowRTL: boolean) => void,
+  forceRTL: (forceRTL: boolean) => void,
+  isRTL: boolean,
+  getConstants: () => Constants
+};
+
+type Constants = {
+  isRTL: boolean
+};
+
+const I18nManager: I18nManagerStatus = {
+  allowRTL() {
+    return;
+  },
+  forceRTL() {
+    return;
+  },
+  isRTL: false,
+  getConstants(): Constants {
+    return { isRTL: false };
+  }
+};
+
+export default I18nManager;