aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Question.tsx
diff options
context:
space:
mode:
authorGravatar Hassan Abouelela <[email protected]>2021-06-10 23:22:39 +0300
committerGravatar Hassan Abouelela <[email protected]>2021-06-10 23:22:39 +0300
commit5f488f4c492e73a57f7f3d847888e28c426e79ed (patch)
tree5a5cd81a573bb13f37576d07eee5b8e5c7a74b5b /src/components/Question.tsx
parentRemoves Linebreak Linting Rule (diff)
Adds Support For Linebreaks In Content
Adds support for inserting line breaks in question names, and in the case of sections, question data.
Diffstat (limited to 'src/components/Question.tsx')
-rw-r--r--src/components/Question.tsx23
1 files changed, 16 insertions, 7 deletions
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 0af745e..2f5c496 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -205,6 +205,9 @@ class RenderedQuestion extends React.Component<QuestionProp> {
render(): JSX.Element {
const question = this.props.question;
+ const name = question.name.split("\n").map((line, index) => <span key={index}>{line}<br/></span>);
+ name.push(<span key={name.length - 1}>{name.pop()?.props.children[0]}</span>);
+
if (question.type === QuestionType.Section) {
const styles = css`
h1 {
@@ -227,18 +230,24 @@ class RenderedQuestion extends React.Component<QuestionProp> {
}
`;
+ const data = question.data["text"];
+ let text;
+
+ if (data && typeof(data) === "string") {
+ text = data.split("\n").map((line, index) => <h3 css={selectable} key={index}>{line}<br/></h3>);
+ text.push(<h3 css={selectable} key={data.length - 1}>{text.pop()?.props.children[0]}</h3>);
+ } else {
+ text = "";
+ }
+
return <div css={styles}>
- <h1 css={[selectable, css`line-height: 2.5rem;`]}>{question.name}</h1>
- { question.data["text"] ? <h3 css={selectable}>{question.data["text"]}</h3> : "" }
+ <h1 css={[selectable, css`line-height: 2.5rem;`]}>{name}</h1>
+ { text }
<hr css={css`color: gray; margin: 3rem 0;`}/>
</div>;
} else {
const requiredStarStyles = css`
- span {
- display: none;
- }
-
.required {
display: inline-block;
position: relative;
@@ -261,7 +270,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
return <div ref={this.props.scroll_ref}>
<h2 css={[selectable, requiredStarStyles]}>
- {question.name}<span className={question.required ? "required" : ""}>*</span>
+ {name}<span css={css`display: none;`} className={question.required ? "required" : ""}>*</span>
</h2>
{ create_input(this.props, this.handler, this.blurHandler, this.props.focus_ref) }
<ErrorMessage show={!valid} message={error} />