@hanzogui/react-native-web-lite 2.0.0-rc.41-hanzoai.5

package/src/SectionList.tsx

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+
+export { default as SectionList } from './vendor/react-native/SectionList'
+export { SectionList as default } from './vendor/react-native/SectionList'

package/src/Share/index.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 { invariant } from '@hanzogui/react-native-web-internals'
+
+type Content =
+  | {
+      title?: string
+      message?: string
+      url: string
+    }
+  | {
+      title?: string
+      message: string
+      url?: string
+    }
+
+export class Share {
+  static share(content: Content, options: object = {}): Promise<void> {
+    invariant(
+      typeof content === 'object' && content !== null,
+      'Content to share must be a valid object'
+    )
+    invariant(
+      typeof content.url === 'string' || typeof content.message === 'string',
+      'At least one of URL and message is required'
+    )
+    invariant(
+      typeof options === 'object' && options !== null,
+      'Options must be a valid object'
+    )
+    invariant(
+      !content.title || typeof content.title === 'string',
+      'Invalid title: title should be a string.'
+    )
+
+    if (window.navigator.share !== undefined) {
+      return window.navigator.share({
+        title: content.title,
+        text: content.message,
+        url: content.url,
+      })
+    } else {
+      return Promise.reject(new Error('Share is not supported in this browser'))
+    }
+  }
+
+  /**
+   * The content was successfully shared.
+   */
+  static get sharedAction(): string {
+    return 'sharedAction'
+  }
+
+  /**
+   * The dialog has been dismissed.
+   * @platform ios
+   */
+  static get dismissedAction(): string {
+    return 'dismissedAction'
+  }
+}

package/src/StatusBar/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+const emptyFunction = () => {}
+
+export function StatusBar(): null {
+  return null
+}
+
+StatusBar.setBackgroundColor = emptyFunction
+StatusBar.setBarStyle = emptyFunction
+StatusBar.setHidden = emptyFunction
+StatusBar.setNetworkActivityIndicatorVisible = emptyFunction
+StatusBar.setTranslucent = emptyFunction
+
+export default StatusBar

