import React, { useEffect } from 'react';
|
import { useForm, Controller } from 'react-hook-form';
|
import {
|
Box,
|
Grid,
|
Typography,
|
TextField,
|
Slider,
|
Button,
|
Select,
|
MenuItem,
|
InputLabel,
|
FormControl,
|
Stack,
|
Divider,
|
Drawer,
|
IconButton,
|
LinearProgress,
|
} from '@mui/material';
|
import CloseIcon from '@mui/icons-material/Close';
|
import { useTranslate } from 'react-admin';
|
import * as Tool from '../tool';
|
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
|
import {
|
DEVICE_TYPE,
|
} from '../constants';
|
import { useNotification } from '../Notification';
|
|
const CopyDrawer = (props) => {
|
const { open, onCancel, sprite, value, width = PAGE_DRAWER_WIDTH, handleOnCopy } = props;
|
const notify = useNotification();
|
const translate = useTranslate();
|
const deviceType = sprite?.data?.type;
|
|
const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({
|
defaultValues: {
|
// copyDirect: value?.copyDirect || '',
|
// copyCount: value?.copyCount || '',
|
gap: value?.gap || 0.0,
|
},
|
});
|
|
useEffect(() => {
|
if (value && Object.keys(value).length > 0) {
|
setValue('copyDirect', value.copyDirect);
|
setValue('copyCount', value.copyCount);
|
}
|
}, [value, setValue])
|
|
// if (!value || !sprite) return <LinearProgress />;
|
|
const handleClose = () => {
|
onCancel();
|
}
|
|
const onFormSubmit = (data) => {
|
if (data) {
|
console.log(data);
|
|
}
|
if (handleOnCopy) {
|
handleOnCopy(data);
|
}
|
notify.info(translate('common.response.success'));
|
};
|
|
return (
|
<>
|
<Drawer
|
variant="persistent"
|
open={open}
|
anchor="right"
|
onClose={handleClose}
|
sx={{ zIndex: 100, opacity: 1 }}
|
>
|
{(open) && (
|
<Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
|
}}>
|
<Stack direction="row" p={2}>
|
<Typography variant="h6" flex="1">
|
{translate('page.map.settings.map.copy.title')}
|
</Typography>
|
<IconButton onClick={handleClose} size="small">
|
<CloseIcon />
|
</IconButton>
|
</Stack>
|
|
<Box p={3}>
|
<Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
|
<Grid container spacing={1.4}>
|
|
<Grid item xs={6}>
|
<Typography variant="body1">
|
{translate('page.map.settings.map.copy.direction')}: {value?.copyDirect}
|
</Typography>
|
</Grid>
|
<Grid item xs={6}>
|
<Typography variant="body1">
|
{translate('page.map.settings.map.copy.count')}: {value?.copyCount}
|
</Typography>
|
</Grid>
|
|
{/* <Grid item xs={6}>
|
<Controller
|
name="copyDirect"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.map.copy.direction')}
|
InputProps={{
|
readOnly: true,
|
}}
|
fullWidth
|
/>
|
)}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<Controller
|
name="copyCount"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.map.copy.count')}
|
InputProps={{
|
readOnly: true,
|
}}
|
fullWidth
|
/>
|
)}
|
/>
|
</Grid> */}
|
|
<Grid item xs={12}>
|
<Controller
|
name="gap"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.map.copy.field.gap')}
|
type="number"
|
sx={{ width: '50%' }}
|
fullWidth
|
onChange={(e) => {
|
const value = parseFloat(e.target.value).toFixed(1);
|
field.onChange(value);
|
}}
|
/>
|
)}
|
/>
|
</Grid>
|
|
{deviceType === DEVICE_TYPE.SHELF && (
|
<>
|
</>
|
)}
|
|
{deviceType === DEVICE_TYPE.CHARGE && (
|
<>
|
</>
|
)}
|
|
{deviceType === DEVICE_TYPE.STATION && (
|
<>
|
</>
|
)}
|
|
{deviceType === DEVICE_TYPE.POINT && (
|
<>
|
</>
|
)}
|
|
|
<Grid item xs={12}>
|
<Divider />
|
</Grid>
|
|
<Grid item xs={12} mt={2}>
|
<Stack direction="row" spacing={2}>
|
<Button variant="contained" color="primary" type="submit">
|
{translate('ra.action.confirm')}
|
</Button>
|
</Stack>
|
</Grid>
|
|
</Grid>
|
</Box>
|
</Box>
|
</Box>
|
)}
|
</Drawer>
|
</>
|
)
|
}
|
|
export default CopyDrawer;
|
