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

package/src/modules/dismissKeyboard/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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 TextInputState from '../TextInputState';
+
+const dismissKeyboard = () => {
+  TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
+};
+
+export default dismissKeyboard;

package/src/modules/forwardedProps/index.js

@@ -0,0 +1,189 @@
+/**
+ * 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
+ */
+
+export const defaultProps = {
+  children: true,
+  dataSet: true,
+  dir: true,
+  id: true,
+  ref: true,
+  suppressHydrationWarning: true,
+  tabIndex: true,
+  testID: true,
+  // @deprecated
+  focusable: true,
+  nativeID: true
+};
+
+export const accessibilityProps = {
+  'aria-activedescendant': true,
+  'aria-atomic': true,
+  'aria-autocomplete': true,
+  'aria-busy': true,
+  'aria-checked': true,
+  'aria-colcount': true,
+  'aria-colindex': true,
+  'aria-colspan': true,
+  'aria-controls': true,
+  'aria-current': true,
+  'aria-describedby': true,
+  'aria-details': true,
+  'aria-disabled': true,
+  'aria-errormessage': true,
+  'aria-expanded': true,
+  'aria-flowto': true,
+  'aria-haspopup': true,
+  'aria-hidden': true,
+  'aria-invalid': true,
+  'aria-keyshortcuts': true,
+  'aria-label': true,
+  'aria-labelledby': true,
+  'aria-level': true,
+  'aria-live': true,
+  'aria-modal': true,
+  'aria-multiline': true,
+  'aria-multiselectable': true,
+  'aria-orientation': true,
+  'aria-owns': true,
+  'aria-placeholder': true,
+  'aria-posinset': true,
+  'aria-pressed': true,
+  'aria-readonly': true,
+  'aria-required': true,
+  inert: true,
+  role: true,
+  'aria-roledescription': true,
+  'aria-rowcount': true,
+  'aria-rowindex': true,
+  'aria-rowspan': true,
+  'aria-selected': true,
+  'aria-setsize': true,
+  'aria-sort': true,
+  'aria-valuemax': true,
+  'aria-valuemin': true,
+  'aria-valuenow': true,
+  'aria-valuetext': true,
+  // @deprecated
+  accessibilityActiveDescendant: true,
+  accessibilityAtomic: true,
+  accessibilityAutoComplete: true,
+  accessibilityBusy: true,
+  accessibilityChecked: true,
+  accessibilityColumnCount: true,
+  accessibilityColumnIndex: true,
+  accessibilityColumnSpan: true,
+  accessibilityControls: true,
+  accessibilityCurrent: true,
+  accessibilityDescribedBy: true,
+  accessibilityDetails: true,
+  accessibilityDisabled: true,
+  accessibilityErrorMessage: true,
+  accessibilityExpanded: true,
+  accessibilityFlowTo: true,
+  accessibilityHasPopup: true,
+  accessibilityHidden: true,
+  accessibilityInvalid: true,
+  accessibilityKeyShortcuts: true,
+  accessibilityLabel: true,
+  accessibilityLabelledBy: true,
+  accessibilityLevel: true,
+  accessibilityLiveRegion: true,
+  accessibilityModal: true,
+  accessibilityMultiline: true,
+  accessibilityMultiSelectable: true,
+  accessibilityOrientation: true,
+  accessibilityOwns: true,
+  accessibilityPlaceholder: true,
+  accessibilityPosInSet: true,
+  accessibilityPressed: true,
+  accessibilityReadOnly: true,
+  accessibilityRequired: true,
+  accessibilityRole: true,
+  accessibilityRoleDescription: true,
+  accessibilityRowCount: true,
+  accessibilityRowIndex: true,
+  accessibilityRowSpan: true,
+  accessibilitySelected: true,
+  accessibilitySetSize: true,
+  accessibilitySort: true,
+  accessibilityValueMax: true,
+  accessibilityValueMin: true,
+  accessibilityValueNow: true,
+  accessibilityValueText: true
+};
+
+// For the moment disabling click and touch events on TV platforms
+export const clickProps = {
+  onClick: false,
+  onAuxClick: false,
+  onContextMenu: false,
+  onGotPointerCapture: false,
+  onLostPointerCapture: false,
+  onPointerCancel: false,
+  onPointerDown: false,
+  onPointerEnter: false,
+  onPointerMove: false,
+  onPointerLeave: false,
+  onPointerOut: false,
+  onPointerOver: false,
+  onPointerUp: false
+};
+
+export const focusProps = {
+  onBlur: true,
+  onFocus: true
+};
+
+export const keyboardProps = {
+  onKeyDown: true,
+  onKeyDownCapture: true,
+  onKeyUp: true,
+  onKeyUpCapture: true
+};
+
+// TV props
+export const tvViewProps = {
+  tvFocusable: true
+};
+
+export const tvFocusGuideViewProps = {
+  autoFocus: true,
+  destinations: false, // SpatialManager handles this
+  // focusable: true, Very important for TVFocusGuideView but handled in defaultProps
+  trapFocusDown: true,
+  trapFocusLeft: true,
+  trapFocusRight: true,
+  trapFocusUp: true
+};
+
+// TODO: work on a solution to disable mouse/touch events on TV platforms
+export const mouseProps = {
+  onMouseDown: true,
+  onMouseEnter: true,
+  onMouseLeave: true,
+  onMouseMove: true,
+  onMouseOver: true,
+  onMouseOut: true,
+  onMouseUp: true
+};
+
+export const touchProps = {
+  onTouchCancel: true,
+  onTouchCancelCapture: true,
+  onTouchEnd: true,
+  onTouchEndCapture: true,
+  onTouchMove: true,
+  onTouchMoveCapture: true,
+  onTouchStart: true,
+  onTouchStartCapture: true
+};
+
+export const styleProps = {
+  style: true
+};

