@@ -7,6 +7,9 @@ import { makeStyles } from '@material-ui/core/styles';
import Content from 'src/components/Content';
+/**
+ * Styles
+ */
const useStyles = makeStyles((theme) => ({
container: {
margin: theme.spacing(2, 0),
@@ -51,15 +54,27 @@ const a11yProps = (index: number) => ({
});
type Props = {
+ inputProps?: any;
loading: boolean;
onChange: (comment: string) => void;
};
-function CommentInput({ loading, onChange }: Props) {
+/**
+ * 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]);
@@ -2,12 +2,9 @@ import React, { useState, useRef } 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 CommentInput from '../../layout/CommentInput/CommentInput';
import { useAddCommentMutation } from './CommentForm.generated';
import { TimelineDocument } from './TimelineQuery.generated';
@@ -30,40 +27,23 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
display: 'flex',
justifyContent: 'flex-end',
},
+ greenButton: {
+ backgroundColor: '#2ea44fd9',
+ color: '#fff',
+ '&:hover': {
+ backgroundColor: '#2ea44f',
+ },
+ },
}));
-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 [issueComment, setIssueComment] = useState('');
+ const [inputProp, setInputProp] = useState<any>('');
const classes = useStyles({ loading });
const form = useRef<HTMLFormElement>(null);
@@ -72,7 +52,7 @@ function CommentForm({ bugId }: Props) {
variables: {
input: {
prefix: bugId,
- message: input,
+ message: issueComment,
},
},
refetchQueries: [
@@ -86,54 +66,35 @@ function CommentForm({ bugId }: Props) {
},
],
awaitRefetchQueries: true,
- }).then(() => setInput(''));
+ }).then(() => resetForm());
};
+ function resetForm() {
+ setInputProp({
+ value: '',
+ });
+ }
+
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();
- }
+ if (issueComment.length > 0) 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>
+ <CommentInput
+ inputProps={inputProp}
+ loading={loading}
+ onChange={(comment: string) => setIssueComment(comment)}
+ />
<div className={classes.actions}>
<Button
+ className={classes.greenButton}
variant="contained"
color="primary"
type="submit"
- disabled={loading}
+ disabled={loading || issueComment.length === 0}
>
Comment
</Button>
@@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField/TextField';
import { fade, makeStyles, Theme } from '@material-ui/core/styles';
-import CommentInput from '../bug/CommentInput';
+import CommentInput from '../../layout/CommentInput/CommentInput';
import { useNewBugMutation } from './NewBug.generated';
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) => ({
display: 'flex',
justifyContent: 'flex-end',
},
- gitbugButton: {
+ greenButton: {
backgroundColor: '#2ea44fd9',
color: '#fff',
'&:hover': {
@@ -105,7 +105,7 @@ function NewBugPage() {
/>
<div className={classes.actions}>
<Button
- className={classes.gitbugButton}
+ className={classes.greenButton}
variant="contained"
type="submit"
disabled={isFormValid() ? false : true}