@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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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
  }));
};