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

package/dist/cjs/exports/StyleSheet/validate.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.validate = validate;
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+/**
+ * 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.
+ *
+ * 
+ */
+
+var invalidShortforms = {
+  background: true,
+  borderBottom: true,
+  borderLeft: true,
+  borderRight: true,
+  borderTop: true,
+  font: true,
+  grid: true,
+  outline: true,
+  textDecoration: true
+};
+var invalidMultiValueShortforms = {
+  flex: true,
+  margin: true,
+  padding: true,
+  borderColor: true,
+  borderRadius: true,
+  borderStyle: true,
+  borderWidth: true,
+  inset: true,
+  insetBlock: true,
+  insetInline: true,
+  marginBlock: true,
+  marginInline: true,
+  marginHorizontal: true,
+  marginVertical: true,
+  paddingBlock: true,
+  paddingInline: true,
+  paddingHorizontal: true,
+  paddingVertical: true,
+  overflow: true,
+  overscrollBehavior: true,
+  backgroundPosition: true
+};
+function error(message) {
+  console.error(message);
+}
+function validate(obj) {
+  for (var k in obj) {
+    var prop = k.trim();
+    var value = obj[prop];
+    var isInvalid = false;
+    if (value === null) {
+      continue;
+    }
+    if (typeof value === 'string' && value.indexOf('!important') > -1) {
+      error("Invalid style declaration \"" + prop + ":" + value + "\". Values cannot include \"!important\"");
+      isInvalid = true;
+    } else {
+      var suggestion = '';
+      if (prop === 'animation' || prop === 'animationName') {
+        suggestion = 'Did you mean "animationKeyframes"?';
+        isInvalid = true;
+      } else if (prop === 'direction') {
+        suggestion = 'Did you mean "writingDirection"?';
+        isInvalid = true;
+      } else if (invalidShortforms[prop]) {
+        suggestion = 'Please use long-form properties.';
+        isInvalid = true;
+      } else if (invalidMultiValueShortforms[prop]) {
+        if (typeof value === 'string' && (0, _postcssValueParser.default)(value).nodes.length > 1) {
+          suggestion = "Value is \"" + value + "\" but only single values are supported.";
+          isInvalid = true;
+        }
+      }
+      if (suggestion !== '') {
+        error("Invalid style property of \"" + prop + "\". " + suggestion);
+      }
+    }
+    if (isInvalid) {
+      delete obj[k];
+    }
+  }
+}

package/dist/cjs/exports/Switch/index.js

