@acusti/input-text
Version:
React component that renders a semi-controlled input with multiLine and selectTextOnFocus support
399 lines (398 loc) • 11.1 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { forwardRef, useRef, useImperativeHandle, useState, useEffect } from "react";
const InputText = forwardRef(function InputText2(t0, ref) {
const $ = c(82);
const {
autoCapitalize,
autoComplete,
autoFocus,
className,
disabled,
doubleClickToEdit,
enterKeyHint,
form,
id,
initialValue,
list,
max,
maxHeight: t1,
maxLength,
min,
minLength,
multiLine,
multiple,
name,
onBlur,
onChange,
onChangeValue,
onFocus,
onKeyDown,
onKeyUp,
pattern,
placeholder,
readOnly,
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);
let t4;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t4 = () => inputRef.current;
$[0] = t4;
} else {
t4 = $[0];
}
useImperativeHandle(ref, t4);
const [inputElement, _setInputElement] = useState(null);
const resizeObserverRef = useRef(null);
let t5;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t5 = (element) => {
inputRef.current = element;
_setInputElement(element);
};
$[1] = t5;
} else {
t5 = $[1];
}
const setInputElement = t5;
let t6;
let t7;
if ($[2] !== initialValue) {
t6 = () => {
if (!inputRef.current) {
return;
}
inputRef.current.value = initialValue ?? "";
};
t7 = [initialValue];
$[2] = initialValue;
$[3] = t6;
$[4] = t7;
} else {
t6 = $[3];
t7 = $[4];
}
useEffect(t6, t7);
const [supportsFieldSizing, setSupportsFieldSizing] = useState(true);
let t8;
let t9;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t8 = () => {
if (typeof CSS === "undefined") {
return;
}
setSupportsFieldSizing(CSS.supports("field-sizing", "content"));
};
t9 = [];
$[5] = t8;
$[6] = t9;
} else {
t8 = $[5];
t9 = $[6];
}
useEffect(t8, t9);
const [readOnlyState, setReadOnlyState] = useState(readOnly ?? doubleClickToEdit);
const isInitialSelectionRef = useRef(true);
let t10;
if ($[7] !== doubleClickToEdit) {
t10 = () => {
if (!doubleClickToEdit) {
return;
}
setReadOnlyState(false);
};
$[7] = doubleClickToEdit;
$[8] = t10;
} else {
t10 = $[8];
}
const startEditing = t10;
let t11;
if ($[9] !== maxHeight || $[10] !== multiLine || $[11] !== supportsFieldSizing) {
t11 = () => {
if (!inputRef.current || supportsFieldSizing) {
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);
};
$[9] = maxHeight;
$[10] = multiLine;
$[11] = supportsFieldSizing;
$[12] = t11;
} else {
t11 = $[12];
}
const setInputHeight = t11;
let t12;
let t13;
if ($[13] !== inputElement || $[14] !== multiLine || $[15] !== setInputHeight || $[16] !== supportsFieldSizing) {
t12 = () => {
if (!inputElement || !multiLine || supportsFieldSizing) {
return;
}
setInputHeight();
resizeObserverRef.current = new ResizeObserver(() => setInputHeight());
resizeObserverRef.current.observe(inputElement);
return () => {
if (!resizeObserverRef.current) {
return;
}
resizeObserverRef.current.disconnect();
resizeObserverRef.current = null;
};
};
t13 = [inputElement, multiLine, setInputHeight, supportsFieldSizing];
$[13] = inputElement;
$[14] = multiLine;
$[15] = setInputHeight;
$[16] = supportsFieldSizing;
$[17] = t12;
$[18] = t13;
} else {
t12 = $[17];
t13 = $[18];
}
useEffect(t12, t13);
let t14;
if ($[19] !== onChange || $[20] !== onChangeValue) {
t14 = (event) => {
if (onChange) {
onChange(event);
}
if (onChangeValue) {
onChangeValue(event.target.value);
}
};
$[19] = onChange;
$[20] = onChangeValue;
$[21] = t14;
} else {
t14 = $[21];
}
const handleChange = t14;
let t15;
if ($[22] !== multiLine || $[23] !== onFocus || $[24] !== setInputHeight) {
t15 = (event_0) => {
if (onFocus) {
onFocus(event_0);
}
if (multiLine) {
setInputHeight();
}
};
$[22] = multiLine;
$[23] = onFocus;
$[24] = setInputHeight;
$[25] = t15;
} else {
t15 = $[25];
}
const handleFocus = t15;
let t16;
if ($[26] !== doubleClickToEdit || $[27] !== onBlur || $[28] !== selectTextOnFocus) {
t16 = (event_1) => {
if (onBlur) {
onBlur(event_1);
}
if (doubleClickToEdit) {
setReadOnlyState(true);
}
if (!selectTextOnFocus) {
return;
}
setInputElement(event_1.currentTarget);
isInitialSelectionRef.current = true;
};
$[26] = doubleClickToEdit;
$[27] = onBlur;
$[28] = selectTextOnFocus;
$[29] = t16;
} else {
t16 = $[29];
}
const handleBlur = t16;
let t17;
if ($[30] !== selectTextOnFocus) {
t17 = (event_2) => {
if (!selectTextOnFocus) {
return;
}
const input = event_2.currentTarget;
setInputElement(input);
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;
};
$[30] = selectTextOnFocus;
$[31] = t17;
} else {
t17 = $[31];
}
const handleSelect = t17;
let t18;
if ($[32] !== doubleClickToEdit || $[33] !== multiLine || $[34] !== onKeyDown || $[35] !== readOnlyState || $[36] !== submitOnEnter) {
t18 = (event_3) => {
if (onKeyDown) {
onKeyDown(event_3);
}
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();
} else {
if (doubleClickToEdit && inputRef.current) {
if (readOnlyState) {
if (event_3.key === "Enter") {
setReadOnlyState(false);
}
} else {
if (event_3.key === "Enter" || event_3.key === "Escape") {
inputRef.current.blur();
}
}
}
}
};
$[32] = doubleClickToEdit;
$[33] = multiLine;
$[34] = onKeyDown;
$[35] = readOnlyState;
$[36] = submitOnEnter;
$[37] = t18;
} else {
t18 = $[37];
}
const handleKeyDown = t18;
let t19;
if ($[38] !== multiLine || $[39] !== style || $[40] !== supportsFieldSizing) {
t19 = multiLine && supportsFieldSizing ? {
...style,
fieldSizing: "content"
} : style;
$[38] = multiLine;
$[39] = style;
$[40] = supportsFieldSizing;
$[41] = t19;
} else {
t19 = $[41];
}
const inputStyle = t19;
const Element = multiLine ? "textarea" : "input";
const t20 = initialValue ?? "";
let t21;
if ($[42] !== max || $[43] !== min || $[44] !== multiLine || $[45] !== rows || $[46] !== setInputHeight || $[47] !== step) {
t21 = multiLine ? {
onInput: setInputHeight,
rows
} : {
max,
min,
step
};
$[42] = max;
$[43] = min;
$[44] = multiLine;
$[45] = rows;
$[46] = setInputHeight;
$[47] = step;
$[48] = t21;
} else {
t21 = $[48];
}
let t22;
if ($[49] !== Element || $[50] !== autoCapitalize || $[51] !== autoComplete || $[52] !== autoFocus || $[53] !== className || $[54] !== disabled || $[55] !== enterKeyHint || $[56] !== form || $[57] !== handleBlur || $[58] !== handleChange || $[59] !== handleFocus || $[60] !== handleKeyDown || $[61] !== handleSelect || $[62] !== id || $[63] !== inputStyle || $[64] !== list || $[65] !== maxLength || $[66] !== minLength || $[67] !== multiple || $[68] !== name || $[69] !== onKeyUp || $[70] !== pattern || $[71] !== placeholder || $[72] !== readOnlyState || $[73] !== required || $[74] !== size || $[75] !== startEditing || $[76] !== t20 || $[77] !== t21 || $[78] !== tabIndex || $[79] !== title || $[80] !== type) {
t22 = /* @__PURE__ */ jsx(Element, { autoCapitalize, autoComplete, autoFocus, className, defaultValue: t20, 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: setInputElement, required, size, style: inputStyle, tabIndex, title, type, ...t21 });
$[49] = Element;
$[50] = autoCapitalize;
$[51] = autoComplete;
$[52] = autoFocus;
$[53] = className;
$[54] = disabled;
$[55] = enterKeyHint;
$[56] = form;
$[57] = handleBlur;
$[58] = handleChange;
$[59] = handleFocus;
$[60] = handleKeyDown;
$[61] = handleSelect;
$[62] = id;
$[63] = inputStyle;
$[64] = list;
$[65] = maxLength;
$[66] = minLength;
$[67] = multiple;
$[68] = name;
$[69] = onKeyUp;
$[70] = pattern;
$[71] = placeholder;
$[72] = readOnlyState;
$[73] = required;
$[74] = size;
$[75] = startEditing;
$[76] = t20;
$[77] = t21;
$[78] = tabIndex;
$[79] = title;
$[80] = type;
$[81] = t22;
} else {
t22 = $[81];
}
return t22;
});
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