UNPKG

@tamagui/react-native-web-lite

Version:
136 lines (135 loc) 4.94 kB
import { TextAncestorContext, forwardPropsListText, getLocaleDirection, pick, useElementLayout, useLocaleContext, useMergeRefs, usePlatformMethods, useResponderEvents } from "@tamagui/react-native-web-internals"; import * as React from "react"; import { useCreateElement } from "../createElement/index.mjs"; import { jsx } from "react/jsx-runtime"; const pickProps = props => pick(props, forwardPropsListText), Text = React.forwardRef((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, hasTextAncestor = React.useContext(TextAncestorContext), hostRef = React.useRef(null), { 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 => { onClick != null ? onClick(e) : onPress != null && (e.stopPropagation(), onPress(e)); }, [onClick, onPress]); let component = hasTextAncestor ? "span" : "div"; const langDirection = props.lang != null ? getLocaleDirection(props.lang) : null, componentDirection = props.dir || langDirection, writingDirection = componentDirection || contextDirection, supportedProps = pickProps(rest); if (supportedProps.dir = componentDirection, hasTextAncestor || (supportedProps.dir = componentDirection ?? "auto"), (onClick || onPress) && (supportedProps.onClick = handleClick), supportedProps.style = [numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines }, hasTextAncestor === !0 ? styles.textHasAncestor$raw : styles.text, numberOfLines === 1 && styles.textOneLine, numberOfLines != null && numberOfLines > 1 && styles.textMultiLine, props.style, selectable === !0 && styles.selectable, selectable === !1 && styles.notSelectable, onPress && styles.pressable], props.href != null && (component = "a", hrefAttrs != null)) { const { download, rel, target } = hrefAttrs; download != null && (supportedProps.download = download), rel != null && (supportedProps.rel = rel), typeof target == "string" && (supportedProps.target = target.charAt(0) !== "_" ? "_" + target : target); } const platformMethodsRef = usePlatformMethods(supportedProps), setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef); supportedProps.ref = setRef; const element = useCreateElement(component, supportedProps, { writingDirection }); return hasTextAncestor ? element : /* @__PURE__ */jsx(TextAncestorContext.Provider, { value: !0, children: element }); }); 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" }, 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" } }; var Text_default = Text; export { Text_default as default }; //# sourceMappingURL=index.mjs.map