@@ -0,0 +1,194 @@
+"use strict";
+/**
+ * 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.
+ *
+ * 
+ */
+
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _createElement = _interopRequireDefault(require("../createElement"));
+var _multiplyStyleLengthValue = _interopRequireDefault(require("../../modules/multiplyStyleLengthValue"));
+var _StyleSheet = _interopRequireDefault(require("../StyleSheet"));
+var _View = _interopRequireDefault(require("../View"));
+var _excluded = ["aria-label", "accessibilityLabel", "activeThumbColor", "activeTrackColor", "disabled", "onValueChange", "style", "thumbColor", "trackColor", "value"];
+var emptyObject = {};
+var thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)';
+var thumbFocusedBoxShadow = thumbDefaultBoxShadow + ", 0 0 0 10px rgba(0,0,0,0.1)";
+var defaultActiveTrackColor = '#A3D3CF';
+var defaultTrackColor = '#939393';
+var defaultDisabledTrackColor = '#D5D5D5';
+var defaultActiveThumbColor = '#009688';
+var defaultThumbColor = '#FAFAFA';
+var defaultDisabledThumbColor = '#BDBDBD';
+var Switch = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  var ariaLabel = props['aria-label'],
+    accessibilityLabel = props.accessibilityLabel,
+    activeThumbColor = props.activeThumbColor,
+    activeTrackColor = props.activeTrackColor,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    onValueChange = props.onValueChange,
+    _props$style = props.style,
+    style = _props$style === void 0 ? emptyObject : _props$style,
+    thumbColor = props.thumbColor,
+    trackColor = props.trackColor,
+    _props$value = props.value,
+    value = _props$value === void 0 ? false : _props$value,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var thumbRef = React.useRef(null);
+  function handleChange(event) {
+    if (onValueChange != null) {
+      onValueChange(event.nativeEvent.target.checked);
+    }
+  }
+  function handleFocusState(event) {
+    var isFocused = event.nativeEvent.type === 'focus';
+    var boxShadow = isFocused ? thumbFocusedBoxShadow : thumbDefaultBoxShadow;
+    if (thumbRef.current != null) {
+      thumbRef.current.style.boxShadow = boxShadow;
+    }
+  }
+  var _StyleSheet$flatten = _StyleSheet.default.flatten(style),
+    styleHeight = _StyleSheet$flatten.height,
+    styleWidth = _StyleSheet$flatten.width;
+  var height = styleHeight || '20px';
+  var minWidth = (0, _multiplyStyleLengthValue.default)(height, 2);
+  var width = styleWidth > minWidth ? styleWidth : minWidth;
+  var trackBorderRadius = (0, _multiplyStyleLengthValue.default)(height, 0.5);
+  var trackCurrentColor = function () {
+    if (value === true) {
+      if (trackColor != null && typeof trackColor === 'object') {
+        return trackColor.true;
+      } else {
+        return activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : defaultActiveTrackColor;
+      }
+    } else {
+      if (trackColor != null && typeof trackColor === 'object') {
+        return trackColor.false;
+      } else {
+        return trackColor !== null && trackColor !== void 0 ? trackColor : defaultTrackColor;
+      }
+    }
+  }();
+  var thumbCurrentColor = value ? activeThumbColor !== null && activeThumbColor !== void 0 ? activeThumbColor : defaultActiveThumbColor : thumbColor !== null && thumbColor !== void 0 ? thumbColor : defaultThumbColor;
+  var thumbHeight = height;
+  var thumbWidth = thumbHeight;
+  var rootStyle = [styles.root, style, disabled && styles.cursorDefault, {
+    height,
+    width
+  }];
+  var disabledTrackColor = function () {
+    if (value === true) {
+      if (typeof activeTrackColor === 'string' && activeTrackColor != null || typeof trackColor === 'object' && trackColor != null && trackColor.true) {
+        return trackCurrentColor;
+      } else {
+        return defaultDisabledTrackColor;
+      }
+    } else {
+      if (typeof trackColor === 'string' && trackColor != null || typeof trackColor === 'object' && trackColor != null && trackColor.false) {
+        return trackCurrentColor;
+      } else {
+        return defaultDisabledTrackColor;
+      }
+    }
+  }();
+  var disabledThumbColor = function () {
+    if (value === true) {
+      if (activeThumbColor == null) {
+        return defaultDisabledThumbColor;
+      } else {
+        return thumbCurrentColor;
+      }
+    } else {
+      if (thumbColor == null) {
+        return defaultDisabledThumbColor;
+      } else {
+        return thumbCurrentColor;
+      }
+    }
+  }();
+  var trackStyle = [styles.track, {
+    backgroundColor: disabled ? disabledTrackColor : trackCurrentColor,
+    borderRadius: trackBorderRadius
+  }];
+  var thumbStyle = [styles.thumb, value && styles.thumbActive, {
+    backgroundColor: disabled ? disabledThumbColor : thumbCurrentColor,
+    height: thumbHeight,
+    marginStart: value ? (0, _multiplyStyleLengthValue.default)(thumbWidth, -1) : 0,
+    width: thumbWidth
+  }];
+  var nativeControl = (0, _createElement.default)('input', {
+    'aria-label': ariaLabel || accessibilityLabel,
+    checked: value,
+    disabled: disabled,
+    onBlur: handleFocusState,
+    onChange: handleChange,
+    onFocus: handleFocusState,
+    ref: forwardedRef,
+    style: [styles.nativeControl, styles.cursorInherit],
+    type: 'checkbox',
+    role: 'switch'
+  });
+  return /*#__PURE__*/React.createElement(_View.default, (0, _extends2.default)({}, other, {
+    style: rootStyle
+  }), /*#__PURE__*/React.createElement(_View.default, {
+    style: trackStyle
+  }), /*#__PURE__*/React.createElement(_View.default, {
+    ref: thumbRef,
+    style: thumbStyle
+  }), nativeControl);
+});
+Switch.displayName = 'Switch';
+var styles = _StyleSheet.default.create({
+  root: {
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  cursorDefault: {
+    cursor: 'default'
+  },
+  cursorInherit: {
+    cursor: 'inherit'
+  },
+  track: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    forcedColorAdjust: 'none'
+  }, _StyleSheet.default.absoluteFillObject), {}, {
+    height: '70%',
+    margin: 'auto',
+    transitionDuration: '0.1s',
+    width: '100%'
+  }),
+  thumb: {
+    forcedColorAdjust: 'none',
+    alignSelf: 'flex-start',
+    borderRadius: '100%',
+    boxShadow: thumbDefaultBoxShadow,
+    start: '0%',
+    transform: 'translateZ(0)',
+    transitionDuration: '0.1s'
+  },
+  thumbActive: {
+    insetInlineStart: '100%'
+  },
+  nativeControl: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _StyleSheet.default.absoluteFillObject), {}, {
+    height: '100%',
+    margin: 0,
+    appearance: 'none',
+    padding: 0,
+    width: '100%'
+  })
+});
+var _default = exports.default = Switch;
+module.exports = exports.default;

