@grafana/ui/dist/cjs/components/Forms/Legacy/Input/Input.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var classNames = require('classnames');
var React = require('react');
var validate = require('../../../../utils/validate.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);

"use strict";
var LegacyInputStatus = /* @__PURE__ */ ((LegacyInputStatus2) => {
  LegacyInputStatus2["Invalid"] = "invalid";
  LegacyInputStatus2["Valid"] = "valid";
  return LegacyInputStatus2;
})(LegacyInputStatus || {});
class Input extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      error: null
    };
    this.validatorAsync = (validationRules) => {
      return (evt) => {
        const errors = validate.validate(evt.target.value, validationRules);
        this.setState((prevState) => {
          return { ...prevState, error: errors ? errors[0] : null };
        });
      };
    };
    this.populateEventPropsWithStatus = (restProps, validationEvents) => {
      const inputElementProps = { ...restProps };
      if (!validationEvents) {
        return inputElementProps;
      }
      Object.keys(validate.EventsWithValidation).forEach((eventName) => {
        if (validate.hasValidationEvent(eventName, validationEvents) || restProps[eventName]) {
          inputElementProps[eventName] = async (evt) => {
            evt.persist();
            if (validate.hasValidationEvent(eventName, validationEvents)) {
              await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);
            }
            if (restProps[eventName]) {
              restProps[eventName].apply(null, [evt, this.status]);
            }
          };
        }
      });
      return inputElementProps;
    };
  }
  get status() {
    return this.state.error ? "invalid" /* Invalid */ : "valid" /* Valid */;
  }
  get isInvalid() {
    return this.status === "invalid" /* Invalid */;
  }
  render() {
    const { validationEvents, className, hideErrorMessage, inputRef, ...restProps } = this.props;
    const { error } = this.state;
    const inputClassName = classNames__default.default("gf-form-input", { invalid: this.isInvalid }, className);
    const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexGrow: 1 }, children: [
      /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputElementProps, ref: inputRef, className: inputClassName }),
      error && !hideErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
    ] });
  }
}
Input.defaultProps = {
  className: ""
};

exports.Input = Input;
exports.LegacyInputStatus = LegacyInputStatus;
//# sourceMappingURL=Input.cjs.map