@shopgate/engage/components/Form/Builder/ElementCheckbox.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 Checkbox from '@shopgate/pwa-ui-shared/Form/Checkbox';
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 ElementCheckbox = props => {
  const {
    element,
    errorText,
    value,
    name,
    visible,
    formName
  } = props;
  if (!visible) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('container-checkbox', _camelCase(name), 'engage__form-checkbox', 'formBuilderField', {
      validationError: !!errorText
    }),
    children: [/*#__PURE__*/_jsx(Checkbox, {
      name: name,
      errorText: errorText,
      checked: !!value,
      label: element.label,
      onChange: element.handleChange,
      translateErrorText: false,
      showErrorText: false,
      disabled: element.disabled
    }), /*#__PURE__*/_jsx(FormHelper, {
      errorText: errorText,
      element: element,
      formName: formName,
      elementName: name
    })]
  });
};
ElementCheckbox.defaultProps = {
  value: false,
  visible: true
};
export default /*#__PURE__*/memo(ElementCheckbox);