package/dist/cjs/exports/TV/NativeTVNavigationEventEmitter.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.default = void 0;
+var _RCTDeviceEventEmitter = _interopRequireDefault(require("../../vendor/react-native/EventEmitter/RCTDeviceEventEmitter"));
+var EVENT_NAME = 'onHWKeyEvent';
+var mapToHWEvent = event => {
+  var _window;
+  var eventType;
+  switch (event.key) {
+    case 'ArrowUp':
+      eventType = 'up';
+      break;
+    case 'ArrowDown':
+      eventType = 'down';
+      break;
+    case 'ArrowLeft':
+      eventType = 'left';
+      break;
+    case 'ArrowRight':
+      eventType = 'right';
+      break;
+    case 'Enter':
+      eventType = 'select';
+      break;
+    default:
+      // Detect user configured Menu key for Web TV platforms through window.appConfig.keyMap.Menu
+      if (typeof window !== 'undefined' && ((_window = window) == null || (_window = _window.appConfig) == null || (_window = _window.keyMap) == null ? void 0 : _window['Menu']) === event.keyCode) {
+        eventType = 'menu';
+      } else {
+        eventType = event.key;
+      }
+  }
+  return {
+    eventType
+  };
+};
+var NativeTVNavigationEventEmitter = {
+  _listenerCount: 0,
+  _keydownHandler: null,
+  _onFocusHandler: null,
+  _onBlurHandler: null,
+  addListener(eventType) {
+    if (eventType !== EVENT_NAME) {
+      return;
+    }
+    if (this._listenerCount === 0) {
+      this._attachKeyboardListener();
+    }
+    this._listenerCount += 1;
+  },
+  removeListeners(count) {
+    if (this._listenerCount === 0) {
+      return;
+    }
+    this._listenerCount = Math.max(0, this._listenerCount - count);
+    if (this._listenerCount === 0) {
+      this._detachKeyboardListener();
+    }
+  },
+  _attachKeyboardListener() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    if (this._keydownHandler) {
+      return;
+    }
+    this._keydownHandler = e => {
+      var hwEvent = mapToHWEvent(e);
+      _RCTDeviceEventEmitter.default.emit(EVENT_NAME, hwEvent);
+    };
+    window.addEventListener('keydown', this._keydownHandler);
+    if (typeof document !== 'undefined') {
+      // Use capture phase to catch per-element focus/blur once at the top.
+      this._onFocusHandler = e => {
+        _RCTDeviceEventEmitter.default.emit(EVENT_NAME, {
+          eventType: 'focus',
+          tag: e.target
+        });
+      };
+      this._onBlurHandler = e => {
+        _RCTDeviceEventEmitter.default.emit(EVENT_NAME, {
+          eventType: 'blur',
+          tag: e.target
+        });
+      };
+      document.addEventListener('focus', this._onFocusHandler, true);
+      document.addEventListener('blur', this._onBlurHandler, true);
+    }
+  },
+  _detachKeyboardListener() {
+    if (!this._keydownHandler) {
+      return;
+    }
+    window.removeEventListener('keydown', this._keydownHandler);
+    this._keydownHandler = null;
+    if (this._onBlurHandler && typeof document !== 'undefined') {
+      document.removeEventListener('blur', this._onBlurHandler, true);
+    }
+    if (this._onFocusHandler && typeof document !== 'undefined') {
+      document.removeEventListener('focus', this._onFocusHandler, true);
+    }
+    this._onBlurHandler = null;
+    this._onFocusHandler = null;
+  }
+};
+var _default = exports.default = NativeTVNavigationEventEmitter;
+module.exports = exports.default;

package/dist/cjs/exports/TV/TVEventControl.js

