@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
186 lines (185 loc) • 6.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const styles = require("@mui/material/styles");
const useMediaQuery = require("@mui/material/useMediaQuery");
const helpers = require("../../../../utils/helpers.cjs");
const Context = require("../../../Context.cjs");
const Numeric_styles = require("./Numeric.styles.cjs");
const Input = require("../../../../Input/Input.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
const NumericValue = ({
id,
value,
operator,
initialTouched = false
}) => {
const { classes, cx } = Numeric_styles.useClasses();
const isRange = operator === "range";
const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
const theme = styles.useTheme();
const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
const onSingleValueChange = React.useCallback(
(event, data) => {
dispatchAction({
type: "set-value",
id,
value: data ?? null
});
},
[dispatchAction, id]
);
const onRangeValueChange = React.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] = React.useState(initialTouched);
const [touchedNumericTo, setTouchedNumericTo] = React.useState(initialTouched);
const elementId = helpers.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__ */ jsxRuntime.jsxs(
"div",
{
className: cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown }),
children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
Input.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__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
Input.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__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
isRange && renderRangeInputs(value || {}),
!isRange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
Input.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
}
) })
] });
};
React.memo(NumericValue);
exports.NumericValue = NumericValue;