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

package/src/exports/StyleSheet/preprocess.js

@@ -0,0 +1,255 @@
+/**
+ * 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 normalizeColor from './compiler/normalizeColor';
+import normalizeValueWithProperty from './compiler/normalizeValueWithProperty';
+import { warnOnce } from '../../modules/warnOnce';
+
+const emptyObject = {};
+
+/**
+ * Shadows
+ */
+
+const defaultOffset = { height: 0, width: 0 };
+
+export const createBoxShadowValue = (style: Object): void | string => {
+  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+  const { height, width } = shadowOffset || defaultOffset;
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
+  const color = normalizeColor(shadowColor || 'black', shadowOpacity);
+  if (
+    color != null &&
+    offsetX != null &&
+    offsetY != null &&
+    blurRadius != null
+  ) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+};
+
+export const createTextShadowValue = (style: Object): void | string => {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+  const { height, width } = textShadowOffset || defaultOffset;
+  const radius = textShadowRadius || 0;
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(radius);
+  const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor');
+
+  if (
+    color &&
+    (height !== 0 || width !== 0 || radius !== 0) &&
+    offsetX != null &&
+    offsetY != null &&
+    blurRadius != null
+  ) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+};
+
+// { offsetX: 1, offsetY: 2, blurRadius: 3, spreadDistance: 4, color: 'rgba(255, 0, 0)', inset: true }
+// => 'rgba(255, 0, 0) 1px 2px 3px 4px inset'
+const mapBoxShadow = (boxShadow: Object | string): string => {
+  if (typeof boxShadow === 'string') {
+    return boxShadow;
+  }
+  const offsetX = normalizeValueWithProperty(boxShadow.offsetX) || 0;
+  const offsetY = normalizeValueWithProperty(boxShadow.offsetY) || 0;
+  const blurRadius = normalizeValueWithProperty(boxShadow.blurRadius) || 0;
+  const spreadDistance =
+    normalizeValueWithProperty(boxShadow.spreadDistance) || 0;
+  const color = normalizeColor(boxShadow.color) || 'black';
+  const position = boxShadow.inset ? 'inset ' : '';
+  return `${position}${offsetX} ${offsetY} ${blurRadius} ${spreadDistance} ${color}`;
+};
+export const createBoxShadowArrayValue = (value: Array<Object>): string => {
+  return value.map(mapBoxShadow).join(', ');
+};
+
+// { scale: 2 } => 'scale(2)'
+// { translateX: 20 } => 'translateX(20px)'
+// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+const mapTransform = (transform: Object): string => {
+  const type = Object.keys(transform)[0];
+  const value = transform[type];
+  if (type === 'matrix' || type === 'matrix3d') {
+    return `${type}(${value.join(',')})`;
+  } else {
+    const normalizedValue = normalizeValueWithProperty(value, type);
+    return `${type}(${normalizedValue})`;
+  }
+};
+export const createTransformValue = (value: Array<Object>): string => {
+  return value.map(mapTransform).join(' ');
+};
+
+// [2, '30%', 10] => '2px 30% 10px'
+export const createTransformOriginValue = (
+  value: Array<number | string>
+): string => {
+  return value.map((v) => normalizeValueWithProperty(v)).join(' ');
+};
+
+const PROPERTIES_STANDARD: { [key: string]: string } = {
+  borderBottomEndRadius: 'borderEndEndRadius',
+  borderBottomStartRadius: 'borderEndStartRadius',
+  borderTopEndRadius: 'borderStartEndRadius',
+  borderTopStartRadius: 'borderStartStartRadius',
+  borderEndColor: 'borderInlineEndColor',
+  borderEndStyle: 'borderInlineEndStyle',
+  borderEndWidth: 'borderInlineEndWidth',
+  borderStartColor: 'borderInlineStartColor',
+  borderStartStyle: 'borderInlineStartStyle',
+  borderStartWidth: 'borderInlineStartWidth',
+  end: 'insetInlineEnd',
+  marginEnd: 'marginInlineEnd',
+  marginHorizontal: 'marginInline',
+  marginStart: 'marginInlineStart',
+  marginVertical: 'marginBlock',
+  paddingEnd: 'paddingInlineEnd',
+  paddingHorizontal: 'paddingInline',
+  paddingStart: 'paddingInlineStart',
+  paddingVertical: 'paddingBlock',
+  start: 'insetInlineStart'
+};
+
+const ignoredProps = {
+  elevation: true,
+  overlayColor: true,
+  resizeMode: true,
+  tintColor: true
+};
+
+/**
+ * Preprocess styles
+ */
+export const preprocess = <T: {| [key: string]: any |}>(
+  originalStyle: T,
+  options?: { shadow?: boolean, textShadow?: boolean } = {}
+): T => {
+  const style = originalStyle || emptyObject;
+  const nextStyle = {};
+
+  // Convert shadow styles
+  if (
+    (options.shadow === true,
+    style.shadowColor != null ||
+      style.shadowOffset != null ||
+      style.shadowOpacity != null ||
+      style.shadowRadius != null)
+  ) {
+    warnOnce(
+      'shadowStyles',
+      `"shadow*" style props are deprecated. Use "boxShadow".`
+    );
+    const boxShadowValue = createBoxShadowValue(style);
+    if (boxShadowValue != null) {
+      nextStyle.boxShadow = boxShadowValue;
+    }
+  }
+
+  // Convert text shadow styles
+  if (
+    (options.textShadow === true,
+    style.textShadowColor != null ||
+      style.textShadowOffset != null ||
+      style.textShadowRadius != null)
+  ) {
+    warnOnce(
+      'textShadowStyles',
+      `"textShadow*" style props are deprecated. Use "textShadow".`
+    );
+    const textShadowValue = createTextShadowValue(style);
+    if (textShadowValue != null && nextStyle.textShadow == null) {
+      const { textShadow } = style;
+      const value = textShadow
+        ? `${textShadow}, ${textShadowValue}`
+        : textShadowValue;
+      nextStyle.textShadow = value;
+    }
+  }
+
+  for (const originalProp in style) {
+    if (
+      // Ignore some React Native styles
+      ignoredProps[originalProp] != null ||
+      originalProp === 'shadowColor' ||
+      originalProp === 'shadowOffset' ||
+      originalProp === 'shadowOpacity' ||
+      originalProp === 'shadowRadius' ||
+      originalProp === 'textShadowColor' ||
+      originalProp === 'textShadowOffset' ||
+      originalProp === 'textShadowRadius'
+    ) {
+      continue;
+    }
+
+    const originalValue = style[originalProp];
+    const prop = PROPERTIES_STANDARD[originalProp] || originalProp;
+    let value = originalValue;
+
+    if (
+      !Object.prototype.hasOwnProperty.call(style, originalProp) ||
+      (prop !== originalProp && style[prop] != null)
+    ) {
+      continue;
+    }
+
+    if (prop === 'aspectRatio' && typeof value === 'number') {
+      nextStyle[prop] = value.toString();
+    } else if (prop === 'boxShadow') {
+      if (Array.isArray(value)) {
+        value = createBoxShadowArrayValue(value);
+      }
+      const { boxShadow } = nextStyle;
+      nextStyle.boxShadow = boxShadow ? `${value}, ${boxShadow}` : value;
+    } else if (prop === 'fontVariant') {
+      if (Array.isArray(value) && value.length > 0) {
+        /*
+        warnOnce(
+          'fontVariant',
+          '"fontVariant" style array value is deprecated. Use space-separated values.'
+        );
+        */
+        value = value.join(' ');
+      }
+      nextStyle[prop] = value;
+    } else if (prop === 'textAlignVertical') {
+      /*
+      warnOnce(
+        'textAlignVertical',
+        '"textAlignVertical" style is deprecated. Use "verticalAlign".'
+      );
+      */
+      if (style.verticalAlign == null) {
+        nextStyle.verticalAlign = value === 'center' ? 'middle' : value;
+      }
+    } else if (prop === 'transform') {
+      if (Array.isArray(value)) {
+        value = createTransformValue(value);
+      }
+      nextStyle.transform = value;
+    } else if (prop === 'transformOrigin') {
+      if (Array.isArray(value)) {
+        value = createTransformOriginValue(value);
+      }
+      nextStyle.transformOrigin = value;
+    } else {
+      nextStyle[prop] = value;
+    }
+  }
+
+  // $FlowIgnore
+  return nextStyle;
+};
+
+export default preprocess;

