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

package/src/modules/requestIdleCallback/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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 canUseDOM from '../canUseDom';
+
+const _requestIdleCallback = function (cb: Function, options?: Object) {
+  return setTimeout(() => {
+    const start = Date.now();
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start));
+      }
+    });
+  }, 1);
+};
+
+const _cancelIdleCallback = function (id) {
+  clearTimeout(id);
+};
+
+const isSupported =
+  canUseDOM && typeof window.requestIdleCallback !== 'undefined';
+
+const requestIdleCallback: (cb: any, options?: any) => TimeoutID = isSupported
+  ? window.requestIdleCallback
+  : _requestIdleCallback;
+const cancelIdleCallback: (TimeoutID) => void = isSupported
+  ? window.cancelIdleCallback
+  : _cancelIdleCallback;
+
+export default requestIdleCallback;
+export { cancelIdleCallback };

package/src/modules/setValueForStyles/dangerousStyleValue.js

@@ -0,0 +1,52 @@
+/* eslint-disable */
+
+/**
+ * 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.
+ *
+ * From React 16.0.0
+ * @noflow
+ */
+
+import isUnitlessNumber from '../unitlessNumbers';
+
+/**
+ * Convert a value into the proper css writable value. The style name `name`
+ * should be logical (no hyphens), as specified
+ * in `CSSProperty.isUnitlessNumber`.
+ *
+ * @param {string} name CSS property name such as `topMargin`.
+ * @param {*} value CSS property value such as `10px`.
+ * @return {string} Normalized style value with dimensions applied.
+ */
+function dangerousStyleValue(name, value, isCustomProperty) {
+  // Note that we've removed escapeTextForBrowser() calls here since the
+  // whole string will be escaped when the attribute is injected into
+  // the markup. If you provide unsafe user data here they can inject
+  // arbitrary CSS which may be problematic (I couldn't repro this):
+  // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
+  // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
+  // This is not an XSS hole but instead a potential CSS injection issue
+  // which has lead to a greater discussion about how we're going to
+  // trust URLs moving forward. See #2115901
+
+  var isEmpty = value == null || typeof value === 'boolean' || value === '';
+  if (isEmpty) {
+    return '';
+  }
+
+  if (
+    !isCustomProperty &&
+    typeof value === 'number' &&
+    value !== 0 &&
+    !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
+  ) {
+    return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
+  }
+
+  return ('' + value).trim();
+}
+
+export default dangerousStyleValue;

package/src/modules/setValueForStyles/index.js

@@ -0,0 +1,45 @@
+/* eslint-disable */
+
+/**
+ * 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.
+ *
+ * From React 16.3.0
+ * @noflow
+ */
+
+import dangerousStyleValue from './dangerousStyleValue';
+
+/**
+ * Sets the value for multiple styles on a node.  If a value is specified as
+ * '' (empty string), the corresponding style property will be unset.
+ *
+ * @param {DOMElement} node
+ * @param {object} styles
+ */
+function setValueForStyles(node, styles) {
+  const style = node.style;
+  for (let styleName in styles) {
+    if (!styles.hasOwnProperty(styleName)) {
+      continue;
+    }
+    const isCustomProperty = styleName.indexOf('--') === 0;
+    const styleValue = dangerousStyleValue(
+      styleName,
+      styles[styleName],
+      isCustomProperty
+    );
+    if (styleName === 'float') {
+      styleName = 'cssFloat';
+    }
+    if (isCustomProperty) {
+      style.setProperty(styleName, styleValue);
+    } else {
+      style[styleName] = styleValue;
+    }
+  }
+}
+
+export default setValueForStyles;

package/src/modules/unitlessNumbers/index.js

