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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React, { useState, useRef, useEffect } from 'react';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TextField from '@material-ui/core/TextField';
import { makeStyles, Theme } from '@material-ui/core/styles';
import Content from 'src/components/Content';
import { useAddCommentMutation } from './CommentForm.generated';
import { TimelineDocument } from './TimelineQuery.generated';
const useStyles = makeStyles((theme) => ({
container: {
margin: theme.spacing(2, 0),
padding: theme.spacing(0, 2, 2, 2),
},
textarea: {},
tabContent: {
margin: theme.spacing(2, 0),
},
preview: {
borderBottom: `solid 3px ${theme.palette.grey['200']}`,
minHeight: '5rem',
},
actions: {
display: 'flex',
justifyContent: 'flex-end',
},
}));
type TabPanelProps = {
children: React.ReactNode;
value: number;
index: number;
} & React.HTMLProps<HTMLDivElement>;
function TabPanel({ children, value, index, ...props }: TabPanelProps) {
return (
<div
role="tabpanel"
hidden={value !== index}
id={`editor-tabpanel-${index}`}
aria-labelledby={`editor-tab-${index}`}
{...props}
>
{value === index && children}
</div>
);
}
const a11yProps = (index: number) => ({
id: `editor-tab-${index}`,
'aria-controls': `editor-tabpanel-${index}`,
});
type Props = {
loading: boolean;
onChange: (comment: string) => void;
};
function CommentInput({ loading, onChange }: Props) {
const [input, setInput] = useState<string>('');
const [tab, setTab] = useState(0);
const classes = useStyles();
useEffect(() => {
onChange(input);
}, [input]);
return (
<div>
<Tabs value={tab} onChange={(_, t) => setTab(t)}>
<Tab label="Write" {...a11yProps(0)} />
<Tab label="Preview" {...a11yProps(1)} />
</Tabs>
<div className={classes.tabContent}>
<TabPanel value={tab} index={0}>
<TextField
fullWidth
label="Comment"
placeholder="Leave a comment"
className={classes.textarea}
multiline
value={input}
variant="filled"
rows="4" // TODO: rowsMin support
onChange={(e: any) => setInput(e.target.value)}
disabled={loading}
/>
</TabPanel>
<TabPanel value={tab} index={1} className={classes.preview}>
<Content markdown={input} />
</TabPanel>
</div>
</div>
);
}
export default CommentInput;
|