package/src/exports/StyleSheet/validate.js

@@ -0,0 +1,93 @@
+/**
+ * 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
+ */
+
+import valueParser from 'postcss-value-parser';
+
+const invalidShortforms = {
+  background: true,
+  borderBottom: true,
+  borderLeft: true,
+  borderRight: true,
+  borderTop: true,
+  font: true,
+  grid: true,
+  outline: true,
+  textDecoration: true
+};
+
+const 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);
+}
+
+export function validate(obj: Object) {
+  for (const k in obj) {
+    const prop = k.trim();
+    const value = obj[prop];
+    let 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 {
+      let 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' && valueParser(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/src/exports/Switch/index.js

@@ -0,0 +1,236 @@
+/**
+ * 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 type { ColorValue } from '../../types';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import createElement from '../createElement';
+import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+
+type SwitchProps = {
+  ...ViewProps,
+  activeThumbColor?: ColorValue,
+  activeTrackColor?: ColorValue,
+  disabled?: boolean,
+  onValueChange?: (e: any) => void,
+  thumbColor?: ColorValue,
+  trackColor?: ColorValue | {| false: ColorValue, true: ColorValue |},
+  value?: boolean
+};
+
+const emptyObject = {};
+const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)';
+const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`;
+
+const defaultActiveTrackColor = '#A3D3CF';
+const defaultTrackColor = '#939393';
+const defaultDisabledTrackColor = '#D5D5D5';
+
+const defaultActiveThumbColor = '#009688';
+const defaultThumbColor = '#FAFAFA';
+const defaultDisabledThumbColor = '#BDBDBD';
+
+const Switch: React.AbstractComponent<
+  SwitchProps,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    'aria-label': ariaLabel,
+    accessibilityLabel,
+    activeThumbColor,
+    activeTrackColor,
+    disabled = false,
+    onValueChange,
+    style = emptyObject,
+    thumbColor,
+    trackColor,
+    value = false,
+    ...other
+  } = props;
+
+  const thumbRef = React.useRef(null);
+
+  function handleChange(event: Object) {
+    if (onValueChange != null) {
+      onValueChange(event.nativeEvent.target.checked);
+    }
+  }
+
+  function handleFocusState(event: Object) {
+    const isFocused = event.nativeEvent.type === 'focus';
+    const boxShadow = isFocused ? thumbFocusedBoxShadow : thumbDefaultBoxShadow;
+    if (thumbRef.current != null) {
+      thumbRef.current.style.boxShadow = boxShadow;
+    }
+  }
+
+  const { height: styleHeight, width: styleWidth } = StyleSheet.flatten(style);
+  const height = styleHeight || '20px';
+  const minWidth = multiplyStyleLengthValue(height, 2);
+  const width = styleWidth > minWidth ? styleWidth : minWidth;
+  const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
+
+  const trackCurrentColor = (function () {
+    if (value === true) {
+      if (trackColor != null && typeof trackColor === 'object') {
+        return trackColor.true;
+      } else {
+        return activeTrackColor ?? defaultActiveTrackColor;
+      }
+    } else {
+      if (trackColor != null && typeof trackColor === 'object') {
+        return trackColor.false;
+      } else {
+        return trackColor ?? defaultTrackColor;
+      }
+    }
+  })();
+
+  const thumbCurrentColor = value
+    ? activeThumbColor ?? defaultActiveThumbColor
+    : thumbColor ?? defaultThumbColor;
+
+  const thumbHeight = height;
+  const thumbWidth = thumbHeight;
+
+  const rootStyle = [
+    styles.root,
+    style,
+    disabled && styles.cursorDefault,
+    { height, width }
+  ];
+
+  const disabledTrackColor = (function () {
+    if (value === true) {
+      if (
+        (typeof activeTrackColor === 'string' && activeTrackColor != null) ||
+        (typeof trackColor === 'object' && trackColor?.true)
+      ) {
+        return trackCurrentColor;
+      } else {
+        return defaultDisabledTrackColor;
+      }
+    } else {
+      if (
+        (typeof trackColor === 'string' && trackColor != null) ||
+        (typeof trackColor === 'object' && trackColor?.false)
+      ) {
+        return trackCurrentColor;
+      } else {
+        return defaultDisabledTrackColor;
+      }
+    }
+  })();
+
+  const disabledThumbColor = (function () {
+    if (value === true) {
+      if (activeThumbColor == null) {
+        return defaultDisabledThumbColor;
+      } else {
+        return thumbCurrentColor;
+      }
+    } else {
+      if (thumbColor == null) {
+        return defaultDisabledThumbColor;
+      } else {
+        return thumbCurrentColor;
+      }
+    }
+  })();
+
+  const trackStyle = [
+    styles.track,
+    {
+      backgroundColor: disabled ? disabledTrackColor : trackCurrentColor,
+      borderRadius: trackBorderRadius
+    }
+  ];
+
+  const thumbStyle = [
+    styles.thumb,
+    value && styles.thumbActive,
+    {
+      backgroundColor: disabled ? disabledThumbColor : thumbCurrentColor,
+      height: thumbHeight,
+      marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0,
+      width: thumbWidth
+    }
+  ];
+
+  const nativeControl = createElement('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 (
+    <View {...other} style={rootStyle}>
+      <View style={trackStyle} />
+      <View ref={thumbRef} style={thumbStyle} />
+      {nativeControl}
+    </View>
+  );
+});
+
+Switch.displayName = 'Switch';
+
+const styles = StyleSheet.create({
+  root: {
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  cursorDefault: {
+    cursor: 'default'
+  },
+  cursorInherit: {
+    cursor: 'inherit'
+  },
+  track: {
+    forcedColorAdjust: 'none',
+    ...StyleSheet.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: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    margin: 0,
+    appearance: 'none',
+    padding: 0,
+    width: '100%'
+  }
+});
+
+export default Switch;