diff options
author | Cláudio <claudio.engdist@gmail.com> | 2021-02-05 19:36:09 -0300 |
---|---|---|
committer | Cláudio <claudio.engdist@gmail.com> | 2021-02-05 19:36:09 -0300 |
commit | 29ea8df4259921f1789e0e6d584767fc5f54b284 (patch) | |
tree | 2d19cf21e033adcbe2e6c018fe6099b4938346ea /webui/src/layout/CommentInput/CommentInput.tsx | |
parent | 12323b94398daa6cedca36fc2c58a97200092e16 (diff) | |
download | git-bug-29ea8df4259921f1789e0e6d584767fc5f54b284.tar.gz |
Commit for #541
Diffstat (limited to 'webui/src/layout/CommentInput/CommentInput.tsx')
-rw-r--r-- | webui/src/layout/CommentInput/CommentInput.tsx | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/webui/src/layout/CommentInput/CommentInput.tsx b/webui/src/layout/CommentInput/CommentInput.tsx deleted file mode 100644 index 86cc7dbb..00000000 --- a/webui/src/layout/CommentInput/CommentInput.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; - -import Content from 'src/components/Content'; - -/** - * Styles - */ -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', - }, -})); - -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 = { - inputProps?: any; - loading: boolean; - onChange: (comment: string) => void; -}; - -/** - * Component for issue comment input - * - * @param inputProps Reset input value - * @param loading Disable input when component not ready yet - * @param onChange Callback to return input value changes - */ -function CommentInput({ inputProps, loading, onChange }: Props) { - const [input, setInput] = useState<string>(''); - const [tab, setTab] = useState(0); - const classes = useStyles(); - - useEffect(() => { - if (inputProps) setInput(inputProps.value); - }, [inputProps]); - - useEffect(() => { - onChange(input); - }, [input, onChange]); - - 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; |