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; function TabPanel({ children, value, index, ...props }: TabPanelProps) { return ( ); } 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(''); const [tab, setTab] = useState(0); const classes = useStyles(); useEffect(() => { if (inputProps) setInput(inputProps.value); }, [inputProps]); useEffect(() => { onChange(input); }, [input, onChange]); return (
setTab(t)}>
setInput(e.target.value)} disabled={loading} />
); } export default CommentInput;