package/src/modules/getBoundingClientRect/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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 strict
+ */
+
+const getBoundingClientRect = (node: ?HTMLElement): void | ClientRect => {
+  if (node != null) {
+    const isElement = node.nodeType === 1; /* Node.ELEMENT_NODE */
+    if (isElement && typeof node.getBoundingClientRect === 'function') {
+      return node.getBoundingClientRect();
+    }
+  }
+};
+
+export default getBoundingClientRect;

package/src/modules/isSelectionValid/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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
+ */
+
+export default function isSelectionValid(): boolean {
+  const selection = window.getSelection();
+  const string = selection.toString();
+  const anchorNode = selection.anchorNode;
+  const focusNode = selection.focusNode;
+  const isTextNode =
+    (anchorNode && anchorNode.nodeType === window.Node.TEXT_NODE) ||
+    (focusNode && focusNode.nodeType === window.Node.TEXT_NODE);
+  return string.length >= 1 && string !== '\n' && isTextNode;
+}

package/src/modules/isWebColor/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+
+const isWebColor = (color: string): boolean =>
+  color === 'currentcolor' ||
+  color === 'currentColor' ||
+  color === 'inherit' ||
+  color.indexOf('var(') === 0;
+
+export default isWebColor;

package/src/modules/mergeRefs/index.js

@@ -0,0 +1,35 @@
+/**
+ * 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
+ */
+
+import * as React from 'react';
+
+export default function mergeRefs(
+  ...args: $ReadOnlyArray<React.ElementRef<any>>
+): (node: HTMLElement | null) => void {
+  return function forwardRef(node: HTMLElement | null) {
+    args.forEach((ref: React.ElementRef<any>) => {
+      if (ref == null) {
+        return;
+      }
+      if (typeof ref === 'function') {
+        ref(node);
+        return;
+      }
+      if (typeof ref === 'object') {
+        ref.current = node;
+        return;
+      }
+      console.error(
+        `mergeRefs cannot handle Refs of type boolean, number or string, received ref ${String(
+          ref
+        )}`
+      );
+    });
+  };
+}

package/src/modules/modality/index.js

