@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}
 */var ElementMultiSelect=function ElementMultiSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var values=[].concat(value).filter(Boolean);return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-multi-select','formBuilderField',{validationError:!!errorText})},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Select,{name:name,required:element===null||element===void 0?void 0: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-".concat(name):null})),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(SelectContextChoices,{label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,showErrorText:false})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementMultiSelect.defaultProps={value:'',visible:true};export default memo(ElementMultiSelect);