@@ -0,0 +1,76 @@
+/**
+ * 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
+ */
+
+const unitlessNumbers = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowGap: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnGap: true,
+  gridColumnStart: true,
+  lineClamp: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+  // transform types
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  // RN properties
+  shadowOpacity: true
+};
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+const prefixes = ['ms', 'Moz', 'O', 'Webkit'];
+const prefixKey = (prefix: string, key: string) => {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+};
+Object.keys(unitlessNumbers).forEach((prop) => {
+  prefixes.forEach((prefix) => {
+    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];
+  });
+});
+
+export default unitlessNumbers;

package/src/modules/useElementLayout/index.js

@@ -0,0 +1,95 @@
+/**
+ * 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 type { ElementRef } from 'react';
+import type { LayoutEvent } from '../../types';
+
+import useLayoutEffect from '../useLayoutEffect';
+import UIManager from '../../exports/UIManager';
+import canUseDOM from '../canUseDom';
+
+const DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler';
+
+let didWarn = !canUseDOM;
+let resizeObserver = null;
+
+function getResizeObserver(): ?ResizeObserver {
+  if (canUseDOM && typeof window.ResizeObserver !== 'undefined') {
+    if (resizeObserver == null) {
+      resizeObserver = new window.ResizeObserver(function (entries) {
+        entries.forEach((entry) => {
+          const node = entry.target;
+          const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
+          if (typeof onLayout === 'function') {
+            // We still need to measure the view because browsers don't yet provide
+            // border-box dimensions in the entry
+            UIManager.measure(node, (x, y, width, height, left, top) => {
+              const event: LayoutEvent = {
+                // $FlowFixMe
+                nativeEvent: {
+                  layout: { x, y, width, height, left, top }
+                },
+                timeStamp: Date.now()
+              };
+              Object.defineProperty(event.nativeEvent, 'target', {
+                enumerable: true,
+                get: () => entry.target
+              });
+              onLayout(event);
+            });
+          }
+        });
+      });
+    }
+  } else if (!didWarn) {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      process.env.NODE_ENV !== 'test'
+    ) {
+      console.warn(
+        'onLayout relies on ResizeObserver which is not supported by your browser. ' +
+          'Please include a polyfill, e.g., https://github.com/que-etc/resize-observer-polyfill.'
+      );
+      didWarn = true;
+    }
+  }
+  return resizeObserver;
+}
+
+export default function useElementLayout(
+  ref: ElementRef<any>,
+  onLayout?: ?(e: LayoutEvent) => void
+) {
+  const observer = getResizeObserver();
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node != null) {
+      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
+    }
+  }, [ref, onLayout]);
+
+  // Observing is done in a separate effect to avoid this effect running
+  // when 'onLayout' changes.
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node != null && observer != null) {
+      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === 'function') {
+        observer.observe(node);
+      } else {
+        observer.unobserve(node);
+      }
+    }
+    return () => {
+      if (node != null && observer != null) {
+        observer.unobserve(node);
+      }
+    };
+  }, [ref, observer]);
+}

package/src/modules/useEvent/index.js

@@ -0,0 +1,70 @@
+/**
+ * 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 { addEventListener } from '../addEventListener';
+import useLayoutEffect from '../useLayoutEffect';
+import useStable from '../useStable';
+
+type Callback = null | ((any) => void);
+type AddListener = (
+  target: EventTarget,
+  listener: null | ((any) => void)
+) => () => void;
+
+/**
+ * This can be used with any event type include custom events.
+ *
+ * const click = useEvent('click', options);
+ * useEffect(() => {
+ *   click.setListener(target, onClick);
+ *   return () => click.clear();
+ * }).
+ */
+export default function useEvent(
+  eventType: string,
+  options?: ?{
+    capture?: boolean,
+    passive?: boolean,
+    once?: boolean
+  }
+): AddListener {
+  const targetListeners = useStable(() => new Map());
+
+  const addListener = useStable(() => {
+    return (target: EventTarget, callback: Callback) => {
+      const removeTargetListener = targetListeners.get(target);
+      if (removeTargetListener != null) {
+        removeTargetListener();
+      }
+      if (callback == null) {
+        targetListeners.delete(target);
+        callback = () => {};
+      }
+      const removeEventListener = addEventListener(
+        target,
+        eventType,
+        callback,
+        options
+      );
+      targetListeners.set(target, removeEventListener);
+      return removeEventListener;
+    };
+  });
+
+  useLayoutEffect(() => {
+    return () => {
+      targetListeners.forEach((removeListener) => {
+        removeListener();
+      });
+      targetListeners.clear();
+    };
+  }, [targetListeners]);
+
+  return addListener;
+}

