@hitachivantara/uikit-react-core/dist/esm/QueryBuilder/Rule/Value/TextValue/TextValue.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useState, memo } from "react";
import { useQueryBuilderContext } from "../../../Context.js";
import { useClasses } from "./TextValue.styles.js";
import { HvInput } from "../../../../Input/Input.js";
const TextValue = ({
  id,
  value = "",
  initialTouched = false
}) => {
  const { classes } = useClasses();
  const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
  const [touched, setTouched] = useState(initialTouched);
  const isValid = value != null && value.toString().trim() !== "";
  let status = isValid ? "valid" : "invalid";
  status = !touched ? "standBy" : status;
  return /* @__PURE__ */ jsx(
    HvInput,
    {
      className: classes.location,
      label: labels.rule.value.text.label,
      required: true,
      status,
      statusMessage: labels.rule.value.text.validation.required,
      value,
      inputProps: {
        autoComplete: "off"
      },
      onChange: (t, v) => {
        dispatchAction({
          type: "set-value",
          id,
          value: v
        });
      },
      onBlur: () => {
        setTouched(true);
      },
      onKeyDown: (e) => {
        if (e.key === "Enter") {
          e.preventDefault();
        }
      },
      placeholder: "—",
      readOnly
    }
  );
};
memo(TextValue);
export {
  TextValue
};