polls: refactor PollQuestion.jsx and add TextareaWithCounter.jsx

liqd · Nov 4, 2024 · c6d7590 · c6d7590
1 parent e03c69a
commit c6d7590
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 60 deletions.
diff --git a/adhocracy4/polls/static/PollDetail/CharCounter.jsx b/adhocracy4/polls/static/PollDetail/CharCounter.jsx
@@ -1,9 +1,16 @@
 import React from 'react'
+import django from 'django'
 
-export const CharCounter = (props) => {
-  const current = props.value.length
+const translated = {
+  characters: django.gettext('characters')
+}
+
+export const CharCounter = ({ value, max, id }) => {
+  const current = value.length
 
   return (
-    <span>{current}/{props.max}</span>
+    <span className="char-counter" id={id}>
+      {current}/{max} {translated.characters}
+    </span>
   )
 }
diff --git a/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx b/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx
@@ -26,9 +26,9 @@ export const PollOpenQuestion = (props) => {
 
   return (
     <div className="poll poll--question">
-      <h2>{props.question.label}</h2>
+      <h3>{props.question.label}</h3>
       {questionHelpText}
-      <div className="poll__rows">
+      <div>
         <textarea
           className="form-control"
           name="question"
@@ -37,10 +37,9 @@ export const PollOpenQuestion = (props) => {
           disabled={!props.question.authenticated || props.question.isReadOnly}
           onChange={(event) => { handleOpenChange(event) }}
           maxLength={maxlength}
+          rows={7}
         />
-        <div className="poll__char-counter">
-          <CharCounter value={userAnswer} max={maxlength} />
-        </div>
+        <CharCounter value={userAnswer} max={maxlength} />
       </div>
     </div>
   )

diff --git a/adhocracy4/polls/static/PollDetail/PollQuestion.jsx b/adhocracy4/polls/static/PollDetail/PollQuestion.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import django from 'django'
-import { CharCounter } from './CharCounter'
-import FormFieldError from '../../../static/FormFieldError'
+import { TextareaWithCounter } from './TextareaWithCounter'
 
 const translated = {
   multiple: django.gettext('Multiple answers are possible.'),
@@ -70,7 +69,7 @@ export const PollQuestion = (props) => {
   return (
     <form>
       <div className="poll poll--question">
-        <h2>{props.question.label}</h2>
+        <h3>{props.question.label}</h3>
         {questionHelpText}
         {multiHelpText}
         <div className="poll__rows">
@@ -92,31 +91,17 @@ export const PollQuestion = (props) => {
                       disabled={!props.question.authenticated || props.question.isReadOnly}
                     />
                     <span className="radio__text">{choice.is_other_choice ? translated.other : choice.label}</span>
-
-                    {choice.is_other_choice &&
-                      <>
-                        <textarea
-                          className="form-control"
-                          name="question"
-                          value={otherChoiceAnswer}
-                          id={'id_choice-' + choice.id + '-other'}
-                          onChange={(event) => { handleOtherChange(event) }}
-                          disabled={!props.question.authenticated || props.question.isReadOnly || !checked}
-                          maxLength={maxlength}
-                          aria-invalid={props.errors ? 'true' : 'false'}
-                          aria-describedby={props.errors && 'id_error-' + props.id}
-                        />
-                        {checked
-                          ? (
-                            <>
-                              <div className="poll__char-counter">
-                                <CharCounter value={otherChoiceAnswer} max={maxlength} />
-                              </div>
-                              <FormFieldError id={'id_error-' + choice.id} error={errors} field={choice.id} />
-                            </>
-                            )
-                          : null}
-                      </>}
+                    {choice.is_other_choice && checked && (
+                      <TextareaWithCounter
+                        name="question"
+                        id={choice.id}
+                        value={otherChoiceAnswer}
+                        onChange={handleOtherChange}
+                        disabled={!props.question.authenticated || props.question.isReadOnly}
+                        maxLength={maxlength}
+                        error={errors}
+                      />
+                    )}
                   </label>
                 )
               } else {
@@ -133,30 +118,17 @@ export const PollQuestion = (props) => {
                       disabled={!props.question.authenticated || props.question.isReadOnly}
                     />
                     <span className="radio__text radio__text--checkbox">{choice.is_other_choice ? translated.other : choice.label}</span>
-                    {choice.is_other_choice &&
-                      <>
-                        <textarea
-                          className="form-control"
-                          name="question"
-                          id={'id_choice-' + choice.id + '-other'}
-                          value={otherChoiceAnswer}
-                          onChange={(event) => { handleOtherChange(event) }}
-                          disabled={!props.question.authenticated || props.question.isReadOnly || !checked}
-                          maxLength={maxlength}
-                          aria-invalid={props.errors ? 'true' : 'false'}
-                          aria-describedby={props.errors && 'id_error-' + props.id}
-                        />
-                        {checked
-                          ? (
-                            <>
-                              <div className="poll__char-counter">
-                                <CharCounter value={otherChoiceAnswer} max={maxlength} />
-                              </div>
-                              <FormFieldError id={'id_error-' + choice.id} error={errors} field={choice.id} />
-                            </>
-                            )
-                          : null}
-                      </>}
+                    {choice.is_other_choice && checked && (
+                      <TextareaWithCounter
+                        name="question"
+                        id={choice.id}
+                        value={otherChoiceAnswer}
+                        onChange={handleOtherChange}
+                        disabled={!props.question.authenticated || props.question.isReadOnly}
+                        maxLength={maxlength}
+                        error={errors}
+                      />
+                    )}
                   </label>
                 )
               }

diff --git a/adhocracy4/polls/static/PollDetail/TextareaWithCounter.jsx b/adhocracy4/polls/static/PollDetail/TextareaWithCounter.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import django from 'django'
+import { CharCounter } from './CharCounter'
+import FormFieldError from '../../../static/FormFieldError'
+
+const translated = {
+  specify: django.gettext('Please specify (required)')
+}
+
+export const TextareaWithCounter = ({ value, onChange, disabled, maxLength, error, id, name }) => {
+  const handleInputChange = (e) => {
+    onChange(e)
+    e.target.style.height = 'auto'
+    e.target.style.height = e.target.scrollHeight + 'px'
+  }
+
+  return (
+    <div className="textarea-with-counter">
+      <label htmlFor={'id_choice-' + id + '-other'} className="textarea-with-counter__label">
+        {translated.specify}
+      </label>
+      <textarea
+        className="textarea-with-counter__textarea"
+        name={name}
+        id={'id_choice-' + id + '-other'}
+        value={value}
+        onChange={handleInputChange}
+        disabled={disabled}
+        maxLength={maxLength}
+        aria-invalid={error ? 'true' : 'false'}
+        aria-describedby={'id_error-' + id + ' id_char-count-' + id}
+        rows={3}
+      />
+      <CharCounter value={value} max={maxLength} id={'id_char-count-' + id} />
+      {error && <FormFieldError id={'id_error-' + id} error={error} field={id} />}
+    </div>
+  )
+}