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 TextField from "@mui/material/TextField";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
// import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete"; // import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
@ -12,8 +12,8 @@ const useStyles = makeStyles(() => ({
); );
export interface Option { export interface Option {
value: any;
label: string; label: string;
value: any;
group?: string; group?: string;
new?: boolean; new?: boolean;
icon?: string; icon?: string;
@ -65,16 +65,46 @@ export default function SearchSelect(props: Props) {
return { value: s, label: s } as Option; return { value: s, label: s } as Option;
}; };
const anyToLabel = (o: any): string => { // const anyToLabel = (o: any): string => {
if (o.text && o.value) { // if (o.text && o.value) {
return o.text + " - " + o.value // return o.text + " - " + o.value
} else if (o.value) { // } else if (o.value) {
return o.value // return o.value
} else if (o.label) { // } else if (o.label) {
return 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 ( return (
<Autocomplete <Autocomplete
@ -85,33 +115,7 @@ export default function SearchSelect(props: Props) {
autoHighlight autoHighlight
disabled={disabled} disabled={disabled}
onChange={(_, newValue) => { onChange={(_, newValue) => {
if (multiple === true) { optionSelected(newValue)
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"
);
}
}
}} }}
options={options.sort((a, b) => { options={options.sort((a, b) => {
let aGroup = a.group ? a.group : ""; let aGroup = a.group ? a.group : "";
@ -133,18 +137,18 @@ export default function SearchSelect(props: Props) {
return filtered; return filtered;
}} }}
getOptionLabel={option => { // getOptionLabel={option => {
// return anyToLabel(option) // // return anyToLabel(option)
// console.log(option) // // console.log(option)
// console.log("Is Option: ",option instanceof Option) // // console.log("Is Option: ",option instanceof Option)
if (option instanceof Option) { // if (option instanceof Option) {
return option.text + " - " + option.value // return option.text + " - " + option.value
// } else if (option.text && option.value) { // // } else if (option.text && option.value) {
} else { // } else {
return anyToLabel(option) // return anyToLabel(option)
} // }
}} // }}
// getOptionSelected={ // getOptionSelected={
// getOptionSelected ? getOptionSelected : (o: { value: any; }, v: { value: any; }) => (o && v ? o.value === v.value : false) // 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 => ( renderOption={(props, option) => {
// <div const { key, ...optionProps } = props;
// style={{ return (
// display: "flex", <Box
// flexDirection: "row" key={key}
// }}> component="li"
// <div style={{ marginTop: "auto", marginBottom: "auto" }}> sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
// {!isArray(params) && params?.icon ? <Avatar src={params?.icon} /> : ""} {...optionProps}
// </div> >
// <div style={{ marginTop: "auto", marginBottom: "auto", marginLeft: "1rem" }}> <Box style={{ marginTop: "auto", marginBottom: "auto" }}>
// {params.label} {!isArray(option) && option?.icon ? <Avatar src={option?.icon} /> : ""}
// </div> </Box>
// </div> <Box style={{ marginTop: "auto", marginBottom: "auto", marginLeft: "1rem" }}>
// )} {option.label}
</Box>
</Box>
)
}}
loading={loading} loading={loading}
selectOnFocus selectOnFocus
clearOnBlur clearOnBlur