1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import React, { useState } from 'react';
import {
Button,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControlLabel,
Switch
} from '@material-ui/core';
interface PropTypes {
isOpen: boolean;
setIsOpen: (value: boolean) => void;
callback: (url: string) => void;
}
const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
const [url, setUrl] = useState<string>('');
const [isInstagramLink, setIsInstagramLink] = useState<boolean>(false);
const handleClose = () => {
setIsOpen(false);
};
const handleSubmit = () => {
const result = isInstagramLink ? `${url.slice(0, url.length - 29)}/media/?size=l` : url;
callback(result || '');
handleClose();
};
const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
setUrl(event.target.value);
};
const handleSwitch = () => {
setIsInstagramLink(!isInstagramLink);
};
return (
<div>
<Dialog open={isOpen} onClose={handleClose}>
<DialogTitle>Upload an Image</DialogTitle>
<DialogContent>
<DialogContentText>
Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image:
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Image URL"
type="text"
fullWidth
autoComplete="off"
onChange={handleChange}
/>
<FormControlLabel
control={<Switch color="primary" onClick={handleSwitch} checked={isInstagramLink} size="small" />}
label="It's an Instagram link"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleSubmit} color="primary" disabled={!url.length}>
Submit
</Button>
</DialogActions>
</Dialog>
</div>
);
};
export default UploadImage;
|
