@tamagui/react-native-web-lite 1.112.5

package/src/ImageBackground/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 * as React from 'react'
+import { forwardRef } from 'react'
+import { StyleSheet } from '@tamagui/react-native-web-internals'
+
+import type { ImageProps } from '../Image/index'
+import Image from '../Image/index'
+import type { ViewProps } from '../View/index'
+import View from '../View/index'
+
+type ImageBackgroundProps = ImageProps & {
+  imageRef?: any
+  imageStyle?: ImageProps['style']
+  style?: ViewProps['style']
+}
+
+const emptyObject = {}
+
+/**
+ * Very simple drop-in replacement for <Image> which supports nesting views.
+ */
+const ImageBackground = forwardRef<React.ElementRef<typeof View>, ImageBackgroundProps>(
+  (props, forwardedRef) => {
+    const { children, style = emptyObject, imageStyle, imageRef, ...rest } = props
+    const { height, width } = StyleSheet.flatten(style)
+
+    return (
+      <View ref={forwardedRef} style={style}>
+        <Image
+          {...rest}
+          ref={imageRef}
+          style={[
+            {
+              // Temporary Workaround:
+              // Current (imperfect yet) implementation of <Image> overwrites width and height styles
+              // (which is not quite correct), and these styles conflict with explicitly set styles
+              // of <ImageBackground> and with our internal layout model here.
+              // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
+              // This workaround should be removed after implementing proper support of
+              // intrinsic content size of the <Image>.
+              width,
+              height,
+              zIndex: -1,
+            },
+            StyleSheet.absoluteFill,
+            imageStyle,
+          ]}
+        />
+        {children}
+      </View>
+    )
+  }
+)
+
+ImageBackground.displayName = 'ImageBackground'
+
+export default ImageBackground

package/src/Keyboard/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+import { dismissKeyboard } from '@tamagui/react-native-web-internals'
+
+const Keyboard = {
+  addListener(): {
+    remove: () => void
+  } {
+    return { remove: () => {} }
+  },
+  dismiss() {
+    dismissKeyboard()
+  },
+  removeAllListeners() {},
+  removeListener() {},
+}
+
+export default Keyboard

package/src/KeyboardAvoidingView/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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
+ */
+
+import * as React from 'react'
+
+import type { LayoutEvent, LayoutValue } from '../types'
+import type { ViewProps } from '../View/index'
+import View from '../View/index'
+
+type KeyboardAvoidingViewProps = ViewProps & {
+  behavior?: 'height' | 'padding' | 'position'
+  contentContainerStyle?: ViewProps['style']
+  keyboardVerticalOffset: number
+}
+
+class KeyboardAvoidingView extends React.Component<KeyboardAvoidingViewProps> {
+  frame: LayoutValue | null = null
+
+  relativeKeyboardHeight(keyboardFrame: Record<string, any>): number {
+    const frame = this.frame
+    if (!frame || !keyboardFrame) {
+      return 0
+    }
+    const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset || 0)
+    return Math.max(frame.y + frame.height - keyboardY, 0)
+  }
+
+  onKeyboardChange(event: Object) {}
+
+  onLayout: (event: LayoutEvent) => void = (event: LayoutEvent) => {
+    this.frame = event.nativeEvent.layout
+  }
+
+  render(): React.ReactNode {
+    const {
+      /* eslint-disable */
+      behavior,
+      contentContainerStyle,
+      keyboardVerticalOffset,
+      /* eslint-enable */
+      ...rest
+    } = this.props
+
+    return <View onLayout={this.onLayout} {...rest} />
+  }
+}
+
+export default KeyboardAvoidingView

package/src/Linking/__tests__/index-test.tsx

@@ -0,0 +1,37 @@
+/* eslint-env jasmine, jest */
+
+import Linking from '..'
+
+describe('apis/Linking', () => {
+  describe('openURL', () => {
+    test('calls open with a url and target', (done) => {
+      jest.spyOn(window, 'open').mockImplementationOnce((url, target, opener) => {
+        expect(url).toBe('http://foo.com/')
+        expect(target).toBe('target_name')
+        expect(opener).toBe('noopener')
+        done()
+      })
+      Linking.openURL('http://foo.com', 'target_name')
+    })
+
+    test('defaults target to _blank if not provided', (done) => {
+      jest.spyOn(window, 'open').mockImplementationOnce((url, target, opener) => {
+        expect(url).toBe('http://foo.com/')
+        expect(target).toBe('_blank')
+        expect(opener).toBe('noopener')
+        done()
+      })
+      Linking.openURL('http://foo.com')
+    })
+
+    test('accepts undefined as a target', (done) => {
+      jest.spyOn(window, 'open').mockImplementationOnce((url, target, opener) => {
+        expect(url).toBe('http://foo.com/')
+        expect(target).toBe(undefined)
+        expect(opener).toBe('noopener')
+        done()
+      })
+      Linking.openURL('http://foo.com', undefined)
+    })
+  })
+})

