@netdata/netdata-ui/dist/es6/components/input/input.js

netdata UI kit

var _excluded = ["error"],
  _excluded2 = ["error", "disabled", "iconLeft", "iconRight", "name", "onFocus", "onBlur", "className", "hint", "fieldIndicator", "placeholder", "label", "value", "inputRef", "size", "containerStyles", "inputContainerStyles", "hideErrorMessage", "errorMessageProps"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React from "react";
import Flex from "../templates/flex";
import { TextMicro } from "../typography";
import { Input, LabelText } from "./styled";
var ErrorMessage = function ErrorMessage(_ref) {
  var error = _ref.error,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var errorMessage = error === true ? "invalid" : error;
  return typeof errorMessage === "string" ? /*#__PURE__*/React.createElement(TextMicro, _extends({
    color: "errorText"
  }, props), errorMessage) : !!errorMessage && errorMessage;
};
export var TextInput = function TextInput(_ref2) {
  var error = _ref2.error,
    disabled = _ref2.disabled,
    iconLeft = _ref2.iconLeft,
    iconRight = _ref2.iconRight,
    name = _ref2.name,
    onFocus = _ref2.onFocus,
    onBlur = _ref2.onBlur,
    className = _ref2.className,
    hint = _ref2.hint,
    fieldIndicator = _ref2.fieldIndicator,
    _ref2$placeholder = _ref2.placeholder,
    placeholder = _ref2$placeholder === void 0 ? "" : _ref2$placeholder,
    label = _ref2.label,
    value = _ref2.value,
    inputRef = _ref2.inputRef,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? "large" : _ref2$size,
    containerStyles = _ref2.containerStyles,
    inputContainerStyles = _ref2.inputContainerStyles,
    hideErrorMessage = _ref2.hideErrorMessage,
    _ref2$errorMessagePro = _ref2.errorMessageProps,
    errorMessageProps = _ref2$errorMessagePro === void 0 ? {} : _ref2$errorMessagePro,
    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
  return /*#__PURE__*/React.createElement(Flex, _extends({
    gap: 0.5,
    column: true,
    className: className
  }, containerStyles, {
    as: "label"
  }), typeof label === "string" ? /*#__PURE__*/React.createElement(LabelText, {
    size: size
  }, label) : label, /*#__PURE__*/React.createElement(Flex, _extends({
    position: "relative"
  }, inputContainerStyles), iconLeft && /*#__PURE__*/React.createElement(Flex, {
    position: "absolute",
    left: 1,
    top: 0,
    bottom: 0,
    alignItems: "center"
  }, iconLeft), /*#__PURE__*/React.createElement(Input, _extends({
    disabled: disabled,
    placeholder: placeholder,
    onBlur: onBlur,
    onFocus: onFocus,
    name: name,
    "aria-label": name,
    hasIconLeft: !!iconLeft,
    hasIconRight: !!iconRight,
    hasIndicator: !!fieldIndicator,
    type: "text",
    value: value,
    size: size,
    ref: inputRef,
    error: error,
    hasValue: !!value
  }, props)), (!!iconRight || !!fieldIndicator) && /*#__PURE__*/React.createElement(Flex, {
    position: "absolute",
    right: 1,
    top: 0,
    bottom: 0,
    alignItems: "center",
    gap: 1
  }, !!fieldIndicator && /*#__PURE__*/React.createElement(TextMicro, {
    color: "textLite"
  }, fieldIndicator), !!iconRight && iconRight)), typeof hint === "string" ? /*#__PURE__*/React.createElement(TextMicro, {
    color: "textLite"
  }, hint) : !!hint && hint, !hideErrorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({
    error: error
  }, errorMessageProps)) : null);
};