brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed the search select options rendering the value and not the label properly

Browse source
This commit is contained in:
csawatzky 2025-02-13 14:59:44 -06:00
parent 6ee7aa95a9
commit 6ae0d1112d
1 changed files with 71 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

134
src/common/SearchSelect.tsx
View file

@ -1,4 +1,4 @@
import { Autocomplete, Avatar, CircularProgress, createFilterOptions } from "@mui/material";
import { Autocomplete, Avatar, Box, CircularProgress, createFilterOptions } from "@mui/material";
import TextField from "@mui/material/TextField";
import { makeStyles } from "@mui/styles";
// import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
@ -12,8 +12,8 @@ const useStyles = makeStyles(() => ({
);
export interface Option {
value: any;
label: string;
value: any;
group?: string;
new?: boolean;
icon?: string;
@ -65,16 +65,46 @@ export default function SearchSelect(props: Props) {
return { value: s, label: s } as Option;
};
const anyToLabel = (o: any): string => {
if (o.text && o.value) {
return o.text + " - " + o.value
} else if (o.value) {
return o.value
} else if (o.label) {
return o.label
// const anyToLabel = (o: any): string => {
// if (o.text && o.value) {
// return o.text + " - " + o.value
// } else if (o.value) {
// return o.value
// } else if (o.label) {
// return o.label
// }
// return o.toString();
// };
const optionSelected = (newValue: string | Option | (string | Option)[] | null) => {
if (multiple === true) {
if (changeMulti) {
if (Array.isArray(newValue)) {
changeMulti(newValue.map(v => (typeof v === "string" ? stringToOption(v) : v)));
} else {
changeMulti(
newValue
? [typeof newValue === "string" ? stringToOption(newValue) : newValue]
: null
);
}
} else {
console.warn("SearchSelect requires changeMulti to be defined when 'multiple' is true");
}
} else {
if (changeSelection) {
if (Array.isArray(newValue)) {
console.warn("changeSelection requires a single element but received an array");
} else {
changeSelection(typeof newValue === "string" ? stringToOption(newValue) : newValue);
}
} else {
console.warn(
"SearchSelect requires changeSelection to be defined when 'multiple' is false"
);
}
}
return o.toString();
};
}
return (
<Autocomplete
@ -85,33 +115,7 @@ export default function SearchSelect(props: Props) {
autoHighlight
disabled={disabled}
onChange={(_, newValue) => {
if (multiple === true) {
if (changeMulti) {
if (Array.isArray(newValue)) {
changeMulti(newValue.map(v => (typeof v === "string" ? stringToOption(v) : v)));
} else {
changeMulti(
newValue
? [typeof newValue === "string" ? stringToOption(newValue) : newValue]
: null
);
}
} else {
console.warn("SearchSelect requires changeMulti to be defined when 'multiple' is true");
}
} else {
if (changeSelection) {
if (Array.isArray(newValue)) {
console.warn("changeSelection requires a single element but received an array");
} else {
changeSelection(typeof newValue === "string" ? stringToOption(newValue) : newValue);
}
} else {
console.warn(
"SearchSelect requires changeSelection to be defined when 'multiple' is false"
);
}
}
optionSelected(newValue)
}}
options={options.sort((a, b) => {
let aGroup = a.group ? a.group : "";
@ -133,18 +137,18 @@ export default function SearchSelect(props: Props) {
return filtered;
}}
getOptionLabel={option => {
// return anyToLabel(option)
// console.log(option)
// console.log("Is Option: ",option instanceof Option)
if (option instanceof Option) {
return option.text + " - " + option.value
// } else if (option.text && option.value) {
// getOptionLabel={option => {
// // return anyToLabel(option)
// // console.log(option)
// // console.log("Is Option: ",option instanceof Option)
// if (option instanceof Option) {
// return option.text + " - " + option.value
// // } else if (option.text && option.value) {
} else {
return anyToLabel(option)
}
}}
// } else {
// return anyToLabel(option)
// }
// }}
// getOptionSelected={
// getOptionSelected ? getOptionSelected : (o: { value: any; }, v: { value: any; }) => (o && v ? o.value === v.value : false)
// }
@ -169,20 +173,24 @@ export default function SearchSelect(props: Props) {
}}
/>
)}
// renderOption={params => (
// <div
// style={{
// display: "flex",
// flexDirection: "row"
// }}>
// <div style={{ marginTop: "auto", marginBottom: "auto" }}>
// {!isArray(params) && params?.icon ? <Avatar src={params?.icon} /> : ""}
// </div>
// <div style={{ marginTop: "auto", marginBottom: "auto", marginLeft: "1rem" }}>
// {params.label}
// </div>
// </div>
// )}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<Box
key={key}
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...optionProps}
>
<Box style={{ marginTop: "auto", marginBottom: "auto" }}>
{!isArray(option) && option?.icon ? <Avatar src={option?.icon} /> : ""}
</Box>
<Box style={{ marginTop: "auto", marginBottom: "auto", marginLeft: "1rem" }}>
{option.label}
</Box>
</Box>
)
}}
loading={loading}
selectOnFocus
clearOnBlur