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

netdata UI kit

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { TextInput, useInputValue, useTouchedState } from ".";
export var successMsg = "Very green, much validated";
export var errorMsg = "Great kings of the past want you to fill this field";
var Container = styled.div.withConfig({
  displayName: "inputmock__Container",
  componentId: "sc-1xgd2ui-0"
})(["width:400px;"]);
export var TextInputMock = function TextInputMock() {
  var _useState = useState(false),
    isValid = _useState[0],
    setIsValid = _useState[1];
  var _useState2 = useState(""),
    validationMessage = _useState2[0],
    setValidationMessage = _useState2[1];
  var hint = "Pls fill this field for the sake of humanity";
  var charLimit = 20;
  var _useInputValue = useInputValue({
      maxChars: charLimit
    }),
    value = _useInputValue[0],
    handleChange = _useInputValue[1],
    charsIndicator = _useInputValue[2];
  var _useTouchedState = useTouchedState({}),
    touched = _useTouchedState[0],
    blurHandler = _useTouchedState[1];
  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.createElement(Container, null, /*#__PURE__*/React.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
  }));
};