@acusti/css-value-input
Version:
React component that renders a text input that can take and update a CSS value of a particular type with a default unit
334 lines (333 loc) • 9.89 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { DEFAULT_UNIT_BY_CSS_VALUE_TYPE, DEFAULT_CSS_VALUE_TYPE, getCSSValueAsNumber, getUnitFromCSSValue, getCSSValueWithUnit, roundToPrecision } from "@acusti/css-values";
import InputText from "@acusti/input-text";
import clsx from "clsx";
import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
const ROOT_CLASS_NAME = "cssvalueinput";
const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
const $ = c(56);
const {
allowEmpty: t1,
className,
cssValueType: t2,
disabled,
getValueAsNumber: t3,
icon,
label,
max,
min,
name,
onBlur,
onChange,
onFocus,
onKeyDown,
onKeyUp,
onSubmitValue,
placeholder,
step: t4,
tabIndex,
title,
unit: t5,
validator,
value: valueFromProps
} = t0;
const allowEmpty = t1 === void 0 ? true : t1;
const cssValueType = t2 === void 0 ? DEFAULT_CSS_VALUE_TYPE : t2;
const getValueAsNumber = t3 === void 0 ? getCSSValueAsNumber : t3;
const step = t4 === void 0 ? 1 : t4;
const unit = t5 === void 0 ? DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType] : t5;
const inputRef = useRef(null);
let t6;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t6 = () => inputRef.current;
$[0] = t6;
} else {
t6 = $[0];
}
useImperativeHandle(ref, t6);
const value = typeof valueFromProps === "number" && !Number.isNaN(valueFromProps) ? `${valueFromProps}` : valueFromProps;
const submittedValueRef = useRef(value ?? "");
let t7;
let t8;
if ($[1] !== value) {
t7 = () => {
submittedValueRef.current = value ?? "";
};
t8 = [value];
$[1] = value;
$[2] = t7;
$[3] = t8;
} else {
t7 = $[2];
t8 = $[3];
}
useEffect(t7, t8);
let t9;
if ($[4] !== onSubmitValue) {
t9 = (event) => {
const currentValue = event.currentTarget.value;
submittedValueRef.current = currentValue;
onSubmitValue(currentValue);
};
$[4] = onSubmitValue;
$[5] = t9;
} else {
t9 = $[5];
}
const handleSubmitValue = t9;
let t10;
if ($[6] !== allowEmpty || $[7] !== cssValueType || $[8] !== getValueAsNumber || $[9] !== handleSubmitValue || $[10] !== max || $[11] !== min || $[12] !== onBlur || $[13] !== unit || $[14] !== validator) {
t10 = (event_0) => {
const input = event_0.currentTarget;
inputRef.current = input;
if (onBlur) {
onBlur(event_0);
}
const currentValue_0 = input.value.trim();
if (allowEmpty && !currentValue_0) {
handleSubmitValue(event_0);
return;
}
const currentValueAsNumber = getValueAsNumber(currentValue_0);
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
const defaultUnit = unit ? getUnitFromCSSValue({
cssValueType,
defaultUnit: unit,
value: submittedValueRef.current
}) : "";
if (!isCurrentValueFinite) {
let isValid = false;
if (validator instanceof RegExp) {
isValid = validator.test(currentValue_0);
} else {
if (validator) {
isValid = validator(currentValue_0);
}
}
if (isValid) {
handleSubmitValue(event_0);
} else {
input.value = submittedValueRef.current;
}
return;
}
let normalizedValueAsNumber = currentValueAsNumber;
if (isCurrentValueFinite) {
if (min != null && currentValueAsNumber < min) {
normalizedValueAsNumber = min;
} else {
if (max != null && currentValueAsNumber > max) {
normalizedValueAsNumber = max;
} else {
if (cssValueType === "integer") {
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
}
}
}
}
if (normalizedValueAsNumber !== currentValueAsNumber) {
const currentUnit = getUnitFromCSSValue({
cssValueType,
defaultUnit,
value: currentValue_0
});
input.value = normalizedValueAsNumber + currentUnit;
} else {
input.value = getCSSValueWithUnit({
cssValueType,
defaultUnit,
value: currentValue_0
});
}
handleSubmitValue(event_0);
};
$[6] = allowEmpty;
$[7] = cssValueType;
$[8] = getValueAsNumber;
$[9] = handleSubmitValue;
$[10] = max;
$[11] = min;
$[12] = onBlur;
$[13] = unit;
$[14] = validator;
$[15] = t10;
} else {
t10 = $[15];
}
const handleBlur = t10;
let t11;
if ($[16] !== cssValueType || $[17] !== getValueAsNumber || $[18] !== max || $[19] !== min || $[20] !== step || $[21] !== unit) {
t11 = (t122) => {
const {
currentValue: currentValue_1,
multiplier: t132,
signum: t142
} = t122;
const multiplier = t132 === void 0 ? 1 : t132;
const signum = t142 === void 0 ? 1 : t142;
const modifier = multiplier * step * signum;
const currentValueAsNumber_0 = getValueAsNumber(currentValue_1);
if (typeof currentValue_1 === "string" && Number.isNaN(currentValueAsNumber_0)) {
return currentValue_1;
}
let nextValue = currentValueAsNumber_0 + modifier;
if (cssValueType === "integer") {
nextValue = Math.floor(nextValue);
} else {
nextValue = roundToPrecision(nextValue, 5);
}
if (typeof max === "number" && Number.isFinite(max)) {
nextValue = Math.min(max, nextValue);
}
if (typeof min === "number" && Number.isFinite(min)) {
nextValue = Math.max(min, nextValue);
}
const nextUnit = getUnitFromCSSValue({
cssValueType,
defaultUnit: unit,
value: currentValue_1
});
return `${nextValue}${nextUnit}`;
};
$[16] = cssValueType;
$[17] = getValueAsNumber;
$[18] = max;
$[19] = min;
$[20] = step;
$[21] = unit;
$[22] = t11;
} else {
t11 = $[22];
}
const getNextValue = t11;
let t12;
if ($[23] !== getNextValue || $[24] !== onKeyDown || $[25] !== placeholder || $[26] !== unit) {
t12 = (event_1) => {
const input_0 = event_1.currentTarget;
inputRef.current = input_0;
if (onKeyDown) {
onKeyDown(event_1);
}
const currentValue_2 = input_0.value ?? placeholder ?? `0${unit}`;
let nextValue_0;
switch (event_1.key) {
case "ArrowDown":
case "ArrowUp": {
nextValue_0 = getNextValue({
currentValue: currentValue_2,
multiplier: event_1.shiftKey ? 10 : 1,
signum: event_1.key === "ArrowUp" ? 1 : -1
});
if (nextValue_0 === currentValue_2) {
return;
}
event_1.stopPropagation();
event_1.preventDefault();
input_0.value = nextValue_0;
return;
}
case "Enter":
case "Escape": {
if (event_1.key === "Escape") {
input_0.value = submittedValueRef.current;
}
input_0.blur();
return;
}
}
};
$[23] = getNextValue;
$[24] = onKeyDown;
$[25] = placeholder;
$[26] = unit;
$[27] = t12;
} else {
t12 = $[27];
}
const handleKeyDown = t12;
let t13;
if ($[28] !== handleSubmitValue || $[29] !== onKeyUp) {
t13 = (event_2) => {
if (onKeyUp) {
onKeyUp(event_2);
}
if (event_2.key === "ArrowUp" || event_2.key === "ArrowDown") {
handleSubmitValue(event_2);
}
};
$[28] = handleSubmitValue;
$[29] = onKeyUp;
$[30] = t13;
} else {
t13 = $[30];
}
const handleKeyUp = t13;
const t14 = label ? void 0 : title;
let t15;
if ($[31] !== className || $[32] !== disabled) {
t15 = clsx(ROOT_CLASS_NAME, className, {
disabled
});
$[31] = className;
$[32] = disabled;
$[33] = t15;
} else {
t15 = $[33];
}
let t16;
if ($[34] !== icon) {
t16 = icon == null ? null : /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-icon`, children: icon });
$[34] = icon;
$[35] = t16;
} else {
t16 = $[35];
}
let t17;
if ($[36] !== label) {
t17 = label ? /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-label`, children: /* @__PURE__ */ jsx("p", { className: `${ROOT_CLASS_NAME}-label-text`, children: label }) }) : null;
$[36] = label;
$[37] = t17;
} else {
t17 = $[37];
}
let t18;
if ($[38] !== disabled || $[39] !== handleBlur || $[40] !== handleKeyDown || $[41] !== handleKeyUp || $[42] !== name || $[43] !== onChange || $[44] !== onFocus || $[45] !== placeholder || $[46] !== tabIndex || $[47] !== value) {
t18 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-value`, children: /* @__PURE__ */ jsx(InputText, { disabled, initialValue: value, name, onBlur: handleBlur, onChange, onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder, ref: inputRef, selectTextOnFocus: true, tabIndex }) });
$[38] = disabled;
$[39] = handleBlur;
$[40] = handleKeyDown;
$[41] = handleKeyUp;
$[42] = name;
$[43] = onChange;
$[44] = onFocus;
$[45] = placeholder;
$[46] = tabIndex;
$[47] = value;
$[48] = t18;
} else {
t18 = $[48];
}
let t19;
if ($[49] !== t14 || $[50] !== t15 || $[51] !== t16 || $[52] !== t17 || $[53] !== t18 || $[54] !== title) {
t19 = /* @__PURE__ */ jsxs("label", { "aria-label": t14, className: t15, title, children: [
t16,
t17,
t18
] });
$[49] = t14;
$[50] = t15;
$[51] = t16;
$[52] = t17;
$[53] = t18;
$[54] = title;
$[55] = t19;
} else {
t19 = $[55];
}
return t19;
});
export {
CSSValueInput as default
};
//# sourceMappingURL=CSSValueInput.js.map