@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
184 lines (183 loc) • 6.33 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useCallback, useState, memo } from "react";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { uniqueId } from "../../../../utils/helpers.js";
import { useQueryBuilderContext } from "../../../Context.js";
import { useClasses } from "./Numeric.styles.js";
import { HvInput } from "../../../../Input/Input.js";
const NumericValue = ({
id,
value,
operator,
initialTouched = false
}) => {
const { classes, cx } = useClasses();
const isRange = operator === "range";
const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
const theme = useTheme();
const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
const onSingleValueChange = useCallback(
(event, data) => {
dispatchAction({
type: "set-value",
id,
value: data ?? null
});
},
[dispatchAction, id]
);
const onRangeValueChange = useCallback(
(event, data, from = true) => {
const currentValue = value;
const numericRange = {
from: currentValue?.from,
to: currentValue?.to
};
if (from) {
numericRange.from = data ?? null;
} else {
numericRange.to = data ?? null;
}
dispatchAction({
type: "set-value",
id,
value: numericRange
});
},
[dispatchAction, id, value]
);
const [touchedNumeric, setTouchedNumeric] = useState(initialTouched);
const [touchedNumericTo, setTouchedNumericTo] = useState(initialTouched);
const elementId = uniqueId("numeric");
let numericValidation = null;
let rightValidation = null;
if (touchedNumeric || touchedNumericTo) {
if (value === void 0 || value?.toString() === "") {
if (touchedNumeric) {
numericValidation = "required";
}
if (touchedNumericTo) {
rightValidation = "required";
}
} else if (!isRange) {
if (Number.isNaN(Number(value))) {
numericValidation = "invalid";
}
} else if (isRange) {
const rangeValue = value;
if (rangeValue?.from === void 0 || rangeValue?.from?.toString() === "") {
numericValidation = "required";
} else if (Number.isNaN(Number(rangeValue?.from))) {
numericValidation = "invalid";
}
if (rangeValue?.to === void 0 || rangeValue?.to?.toString() === "") {
rightValidation = "required";
} else if (Number.isNaN(Number(rangeValue?.to))) {
rightValidation = "invalid";
} else if (Number(rangeValue?.from) > Number(rangeValue?.to)) {
rightValidation = "greaterThan";
} else if (Number(rangeValue?.from) === Number(rangeValue?.to)) {
rightValidation = "equal";
}
}
}
const numericStatus = numericValidation != null ? "invalid" : "valid";
const rightStatus = rightValidation != null ? "invalid" : "valid";
const renderRangeInputs = (rangeValue) => /* @__PURE__ */ jsxs(
"div",
{
className: cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown }),
children: [
/* @__PURE__ */ jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsx(
HvInput,
{
label: labels.rule.value.numeric.range.leftLabel,
className: classes.input,
id: `${elementId}-numeric-from`,
name: `${elementId}-numeric-from`,
value: rangeValue?.from?.toString() || "",
onChange: (event, data) => onRangeValueChange(event, data),
onBlur: () => {
setTouchedNumeric(true);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
e.preventDefault();
}
},
status: !touchedNumeric ? "standBy" : numericStatus,
statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
required: true,
inputProps: {
autoComplete: "off"
},
placeholder: labels.rule.value.numeric.placeholder,
readOnly
}
) }),
/* @__PURE__ */ jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsx(
HvInput,
{
label: labels.rule.value.numeric.range.rightLabel,
className: classes.input,
id: `${elementId}-numeric-to`,
name: `${elementId}-numeric-to`,
value: rangeValue?.to?.toString() || "",
onChange: (event, data) => onRangeValueChange(event, data, false),
onBlur: () => {
setTouchedNumericTo(true);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
e.preventDefault();
}
},
status: !touchedNumericTo ? "standBy" : rightStatus,
statusMessage: rightValidation ? labels.rule.value.numeric.validation[rightValidation] : "",
required: true,
inputProps: {
autoComplete: "off"
},
placeholder: labels.rule.value.numeric.placeholder,
readOnly
}
) })
]
}
);
return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
isRange && renderRangeInputs(value || {}),
!isRange && /* @__PURE__ */ jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsx(
HvInput,
{
label: labels.rule.value.numeric.label,
className: classes.input,
id: `${elementId}-numeric`,
name: `${elementId}-numeric`,
value: value?.toString() || "",
onChange: onSingleValueChange,
onBlur: () => {
setTouchedNumeric(true);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
e.preventDefault();
}
},
status: !touchedNumeric ? "standBy" : numericStatus,
required: true,
inputProps: {
autoComplete: "off"
},
placeholder: labels.rule.value.numeric.placeholder,
statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
readOnly
}
) })
] });
};
memo(NumericValue);
export {
NumericValue
};