68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import * as React from 'react';
|
|
import EditIcon from '@material-ui/icons/Edit';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import {Center} from '../../common/Center';
|
|
import DeleteIcon from '@material-ui/icons/Delete';
|
|
import {Button} from '@material-ui/core';
|
|
|
|
interface EditGlassProps {
|
|
doEdit: (elm: HTMLElement) => void;
|
|
doDelete: () => void;
|
|
}
|
|
|
|
export const EditGlass: React.FC<EditGlassProps> = ({doEdit, doDelete}) => {
|
|
const [confirm, askConfirmation] = React.useState(false);
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
background: 'rgba(110,110,110,.5)',
|
|
}}>
|
|
{confirm ? (
|
|
<div>
|
|
<Typography>Confirm Deletion</Typography>
|
|
<Button onClick={() => askConfirmation(false)}>Cancel</Button>
|
|
<Button color={'primary'} onClick={doDelete}>
|
|
Yeah, Delete
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div style={{height: '30%', display: 'flex', cursor: 'pointer'}}>
|
|
<div
|
|
style={{height: '100%', width: '65%', background: 'rgba(255,255,255,.4)'}}
|
|
onClick={(e) => doEdit(e.currentTarget)}>
|
|
<Center>
|
|
<EditIcon />
|
|
</Center>
|
|
</div>
|
|
<div
|
|
style={{height: '100%', width: '35%', background: 'rgba(192, 57, 43, .4)'}}
|
|
onClick={() => askConfirmation(true)}>
|
|
<Center>
|
|
<DeleteIcon fontSize={'small'} />
|
|
</Center>
|
|
</div>
|
|
</div>
|
|
<div style={{height: '70%', cursor: 'grab'}}>
|
|
<Center>
|
|
<div style={{background: 'rgba(120,120,120, .8)', padding: 10}}>
|
|
<Typography variant={'h5'} style={{textAlign: 'center', width: '100%'}}>
|
|
drag here
|
|
</Typography>
|
|
<Typography variant={'body1'} style={{textAlign: 'center'}}>
|
|
resize on corner
|
|
</Typography>
|
|
</div>
|
|
</Center>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|