Merge branch 'main' into avm99963-monorail
Merged commit 4137ed7879acadbf891e8c471108acb874dae886.
GitOrigin-RevId: b6100ffc5b1da355a35f37b13fcaaf746ee8b307
diff --git a/static_src/react/issue-wizard/CustomQuestions/CustomQuestionTextarea.tsx b/static_src/react/issue-wizard/CustomQuestions/CustomQuestionTextarea.tsx
new file mode 100644
index 0000000..fdbdf1f
--- /dev/null
+++ b/static_src/react/issue-wizard/CustomQuestions/CustomQuestionTextarea.tsx
@@ -0,0 +1,59 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import React from 'react';
+import OutlinedInput from "@material-ui/core/OutlinedInput";
+import {makeStyles} from '@material-ui/styles';
+
+const userStyles = makeStyles({
+ head: {
+ marginTop: '1.5rem',
+ fontSize: '1rem'
+ },
+ inputArea: {
+ width: '100%',
+ },
+ tip: {
+ margin: '0.5rem 0'
+ },
+});
+
+type Props = {
+ question: string,
+ tip?: string,
+ updateAnswers: Function,
+}
+
+export default function CustomQuestionTextarea(props: Props): React.ReactElement {
+
+ const classes = userStyles();
+
+ const {question, updateAnswers, tip} = props;
+ const [answer, setAnswer] = React.useState('');
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setAnswer(e.target.value);
+ updateAnswers(e.target.value);
+ };
+
+ const getQuestionInnerHtml = ()=> {
+ return {__html: question};
+ }
+
+ const getTipInnerHtml = ()=> {
+ return {__html: tip};
+ }
+ return (
+ <>
+ <h3 dangerouslySetInnerHTML={getQuestionInnerHtml()} className={classes.head}/>
+ {tip? <div dangerouslySetInnerHTML={getTipInnerHtml()} className={classes.tip}/> : null}
+ <OutlinedInput
+ multiline={true}
+ rows={3}
+ value={answer}
+ onChange={handleChange}
+ className={classes.inputArea}
+ />
+ </>
+ );
+}