import React, { useState } from 'react'; import TextField from '@mui/material/TextField'; import { Accordion, AccordionSummary, AccordionDetails, Typography, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes'; import SettingsMenu from './components/SettingsMenu'; const useStyles = makeStyles(() => ({ details: { flexDirection: 'column', }, })); const GeofencePage = () => { const classes = useStyles(); const t = useTranslation(); const geofenceAttributes = useGeofenceAttributes(t); const [item, setItem] = useState(); const validate = () => item && item.name; return ( } breadcrumbs={['settingsTitle', 'sharedGeofence']} > {item && ( <> }> {t('sharedRequired')} setItem({ ...item, name: event.target.value })} label={t('sharedName')} variant="filled" /> }> {t('sharedAttributes')} setItem({ ...item, attributes })} definitions={geofenceAttributes} /> )} ); }; export default GeofencePage;