@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import Flex from '@zohodesk/layout/es/Flex/Flex';
import { renderNode, isRenderable } from '@zohodesk/utils';
import Label from '@zohodesk/components/es/Label/Label';
import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
import { Icon } from '@zohodesk/icons';
import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
import style from "./ValidationMessage.module.css";
export default class ValidationMessage extends React.Component {
  constructor(props) {
    super(props);
    this.a11yMerged = {};
    this.tagMerged = {};
  }

  render() {
    let {
      palette,
      text,
      htmlFor,
      onClick,
      type,
      size,
      dataId,
      clipped,
      alignChildren,
      tooltip,
      dataSelectorId,
      renderLeftChildren,
      renderRightChildren,
      id,
      customProps,
      a11yAttributes,
      tagAttributes,
      customClass
    } = this.props;
    const {
      wrapper: wrapperProps
    } = customProps || DUMMY_OBJECT;
    const {
      label: customLabelClass = '',
      wrapper: customWrapperClass = ''
    } = customClass || DUMMY_OBJECT;
    const {
      wrapper: wrapperA11y
    } = a11yAttributes || DUMMY_OBJECT;
    const {
      wrapper: wrapperTagAttr
    } = tagAttributes || DUMMY_OBJECT;
    const isLeftChildrenRenderable = isRenderable(renderLeftChildren);
    const isRightChildrenRenderable = isRenderable(renderRightChildren);
    this.a11yMerged = {
      wrapper: { ...wrapperA11y,
        role: 'alert'
      }
    };
    this.tagMerged = {
      wrapper: { ...wrapperTagAttr,
        'data-selector-id': dataSelectorId
      }
    };
    return /*#__PURE__*/React.createElement(Flex, { ...wrapperProps,
      $ui_alignItems: alignChildren,
      $ui_displayMode: isRightChildrenRenderable || isLeftChildrenRenderable ? 'flex' : null,
      $event_onClick: onClick,
      testId: "errorMsgContainer",
      customId: "errorMsgContainer",
      $ui_className: `${type === 'primary' ? style.primary : style.secondary} ${customWrapperClass}`,
      $a11yAttributes_container: this.a11yMerged.wrapper,
      $tagAttributes_container: this.tagMerged.wrapper
    }, renderNode(renderLeftChildren), /*#__PURE__*/React.createElement(Label, {
      text: text,
      htmlFor: htmlFor,
      palette: palette,
      size: size,
      dataId: dataId,
      clipped: clipped,
      title: clipped ? text : '',
      customClass: `${style.lable} ${customLabelClass}`,
      id: id
    }), tooltip ? /*#__PURE__*/React.createElement("span", {
      className: `${style.icon} ${colors[palette]}`,
      "data-title": tooltip
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-information57",
      size: "14"
    })) : null, renderNode(renderRightChildren));
  }

}
ValidationMessage.propTypes = propTypes;
ValidationMessage.defaultProps = defaultProps; // if (__DOCS__) {
//   ValidationMessage.docs = {
//     componentGroup: 'Form Fields',
//     folderName: 'Style Guide'
//   };
// }