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

netdata UI kit

"use strict";

exports.__esModule = true;
exports.successMsg = exports.errorMsg = exports.TextInputMock = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require(".");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var successMsg = exports.successMsg = "Very green, much validated";
var errorMsg = exports.errorMsg = "Great kings of the past want you to fill this field";
var Container = _styledComponents["default"].div.withConfig({
  displayName: "inputmock__Container",
  componentId: "sc-1xgd2ui-0"
})(["width:400px;"]);
var TextInputMock = exports.TextInputMock = function TextInputMock() {
  var _useState = (0, _react.useState)(false),
    isValid = _useState[0],
    setIsValid = _useState[1];
  var _useState2 = (0, _react.useState)(""),
    validationMessage = _useState2[0],
    setValidationMessage = _useState2[1];
  var hint = "Pls fill this field for the sake of humanity";
  var charLimit = 20;
  var _useInputValue = (0, _.useInputValue)({
      maxChars: charLimit
    }),
    value = _useInputValue[0],
    handleChange = _useInputValue[1],
    charsIndicator = _useInputValue[2];
  var _useTouchedState = (0, _.useTouchedState)({}),
    touched = _useTouchedState[0],
    blurHandler = _useTouchedState[1];
  (0, _react.useEffect)(function () {
    if (!isValid && value.length > 0) {
      setIsValid(true);
      setValidationMessage(successMsg);
    } else if ((isValid || touched) && value.length === 0) {
      setIsValid(false);
      setValidationMessage(errorMsg);
    }
  }, [isValid, value.length, touched]);
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_.TextInput, {
    name: "testInput",
    placeholder: "Enter something",
    hint: hint,
    fieldIndicator: charsIndicator,
    value: value,
    touched: touched,
    onBlur: blurHandler,
    onChange: handleChange,
    success: isValid && validationMessage,
    error: !isValid && validationMessage
  }));
};