@@ -0,0 +1,47 @@
+/**
+ * Methods to enable and disable listening for specific OS TV remote events (menu key, pan gesture)
+ *
+ * @format
+ * 
+ */
+
+'use strict';
+
+// import NativeTVNavigationEventEmitter from '../../../src/private/specs_DEPRECATED/modules/NativeTVNavigationEventEmitter';
+// import Platform from '../Platform';
+exports.__esModule = true;
+exports.default = void 0;
+var TVEventControl = {
+  enableTVMenuKey: () => {
+    console.warn('TVEventControl.enableTVMenuKey() is not implemented on web.');
+    // Platform.isTV && NativeTVNavigationEventEmitter &&
+    //   NativeTVNavigationEventEmitter.enableTVMenuKey();
+  },
+  disableTVMenuKey: () => {
+    console.warn('TVEventControl.disableTVMenuKey() is not implemented on web.');
+    // Platform.isTV && NativeTVNavigationEventEmitter &&
+    //   NativeTVNavigationEventEmitter.disableTVMenuKey();
+  },
+  enableTVPanGesture: () => {
+    console.warn('TVEventControl.enableTVPanGesture() is not implemented on web.');
+    // Platform.isTV && NativeTVNavigationEventEmitter &&
+    //   NativeTVNavigationEventEmitter.enableTVPanGesture();
+  },
+  disableTVPanGesture: () => {
+    console.warn('TVEventControl.disableTVPanGesture() is not implemented on web.');
+    // Platform.isTV && NativeTVNavigationEventEmitter &&
+    //   NativeTVNavigationEventEmitter.disableTVPanGesture();
+  },
+  enableGestureHandlersCancelTouches: () => {
+    console.warn('TVEventControl.enableGestureHandlersCancelTouches() is not implemented on web.');
+    // Platform.isTV && NativeTVNavigationEventEmitter &&
+    //   NativeTVNavigationEventEmitter.enableGestureHandlersCancelTouches();
+  },
+  disableGestureHandlersCancelTouches: () => {
+    console.warn('TVEventControl.disableGestureHandlersCancelTouches() is not implemented on web.');
+    // Platform.isTV && NativeTVNavigationEventEmitter &&
+    //   NativeTVNavigationEventEmitter.disableGestureHandlersCancelTouches();
+  }
+};
+var _default = exports.default = TVEventControl;
+module.exports = exports.default;

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

@@ -0,0 +1,41 @@
+/**
+ * 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';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.default = void 0;
+var _NativeTVNavigationEventEmitter = _interopRequireDefault(require("./NativeTVNavigationEventEmitter"));
+var _NativeEventEmitter = _interopRequireDefault(require("../NativeEventEmitter"));
+var _Platform = _interopRequireDefault(require("../Platform"));
+var __nativeTVNavigationEventEmitter = null;
+var TVEventHandler = {
+  addListener: callback => {
+    if (_Platform.default.OS === 'ios' && !_NativeTVNavigationEventEmitter.default) {
+      return {
+        remove: () => {}
+      };
+    }
+    if (!__nativeTVNavigationEventEmitter) {
+      __nativeTVNavigationEventEmitter = new _NativeEventEmitter.default(_NativeTVNavigationEventEmitter.default);
+    }
+    var subscription = __nativeTVNavigationEventEmitter.addListener(
+    // $FlowFixMe[prop-missing]
+    'onHWKeyEvent', data => {
+      if (callback) {
+        callback(data);
+      }
+    });
+    return subscription;
+  }
+};
+var _default = exports.default = TVEventHandler;
+module.exports = exports.default;

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

@@ -0,0 +1,36 @@
+/**
+ * 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';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.tvFocusEventHandler = void 0;
+var _Platform = _interopRequireDefault(require("../Platform"));
+var _TVEventHandler = _interopRequireDefault(require("./TVEventHandler"));
+class TVFocusEventHandler {
+  constructor() {
+    this.__subscription = null;
+    this.__callbackMap = new Map();
+    this.__subscription = _TVEventHandler.default.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);
+  }
+}
+var tvFocusEventHandler = exports.tvFocusEventHandler = _Platform.default.isTV ? new TVFocusEventHandler() : null;

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Platform = _interopRequireDefault(require("../Platform"));
+var _useMergeRefs = _interopRequireDefault(require("../../modules/useMergeRefs"));
+var _View = _interopRequireDefault(require("../View"));
+var _SpatialManager = require("../../modules/SpatialManager");
+var _tagForComponentOrHandle = _interopRequireDefault(require("./tagForComponentOrHandle"));
+var _StyleSheet = _interopRequireDefault(require("../StyleSheet"));
+var React = _interopRequireWildcard(require("react"));
+/**
+ * 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 {Commands} from '../View/ViewNativeComponent';
+
+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.default.isTV) {
+      var focusGuideHost = focusGuideRef.current;
+      if (focusGuideHost != null) {
+        var resolvedDestinations = destinations == null ? void 0 : destinations.map(_tagForComponentOrHandle.default);
+        (0, _SpatialManager.setDestinations)(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 = (0, _useMergeRefs.default)(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.default, (0, _extends2.default)({}, 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.default.create({
+  container: {
+    minWidth: 1,
+    minHeight: 1,
+    pointerEvents: 'box-none' // FocusGuides should not handle pointer events.
+  }
+});
+var _default = exports.default = TVFocusGuideView;
+module.exports = exports.default;