package/src/modules/useHover/index.js

@@ -0,0 +1,197 @@
+/**
+ * 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 { getModality } from '../modality';
+import useEvent from '../useEvent';
+import useLayoutEffect from '../useLayoutEffect';
+
+/**
+ * Types
+ */
+
+export type HoverEventsConfig = {
+  contain?: ?boolean,
+  disabled?: ?boolean,
+  onHoverStart?: ?(e: any) => void,
+  onHoverChange?: ?(bool: boolean) => void,
+  onHoverUpdate?: ?(e: any) => void,
+  onHoverEnd?: ?(e: any) => void
+};
+
+/**
+ * Implementation
+ */
+
+const emptyObject = {};
+const opts = { passive: true };
+const lockEventType = 'react-gui:hover:lock';
+const unlockEventType = 'react-gui:hover:unlock';
+const supportsPointerEvent = () =>
+  !!(typeof window !== 'undefined' && window.PointerEvent != null);
+
+function dispatchCustomEvent(
+  target: EventTarget,
+  type: string,
+  payload?: {
+    bubbles?: boolean,
+    cancelable?: boolean,
+    detail?: { [key: string]: mixed }
+  }
+) {
+  const event = document.createEvent('CustomEvent');
+  const { bubbles = true, cancelable = true, detail } = payload || emptyObject;
+  event.initCustomEvent(type, bubbles, cancelable, detail);
+  target.dispatchEvent(event);
+}
+
+// This accounts for the non-PointerEvent fallback events.
+function getPointerType(event) {
+  const { pointerType } = event;
+  return pointerType != null ? pointerType : getModality();
+}
+
+export default function useHover(
+  targetRef: any,
+  config: HoverEventsConfig
+): void {
+  const {
+    contain,
+    disabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverUpdate,
+    onHoverEnd
+  } = config;
+
+  const canUsePE = supportsPointerEvent();
+
+  const addMoveListener = useEvent(
+    canUsePE ? 'pointermove' : 'mousemove',
+    opts
+  );
+  const addEnterListener = useEvent(
+    canUsePE ? 'pointerenter' : 'mouseenter',
+    opts
+  );
+  const addLeaveListener = useEvent(
+    canUsePE ? 'pointerleave' : 'mouseleave',
+    opts
+  );
+  // These custom events are used to implement the "contain" prop.
+  const addLockListener = useEvent(lockEventType, opts);
+  const addUnlockListener = useEvent(unlockEventType, opts);
+
+  useLayoutEffect(() => {
+    const target = targetRef.current;
+    if (target !== null) {
+      /**
+       * End the hover gesture
+       */
+      const hoverEnd = function (e) {
+        if (onHoverEnd != null) {
+          onHoverEnd(e);
+        }
+        if (onHoverChange != null) {
+          onHoverChange(false);
+        }
+        // Remove the listeners once finished.
+        addMoveListener(target, null);
+        addLeaveListener(target, null);
+      };
+
+      /**
+       * Leave element
+       */
+      const leaveListener = function (e) {
+        const target = targetRef.current;
+        if (target != null && getPointerType(e) !== 'touch') {
+          if (contain) {
+            dispatchCustomEvent(target, unlockEventType);
+          }
+          hoverEnd(e);
+        }
+      };
+
+      /**
+       * Move within element
+       */
+      const moveListener = function (e) {
+        if (getPointerType(e) !== 'touch') {
+          if (onHoverUpdate != null) {
+            // Not all browsers have these properties
+            if (e.x == null) {
+              e.x = e.clientX;
+            }
+            if (e.y == null) {
+              e.y = e.clientY;
+            }
+            onHoverUpdate(e);
+          }
+        }
+      };
+
+      /**
+       * Start the hover gesture
+       */
+      const hoverStart = function (e) {
+        if (onHoverStart != null) {
+          onHoverStart(e);
+        }
+        if (onHoverChange != null) {
+          onHoverChange(true);
+        }
+        // Set the listeners needed for the rest of the hover gesture.
+        if (onHoverUpdate != null) {
+          addMoveListener(target, !disabled ? moveListener : null);
+        }
+        addLeaveListener(target, !disabled ? leaveListener : null);
+      };
+
+      /**
+       * Enter element
+       */
+      const enterListener = function (e) {
+        const target = targetRef.current;
+        if (target != null && getPointerType(e) !== 'touch') {
+          if (contain) {
+            dispatchCustomEvent(target, lockEventType);
+          }
+          hoverStart(e);
+          const lockListener = function (lockEvent) {
+            if (lockEvent.target !== target) {
+              hoverEnd(e);
+            }
+          };
+          const unlockListener = function (lockEvent) {
+            if (lockEvent.target !== target) {
+              hoverStart(e);
+            }
+          };
+          addLockListener(target, !disabled ? lockListener : null);
+          addUnlockListener(target, !disabled ? unlockListener : null);
+        }
+      };
+
+      addEnterListener(target, !disabled ? enterListener : null);
+    }
+  }, [
+    addEnterListener,
+    addMoveListener,
+    addLeaveListener,
+    addLockListener,
+    addUnlockListener,
+    contain,
+    disabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverUpdate,
+    onHoverEnd,
+    targetRef
+  ]);
+}

