diff options
Diffstat (limited to 'webui/src/bug/CommentForm.tsx')
-rw-r--r-- | webui/src/bug/CommentForm.tsx | 145 |
1 files changed, 0 insertions, 145 deletions
diff --git a/webui/src/bug/CommentForm.tsx b/webui/src/bug/CommentForm.tsx deleted file mode 100644 index a915ecf0..00000000 --- a/webui/src/bug/CommentForm.tsx +++ /dev/null @@ -1,145 +0,0 @@ -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 React, { useState, useRef } from 'react'; - -import Content from '../components/Content'; - -import { useAddCommentMutation } from './CommentForm.generated'; -import { TimelineDocument } from './TimelineQuery.generated'; - -type StyleProps = { loading: boolean }; -const useStyles = makeStyles<Theme, StyleProps>(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 = { - bugId: string; -}; - -function CommentForm({ bugId }: Props) { - const [addComment, { loading }] = useAddCommentMutation(); - const [input, setInput] = useState<string>(''); - const [tab, setTab] = useState(0); - const classes = useStyles({ loading }); - const form = useRef<HTMLFormElement>(null); - - const submit = () => { - addComment({ - variables: { - input: { - prefix: bugId, - message: input, - }, - }, - refetchQueries: [ - // TODO: update the cache instead of refetching - { - query: TimelineDocument, - variables: { - id: bugId, - first: 100, - }, - }, - ], - awaitRefetchQueries: true, - }).then(() => setInput('')); - }; - - const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { - e.preventDefault(); - submit(); - }; - - const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => { - // Submit on cmd/ctrl+enter - if ((e.metaKey || e.altKey) && e.keyCode === 13) { - submit(); - } - }; - - return ( - <Paper className={classes.container}> - <form onSubmit={handleSubmit} ref={form}> - <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 - onKeyDown={handleKeyDown} - 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 className={classes.actions}> - <Button - variant="contained" - color="primary" - type="submit" - disabled={loading} - > - Comment - </Button> - </div> - </form> - </Paper> - ); -} - -export default CommentForm; |