@shopgate/engage/components/Form/Builder/ElementSelect.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 Select from '@shopgate/pwa-ui-shared/Form/Select';
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.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ElementSelect = props => {
  const {
    element,
    errorText,
    name,
    value,
    visible,
    formName
  } = props;
  if (!visible) {
    return null;
  }
  const {
    label,
    placeholder,
    required,
    options,
    disabled,
    handleChange
  } = element;
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(_camelCase(name), 'engage__form-select', 'formBuilderField', {
      validationError: !!errorText
    }),
    children: [/*#__PURE__*/_jsx(Select, {
      name: name,
      required: required,
      label: label,
      placeholder: placeholder,
      value: value,
      options: options,
      onChange: handleChange,
      errorText: errorText,
      isControlled: true,
      translateErrorText: false,
      showErrorText: false,
      disabled: disabled,
      "aria-invalid": !!errorText,
      "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
    }), /*#__PURE__*/_jsx(FormHelper, {
      errorText: errorText,
      element: element,
      formName: formName,
      elementName: name
    })]
  });
};
ElementSelect.defaultProps = {
  value: '',
  visible: true
};
export default /*#__PURE__*/memo(ElementSelect);