@@ -0,0 +1,215 @@
+/**
+ * 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 { addEventListener } from '../addEventListener';
+import canUseDOM from '../canUseDom';
+
+export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen';
+
+const supportsPointerEvent = () =>
+  !!(typeof window !== 'undefined' && window.PointerEvent != null);
+
+let activeModality = 'keyboard';
+let modality = 'keyboard';
+let previousModality;
+let previousActiveModality;
+let isEmulatingMouseEvents = false;
+const listeners = new Set();
+
+const KEYBOARD = 'keyboard';
+const MOUSE = 'mouse';
+const TOUCH = 'touch';
+
+const BLUR = 'blur';
+const CONTEXTMENU = 'contextmenu';
+const FOCUS = 'focus';
+const KEYDOWN = 'keydown';
+const MOUSEDOWN = 'mousedown';
+const MOUSEMOVE = 'mousemove';
+const MOUSEUP = 'mouseup';
+const POINTERDOWN = 'pointerdown';
+const POINTERMOVE = 'pointermove';
+const SCROLL = 'scroll';
+const SELECTIONCHANGE = 'selectionchange';
+const TOUCHCANCEL = 'touchcancel';
+const TOUCHMOVE = 'touchmove';
+const TOUCHSTART = 'touchstart';
+const VISIBILITYCHANGE = 'visibilitychange';
+
+const bubbleOptions = { passive: true };
+const captureOptions = { capture: true, passive: true };
+
+function restoreModality() {
+  if (previousModality != null || previousActiveModality != null) {
+    if (previousModality != null) {
+      modality = previousModality;
+      previousModality = null;
+    }
+    if (previousActiveModality != null) {
+      activeModality = previousActiveModality;
+      previousActiveModality = null;
+    }
+    callListeners();
+  }
+}
+
+function onBlurWindow() {
+  previousModality = modality;
+  previousActiveModality = activeModality;
+  activeModality = KEYBOARD;
+  modality = KEYBOARD;
+  callListeners();
+  // for fallback events
+  isEmulatingMouseEvents = false;
+}
+
+function onFocusWindow() {
+  restoreModality();
+}
+
+function onKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  if (modality !== KEYBOARD) {
+    modality = KEYBOARD;
+    activeModality = KEYBOARD;
+    callListeners();
+  }
+}
+
+function onVisibilityChange() {
+  if (document.visibilityState !== 'hidden') {
+    restoreModality();
+  }
+}
+
+function onPointerish(event: any) {
+  const eventType = event.type;
+
+  if (supportsPointerEvent()) {
+    if (eventType === POINTERDOWN) {
+      if (activeModality !== event.pointerType) {
+        modality = event.pointerType;
+        activeModality = event.pointerType;
+        callListeners();
+      }
+      return;
+    }
+    if (eventType === POINTERMOVE) {
+      if (modality !== event.pointerType) {
+        modality = event.pointerType;
+        callListeners();
+      }
+      return;
+    }
+  }
+  // Fallback for non-PointerEvent environment
+  else {
+    if (!isEmulatingMouseEvents) {
+      if (eventType === MOUSEDOWN) {
+        if (activeModality !== MOUSE) {
+          modality = MOUSE;
+          activeModality = MOUSE;
+          callListeners();
+        }
+      }
+      if (eventType === MOUSEMOVE) {
+        if (modality !== MOUSE) {
+          modality = MOUSE;
+          callListeners();
+        }
+      }
+    }
+
+    // Flag when browser may produce emulated events
+    if (eventType === TOUCHSTART) {
+      isEmulatingMouseEvents = true;
+      if (event.touches && event.touches.length > 1) {
+        isEmulatingMouseEvents = false;
+      }
+      if (activeModality !== TOUCH) {
+        modality = TOUCH;
+        activeModality = TOUCH;
+        callListeners();
+      }
+      return;
+    }
+
+    // Remove flag after emulated events are finished or cancelled, and if an
+    // event occurs that cuts short a touch event sequence.
+    if (
+      eventType === CONTEXTMENU ||
+      eventType === MOUSEUP ||
+      eventType === SELECTIONCHANGE ||
+      eventType === SCROLL ||
+      eventType === TOUCHCANCEL ||
+      eventType === TOUCHMOVE
+    ) {
+      isEmulatingMouseEvents = false;
+    }
+  }
+}
+
+if (canUseDOM) {
+  // Window events
+  addEventListener(window, BLUR, onBlurWindow, bubbleOptions);
+  addEventListener(window, FOCUS, onFocusWindow, bubbleOptions);
+  // Must be capture phase because 'stopPropagation' might prevent these
+  // events bubbling to the document.
+  addEventListener(document, KEYDOWN, onKeyDown, captureOptions);
+  addEventListener(
+    document,
+    VISIBILITYCHANGE,
+    onVisibilityChange,
+    captureOptions
+  );
+  addEventListener(document, POINTERDOWN, onPointerish, captureOptions);
+  addEventListener(document, POINTERMOVE, onPointerish, captureOptions);
+  // Fallback events
+  addEventListener(document, CONTEXTMENU, onPointerish, captureOptions);
+  addEventListener(document, MOUSEDOWN, onPointerish, captureOptions);
+  addEventListener(document, MOUSEMOVE, onPointerish, captureOptions);
+  addEventListener(document, MOUSEUP, onPointerish, captureOptions);
+  addEventListener(document, TOUCHCANCEL, onPointerish, captureOptions);
+  addEventListener(document, TOUCHMOVE, onPointerish, captureOptions);
+  addEventListener(document, TOUCHSTART, onPointerish, captureOptions);
+  addEventListener(document, SELECTIONCHANGE, onPointerish, captureOptions);
+  addEventListener(document, SCROLL, onPointerish, captureOptions);
+}
+
+function callListeners() {
+  const value = { activeModality, modality };
+  listeners.forEach((listener) => {
+    listener(value);
+  });
+}
+
+export function getActiveModality(): Modality {
+  return activeModality;
+}
+
+export function getModality(): Modality {
+  return modality;
+}
+
+export function addModalityListener(
+  listener: ({ activeModality: Modality, modality: Modality }) => void
+): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function testOnly_resetActiveModality() {
+  isEmulatingMouseEvents = false;
+  activeModality = KEYBOARD;
+  modality = KEYBOARD;
+}

package/src/modules/multiplyStyleLengthValue/index.js

@@ -0,0 +1,28 @@
+/**
+ * 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
+ */
+
+const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/;
+
+const getUnit = (str) => str.match(CSS_UNIT_RE)[1];
+
+const isNumeric = (n) => {
+  return !isNaN(parseFloat(n)) && isFinite(n);
+};
+
+const multiplyStyleLengthValue = (value: string | number, multiple) => {
+  if (typeof value === 'string') {
+    const number = parseFloat(value) * multiple;
+    const unit = getUnit(value);
+    return `${number}${unit}`;
+  } else if (isNumeric(value)) {
+    return value * multiple;
+  }
+};
+
+export default multiplyStyleLengthValue;

