@acusti/input-text
Version:
React component that renders a semi-controlled input with multiLine and selectTextOnFocus support
374 lines (373 loc) • 10.5 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { useRef, useEffect, useState } from "react";
function InputText(t0) {
const $ = c(77);
const {
autoCapitalize,
autoComplete,
autoFocus,
className,
disabled,
discardOnEscape,
doubleClickToEdit,
enterKeyHint,
form,
id,
initialValue,
list,
max,
maxHeight: t1,
maxLength,
min,
minLength,
multiLine,
multiple,
name,
onBlur,
onChange,
onChangeValue,
onFocus,
onKeyDown,
onKeyUp,
pattern,
placeholder,
readOnly,
ref,
required,
rows: t2,
selectTextOnFocus,
size,
step,
style,
submitOnEnter,
tabIndex,
title,
type: t3
} = t0;
const maxHeight = t1 === void 0 ? Infinity : t1;
const rows = t2 === void 0 ? 1 : t2;
const type = t3 === void 0 ? "text" : t3;
const inputRef = useRef(null);
const valueFromProps = initialValue ?? "";
const committedValueRef = useRef(valueFromProps);
let t4;
if ($[0] !== maxHeight || $[1] !== multiLine) {
t4 = () => {
if (!inputRef.current || SUPPORTS_FIELD_SIZING) {
return;
}
if (!multiLine) {
inputRef.current.style.height = "";
return;
}
const {
transitionDelay,
transitionDuration
} = inputRef.current.style;
inputRef.current.style.transitionDelay = "0s";
inputRef.current.style.transitionDuration = "0s";
inputRef.current.style.height = "";
const height = Math.min(inputRef.current.scrollHeight, typeof maxHeight === "string" ? parseFloat(maxHeight) : maxHeight);
if (height) {
inputRef.current.style.height = `${height}px`;
}
setTimeout(() => {
if (!inputRef.current) {
return;
}
inputRef.current.style.transitionDelay = transitionDelay === "0s" ? "" : transitionDelay;
inputRef.current.style.transitionDuration = transitionDuration === "0s" ? "" : transitionDuration;
}, 0);
};
$[0] = maxHeight;
$[1] = multiLine;
$[2] = t4;
} else {
t4 = $[2];
}
const setInputHeight = t4;
let t5;
if ($[3] !== multiLine || $[4] !== ref || $[5] !== setInputHeight) {
t5 = (element) => {
inputRef.current = element;
let cleanup = void 0;
if (typeof ref === "function") {
cleanup = ref(element);
} else {
if (ref) {
ref.current = element;
}
}
if (!element || !multiLine || SUPPORTS_FIELD_SIZING) {
return cleanup;
}
setInputHeight();
const observer = new ResizeObserver(setInputHeight);
observer.observe(element);
return () => {
observer.disconnect();
if (typeof cleanup === "function") {
cleanup();
}
};
};
$[3] = multiLine;
$[4] = ref;
$[5] = setInputHeight;
$[6] = t5;
} else {
t5 = $[6];
}
const handleRef = t5;
let t6;
let t7;
if ($[7] !== valueFromProps) {
t6 = () => {
committedValueRef.current = valueFromProps;
if (!inputRef.current) {
return;
}
inputRef.current.value = valueFromProps;
};
t7 = [valueFromProps];
$[7] = valueFromProps;
$[8] = t6;
$[9] = t7;
} else {
t6 = $[8];
t7 = $[9];
}
useEffect(t6, t7);
const [readOnlyState, setReadOnlyState] = useState(readOnly ?? doubleClickToEdit);
const isInitialSelectionRef = useRef(true);
let t8;
if ($[10] !== doubleClickToEdit) {
t8 = () => {
if (!doubleClickToEdit) {
return;
}
setReadOnlyState(false);
};
$[10] = doubleClickToEdit;
$[11] = t8;
} else {
t8 = $[11];
}
const startEditing = t8;
let t9;
if ($[12] !== onChange || $[13] !== onChangeValue) {
t9 = (event) => {
if (onChange) {
onChange(event);
}
if (onChangeValue) {
onChangeValue(event.target.value);
}
};
$[12] = onChange;
$[13] = onChangeValue;
$[14] = t9;
} else {
t9 = $[14];
}
const handleChange = t9;
let t10;
if ($[15] !== multiLine || $[16] !== onFocus || $[17] !== setInputHeight) {
t10 = (event_0) => {
if (onFocus) {
onFocus(event_0);
}
if (multiLine) {
setInputHeight();
}
};
$[15] = multiLine;
$[16] = onFocus;
$[17] = setInputHeight;
$[18] = t10;
} else {
t10 = $[18];
}
const handleFocus = t10;
let t11;
if ($[19] !== doubleClickToEdit || $[20] !== onBlur || $[21] !== selectTextOnFocus) {
t11 = (event_1) => {
if (onBlur) {
onBlur(event_1);
}
committedValueRef.current = event_1.currentTarget.value;
if (doubleClickToEdit) {
setReadOnlyState(true);
}
if (!selectTextOnFocus) {
return;
}
isInitialSelectionRef.current = true;
};
$[19] = doubleClickToEdit;
$[20] = onBlur;
$[21] = selectTextOnFocus;
$[22] = t11;
} else {
t11 = $[22];
}
const handleBlur = t11;
let t12;
if ($[23] !== selectTextOnFocus) {
t12 = (event_2) => {
if (!selectTextOnFocus) {
return;
}
const input = event_2.currentTarget;
if (!isInitialSelectionRef.current) {
return;
}
isInitialSelectionRef.current = false;
if (!input.value) {
return;
}
if (input.ownerDocument.activeElement !== input) {
return;
}
const valueLength = input.value.length;
if (input.selectionStart === 0 && input.selectionEnd === valueLength) {
return;
}
input.selectionStart = 0;
input.selectionEnd = valueLength;
};
$[23] = selectTextOnFocus;
$[24] = t12;
} else {
t12 = $[24];
}
const handleSelect = t12;
let t13;
if ($[25] !== discardOnEscape || $[26] !== doubleClickToEdit || $[27] !== handleChange || $[28] !== multiLine || $[29] !== onKeyDown || $[30] !== readOnlyState || $[31] !== submitOnEnter) {
t13 = (event_3) => {
if (onKeyDown) {
onKeyDown(event_3);
}
if (event_3.key !== "Enter" && event_3.key !== "Escape") {
return;
}
if (event_3.key === "Enter" && (submitOnEnter || multiLine && isPrimaryModifierPressed(event_3)) && (!multiLine || !event_3.shiftKey && !event_3.altKey && !event_3.ctrlKey)) {
event_3.preventDefault();
event_3.currentTarget.closest("form")?.requestSubmit();
event_3.currentTarget.blur();
return;
}
if (!discardOnEscape && !doubleClickToEdit) {
return;
}
if (event_3.key === "Escape" && discardOnEscape) {
if (event_3.currentTarget.value !== committedValueRef.current) {
event_3.currentTarget.value = committedValueRef.current;
handleChange(event_3);
}
} else {
if (event_3.key === "Enter" && doubleClickToEdit && readOnlyState) {
setReadOnlyState(false);
}
}
event_3.currentTarget.blur();
};
$[25] = discardOnEscape;
$[26] = doubleClickToEdit;
$[27] = handleChange;
$[28] = multiLine;
$[29] = onKeyDown;
$[30] = readOnlyState;
$[31] = submitOnEnter;
$[32] = t13;
} else {
t13 = $[32];
}
const handleKeyDown = t13;
let t14;
if ($[33] !== multiLine || $[34] !== style) {
t14 = multiLine && SUPPORTS_FIELD_SIZING ? {
...style,
fieldSizing: "content"
} : style;
$[33] = multiLine;
$[34] = style;
$[35] = t14;
} else {
t14 = $[35];
}
const inputStyle = t14;
const Element = multiLine ? "textarea" : "input";
let t15;
if ($[36] !== max || $[37] !== min || $[38] !== multiLine || $[39] !== rows || $[40] !== setInputHeight || $[41] !== step) {
t15 = multiLine ? {
onInput: setInputHeight,
rows
} : {
max,
min,
step
};
$[36] = max;
$[37] = min;
$[38] = multiLine;
$[39] = rows;
$[40] = setInputHeight;
$[41] = step;
$[42] = t15;
} else {
t15 = $[42];
}
let t16;
if ($[43] !== Element || $[44] !== autoCapitalize || $[45] !== autoComplete || $[46] !== autoFocus || $[47] !== className || $[48] !== disabled || $[49] !== enterKeyHint || $[50] !== form || $[51] !== handleBlur || $[52] !== handleChange || $[53] !== handleFocus || $[54] !== handleKeyDown || $[55] !== handleRef || $[56] !== handleSelect || $[57] !== id || $[58] !== inputStyle || $[59] !== list || $[60] !== maxLength || $[61] !== minLength || $[62] !== multiple || $[63] !== name || $[64] !== onKeyUp || $[65] !== pattern || $[66] !== placeholder || $[67] !== readOnlyState || $[68] !== required || $[69] !== size || $[70] !== startEditing || $[71] !== t15 || $[72] !== tabIndex || $[73] !== title || $[74] !== type || $[75] !== valueFromProps) {
t16 = /* @__PURE__ */ jsx(Element, { autoCapitalize, autoComplete, autoFocus, className, defaultValue: valueFromProps, disabled, enterKeyHint, form, id, list, maxLength, minLength, multiple, name, onBlur: handleBlur, onChange: handleChange, onDoubleClick: startEditing, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp, onSelect: handleSelect, pattern, placeholder, readOnly: readOnlyState, ref: handleRef, required, size, style: inputStyle, tabIndex, title, type, ...t15 });
$[43] = Element;
$[44] = autoCapitalize;
$[45] = autoComplete;
$[46] = autoFocus;
$[47] = className;
$[48] = disabled;
$[49] = enterKeyHint;
$[50] = form;
$[51] = handleBlur;
$[52] = handleChange;
$[53] = handleFocus;
$[54] = handleKeyDown;
$[55] = handleRef;
$[56] = handleSelect;
$[57] = id;
$[58] = inputStyle;
$[59] = list;
$[60] = maxLength;
$[61] = minLength;
$[62] = multiple;
$[63] = name;
$[64] = onKeyUp;
$[65] = pattern;
$[66] = placeholder;
$[67] = readOnlyState;
$[68] = required;
$[69] = size;
$[70] = startEditing;
$[71] = t15;
$[72] = tabIndex;
$[73] = title;
$[74] = type;
$[75] = valueFromProps;
$[76] = t16;
} else {
t16 = $[76];
}
return t16;
}
const SUPPORTS_FIELD_SIZING = typeof CSS === "undefined" ? true : CSS.supports("field-sizing", "content");
const IS_APPLE_REGEXP = /mac|iphone|ipad|ipod/i;
function isPrimaryModifierPressed(event) {
const platform = globalThis.navigator?.platform ?? "";
return IS_APPLE_REGEXP.test(platform) ? event.metaKey : event.ctrlKey;
}
export {
InputText as default
};
//# sourceMappingURL=InputText.js.map