package/src/Text/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Text default 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text nested 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+>
+  <span
+    class="css-textHasAncestor-1qaijid"
+    data-testid="child"
+  />
+</div>
+`;
+
+exports[`components/Text prop "accessibilityLabel" value is set 1`] = `
+<div
+  aria-label="accessibility label"
+  class="css-text-1rynq56"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "accessibilityLabelledBy" value is set 1`] = `
+<div
+  aria-labelledby="123"
+  class="css-text-1rynq56"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "accessibilityLiveRegion" value is set 1`] = `
+<div
+  aria-live="polite"
+  class="css-text-1rynq56"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "accessibilityRole" value alters HTML element 1`] = `
+<article
+  class="css-text-1rynq56"
+  dir="auto"
+  role="article"
+/>
+`;
+
+exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+  role="button"
+  tabindex="0"
+/>
+`;
+
+exports[`components/Text prop "accessibilityRole" value is set 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+  role="presentation"
+/>
+`;
+
+exports[`components/Text prop "dir" value is "ltr" 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="ltr"
+/>
+`;
+
+exports[`components/Text prop "dir" value is "rtl" 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="rtl"
+/>
+`;
+
+exports[`components/Text prop "href" href with accessibilityRole 1`] = `
+<a
+  class="css-text-1rynq56"
+  dir="auto"
+  href="https://example.com"
+  role="presentation"
+/>
+`;
+
+exports[`components/Text prop "href" value is set 1`] = `
+<a
+  class="css-text-1rynq56"
+  dir="auto"
+  href="https://example.com"
+/>
+`;
+
+exports[`components/Text prop "hrefAttrs" null values are excluded 1`] = `
+<a
+  class="css-text-1rynq56"
+  dir="auto"
+  href="https://example.com"
+/>
+`;
+
+exports[`components/Text prop "hrefAttrs" requires "href" 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "hrefAttrs" target variant is set 1`] = `
+<a
+  class="css-text-1rynq56"
+  dir="auto"
+  href="https://example.com"
+  target="_blank"
+/>
+`;
+
+exports[`components/Text prop "hrefAttrs" value is set 1`] = `
+<a
+  class="css-text-1rynq56"
+  dir="auto"
+  download="filename.jpg"
+  href="https://example.com"
+  rel="nofollow"
+  target="_blank"
+/>
+`;
+
+exports[`components/Text prop "lang" ar 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="rtl"
+  lang="ar"
+/>
+`;
+
+exports[`components/Text prop "lang" fr 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="ltr"
+  lang="fr"
+/>
+`;
+
+exports[`components/Text prop "lang" undefined 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "lang" with dir 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="ltr"
+  lang="ar"
+/>
+`;
+
+exports[`components/Text prop "nativeID" value is set 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+  id="nativeID"
+/>
+`;
+
+exports[`components/Text prop "numberOfLines" value is set 1`] = `
+<div
+  class="css-text-1rynq56 r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
+<div
+  class="css-text-1rynq56 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "selectable" value of false 1`] = `
+<div
+  class="css-text-1rynq56 r-userSelect-lrvibr"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "selectable" value of true 1`] = `
+<div
+  class="css-text-1rynq56 r-userSelect-1xnzce8"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "style" value is set 1`] = `
+<div
+  class="css-text-1rynq56"
+  dir="auto"
+  style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
+/>
+`;
+
+exports[`components/Text prop "testID" value is set 1`] = `
+<div
+  class="css-text-1rynq56"
+  data-testid="123"
+  dir="auto"
+/>
+`;

package/src/Text/index.tsx

@@ -0,0 +1,208 @@
+/**
+ * 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 {
+  TextAncestorContext,
+  forwardPropsListText,
+  getLocaleDirection,
+  pick,
+  useElementLayout,
+  useLocaleContext,
+  useMergeRefs,
+  usePlatformMethods,
+  useResponderEvents,
+} from '@hanzogui/react-native-web-internals'
+import * as React from 'react'
+
+import { useCreateElement } from '../createElement/index'
+import type { PlatformMethods } from '../types'
+import type { TextProps } from './types'
+
+const pickProps = (props) => pick(props, forwardPropsListText)
+
+const Text = React.forwardRef<HTMLElement & PlatformMethods, TextProps>(
+  (props, forwardedRef) => {
+    const {
+      hrefAttrs,
+      numberOfLines,
+      onClick,
+      onLayout,
+      onPress,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      selectable,
+      ...rest
+    } = props
+
+    const hasTextAncestor = React.useContext(TextAncestorContext)
+    const hostRef = React.useRef(null)
+    const { direction: contextDirection } = useLocaleContext()
+
+    useElementLayout(hostRef, onLayout)
+    useResponderEvents(hostRef, {
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+    })
+
+    const handleClick = React.useCallback(
+      (e) => {
+        if (onClick != null) {
+          onClick(e)
+        } else if (onPress != null) {
+          e.stopPropagation()
+          onPress(e)
+        }
+      },
+      [onClick, onPress]
+    )
+
+    let component = hasTextAncestor ? 'span' : 'div'
+
+    const langDirection = props.lang != null ? getLocaleDirection(props.lang) : null
+    const componentDirection = props.dir || langDirection
+    const writingDirection = componentDirection || contextDirection
+
+    const supportedProps = pickProps(rest) as any
+    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,
+      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) {
+        const { download, rel, target } = hrefAttrs
+        if (download != null) {
+          supportedProps.download = download
+        }
+        if (rel != null) {
+          supportedProps.rel = rel
+        }
+        if (typeof target === 'string') {
+          supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target
+        }
+      }
+    }
+
+    const platformMethodsRef = usePlatformMethods(supportedProps)
+    const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef)
+
+    supportedProps.ref = setRef
+
+    const element = useCreateElement(component, supportedProps, {
+      writingDirection,
+    })
+
+    return hasTextAncestor ? (
+      element
+    ) : (
+      <TextAncestorContext.Provider value={true}>{element}</TextAncestorContext.Provider>
+    )
+  }
+)
+
+Text.displayName = 'Text'
+
+const textStyle = {
+  backgroundColor: 'transparent',
+  border: '0 solid black',
+  boxSizing: 'border-box',
+  color: 'black',
+  display: 'inline',
+  font: '14px System',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  textAlign: 'inherit',
+  textDecoration: 'none',
+  whiteSpace: 'pre-wrap',
+  wordWrap: 'break-word',
+}
+
+const styles = {
+  text: textStyle,
+  textHasAncestor$raw: {
+    ...textStyle,
+    color: 'inherit',
+    font: 'inherit',
+    whiteSpace: 'inherit',
+  },
+  textOneLine: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal',
+  },
+  // See #13
+  textMultiLine: {
+    display: '-webkit-box',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    WebkitBoxOrient: 'vertical',
+  },
+  notSelectable: {
+    userSelect: 'none',
+  },
+  selectable: {
+    userSelect: 'text',
+  },
+  pressable: {
+    cursor: 'pointer',
+  },
+}
+
+export { Text }
+export default Text

package/src/Text/types.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 type { ColorValue, GenericStyleProp } from '../types'
+import type { ViewProps, ViewStyle } from '../View/types'
+
+type FontWeightValue =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+type NumberOrString = number | string
+
+export type TextStyle = {
+  color?: ColorValue | null
+  fontFamily?: string | null
+  fontFeatureSettings?: string | null
+  fontSize?: NumberOrString | null
+  fontStyle?: 'italic' | 'normal'
+  fontWeight?: FontWeightValue | null
+  fontVariant?: ReadonlyArray<
+    'small-caps' | 'oldstyle-nums' | 'lining-nums' | 'tabular-nums' | 'proportional-nums'
+  >
+  letterSpacing?: NumberOrString | null
+  lineHeight?: NumberOrString | null
+  textAlign?:
+    | 'center'
+    | 'end'
+    | 'inherit'
+    | 'justify'
+    | 'justify-all'
+    | 'left'
+    | 'right'
+    | 'start'
+  textAlignVertical?: string | null
+  textDecorationColor?: ColorValue | null
+  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through'
+  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed'
+  textIndent?: NumberOrString | null
+  textOverflow?: string | null
+  textRendering?: 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed'
+  textShadowColor?: ColorValue | null
+  textShadowOffset?: {
+    width?: number
+    height?: number
+  }
+  textShadowRadius?: number | null
+  textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase'
+  unicodeBidi?:
+    | 'normal'
+    | 'bidi-override'
+    | 'embed'
+    | 'isolate'
+    | 'isolate-override'
+    | 'plaintext'
+  whiteSpace?: string | null
+  wordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all'
+  wordWrap?: string | null
+  writingDirection?: 'auto' | 'ltr' | 'rtl'
+  /* @platform web */
+  MozOsxFontSmoothing?: string | null
+  WebkitFontSmoothing?: string | null
+} & ViewStyle
+
+export type TextProps = {
+  accessibilityRole?:
+    | 'button'
+    | 'header'
+    | 'heading'
+    | 'label'
+    | 'link'
+    | 'listitem'
+    | 'none'
+    | 'text'
+  dir?: 'auto' | 'ltr' | 'rtl'
+  lang?: string
+  numberOfLines?: number | null
+  onPress?: (e: any) => void
+  selectable?: boolean
+  style?: GenericStyleProp<TextStyle>
+  testID?: string | null
+} & ViewProps