one/dist/esm/platform/universal/TextInput/index.native.js

One is a React framework for web, iOS, and Android apps.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
import { useNativeState } from "../../syncNativeState.native.js";
import { domStyle } from "../../web/DomView.native.js";
import { resolveEditable } from "./textInputShared.native.js";

var RESET = {
	appearance: "none",
	backgroundColor: "transparent",
	borderStyle: "solid",
	borderWidth: 0,
	borderColor: "black",
	borderRadius: 0,
	boxSizing: "border-box",
	font: "14px system-ui, -apple-system, sans-serif",
	margin: 0,
	padding: 0,
	resize: "none"
};
var DEFAULT = {
	padding: 8,
	borderWidth: 1,
	borderColor: "#d1d5db",
	borderRadius: 6
};
var PSEUDO_RULES = `[data-one-text-input]::placeholder{color:var(--one-placeholder)}[data-one-text-input]::selection{background-color:var(--one-selection)}`;
function keyboardTypeToInputMode(keyboardType) {
	switch (keyboardType) {
		case "email-address": return "email";
		case "number-pad":
		case "numeric": return "numeric";
		case "decimal-pad": return "decimal";
		case "phone-pad": return "tel";
		case "web-search": return "search";
		case "url": return "url";
		default: return void 0;
	}
}
function returnKeyTypeToEnterKeyHint(returnKeyType) {
	switch (returnKeyType) {
		case "done":
		case "go":
		case "next":
		case "previous":
		case "search":
		case "send": return returnKeyType;
		default: return void 0;
	}
}
function TextInput(param) {
	var { ref, value, onChangeText, placeholder, placeholderTextColor, autoFocus, editable: editableProp, readOnly, multiline, keyboardType, autoCapitalize, autoCorrect = true, autoComplete, returnKeyType, inputMode, enterKeyHint, onSubmitEditing, onFocus, onBlur, onContentSizeChange, onSelectionChange, selection, selectTextOnFocus, defaultValue, numberOfLines: numberOfLinesProp, rows, testID, nativeID, accessibilityLabel, style, textStyle, secureTextEntry, maxLength, caretHidden, selectionColor, cursorColor, textAlign } = param;
	var editable = resolveEditable(editableProp, readOnly);
	var [focused, setFocused] = useState(false);
	var initialFallbackRef = useRef(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
	var fallback = useNativeState(initialFallbackRef.current);
	var state = value !== null && value !== void 0 ? value : fallback;
	var innerRef = useRef(null);
	useImperativeHandle(ref, function() {
		return {
			focus: function focus() {
				var _innerRef_current;
				(_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
			},
			blur: function blur() {
				var _innerRef_current;
				(_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.blur();
			},
			clear: function clear() {
				state.set("");
			},
			isFocused: function isFocused() {
				return innerRef.current != null && document.activeElement === innerRef.current;
			},
			setSelection: function setSelection(start, end) {
				var _innerRef_current;
				if (selection) selection.set({
					start,
					end
				});
				else (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.setSelectionRange(start, end !== null && end !== void 0 ? end : start);
				return Promise.resolve();
			}
		};
	}, [state, selection]);
	var selectionValue = selection === null || selection === void 0 ? void 0 : selection.value;
	useLayoutEffect(function() {
		var _selectionValue_end;
		var node = innerRef.current;
		if (!node || !selectionValue) return;
		node.setSelectionRange(selectionValue.start, (_selectionValue_end = selectionValue.end) !== null && _selectionValue_end !== void 0 ? _selectionValue_end : selectionValue.start);
	}, [selectionValue === null || selectionValue === void 0 ? void 0 : selectionValue.start, selectionValue === null || selectionValue === void 0 ? void 0 : selectionValue.end]);
	var contentSize = useRef({
		width: 0,
		height: 0
	});
	useLayoutEffect(function() {
		var node = innerRef.current;
		if (!node || !onContentSizeChange) return;
		var width = node.scrollWidth;
		var height = node.scrollHeight;
		if (width === contentSize.current.width && height === contentSize.current.height) return;
		contentSize.current = {
			width,
			height
		};
		onContentSizeChange({
			width,
			height
		});
	}, [state.value, onContentSizeChange]);
	var caretColor = caretHidden ? "transparent" : cursorColor !== null && cursorColor !== void 0 ? cursorColor : selectionColor;
	var fieldStyle = {
		...RESET,
		...DEFAULT,
		...focused && { borderColor: "#3b82f6" },
		...multiline && { minHeight: 80 },
		...domStyle(style),
		...domStyle(textStyle),
		...textAlign && textAlign !== "auto" && { textAlign },
		...caretColor != null && { caretColor: String(caretColor) },
		["--one-placeholder"]: String(placeholderTextColor !== null && placeholderTextColor !== void 0 ? placeholderTextColor : "#6b7280"),
		...selectionColor != null && { ["--one-selection"]: String(selectionColor) }
	};
	var shared = {
		ref: innerRef,
		"data-one-text-input": "",
		"data-testid": testID,
		id: nativeID,
		"aria-label": accessibilityLabel,
		value: state.value,
		placeholder,
		autoFocus,
		readOnly: !editable,
		maxLength,
		inputMode: inputMode !== null && inputMode !== void 0 ? inputMode : keyboardTypeToInputMode(keyboardType),
		enterKeyHint: enterKeyHint !== null && enterKeyHint !== void 0 ? enterKeyHint : returnKeyTypeToEnterKeyHint(returnKeyType),
		autoCapitalize,
		autoCorrect: autoCorrect ? "on" : "off",
		spellCheck: autoCorrect,
		autoComplete,
		style: fieldStyle,
		onChange: function onChange(event) {
			var text = event.currentTarget.value;
			state.set(text);
			onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
		},
		onFocus: function onFocus1() {
			var _innerRef_current;
			setFocused(true);
			if (selectTextOnFocus) (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.select();
			onFocus === null || onFocus === void 0 ? void 0 : onFocus();
		},
		onBlur: function onBlur1() {
			setFocused(false);
			onBlur === null || onBlur === void 0 ? void 0 : onBlur();
		},
		onSelect: function onSelect(event) {
			var _event_currentTarget_selectionStart, _event_currentTarget_selectionEnd;
			if (!onSelectionChange && !selection) return;
			var next = {
				start: (_event_currentTarget_selectionStart = event.currentTarget.selectionStart) !== null && _event_currentTarget_selectionStart !== void 0 ? _event_currentTarget_selectionStart : 0,
				end: (_event_currentTarget_selectionEnd = event.currentTarget.selectionEnd) !== null && _event_currentTarget_selectionEnd !== void 0 ? _event_currentTarget_selectionEnd : 0
			};
			selection === null || selection === void 0 ? void 0 : selection.set(next);
			onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(next);
		}
	};
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
		href: "one-text-input",
		precedence: "default",
		children: PSEUDO_RULES
	}), multiline ? /* @__PURE__ */ jsx("textarea", {
		...shared,
		rows: numberOfLinesProp !== null && numberOfLinesProp !== void 0 ? numberOfLinesProp : rows
	}) : /* @__PURE__ */ jsx("input", {
		...shared,
		type: secureTextEntry ? "password" : "text",
		onKeyDown: function onKeyDown(event) {
			if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
			onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(event.currentTarget.value);
			event.currentTarget.blur();
		}
	})] });
}

export { TextInput };
//# sourceMappingURL=index.native.js.map