79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
|
import { MenuItem, Select, styled, Typography } from "@mui/material";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { PropsContentProps } from "./CustomPropsItem.tsx";
|
||
|
|
|
||
|
|
const NoLabelFilledSelect = styled(Select)(({ theme }) => ({
|
||
|
|
"& .MuiSelect-select": {
|
||
|
|
paddingTop: theme.spacing(1),
|
||
|
|
paddingBottom: theme.spacing(1),
|
||
|
|
fontSize: theme.typography.body2.fontSize,
|
||
|
|
"&.Mui-disabled": {
|
||
|
|
borderBottomStyle: "none",
|
||
|
|
"&::before": {
|
||
|
|
borderBottomStyle: "none !important",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
"&.MuiInputBase-root.MuiFilledInput-root.MuiSelect-root": {
|
||
|
|
"&.Mui-disabled": {
|
||
|
|
borderBottomStyle: "none",
|
||
|
|
"&::before": {
|
||
|
|
borderBottomStyle: "none !important",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
const SelectPropsContent = ({ prop, onChange, loading, readOnly }: PropsContentProps) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const [value, setValue] = useState(prop.value || "");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setValue(prop.value || "");
|
||
|
|
}, [prop.value]);
|
||
|
|
|
||
|
|
const handleChange = (selectedValue: string) => {
|
||
|
|
setValue(selectedValue);
|
||
|
|
if (selectedValue !== prop.value) {
|
||
|
|
onChange(selectedValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (readOnly) {
|
||
|
|
return <Typography variant="body2">{value}</Typography>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const options = prop.props.options || [];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<NoLabelFilledSelect
|
||
|
|
variant="filled"
|
||
|
|
fullWidth
|
||
|
|
disabled={loading}
|
||
|
|
value={value}
|
||
|
|
onChange={(e) => handleChange(e.target.value as string)}
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
displayEmpty
|
||
|
|
renderValue={(selected) => {
|
||
|
|
if (!selected) {
|
||
|
|
return (
|
||
|
|
<Typography variant="body2" color="text.secondary">
|
||
|
|
{t("application:fileManager.clickToEditSelect")}
|
||
|
|
</Typography>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return selected as string;
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{options.map((option) => (
|
||
|
|
<MenuItem key={option} value={option} dense>
|
||
|
|
{option}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</NoLabelFilledSelect>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SelectPropsContent;
|