@shopgate/engage/components/Form/Builder/FormHelper.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import ErrorTextCmp from '@shopgate/pwa-ui-shared/FormElement/components/ErrorText';
import { SurroundPortals } from '@shopgate/engage/components';
import { sanitizePortalName } from "./helpers/common";

/**
 * Component for error texts
 * @param {Object} props Component props.
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const FormHelper = ({
  errorText,
  element,
  formName,
  elementName
}) => /*#__PURE__*/_jsx("div", {
  className: "formHelper",
  children: /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: `${sanitizePortalName(formName)}.${sanitizePortalName(element.id)}.formHelper`,
    portalProps: {
      formName,
      element,
      errorText
    },
    children: !!errorText && /*#__PURE__*/_jsx(ErrorTextCmp, {
      errorText: errorText,
      translate: false,
      elementName: elementName,
      ariaHidden: true
    })
  })
});
FormHelper.defaultProps = {
  errorText: null,
  elementName: null
};
export default FormHelper;