@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
100 lines • 4.49 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["variant", "size", "label", "backgroundColor", "error", "errorMessage", "textFieldProps", "helperNode", "LabelProps", "errorVariant"];
import React from 'react';
import { Autocomplete } from '@mui/material';
import { BaseInputVariant, ErrorAlert, InputLabel, WrapperInputVariant } from '../../base/input';
import { Root } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var AutocompleteList = function AutocompleteList(_ref) {
var _props$componentsProp, _props$componentsProp2, _props$ChipProps;
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'divider' : _ref$variant,
size = _ref.size,
label = _ref.label,
backgroundColor = _ref.backgroundColor,
error = _ref.error,
errorMessage = _ref.errorMessage,
textFieldProps = _ref.textFieldProps,
helperNode = _ref.helperNode,
LabelProps = _ref.LabelProps,
errorVariant = _ref.errorVariant,
props = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
onFocusInput = _React$useState2[0],
setOnFocusInput = _React$useState2[1];
return /*#__PURE__*/_jsxs(Root, {
children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, _extends({
variant: variant,
htmlFor: props.id,
focused: onFocusInput
}, LabelProps, {
children: label
})), /*#__PURE__*/_jsxs(WrapperInputVariant, {
variant: variant,
error: error,
size: size,
backgroundColor: backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, _extends({
variant: variant,
htmlFor: props.id,
focused: onFocusInput
}, LabelProps, {
children: label
})), /*#__PURE__*/_jsx(Autocomplete, _extends({
fullWidth: true,
inputValue: props.inputValue,
renderInput: function renderInput(params) {
return /*#__PURE__*/_jsx(BaseInputVariant, _extends({
variant: variant
}, params, textFieldProps, {
fullWidth: true,
onFocus: function onFocus(e) {
var _textFieldProps$onFoc;
setOnFocusInput(true);
textFieldProps == null || (_textFieldProps$onFoc = textFieldProps.onFocus) == null || _textFieldProps$onFoc.call(textFieldProps, e);
},
onBlur: function onBlur(e) {
var _textFieldProps$onBlu;
setOnFocusInput(false);
textFieldProps == null || (_textFieldProps$onBlu = textFieldProps.onBlur) == null || _textFieldProps$onBlu.call(textFieldProps, e);
},
placeholder: (textFieldProps == null ? void 0 : textFieldProps.placeholder) || 'Select option'
}));
}
}, props, {
componentsProps: {
paper: _extends({}, props == null || (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.paper, {
sx: _extends({
'& .MuiAutocomplete-listbox .MuiAutocomplete-option': {
p: '10px'
},
backgroundColor: function backgroundColor(theme) {
return theme.palette.background["default"];
},
padding: '10px',
borderRadius: '15px',
border: function border(theme) {
return "1px solid ".concat(theme.palette.background.paper);
},
boxShadow: function boxShadow(theme) {
return theme.shadows[2];
}
}, props == null || (_props$componentsProp2 = props.componentsProps) == null || (_props$componentsProp2 = _props$componentsProp2.paper) == null ? void 0 : _props$componentsProp2.sx)
})
},
ChipProps: _extends({}, props == null ? void 0 : props.ChipProps, {
sx: _extends({
height: 28
}, props == null || (_props$ChipProps = props.ChipProps) == null ? void 0 : _props$ChipProps.sx)
})
}))]
}), helperNode, error && /*#__PURE__*/_jsx(ErrorAlert, {
variant: errorVariant,
children: errorMessage
})]
});
};
export default AutocompleteList;