one
Version:
One is a React framework for web, iOS, and Android apps.
211 lines (208 loc) • 8.9 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all) __defProp(target, name, {
get: all[name],
enumerable: true
});
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: () => from[key],
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var TextInput_exports = {};
__export(TextInput_exports, { TextInput: () => TextInput });
module.exports = __toCommonJS(TextInput_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_syncNativeState = require("../../syncNativeState.native.js");
var import_DomView = require("../../web/DomView.native.js");
var import_textInputShared = require("./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 = (0, import_textInputShared.resolveEditable)(editableProp, readOnly);
var [focused, setFocused] = (0, import_react.useState)(false);
var initialFallbackRef = (0, import_react.useRef)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
var fallback = (0, import_syncNativeState.useNativeState)(initialFallbackRef.current);
var state = value !== null && value !== void 0 ? value : fallback;
var innerRef = (0, import_react.useRef)(null);
(0, import_react.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;
(0, import_react.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 = (0, import_react.useRef)({
width: 0,
height: 0
});
(0, import_react.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 },
...(0, import_DomView.domStyle)(style),
...(0, import_DomView.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
href: "one-text-input",
precedence: "default",
children: PSEUDO_RULES
}), multiline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
...shared,
rows: numberOfLinesProp !== null && numberOfLinesProp !== void 0 ? numberOfLinesProp : rows
}) : /* @__PURE__ */ (0, import_jsx_runtime.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();
}
})] });
}
//# sourceMappingURL=index.native.js.map