feat: improve essay and code tasks to render correctly with 1 row

the-answerbook-project · May 28, 2024 · 849adc0 · 849adc0
1 parent 9ffca8c
commit 849adc0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 24 deletions.
diff --git a/src/components/questionStructure/Task/variants/CodeTask.tsx b/src/components/questionStructure/Task/variants/CodeTask.tsx
@@ -1,4 +1,4 @@
-import { TextArea } from '@radix-ui/themes'
+import { TextArea, TextField } from '@radix-ui/themes'
 import React, { FC, useEffect, useState } from 'react'
 
 import { TaskType } from '../constants'
@@ -20,15 +20,14 @@ export const CodeTask: FC<CodeTaskProps> = ({
   const [inputValue, setInputValue] = useState(answer)
   useEffect(() => onAnswerUpdate(inputValue), [inputValue, onAnswerUpdate])
 
-  return (
-    <TextArea
-      value={inputValue}
-      onChange={defaultOnChangeHandler(setInputValue)}
-      className="monospaced"
-      variant="soft"
-      placeholder="Your answer here…"
-      rows={lines}
-      disabled={disabled}
-    />
-  )
+  const commonProps = {
+    value: inputValue,
+    onChange: defaultOnChangeHandler(setInputValue),
+    placeholder: 'Your answer here…',
+    disabled: disabled,
+    variant: 'soft' as 'soft',
+    className: 'monospaced',
+  }
+  if (lines === 1) return <TextField.Root {...commonProps} />
+  return <TextArea {...commonProps} rows={lines} />
 }
diff --git a/src/components/questionStructure/Task/variants/EssayTask.tsx b/src/components/questionStructure/Task/variants/EssayTask.tsx
@@ -1,4 +1,4 @@
-import { TextArea } from '@radix-ui/themes'
+import { TextArea, TextField } from '@radix-ui/themes'
 import React, { FC, useEffect, useState } from 'react'
 
 import { TaskType } from '../constants'
@@ -18,15 +18,13 @@ export const EssayTask: FC<EssayTaskProps> = ({
 }) => {
   const [inputValue, setInputValue] = useState(answer)
   useEffect(() => onAnswerUpdate(inputValue), [inputValue, onAnswerUpdate])
-
-  return (
-    <TextArea
-      value={inputValue}
-      onChange={defaultOnChangeHandler(setInputValue)}
-      variant="soft"
-      placeholder="Your answer here…"
-      rows={lines}
-      disabled={disabled}
-    />
-  )
+  const commonProps = {
+    value: inputValue,
+    onChange: defaultOnChangeHandler(setInputValue),
+    placeholder: 'Your answer here…',
+    disabled: disabled,
+    variant: 'soft' as 'soft',
+  }
+  if (lines === 1) return <TextField.Root {...commonProps} />
+  return <TextArea {...commonProps} rows={lines} />
 }