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

Shopgate's ENGAGE library.

import _camelCase from "lodash/camelCase";
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import RadioGroup from '@shopgate/pwa-ui-shared/Form/RadioGroup';
import RadioItem from '@shopgate/pwa-ui-shared/Form/RadioGroup/components/Item';
import FormHelper from "./FormHelper";

/**
 * Takes an element and renders it, if the type matches
 * @param {Object} props Component props.
 * @param {Object} props.element The data of the element to be rendered
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ElementRadio = props => {
  const {
    element,
    errorText,
    name,
    value,
    visible,
    formName
  } = props;
  if (!visible) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(_camelCase(name), 'engage__form-radio', 'formBuilderField', {
      validationError: !!errorText
    }),
    children: [/*#__PURE__*/_jsx(RadioGroup, {
      name: name,
      label: element.label,
      value: value,
      onChange: element.handleChange,
      errorText: errorText,
      isControlled: true,
      translateErrorText: false,
      showErrorText: false,
      disabled: element.disabled,
      children: Object.keys(element.options).map(itemName => /*#__PURE__*/_jsx(RadioItem, {
        id: `${name}_${_camelCase(itemName)}`,
        name: itemName,
        label: element.options[itemName]
      }, `${name}_${itemName}`))
    }), /*#__PURE__*/_jsx(FormHelper, {
      errorText: errorText,
      element: element,
      formName: formName,
      elementName: name
    })]
  });
};
ElementRadio.defaultProps = {
  value: '',
  visible: true
};
export default /*#__PURE__*/memo(ElementRadio);