added Autocomplete from material-ui lab

master
Tudor Stanciu 2021-08-03 09:10:13 +03:00
parent 48711adcac
commit c7b8324ef0
3 changed files with 40 additions and 39 deletions

12
package-lock.json generated
View File

@ -2248,6 +2248,18 @@
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/lab": {
"version": "4.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
"integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@material-ui/styles": {
"version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",

View File

@ -11,30 +11,31 @@
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "^4.11.3",
"@mdi/js": "^5.9.55",
"@mdi/react": "^1.4.0",
"apexcharts": "^3.24.0",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"font-awesome": "^4.7.0",
"i18next": "^19.4.4",
"i18next-browser-languagedetector": "^4.1.1",
"i18next-http-backend": "^1.0.10",
"moment": "^2.25.3",
"mui-datatables": "^3.7.4",
"react": "^16.14.0",
"react-apexcharts": "^1.3.7",
"react-dom": "^16.14.0",
"react-flags": "^0.1.18",
"react-google-maps": "^9.4.5",
"react-i18next": "^11.4.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-syntax-highlighter": "^15.4.3",
"react-toastify": "^7.0.3",
"react-i18next": "^11.4.0",
"react-flags": "^0.1.18",
"recharts": "^2.0.4",
"tinycolor2": "^1.4.2",
"axios": "^0.19.2",
"i18next": "^19.4.4",
"i18next-browser-languagedetector": "^4.1.1",
"i18next-http-backend": "^1.0.10",
"moment": "^2.25.3"
"tinycolor2": "^1.4.2"
},
"scripts": {
"start": "react-scripts start",

View File

@ -1,18 +1,11 @@
import React from "react";
import { useTranslation } from "react-i18next";
import {
InputLabel,
MenuItem,
FormControl,
Select,
Card,
CardContent,
CardActions,
Button
} from "@material-ui/core";
import { Card, CardContent, CardActions, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import PageTitle from "../../../../components/PageTitle";
import LanguageContainer from "./LanguageContainer";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
const useStyles = makeStyles((theme) => ({
root: {
@ -20,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
},
formControl: {
margin: theme.spacing(1),
minWidth: 300
width: 300
}
}));
@ -30,11 +23,11 @@ const AppearancePage = () => {
const { t } = useTranslation();
const classes = useStyles();
const handleThemeChange = (event) => {
const theme = event.target.value;
setState((prev) => ({ ...prev, theme }));
const handleThemeChange = (event, newValue) => {
setState((prev) => ({ ...prev, theme: newValue }));
};
const themes = ["default", "black", "blue"];
return (
<>
<PageTitle title={t("Menu.Appearance")} />
@ -42,23 +35,18 @@ const AppearancePage = () => {
<CardContent>
<LanguageContainer />
<br />
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="settings.appearance.theme.label">Theme</InputLabel>
<Select
labelId="settings.appearance.theme.label"
id="settings.appearance.theme.select"
value={state.theme}
onChange={handleThemeChange}
label="Theme"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={"default"}>default</MenuItem>
<MenuItem value={"dark"}>dark</MenuItem>
<MenuItem value={"white"}>white</MenuItem>
</Select>
</FormControl>
<Autocomplete
id="settings.appearance.theme.autocomplete"
size="small"
options={themes}
value={state.theme}
onChange={handleThemeChange}
getOptionLabel={(option) => option}
className={classes.formControl}
renderInput={(params) => (
<TextField {...params} label="Theme" variant="outlined" />
)}
/>
</CardContent>
<CardActions>
<Button size="small">Save</Button>