@tamagui/react-native-web-lite
Version:
React Native for Web
270 lines (269 loc) • 12.3 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: !0 });
}, __copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function")
for (let key of __getOwnPropNames(from))
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
mod
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
var TextInput_exports = {};
__export(TextInput_exports, {
TextInput: () => TextInput,
default: () => TextInput_default
});
module.exports = __toCommonJS(TextInput_exports);
var React = __toESM(require("react"), 1), import_react_native_web_internals = require("@tamagui/react-native-web-internals"), import_react_native_web_internals2 = require("@tamagui/react-native-web-internals"), import_createElement = require("../createElement/index");
const isSelectionStale = (node, selection) => {
const { selectionEnd, selectionStart } = node, { start, end } = selection;
return start !== selectionStart || end !== selectionEnd;
}, setSelection = (node, selection) => {
if (isSelectionStale(node, selection)) {
const { start, end } = selection;
try {
node.setSelectionRange(start, end || start);
} catch {
}
}
}, forwardPropsList = Object.assign(
{},
import_react_native_web_internals2.forwardedProps.defaultProps,
import_react_native_web_internals2.forwardedProps.accessibilityProps,
import_react_native_web_internals2.forwardedProps.clickProps,
import_react_native_web_internals2.forwardedProps.focusProps,
import_react_native_web_internals2.forwardedProps.keyboardProps,
import_react_native_web_internals2.forwardedProps.mouseProps,
import_react_native_web_internals2.forwardedProps.touchProps,
import_react_native_web_internals2.forwardedProps.styleProps,
{
autoCapitalize: !0,
className: !0,
autoComplete: !0,
autoCorrect: !0,
autoFocus: !0,
defaultValue: !0,
disabled: !0,
lang: !0,
maxLength: !0,
onChange: !0,
onScroll: !0,
placeholder: !0,
pointerEvents: !0,
readOnly: !0,
rows: !0,
spellCheck: !0,
value: !0,
type: !0
}
), pickProps = (props) => (0, import_react_native_web_internals2.pick)(props, forwardPropsList), useIsomorphicLayoutEffect = typeof window > "u" ? React.useEffect : React.useLayoutEffect;
function isEventComposing(nativeEvent) {
return nativeEvent.isComposing || nativeEvent.keyCode === 229;
}
let focusTimeout = null;
const TextInput = React.forwardRef(
(props, forwardedRef) => {
const {
autoCapitalize = "sentences",
autoComplete,
autoCompleteType,
autoCorrect = !0,
blurOnSubmit,
clearTextOnFocus,
dir,
editable,
enterKeyHint,
inputMode = "text",
keyboardType,
multiline = !1,
numberOfLines,
onBlur,
onChange,
onChangeText,
onContentSizeChange,
onFocus,
onKeyPress,
onLayout,
onMoveShouldSetResponder,
onMoveShouldSetResponderCapture,
onResponderEnd,
onResponderGrant,
onResponderMove,
onResponderReject,
onResponderRelease,
onResponderStart,
onResponderTerminate,
onResponderTerminationRequest,
onScrollShouldSetResponder,
onScrollShouldSetResponderCapture,
onSelectionChange,
onSelectionChangeShouldSetResponder,
onSelectionChangeShouldSetResponderCapture,
onStartShouldSetResponder,
onStartShouldSetResponderCapture,
onSubmitEditing,
placeholderTextColor,
readOnly = !1,
returnKeyType,
rows = 1,
secureTextEntry = !1,
selection,
selectTextOnFocus,
showSoftInputOnFocus,
caretHidden,
spellCheck
} = props;
let type, _inputMode;
if (inputMode != null)
_inputMode = inputMode, inputMode === "email" ? type = "email" : inputMode === "tel" ? type = "tel" : inputMode === "search" ? type = "search" : inputMode === "url" ? type = "url" : type = "text";
else if (keyboardType != null)
switch (warn("keyboardType", "keyboardType is deprecated. Use inputMode."), keyboardType) {
case "email-address":
type = "email";
break;
case "number-pad":
case "numeric":
_inputMode = "numeric";
break;
case "decimal-pad":
_inputMode = "decimal";
break;
case "phone-pad":
type = "tel";
break;
case "search":
case "web-search":
type = "search";
break;
case "url":
type = "url";
break;
default:
type = "text";
}
secureTextEntry && (type = "password");
const dimensions = React.useRef({ height: null, width: null }), hostRef = React.useRef(null), handleContentSizeChange = React.useCallback(
(hostNode) => {
if (multiline && onContentSizeChange && hostNode != null) {
const newHeight = hostNode.scrollHeight, newWidth = hostNode.scrollWidth;
(newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) && (dimensions.current.height = newHeight, dimensions.current.width = newWidth, onContentSizeChange({
nativeEvent: {
contentSize: {
height: dimensions.current.height,
width: dimensions.current.width
}
}
}));
}
},
[multiline, onContentSizeChange]
), imperativeRef = React.useMemo(
() => (hostNode) => {
hostNode != null && (hostNode.clear = () => {
hostNode != null && (hostNode.value = "");
}, hostNode.isFocused = () => hostNode != null && import_react_native_web_internals2.TextInputState.currentlyFocusedField() === hostNode, handleContentSizeChange(hostNode));
},
[handleContentSizeChange]
);
function handleBlur(e) {
import_react_native_web_internals2.TextInputState._currentlyFocusedNode = null, onBlur && (e.nativeEvent.text = e.target.value, onBlur(e));
}
function handleChange(e) {
const hostNode = e.target, text = hostNode.value;
e.nativeEvent.text = text, handleContentSizeChange(hostNode), onChange && onChange(e), onChangeText && onChangeText(text);
}
function handleFocus(e) {
const hostNode = e.target;
onFocus && (e.nativeEvent.text = hostNode.value, onFocus(e)), hostNode != null && (import_react_native_web_internals2.TextInputState._currentlyFocusedNode = hostNode, clearTextOnFocus && (hostNode.value = ""), selectTextOnFocus && (focusTimeout != null && clearTimeout(focusTimeout), focusTimeout = setTimeout(() => {
hostNode?.select();
}, 0)));
}
function handleKeyDown(e) {
const hostNode = e.target;
e.stopPropagation();
const shouldBlurOnSubmit = blurOnSubmit ?? !multiline, nativeEvent = e.nativeEvent, isComposing = isEventComposing(nativeEvent);
onKeyPress && onKeyPress(e), e.key === "Enter" && !e.shiftKey && // Do not call submit if composition is occuring.
!isComposing && !e.isDefaultPrevented() && ((blurOnSubmit || !multiline) && onSubmitEditing && (e.preventDefault(), nativeEvent.text = e.target.value, onSubmitEditing(e)), shouldBlurOnSubmit && hostNode != null && setTimeout(() => hostNode.blur(), 0));
}
function handleSelectionChange(e) {
if (onSelectionChange)
try {
const node = e.target, { selectionStart, selectionEnd } = node;
e.nativeEvent.selection = {
start: selectionStart,
end: selectionEnd
}, e.nativeEvent.text = e.target.value, onSelectionChange(e);
} catch {
}
}
useIsomorphicLayoutEffect(() => {
const node = hostRef.current;
node != null && selection != null && setSelection(node, selection), document.activeElement === node && (import_react_native_web_internals2.TextInputState._currentlyFocusedNode = node);
}, [hostRef, selection]);
const component = multiline ? "textarea" : "input";
(0, import_react_native_web_internals2.useElementLayout)(hostRef, onLayout), (0, import_react_native_web_internals2.useResponderEvents)(hostRef, {
onMoveShouldSetResponder,
onMoveShouldSetResponderCapture,
onResponderEnd,
onResponderGrant,
onResponderMove,
onResponderReject,
onResponderRelease,
onResponderStart,
onResponderTerminate,
onResponderTerminationRequest,
onScrollShouldSetResponder,
onScrollShouldSetResponderCapture,
onSelectionChangeShouldSetResponder,
onSelectionChangeShouldSetResponderCapture,
onStartShouldSetResponder,
onStartShouldSetResponderCapture
});
const { direction: contextDirection } = (0, import_react_native_web_internals2.useLocaleContext)(), supportedProps = pickProps(props);
supportedProps.autoCapitalize = autoCapitalize, supportedProps.autoComplete = autoComplete || autoCompleteType || "on", supportedProps.autoCorrect = autoCorrect ? "on" : "off", supportedProps.dir = dir !== void 0 ? dir : "auto", returnKeyType != null && warn("returnKeyType", "returnKeyType is deprecated. Use enterKeyHint."), supportedProps.enterKeyHint = enterKeyHint || returnKeyType, supportedProps.inputMode = _inputMode, supportedProps.onBlur = handleBlur, supportedProps.onChange = handleChange, supportedProps.onFocus = handleFocus, supportedProps.onKeyDown = handleKeyDown, supportedProps.onSelect = handleSelectionChange, editable != null && warn("editable", "editable is deprecated. Use readOnly."), supportedProps.readOnly = readOnly === !0 || editable === !1, numberOfLines != null && warn("numberOfLines", "TextInput numberOfLines is deprecated. Use rows."), supportedProps.rows = multiline ? rows ?? numberOfLines : 1, supportedProps.spellCheck = spellCheck ?? autoCorrect, supportedProps.style = [
{ "--placeholderTextColor": placeholderTextColor },
styles.textinput$raw,
styles.placeholder,
props.style,
caretHidden && styles.caretHidden
], supportedProps.type = multiline ? void 0 : type, supportedProps.virtualkeyboardpolicy = showSoftInputOnFocus === !1 ? "manual" : "auto";
const platformMethodsRef = (0, import_react_native_web_internals2.usePlatformMethods)(supportedProps), setRef = (0, import_react_native_web_internals2.useMergeRefs)(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
supportedProps.ref = setRef;
const langDirection = props.lang != null ? (0, import_react_native_web_internals2.getLocaleDirection)(props.lang) : null, writingDirection = props.dir || langDirection || contextDirection;
return (0, import_createElement.useCreateElement)(component, supportedProps, {
writingDirection
});
}
);
function warn(...args) {
process.env.NODE_ENV !== "production" && console.warn(...args);
}
TextInput.displayName = "TextInput";
TextInput.State = import_react_native_web_internals2.TextInputState;
const styles = import_react_native_web_internals.StyleSheet.create({
textinput$raw: {
MozAppearance: "textfield",
WebkitAppearance: "none",
appearance: "none"
},
placeholder: {
placeholderTextColor: "var(--placeholderTextColor)"
},
caretHidden: {
caretColor: "transparent"
}
});
var TextInput_default = TextInput;
//# sourceMappingURL=index.js.map