package/src/modules/useLayoutEffect/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.
+ *
+ * useLayoutEffect throws an error on the server. On the few occasions where is
+ * problematic, use this hook.
+ *
+ * @flow
+ */
+
+import { useEffect, useLayoutEffect } from 'react';
+import canUseDOM from '../canUseDom';
+
+const useLayoutEffectImpl: typeof useLayoutEffect = canUseDOM
+  ? useLayoutEffect
+  : useEffect;
+
+export default useLayoutEffectImpl;

package/src/modules/useLocale/index.js

@@ -0,0 +1,60 @@
+/**
+ * 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
+ */
+
+import type { Node } from 'react';
+
+import React, { createContext, useContext } from 'react';
+import { isLocaleRTL } from './isLocaleRTL';
+
+type Locale = string;
+type WritingDirection = 'ltr' | 'rtl';
+
+type LocaleValue = {
+  // Locale writing direction.
+  direction: WritingDirection,
+  // Locale BCP47 language code: https://www.ietf.org/rfc/bcp/bcp47.txt
+  locale: ?Locale
+};
+
+type ProviderProps = {
+  ...LocaleValue,
+  children: any
+};
+
+const defaultLocale = {
+  direction: 'ltr',
+  locale: 'en-US'
+};
+
+const LocaleContext = createContext<LocaleValue>(defaultLocale);
+
+export function getLocaleDirection(locale: Locale): WritingDirection {
+  return isLocaleRTL(locale) ? 'rtl' : 'ltr';
+}
+
+export function LocaleProvider(props: ProviderProps): Node {
+  const { direction, locale, children } = props;
+  const needsContext = direction || locale;
+
+  return needsContext ? (
+    <LocaleContext.Provider
+      children={children}
+      value={{
+        direction: locale ? getLocaleDirection(locale) : direction,
+        locale
+      }}
+    />
+  ) : (
+    children
+  );
+}
+
+export function useLocaleContext(): LocaleValue {
+  return useContext(LocaleContext);
+}