@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
157 lines (156 loc) • 5.9 kB
JavaScript
import { HvInput } from "../../Input/Input.js";
import { uniqueId } from "../../utils/helpers.js";
import { useQueryBuilderContext } from "../Context.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
import { useCallback, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//#region src/QueryBuilder/Value/NumericValue.tsx
var { useClasses } = createClasses("HvQueryBuilderNumericValue", {
root: {},
label: { paddingBottom: "6px" },
inputContainer: {},
rangeContainer: {
display: "flex",
"& $inputContainer": {
flexGrow: 1,
overflow: "auto"
},
"& > $inputContainer:not(:last-child)": { marginRight: theme.space.md }
},
input: { flexGrow: 1 },
isMdDown: { "& > $inputContainer:not(:last-child)": { marginRight: `calc(${theme.space.md} / 2)` } }
});
var NumericValue = ({ id, value, operator, initialTouched = false }) => {
const { classes, cx } = useClasses();
const isRange = operator === "range";
const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
const { breakpoints } = useTheme$1();
const isMdDown = useMediaQuery(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
})
})]
});
};
//#endregion
export { NumericValue };