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