@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
312 lines (311 loc) • 9.26 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 { useRef, useEffect } from "react";
const ROOT_CLASS_NAME = "cssvalueinput";
function CSSValueInput(t0) {
const $ = c(56);
const {
allowEmpty: t1,
className,
cssValueType: t2,
disabled,
getValueAsNumber: t3,
icon,
label,
max,
min,
name,
onBlur,
onChange,
onFocus,
onKeyDown,
onKeyUp,
onSubmitValue,
placeholder,
ref,
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 value = typeof valueFromProps === "number" && Number.isFinite(valueFromProps) ? `${valueFromProps}` : valueFromProps;
const submittedValueRef = useRef(value ?? "");
let t6;
let t7;
if ($[0] !== value) {
t6 = () => {
submittedValueRef.current = value ?? "";
};
t7 = [value];
$[0] = value;
$[1] = t6;
$[2] = t7;
} else {
t6 = $[1];
t7 = $[2];
}
useEffect(t6, t7);
let t8;
if ($[3] !== onSubmitValue) {
t8 = (event) => {
submittedValueRef.current = event.currentTarget.value;
onSubmitValue(event.currentTarget.value);
};
$[3] = onSubmitValue;
$[4] = t8;
} else {
t8 = $[4];
}
const handleSubmitValue = t8;
let t9;
if ($[5] !== allowEmpty || $[6] !== cssValueType || $[7] !== getValueAsNumber || $[8] !== handleSubmitValue || $[9] !== max || $[10] !== min || $[11] !== onBlur || $[12] !== unit || $[13] !== validator) {
t9 = (event_0) => {
const input = event_0.currentTarget;
if (onBlur) {
onBlur(event_0);
}
const currentValue = input.value.trim();
if (allowEmpty && !currentValue) {
handleSubmitValue(event_0);
return;
}
const currentValueAsNumber = getValueAsNumber(currentValue);
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);
} else {
if (validator) {
isValid = validator(currentValue);
}
}
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
});
input.value = normalizedValueAsNumber + currentUnit;
} else {
input.value = getCSSValueWithUnit({
cssValueType,
defaultUnit,
value: currentValue
});
}
handleSubmitValue(event_0);
};
$[5] = allowEmpty;
$[6] = cssValueType;
$[7] = getValueAsNumber;
$[8] = handleSubmitValue;
$[9] = max;
$[10] = min;
$[11] = onBlur;
$[12] = unit;
$[13] = validator;
$[14] = t9;
} else {
t9 = $[14];
}
const handleBlur = t9;
let t10;
if ($[15] !== cssValueType || $[16] !== getValueAsNumber || $[17] !== max || $[18] !== min || $[19] !== step || $[20] !== unit) {
t10 = (t112) => {
const {
currentValue: currentValue_0,
multiplier: t122,
signum: t132
} = t112;
const multiplier = t122 === void 0 ? 1 : t122;
const signum = t132 === void 0 ? 1 : t132;
const modifier = multiplier * step * signum;
const currentValueAsNumber_0 = getValueAsNumber(currentValue_0);
if (typeof currentValue_0 === "string" && Number.isNaN(currentValueAsNumber_0)) {
return currentValue_0;
}
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_0
});
return `${nextValue}${nextUnit}`;
};
$[15] = cssValueType;
$[16] = getValueAsNumber;
$[17] = max;
$[18] = min;
$[19] = step;
$[20] = unit;
$[21] = t10;
} else {
t10 = $[21];
}
const getNextValue = t10;
let t11;
if ($[22] !== getNextValue || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== unit) {
t11 = (event_1) => {
const input_0 = event_1.currentTarget;
if (onKeyDown) {
onKeyDown(event_1);
}
if (event_1.key !== "ArrowDown" && event_1.key !== "ArrowUp") {
return;
}
const currentValue_1 = input_0.value ?? placeholder ?? `0${unit}`;
const nextValue_0 = getNextValue({
currentValue: currentValue_1,
multiplier: event_1.shiftKey ? 10 : 1,
signum: event_1.key === "ArrowUp" ? 1 : -1
});
if (nextValue_0 === currentValue_1) {
return;
}
event_1.stopPropagation();
event_1.preventDefault();
input_0.value = nextValue_0;
};
$[22] = getNextValue;
$[23] = onKeyDown;
$[24] = placeholder;
$[25] = unit;
$[26] = t11;
} else {
t11 = $[26];
}
const handleKeyDown = t11;
let t12;
if ($[27] !== handleSubmitValue || $[28] !== onKeyUp) {
t12 = (event_2) => {
if (onKeyUp) {
onKeyUp(event_2);
}
if (event_2.key === "ArrowUp" || event_2.key === "ArrowDown") {
handleSubmitValue(event_2);
}
};
$[27] = handleSubmitValue;
$[28] = onKeyUp;
$[29] = t12;
} else {
t12 = $[29];
}
const handleKeyUp = t12;
const t13 = label ? void 0 : title;
let t14;
if ($[30] !== className || $[31] !== disabled) {
t14 = clsx(ROOT_CLASS_NAME, className, {
disabled
});
$[30] = className;
$[31] = disabled;
$[32] = t14;
} else {
t14 = $[32];
}
let t15;
if ($[33] !== icon) {
t15 = icon == null ? null : /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-icon`, children: icon });
$[33] = icon;
$[34] = t15;
} else {
t15 = $[34];
}
let t16;
if ($[35] !== label) {
t16 = label ? /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-label`, children: /* @__PURE__ */ jsx("p", { className: `${ROOT_CLASS_NAME}-label-text`, children: label }) }) : null;
$[35] = label;
$[36] = t16;
} else {
t16 = $[36];
}
let t17;
if ($[37] !== disabled || $[38] !== handleBlur || $[39] !== handleKeyDown || $[40] !== handleKeyUp || $[41] !== name || $[42] !== onChange || $[43] !== onFocus || $[44] !== placeholder || $[45] !== ref || $[46] !== tabIndex || $[47] !== value) {
t17 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-value`, children: /* @__PURE__ */ jsx(InputText, { disabled, discardOnEscape: true, initialValue: value, name, onBlur: handleBlur, onChange, onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder, ref, selectTextOnFocus: true, tabIndex }) });
$[37] = disabled;
$[38] = handleBlur;
$[39] = handleKeyDown;
$[40] = handleKeyUp;
$[41] = name;
$[42] = onChange;
$[43] = onFocus;
$[44] = placeholder;
$[45] = ref;
$[46] = tabIndex;
$[47] = value;
$[48] = t17;
} else {
t17 = $[48];
}
let t18;
if ($[49] !== t13 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t17 || $[54] !== title) {
t18 = /* @__PURE__ */ jsxs("label", { "aria-label": t13, className: t14, title, children: [
t15,
t16,
t17
] });
$[49] = t13;
$[50] = t14;
$[51] = t15;
$[52] = t16;
$[53] = t17;
$[54] = title;
$[55] = t18;
} else {
t18 = $[55];
}
return t18;
}
export {
CSSValueInput as default
};
//# sourceMappingURL=CSSValueInput.js.map