@depup/react-native-web 0.21.2-depup.0

package/dist/exports/Switch/index.js

@@ -0,0 +1,188 @@
+/**
+ * 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';
+
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["aria-label", "accessibilityLabel", "activeThumbColor", "activeTrackColor", "disabled", "onValueChange", "style", "thumbColor", "trackColor", "value"];
+import * as React from 'react';
+import createElement from '../createElement';
+import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+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 = _objectWithoutPropertiesLoose(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.flatten(style),
+    styleHeight = _StyleSheet$flatten.height,
+    styleWidth = _StyleSheet$flatten.width;
+  var height = styleHeight || '20px';
+  var minWidth = multiplyStyleLengthValue(height, 2);
+  var width = styleWidth > minWidth ? styleWidth : minWidth;
+  var trackBorderRadius = multiplyStyleLengthValue(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 ? multiplyStyleLengthValue(thumbWidth, -1) : 0,
+    width: thumbWidth
+  }];
+  var 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 /*#__PURE__*/React.createElement(View, _extends({}, other, {
+    style: rootStyle
+  }), /*#__PURE__*/React.createElement(View, {
+    style: trackStyle
+  }), /*#__PURE__*/React.createElement(View, {
+    ref: thumbRef,
+    style: thumbStyle
+  }), nativeControl);
+});
+Switch.displayName = 'Switch';
+var styles = StyleSheet.create({
+  root: {
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  cursorDefault: {
+    cursor: 'default'
+  },
+  cursorInherit: {
+    cursor: 'inherit'
+  },
+  track: _objectSpread(_objectSpread({
+    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: _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+    height: '100%',
+    margin: 0,
+    appearance: 'none',
+    padding: 0,
+    width: '100%'
+  })
+});
+export default Switch;

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

@@ -0,0 +1,187 @@
+/**
+ * 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);
+  declare function handleChange(event: Object): any;
+  declare function handleFocusState(event: Object): any;
+  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;

package/dist/exports/Text/TextAncestorContext.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ * 
+ */
+
+'use client';
+
+import { createContext } from 'react';
+var TextAncestorContext = /*#__PURE__*/createContext(false);
+export default TextAncestorContext;

package/dist/exports/Text/TextAncestorContext.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+'use client';
+
+import type { Context } from 'react';
+import { createContext } from 'react';
+const TextAncestorContext = createContext(false);
+export default (TextAncestorContext: Context<boolean>);

package/dist/exports/Text/index.js

@@ -0,0 +1,193 @@
+/**
+ * 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.
+ *
+ * 
+ */
+
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["hrefAttrs", "numberOfLines", "onClick", "onLayout", "onPress", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture", "selectable"];
+import * as React from 'react';
+import createElement from '../createElement';
+import * as forwardedProps from '../../modules/forwardedProps';
+import pick from '../../modules/pick';
+import useElementLayout from '../../modules/useElementLayout';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePlatformMethods from '../../modules/usePlatformMethods';
+import useResponderEvents from '../../modules/useResponderEvents';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from './TextAncestorContext';
+import { useLocaleContext, getLocaleDirection } from '../../modules/useLocale';
+//import { warnOnce } from '../../modules/warnOnce';
+
+var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, {
+  href: true,
+  lang: true,
+  pointerEvents: true
+});
+var pickProps = props => pick(props, forwardPropsList);
+var Text = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  var hrefAttrs = props.hrefAttrs,
+    numberOfLines = props.numberOfLines,
+    onClick = props.onClick,
+    onLayout = props.onLayout,
+    onPress = props.onPress,
+    onMoveShouldSetResponder = props.onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture = props.onMoveShouldSetResponderCapture,
+    onResponderEnd = props.onResponderEnd,
+    onResponderGrant = props.onResponderGrant,
+    onResponderMove = props.onResponderMove,
+    onResponderReject = props.onResponderReject,
+    onResponderRelease = props.onResponderRelease,
+    onResponderStart = props.onResponderStart,
+    onResponderTerminate = props.onResponderTerminate,
+    onResponderTerminationRequest = props.onResponderTerminationRequest,
+    onScrollShouldSetResponder = props.onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture = props.onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder = props.onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture = props.onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder = props.onStartShouldSetResponder,
+    onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture,
+    selectable = props.selectable,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  /*
+  if (selectable != null) {
+    warnOnce(
+      'selectable',
+      'selectable prop is deprecated. Use styles.userSelect.'
+    );
+  }
+  */
+
+  var hasTextAncestor = React.useContext(TextAncestorContext);
+  var hostRef = React.useRef(null);
+  var _useLocaleContext = useLocaleContext(),
+    contextDirection = _useLocaleContext.direction;
+  useElementLayout(hostRef, onLayout);
+  useResponderEvents(hostRef, {
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture
+  });
+  var handleClick = React.useCallback(e => {
+    if (onClick != null) {
+      onClick(e);
+    } else if (onPress != null) {
+      e.stopPropagation();
+      onPress(e);
+    }
+  }, [onClick, onPress]);
+  var component = hasTextAncestor ? 'span' : 'div';
+  var langDirection = props.lang != null ? getLocaleDirection(props.lang) : null;
+  var componentDirection = props.dir || langDirection;
+  var writingDirection = componentDirection || contextDirection;
+  var supportedProps = pickProps(rest);
+  supportedProps.dir = componentDirection;
+  // 'auto' by default allows browsers to infer writing direction (root elements only)
+  if (!hasTextAncestor) {
+    supportedProps.dir = componentDirection != null ? componentDirection : 'auto';
+  }
+  if (onClick || onPress) {
+    supportedProps.onClick = handleClick;
+  }
+  supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
+    WebkitLineClamp: numberOfLines
+  }, hasTextAncestor === true ? styles.textHasAncestor$raw : styles.text$raw, numberOfLines === 1 && styles.textOneLine, numberOfLines != null && numberOfLines > 1 && styles.textMultiLine, props.style, selectable === true && styles.selectable, selectable === false && styles.notSelectable, onPress && styles.pressable];
+  if (props.href != null) {
+    component = 'a';
+    if (hrefAttrs != null) {
+      var download = hrefAttrs.download,
+        rel = hrefAttrs.rel,
+        target = hrefAttrs.target;
+      if (download != null) {
+        supportedProps.download = download;
+      }
+      if (rel != null) {
+        supportedProps.rel = rel;
+      }
+      if (typeof target === 'string') {
+        supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target;
+      }
+    }
+  }
+  var platformMethodsRef = usePlatformMethods(supportedProps);
+  var setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+  supportedProps.ref = setRef;
+  var element = createElement(component, supportedProps, {
+    writingDirection
+  });
+  return hasTextAncestor ? element : /*#__PURE__*/React.createElement(TextAncestorContext.Provider, {
+    value: true
+  }, element);
+});
+Text.displayName = 'Text';
+var textStyle = {
+  backgroundColor: 'transparent',
+  border: '0 solid black',
+  boxSizing: 'border-box',
+  color: 'black',
+  display: 'inline',
+  font: '14px System',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  textAlign: 'start',
+  textDecoration: 'none',
+  whiteSpace: 'pre-wrap',
+  wordWrap: 'break-word'
+};
+var styles = StyleSheet.create({
+  text$raw: textStyle,
+  textHasAncestor$raw: _objectSpread(_objectSpread({}, textStyle), {}, {
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'inherit',
+    whiteSpace: 'inherit'
+  }),
+  textOneLine: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal'
+  },
+  // See #13
+  textMultiLine: {
+    display: '-webkit-box',
+    maxWidth: '100%',
+    overflow: 'clip',
+    textOverflow: 'ellipsis',
+    WebkitBoxOrient: 'vertical'
+  },
+  notSelectable: {
+    userSelect: 'none'
+  },
+  selectable: {
+    userSelect: 'text'
+  },
+  pressable: {
+    cursor: 'pointer'
+  }
+});
+export default Text;