package/src/modules/normalizeColor/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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 isWebColor from '../isWebColor';
+import processColor from '../../exports/processColor';
+
+const normalizeColor = (
+  color?: number | string,
+  opacity?: number = 1
+): void | string => {
+  if (color == null) return;
+
+  if (typeof color === 'string' && isWebColor(color)) {
+    return color;
+  }
+
+  const colorInt = processColor(color);
+  if (colorInt != null) {
+    const r = (colorInt >> 16) & 255;
+    const g = (colorInt >> 8) & 255;
+    const b = colorInt & 255;
+    const a = ((colorInt >> 24) & 255) / 255;
+    const alpha = (a * opacity).toFixed(2);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+};
+
+export default normalizeColor;

package/src/modules/pick/index.js

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+export default function pick(obj: Object, list: { [string]: boolean }): Object {
+  const nextObj = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (list[key] === true) {
+        nextObj[key] = obj[key];
+      }
+    }
+  }
+  return nextObj;
+}

package/src/modules/prefixStyles/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 createPrefixer from 'inline-style-prefixer/lib/createPrefixer';
+import staticData from './static';
+
+type StyleModifier = (style: Object) => Object;
+
+const prefixAll: StyleModifier = createPrefixer(staticData);
+
+export default prefixAll;

package/src/modules/prefixStyles/static.js

@@ -0,0 +1,69 @@
+import crossFade from 'inline-style-prefixer/lib/plugins/crossFade';
+import imageSet from 'inline-style-prefixer/lib/plugins/imageSet';
+import logical from 'inline-style-prefixer/lib/plugins/logical';
+import position from 'inline-style-prefixer/lib/plugins/position';
+import sizing from 'inline-style-prefixer/lib/plugins/sizing';
+import transition from 'inline-style-prefixer/lib/plugins/transition';
+const w = ['Webkit'];
+const m = ['Moz'];
+const wm = ['Webkit', 'Moz'];
+const wms = ['Webkit', 'ms'];
+const wmms = ['Webkit', 'Moz', 'ms'];
+
+export default {
+  plugins: [crossFade, imageSet, logical, position, sizing, transition],
+  prefixMap: {
+    appearance: wmms,
+    userSelect: wm,
+    textEmphasisPosition: wms,
+    textEmphasis: wms,
+    textEmphasisStyle: wms,
+    textEmphasisColor: wms,
+    boxDecorationBreak: wms,
+    clipPath: w,
+    maskImage: wms,
+    maskMode: wms,
+    maskRepeat: wms,
+    maskPosition: wms,
+    maskClip: wms,
+    maskOrigin: wms,
+    maskSize: wms,
+    maskComposite: wms,
+    mask: wms,
+    maskBorderSource: wms,
+    maskBorderMode: wms,
+    maskBorderSlice: wms,
+    maskBorderWidth: wms,
+    maskBorderOutset: wms,
+    maskBorderRepeat: wms,
+    maskBorder: wms,
+    maskType: wms,
+    textDecorationStyle: w,
+    textDecorationSkip: w,
+    textDecorationLine: w,
+    textDecorationColor: w,
+    filter: w,
+    breakAfter: w,
+    breakBefore: w,
+    breakInside: w,
+    columnCount: w,
+    columnFill: w,
+    columnGap: w,
+    columnRule: w,
+    columnRuleColor: w,
+    columnRuleStyle: w,
+    columnRuleWidth: w,
+    columns: w,
+    columnSpan: w,
+    columnWidth: w,
+    backdropFilter: w,
+    hyphens: w,
+    flowInto: w,
+    flowFrom: w,
+    regionFragment: w,
+    textOrientation: w,
+    tabSize: m,
+    fontKerning: w,
+    textSizeAdjust: w
+  }
+};