package/src/Linking/index.tsx

@@ -0,0 +1,112 @@
+/**
+ * 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
+ */
+
+import { canUseDOM, invariant } from '@tamagui/react-native-web-internals'
+
+const initialURL = canUseDOM ? window.location.href : ''
+
+type Callback = (...args: any) => void
+
+type OnOpenCallback = (event: 'onOpen', callback: (url: string) => void) => void
+type GenericCallback = (event: string, callback: Callback) => void
+
+class Linking {
+  /**
+   * An object mapping of event name
+   * and all the callbacks subscribing to it
+   */
+  _eventCallbacks: { [key: string]: Array<Callback> } = {}
+
+  _dispatchEvent(event: string, ...data: any) {
+    const listeners = this._eventCallbacks[event]
+    if (listeners != null && Array.isArray(listeners)) {
+      listeners.map((listener) => {
+        listener(...data)
+      })
+    }
+  }
+
+  /**
+   * Adds a event listener for the specified event. The callback will be called when the
+   * said event is dispatched.
+   */
+  addEventListener: OnOpenCallback | GenericCallback = (
+    event: string,
+    callback: Callback
+  ) => {
+    if (!this._eventCallbacks[event]) {
+      this._eventCallbacks[event] = [callback]
+      return
+    }
+    this._eventCallbacks[event].push(callback)
+  }
+
+  /**
+   * Removes a previously added event listener for the specified event. The callback must
+   * be the same object as the one passed to `addEventListener`.
+   */
+  removeEventListener: OnOpenCallback | GenericCallback = (
+    event: string,
+    callback: Callback
+  ) => {
+    const callbacks = this._eventCallbacks[event]
+    const filteredCallbacks = callbacks.filter(
+      (c) => c.toString() !== callback.toString()
+    )
+    this._eventCallbacks[event] = filteredCallbacks
+  }
+
+  canOpenURL(): Promise<boolean> {
+    return Promise.resolve(true)
+  }
+
+  getInitialURL(): Promise<string> {
+    return Promise.resolve(initialURL)
+  }
+
+  /**
+   * Try to open the given url in a secure fashion. The method returns a Promise object.
+   * If a target is passed (including undefined) that target will be used, otherwise '_blank'.
+   * If the url opens, the promise is resolved. If not, the promise is rejected.
+   * Dispatches the `onOpen` event if `url` is opened successfully.
+   */
+  openURL(url: string, target?: string): Promise<Object | void> {
+    if (arguments.length === 1) {
+      target = '_blank'
+    }
+    try {
+      open(url, target)
+      this._dispatchEvent('onOpen', url)
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  _validateURL(url: string) {
+    invariant(typeof url === 'string', 'Invalid URL: should be a string. Was: ' + url)
+    invariant(url, 'Invalid URL: cannot be empty')
+  }
+}
+
+const open = (url, target) => {
+  if (canUseDOM) {
+    // @ts-ignore
+    const urlToOpen = new URL(url, window.location).toString()
+    if (urlToOpen.indexOf('tel:') === 0) {
+      // @ts-ignore
+      window.location = urlToOpen
+    } else {
+      window.open(urlToOpen, target, 'noopener')
+    }
+  }
+}
+
+export default new Linking()

package/src/LogBox/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2016-present, 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 LogBox = {
+  ignoreLogs() {},
+  ignoreAllLogs() {},
+  uninstall() {},
+  install() {},
+}
+
+export default LogBox

package/src/Modal/ModalAnimation.js

@@ -0,0 +1,179 @@
+/**
+ * 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.
+ *
+ *
+ */
+import * as React from 'react'
+import { StyleSheet } from '@tamagui/react-native-web-internals'
+
+import createElement from '../createElement/index'
+
+var ANIMATION_DURATION = 300
+
+function getAnimationStyle(animationType, visible) {
+  if (animationType === 'slide') {
+    return visible ? animatedSlideInStyles : animatedSlideOutStyles
+  }
+
+  if (animationType === 'fade') {
+    return visible ? animatedFadeInStyles : animatedFadeOutStyles
+  }
+
+  return visible ? styles.container : styles.hidden
+}
+
+function ModalAnimation(props) {
+  var animationType = props.animationType,
+    children = props.children,
+    onDismiss = props.onDismiss,
+    onShow = props.onShow,
+    visible = props.visible
+
+  var _React$useState = React.useState(false),
+    isRendering = _React$useState[0],
+    setIsRendering = _React$useState[1]
+
+  var wasVisible = React.useRef(false)
+  var isAnimated = animationType && animationType !== 'none'
+  var animationEndCallback = React.useCallback(
+    (e) => {
+      if (e && e.currentTarget !== e.target) {
+        // If the event was generated for something NOT this element we
+        // should ignore it as it's not relevant to us
+        return
+      }
+
+      if (visible) {
+        if (onShow) {
+          onShow()
+        }
+      } else {
+        setIsRendering(false)
+
+        if (onDismiss) {
+          onDismiss()
+        }
+      }
+    },
+    [onDismiss, onShow, visible]
+  )
+  React.useEffect(() => {
+    if (visible) {
+      setIsRendering(true)
+    }
+
+    if (visible !== wasVisible.current && !isAnimated) {
+      // Manually call `animationEndCallback` if no animation is used
+      animationEndCallback()
+    }
+
+    wasVisible.current = visible
+  }, [isAnimated, visible, animationEndCallback])
+  return isRendering || visible
+    ? createElement('div', {
+        style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
+        onAnimationEnd: animationEndCallback,
+        children,
+      })
+    : null
+}
+
+var styles = StyleSheet.create({
+  container: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 9999,
+  },
+  animatedIn: {
+    animationDuration: ANIMATION_DURATION + 'ms',
+    animationTimingFunction: 'ease-in',
+  },
+  animatedOut: {
+    pointerEvents: 'none',
+    animationDuration: ANIMATION_DURATION + 'ms',
+    animationTimingFunction: 'ease-out',
+  },
+  fadeIn: {
+    opacity: 1,
+    animationKeyframes: {
+      '0%': {
+        opacity: 0,
+      },
+      '100%': {
+        opacity: 1,
+      },
+    },
+  },
+  fadeOut: {
+    opacity: 0,
+    animationKeyframes: {
+      '0%': {
+        opacity: 1,
+      },
+      '100%': {
+        opacity: 0,
+      },
+    },
+  },
+  slideIn: {
+    transform: [
+      {
+        translateY: '0%',
+      },
+    ],
+    animationKeyframes: {
+      '0%': {
+        transform: [
+          {
+            translateY: '100%',
+          },
+        ],
+      },
+      '100%': {
+        transform: [
+          {
+            translateY: '0%',
+          },
+        ],
+      },
+    },
+  },
+  slideOut: {
+    transform: [
+      {
+        translateY: '100%',
+      },
+    ],
+    animationKeyframes: {
+      '0%': {
+        transform: [
+          {
+            translateY: '0%',
+          },
+        ],
+      },
+      '100%': {
+        transform: [
+          {
+            translateY: '100%',
+          },
+        ],
+      },
+    },
+  },
+  hidden: {
+    opacity: 0,
+  },
+})
+var animatedSlideInStyles = [styles.container, styles.animatedIn, styles.slideIn]
+var animatedSlideOutStyles = [styles.container, styles.animatedOut, styles.slideOut]
+var animatedFadeInStyles = [styles.container, styles.animatedIn, styles.fadeIn]
+var animatedFadeOutStyles = [styles.container, styles.animatedOut, styles.fadeOut]
+export default ModalAnimation

package/src/Modal/ModalContent.js

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ *
+ */
+import * as React from 'react'
+import { StyleSheet, canUseDOM } from '@tamagui/react-native-web-internals'
+
+import View from '../View'
+
+var ModalContent = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
+  const { active, children, onRequestClose, transparent, ...rest } = props
+
+  React.useEffect(() => {
+    if (canUseDOM) {
+      var closeOnEscape = (e) => {
+        if (active && e.key === 'Escape') {
+          e.stopPropagation()
+
+          if (onRequestClose) {
+            onRequestClose()
+          }
+        }
+      }
+
+      document.addEventListener('keyup', closeOnEscape, false)
+      return () => document.removeEventListener('keyup', closeOnEscape, false)
+    }
+  }, [active, onRequestClose])
+  var style = React.useMemo(() => {
+    return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque]
+  }, [transparent])
+  return /*#__PURE__*/ React.createElement(
+    View,
+    {
+      ...rest,
+      accessibilityModal: true,
+      accessibilityRole: active ? 'dialog' : null,
+      ref: forwardedRef,
+      style: style,
+    },
+    /*#__PURE__*/ React.createElement(
+      View,
+      {
+        style: styles.container,
+      },
+      children
+    )
+  )
+})
+var styles = StyleSheet.create({
+  modal: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  modalTransparent: {
+    backgroundColor: 'transparent',
+  },
+  modalOpaque: {
+    backgroundColor: 'white',
+  },
+  container: {
+    top: 0,
+    flex: 1,
+  },
+})
+export default ModalContent