@parkassist/pa-ui-library
Version:
INX Platform elements
221 lines • 6.65 kB
JavaScript
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { MaterialInput } from "../../index";
import { Autocomplete } from "@mui/material";
import { getLabel, getUniqueField, getMenuItemKey } from "../utils";
import FontStyles from "../../constants/FontStyles";
import Palette from "../../constants/Palette";
import MenuItem from "@mui/material/MenuItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import CheckboxInput from "../Checkbox/CheckboxInput";
import ChipItem from "../Chip";
import * as Icons from "../Icons";
const OpenIcon = ({
disabled
}) => _jsx(Icons.OpenArrowIcon, {
filter: disabled ? Palette.FILTER_VERY_LIGHT_GREY : null
});
function MaterialAutocomplete({
id,
label,
placeholder,
value,
options = [],
noOptionsText = "No options",
onChange,
disabled,
addOptionWhileType = false,
helperText,
errorHelperText,
error,
size = 'small',
fullWidth = true,
style,
iconStart,
onMouseOver,
onMouseLeave,
onFocus,
onBlur,
alwaysShowError = false,
topSpace,
readOnly,
autoFocus,
multiple = false,
showClearButton = false,
displayChips = false,
labelField = 'label',
uniqueField = 'id',
menuMaxHeight = 230,
chipItemSize = 'small',
loading,
loadingText,
limitTags,
hideEmptyHelperTextSpace = false,
groupBy = null,
inputProps
}) {
const [currentSearch, setCurrentSearch] = useState("");
return _jsx(Autocomplete, {
disablePortal: true,
disableCloseOnSelect: multiple,
id: id,
multiple: multiple,
value: value || (multiple ? [] : null),
noOptionsText: noOptionsText,
onChange: (event, value) => onChange(value),
onInputChange: (e, value) => {
setCurrentSearch(value);
},
options: addOptionWhileType && currentSearch.length > 0 ? [{
[uniqueField]: currentSearch,
[labelField]: currentSearch
}] : options,
limitTags: limitTags,
fullWidth: fullWidth,
disabled: disabled,
readOnly: readOnly,
disableClearable: !showClearButton,
getOptionLabel: option => getLabel(option, labelField),
groupBy: groupBy,
renderOption: (props, option, {
selected
}) => {
return /*#__PURE__*/_createElement(MenuItem, Object.assign({}, props, {
disableRipple: true,
key: getMenuItemKey(option, uniqueField),
value: option,
sx: {
padding: '8px 16px',
'& .MuiListItemText-root .MuiTypography-root': {
display: 'flex',
alignItems: 'center',
textWrap: 'wrap',
wordBreak: 'break-word'
},
'&.MuiAutocomplete-option': {
'&:hover': {
backgroundColor: Palette.WHITE_SMOKE,
'& .MuiListItemIcon-root img': {
filter: `${Palette.FILTER_LIGHT_BLACK} !important`
}
},
'&[aria-selected="true"], &[aria-selected="true"].Mui-focused ': {
backgroundColor: Palette.GREY_SMOKE,
'&:hover': {
backgroundColor: Palette.GREY_SMOKE
}
}
},
'& .MuiListItemIcon-root img': {
filter: `${Palette.FILTER_LIGHT_BLACK} !important`
}
}
}), (option === null || option === void 0 ? void 0 : option.iconStart) && _jsx(ListItemIcon, {
children: option.iconStart
}), _jsxs(ListItemText, {
sx: {
'& .MuiTypography-root': {
font: FontStyles.INPUT_FONT,
color: Palette.LIGHT_BLACK
}
},
children: [multiple && _jsx(CheckboxInput, {
checked: selected,
style: {
padding: '0 8px 0 0'
}
}), getLabel(option, labelField)]
}), (option === null || option === void 0 ? void 0 : option.iconEnd) && _jsx(ListItemIcon, {
children: option.iconEnd
}));
},
renderTags: (tagValue, getTagProps) => {
if (displayChips) {
return tagValue.map((option, index) => (/*#__PURE__*/_createElement(ChipItem, Object.assign({}, getTagProps({
index
}), {
key: getUniqueField(option, uniqueField),
label: getLabel(option, labelField),
size: chipItemSize
}))));
}
return tagValue.map(option => getLabel(option, labelField)).join(', ');
},
isOptionEqualToValue: (option, value) => {
if (option && typeof option === 'object' && value && typeof value === 'object') return option[uniqueField] === value[uniqueField];
return option === value;
},
loading: loading,
loadingText: loadingText,
renderInput: params => _jsx(MaterialInput, Object.assign({}, params, {
label: label,
placeholder: multiple && (value === null || value === void 0 ? void 0 : value.length) > 0 ? null : placeholder,
helperText: helperText,
errorHelperText: errorHelperText,
error: error,
size: size,
style: style,
iconStart: iconStart,
onMouseOver: onMouseOver,
onMouseLeave: onMouseLeave,
onFocus: onFocus,
onBlur: onBlur,
alwaysShowError: alwaysShowError,
topSpace: topSpace,
autoFocus: autoFocus,
hideEmptyHelperTextSpace: hideEmptyHelperTextSpace,
inputProps: Object.assign(Object.assign({}, params.inputProps), inputProps)
})),
sx: {
'&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root': {
paddingRight: '42px !important'
},
'& .MuiOutlinedInput-root': {
paddingRight: '32px !important',
'&.MuiInputBase-sizeSmall': {
padding: '8.5px 14px',
'& .MuiAutocomplete-input': Object.assign({
paddingTop: 0,
paddingBottom: 0
}, (!multiple || (value === null || value === void 0 ? void 0 : value.length) === 0) && {
paddingLeft: 0
})
}
}
},
popupIcon: _jsx(OpenIcon, {
disabled: disabled
}),
clearIcon: _jsx(Icons.CloseIcon, {
style: {
position: 'relative',
left: '11px'
}
}),
ListboxProps: {
style: {
maxHeight: menuMaxHeight
}
},
slotProps: {
popper: {
sx: {
zIndex: 1199
}
},
popupIndicator: {
disableRipple: true
},
clearIndicator: {
disableRipple: true,
sx: {
height: '28px',
width: '28px'
}
}
}
});
}
export default MaterialAutocomplete;