@hanzogui/react-native-web-lite 2.0.0

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

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ */
+
+import { render } from '@testing-library/react'
+import { createEventTarget } from 'dom-event-testing-library'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+
+import ActivityIndicator from '..'
+
+describe('components/ActivityIndicator', () => {
+  describe('prop "accessibilityLabel"', () => {
+    test('value is set', () => {
+      const { container } = render(
+        <ActivityIndicator accessibilityLabel="accessibility label" />
+      )
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "accessibilityLiveRegion"', () => {
+    test('value is set', () => {
+      const { container } = render(<ActivityIndicator accessibilityLiveRegion="polite" />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "animating"', () => {
+    test('is "true"', () => {
+      const { container } = render(<ActivityIndicator animating={true} />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+
+    test('is "false"', () => {
+      const { container } = render(<ActivityIndicator animating={false} />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  test('prop "color"', () => {
+    const { container } = render(<ActivityIndicator color="red" />)
+    const svg = container.firstChild.querySelector('svg')
+    expect(svg).toMatchSnapshot()
+  })
+
+  describe('prop "dataSet"', () => {
+    test('value is set', () => {
+      const { container } = render(
+        <ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />
+      )
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "hidesWhenStopped"', () => {
+    test('is "true"', () => {
+      const { container } = render(
+        <ActivityIndicator animating={false} hidesWhenStopped={true} />
+      )
+      expect(container.firstChild).toMatchSnapshot()
+    })
+
+    test('is "false"', () => {
+      const { container } = render(
+        <ActivityIndicator animating={false} hidesWhenStopped={false} />
+      )
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "nativeID"', () => {
+    test('value is set', () => {
+      const { container } = render(<ActivityIndicator nativeID="123" />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "onBlur"', () => {
+    test('is called', () => {
+      const onBlur = jest.fn()
+      const ref = React.createRef()
+      act(() => {
+        render(<ActivityIndicator onBlur={onBlur} ref={ref} />)
+      })
+      const target = createEventTarget(ref.current)
+      const body = createEventTarget(document.body)
+      act(() => {
+        target.focus()
+        body.focus({ relatedTarget: target.node })
+      })
+      expect(onBlur).toBeCalled()
+    })
+  })
+
+  describe('prop "onFocus"', () => {
+    test('is called', () => {
+      const onFocus = jest.fn()
+      const ref = React.createRef()
+      act(() => {
+        render(<ActivityIndicator onFocus={onFocus} ref={ref} />)
+      })
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.focus()
+      })
+      expect(onFocus).toBeCalled()
+    })
+  })
+
+  describe('prop "ref"', () => {
+    test('value is set', () => {
+      const ref = jest.fn()
+      render(<ActivityIndicator ref={ref} />)
+      expect(ref).toBeCalled()
+    })
+  })
+
+  describe('prop "size"', () => {
+    test('is "large"', () => {
+      const { container } = render(<ActivityIndicator size="large" />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+
+    test('is a number', () => {
+      const { container } = render(<ActivityIndicator size={30} />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "style"', () => {
+    test('value is set', () => {
+      const { container } = render(<ActivityIndicator style={{ borderWidth: 5 }} />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+
+  describe('prop "testID"', () => {
+    test('value is set', () => {
+      const { container } = render(<ActivityIndicator testID="123" />)
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+})

package/src/ActivityIndicator/index.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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 { StyleSheet } from '@hanzogui/react-native-web-internals'
+
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+const createSvgCircle = (style) => (
+  <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
+)
+
+type ActivityIndicatorProps = ViewProps & {
+  animating?: boolean
+  color?: string | null
+  hidesWhenStopped?: boolean
+  size?: 'small' | 'large' | number
+}
+
+const ActivityIndicator = React.forwardRef<any, ActivityIndicatorProps>(
+  (props, forwardedRef) => {
+    const {
+      animating = true,
+      color = '#1976D2',
+      hidesWhenStopped = true,
+      size = 'small',
+      style,
+      ...other
+    } = props
+
+    const svg = (
+      <svg height="100%" viewBox="0 0 32 32" width="100%">
+        {createSvgCircle({
+          stroke: color,
+          opacity: 0.2,
+        })}
+        {createSvgCircle({
+          stroke: color,
+          strokeDasharray: 80,
+          strokeDashoffset: 60,
+        })}
+      </svg>
+    )
+
+    return (
+      <View
+        {...other}
+        accessibilityRole="progressbar"
+        accessibilityValueMax={1}
+        accessibilityValueMin={0}
+        ref={forwardedRef}
+        style={[styles.container, style]}
+      >
+        <View
+          children={svg}
+          style={[
+            typeof size === 'number'
+              ? { height: size, width: size }
+              : indicatorSizes[size],
+            styles.animation,
+            !animating && styles.animationPause,
+            !animating && hidesWhenStopped && styles.hidesWhenStopped,
+          ]}
+        />
+      </View>
+    )
+  }
+)
+
+ActivityIndicator.displayName = 'ActivityIndicator'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  hidesWhenStopped: {
+    visibility: 'hidden',
+  },
+  animation: {
+    animationDuration: '0.75s',
+    animationKeyframes: [
+      {
+        '0%': { transform: [{ rotate: '0deg' }] },
+        '100%': { transform: [{ rotate: '360deg' }] },
+      },
+    ],
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+  },
+  animationPause: {
+    animationPlayState: 'paused',
+  },
+})
+
+const indicatorSizes = StyleSheet.create({
+  small: {
+    width: 20,
+    height: 20,
+  },
+  large: {
+    width: 36,
+    height: 36,
+  },
+})
+
+export { ActivityIndicator }
+export default ActivityIndicator

package/src/Alert/index.tsx

@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+
+export class Alert {
+  static alert() {}
+}

package/src/AppRegistry/AppContainer.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 { StyleSheet } from '@hanzogui/react-native-web-internals'
+
+import { View } from '../View/index'
+
+type Props = {
+  WrapperComponent?: React.FunctionComponent<any> | null
+  children?: React.ReactNode
+  rootTag: any
+}
+
+export const RootTagContext: React.Context<any> = React.createContext(null)
+
+const AppContainer = React.forwardRef((props: Props, forwardedRef?: React.Ref<any>) => {
+  const { children, WrapperComponent } = props
+
+  let innerView = (
+    <View key={1} pointerEvents="box-none" style={styles.appContainer}>
+      {children}
+    </View>
+  )
+
+  if (WrapperComponent) {
+    innerView = <WrapperComponent>{innerView}</WrapperComponent>
+  }
+
+  return (
+    <RootTagContext.Provider value={props.rootTag}>
+      <View pointerEvents="box-none" ref={forwardedRef} style={styles.appContainer}>
+        {innerView}
+      </View>
+    </RootTagContext.Provider>
+  )
+})
+
+AppContainer.displayName = 'AppContainer'
+
+const styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+  },
+})
+
+export { AppContainer }

package/src/AppRegistry/__tests__/index-test.node.tsx

@@ -0,0 +1,144 @@
+/**
+ * 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.
+ */
+
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import StyleSheet from '../../StyleSheet/index'
+import View from '../../View'
+import AppRegistry from '..'
+
+const NoopComponent = () => React.createElement('div')
+
+describe('AppRegistry', () => {
+  describe('getApplication', () => {
+    test('does not throw when missing appParameters', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      expect(() => AppRegistry.getApplication('App')).not.toThrow()
+    })
+
+    test('returns "element" and "getStyleElement"', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      const { element, getStyleElement } = AppRegistry.getApplication('App', {})
+      const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement())
+
+      expect(element).toMatchInlineSnapshot(`
+        <AppContainer
+          rootTag={{}}
+        >
+          <NoopComponent />
+        </AppContainer>
+      `)
+      expect(styleElement).toMatchInlineSnapshot(`
+        "<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}</style>"
+      `)
+    })
+
+    test('"getStyleElement" adds props to <style>', () => {
+      const nonce = '2Bz9RM/UHvBbmo3jK/PbYZ=='
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      const { getStyleElement } = AppRegistry.getApplication('App', {})
+      const styleElement = getStyleElement({ nonce })
+      expect(styleElement.props.nonce).toBe(nonce)
+    })
+
+    test('"getStyleElement" contains style updates', () => {
+      const getApplicationStyles = (appName) => {
+        const { getStyleElement } = AppRegistry.getApplication(appName, {})
+        return getStyleElement().props.dangerouslySetInnerHTML.__html
+      }
+
+      // First render "RootComponent"
+      const RootComponent = () => React.createElement(View)
+      AppRegistry.registerComponent('App', () => RootComponent)
+      const first = getApplicationStyles('App')
+      expect(first).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}"
+      `)
+
+      // Second render "AlternativeComponent"
+      const styles = StyleSheet.create({
+        root: { borderWidth: 1234, backgroundColor: 'purple' },
+      })
+      const AlternativeComponent = () => React.createElement(View, { style: styles.root })
+      AppRegistry.registerComponent('AlternativeApp', () => AlternativeComponent)
+      const second = getApplicationStyles('AlternativeApp')
+      expect(second).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}"
+      `)
+
+      // Third render "RootComponent" again
+      const third = getApplicationStyles('App')
+      expect(third).toEqual(second)
+    })
+  })
+})

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

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+import React from 'react'
+
+import AppRegistry from '..'
+
+const NoopComponent = () => React.createElement('div')
+
+describe('AppRegistry', () => {
+  describe('runApplication', () => {
+    let rootTag
+
+    beforeEach(() => {
+      rootTag = document.createElement('div')
+      rootTag.id = 'react-root'
+      document.body.appendChild(rootTag)
+    })
+
+    afterEach(() => {
+      document.body.removeChild(rootTag)
+    })
+
+    test('callback after render', () => {
+      const callback = jest.fn()
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      AppRegistry.runApplication('App', {
+        initialProps: {},
+        rootTag,
+        callback,
+      })
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('styles roots in different documents', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      AppRegistry.runApplication('App', { initialProps: {}, rootTag })
+
+      // Create iframe context
+      const iframe = document.createElement('iframe')
+      document.body.appendChild(iframe)
+
+      const iframeRootTag = document.createElement('div')
+      iframeRootTag.id = 'react-iframe-root'
+      iframe.contentWindow.document.body.appendChild(iframeRootTag)
+
+      // Run in iframe
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      AppRegistry.runApplication('App', {
+        initialProps: {},
+        rootTag: iframeRootTag,
+      })
+
+      const iframedoc = iframeRootTag.ownerDocument
+      expect(iframedoc).toBe(iframe.contentWindow.document)
+      expect(iframedoc).not.toBe(document)
+
+      const cssText = Array.prototype.slice
+        .call(iframedoc.getElementById('react-native-stylesheet').sheet.cssRules)
+        .map((cssRule) => cssRule.cssText)
+
+      expect(cssText).toMatchInlineSnapshot(`
+        [
+          "[stylesheet-group=\\"0\\"] {}",
+          "body {margin: 0;}",
+          "button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}",
+          "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
+          "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
+          "[stylesheet-group=\\"1\\"] {}",
+          ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+          "[stylesheet-group=\\"2\\"] {}",
+          ".r-display-xoduu5 {display: inline-flex;}",
+          ".r-flex-13awgt0 {flex: 1;}",
+          "[stylesheet-group=\\"2.2\\"] {}",
+          ".r-bottom-1p0dtai {bottom: 0px;}",
+          ".r-left-1d2f490 {left: 0px;}",
+          ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+          ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+          ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+          ".r-pointerEvents-633pao {pointer-events: none !important;}",
+          ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+          ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+          ".r-position-u8s1d {position: absolute;}",
+          ".r-right-zchlnj {right: 0px;}",
+          ".r-top-ipm5af {top: 0px;}",
+        ]
+      `)
+    })
+  })
+})