chakra-ui/dist/FormValidationText/index.js

Responsive and accessible React UI components built with React and Emotion

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

/** @jsx jsx */
import { jsx } from "@emotion/core";
import { useUIMode } from "../ThemeProvider";
import { useFormControl } from "../FormControl";
import Icon from "../Icon";
import Flex from "../Flex";
import Text from "../Text";
import { forwardRef } from "react";
export var FormValidationText = forwardRef(function (_ref, ref) {
  var children = _ref.children,
      icon = _ref.icon,
      props = _objectWithoutProperties(_ref, ["children", "icon"]);

  var _useUIMode = useUIMode(),
      mode = _useUIMode.mode;

  var formControl = useFormControl(props);
  var invalidColor = {
    light: "red.500",
    dark: "red.300"
  };
  var invalidProps = {
    icon: "warning",
    color: invalidColor[mode]
  };
  var validColor = {
    light: "green.500",
    dark: "green.200"
  };
  var validProps = {
    icon: "check-circle",
    color: validColor[mode]
  };
  var validationProps = formControl.isInvalid ? invalidProps : validProps;
  return jsx(Flex, _extends({
    ref: ref,
    color: validationProps.color,
    mt: 2,
    fontSize: "sm",
    alignItems: "center"
  }, props), jsx(Icon, {
    "aria-hidden": true,
    name: validationProps.icon,
    mr: "0.5em"
  }), jsx(Text, {
    lineHeight: "normal"
  }, children));
});
export default FormValidationText;