Enabling breaklines when displaying paragraphs with multiple breaklin…

…esa cross the text
ChildMindInstitute · Oct 30, 2024 · cddd05e · cddd05e
1 parent 508da05
commit cddd05e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 29 deletions.
diff --git a/src/entities/activity/ui/items/ActionPlan/ResponseSegment.tsx b/src/entities/activity/ui/items/ActionPlan/ResponseSegment.tsx
@@ -65,6 +65,14 @@ export const ResponseSegment = ({ phrasalData, field, isAtStart }: ResponseSegme
     words = isAnswersSkipped(fieldPhrasalData.values)
       ? [t('questionSkipped')]
       : fieldPhrasalData.values.map(transformValue);
+  } else if (fieldPhrasalDataType === 'paragraph') {
+    words = isAnswersSkipped(fieldPhrasalData.values)
+      ? [t('questionSkipped')]
+      : fieldPhrasalData.values
+          .flatMap((value) => value.split(/\r?\n+/)) // Split each paragraph by newlines
+          .map((sentence) => sentence.trim()) // Trim whitespace around each sentence
+          .filter((sentence) => sentence.length > 0) // Filter out any empty strings
+          .map(transformValue); // Transform each sentence individually
   } else if (fieldPhrasalDataType === 'indexed-array') {
     const indexedAnswers = fieldPhrasalData.values[field.itemIndex] || [];
     words = isAnswersSkipped(indexedAnswers)
@@ -118,32 +126,52 @@ export const ResponseSegment = ({ phrasalData, field, isAtStart }: ResponseSegme
 
   return (
     <Text component="span" fontWeight="700" fontSize="inherit" lineHeight="inherit">
-      {fieldDisplayMode === 'bullet_list' ||
-      fieldDisplayMode === 'bullet_list_option_row' ||
-      fieldDisplayMode === 'bullet_list_text_row' ? (
-        <>
-          {isAtStart ? null : (
-            <span>
-              &nbsp;
-              <br />
-            </span>
-          )}
-          <Box
-            component="ul"
-            marginTop={isAtStart ? `0px` : undefined}
-            paddingLeft={`${listPadding}px`}
-          >
-            {words.map((item, index) => (
-              <li key={index}>{item}</li>
-            ))}
-          </Box>
-        </>
-      ) : (
-        <>
-          {isAtStart ? '' : ' '}
-          {joinSentenceWords(words)}
-        </>
-      )}
+      {(() => {
+        if (
+          fieldDisplayMode === 'bullet_list' ||
+          fieldDisplayMode === 'bullet_list_option_row' ||
+          fieldDisplayMode === 'bullet_list_text_row'
+        ) {
+          return (
+            <>
+              {isAtStart ? null : (
+                <span>
+                  &nbsp;
+                  <br />
+                </span>
+              )}
+              <Box
+                component="ul"
+                marginTop={isAtStart ? `0px` : undefined}
+                paddingLeft={`${listPadding}px`}
+              >
+                {words.map((item, index) => (
+                  <li key={index}>{item}</li>
+                ))}
+              </Box>
+            </>
+          );
+        } else if (fieldPhrasalDataType === 'paragraph') {
+          return (
+            <>
+              {isAtStart ? '' : ' '}
+              {words.map((item, index) => (
+                <span key={index}>
+                  {item}
+                  {index < words.length - 1 && <br />}{' '}
+                </span>
+              ))}
+            </>
+          );
+        } else {
+          return (
+            <>
+              {isAtStart ? '' : ' '}
+              {joinSentenceWords(words)}
+            </>
+          );
+        }
+      })()}
     </Text>
   );
 };
diff --git a/src/entities/activity/ui/items/ActionPlan/phrasalData.ts b/src/entities/activity/ui/items/ActionPlan/phrasalData.ts
@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import { phrasalTemplateCompatibleResponseTypes } from '~/abstract/lib/constants';
 import { ActivityItemType } from '~/entities/activity/lib';
 import { ItemRecord } from '~/entities/applet/model';
@@ -23,6 +24,8 @@ type ActivityPhrasalBaseData<
 
 type ActivityPhrasalArrayFieldData = ActivityPhrasalBaseData<'array', string[]>;
 
+type ActivityPhrasalParagraphFieldData = ActivityPhrasalBaseData<'paragraph', string[]>;
+
 type ActivityPhrasalItemizedArrayValue = Record<number, string[]>;
 
 type ActivityPhrasalIndexedArrayFieldData = ActivityPhrasalBaseData<
@@ -45,7 +48,8 @@ type ActivityPhrasalMatrixFieldData = ActivityPhrasalBaseData<'matrix', Activity
 type ActivityPhrasalData =
   | ActivityPhrasalArrayFieldData
   | ActivityPhrasalIndexedArrayFieldData
-  | ActivityPhrasalMatrixFieldData;
+  | ActivityPhrasalMatrixFieldData
+  | ActivityPhrasalParagraphFieldData;
 
 export type ActivitiesPhrasalData = Record<string, ActivityPhrasalData>;
 
@@ -84,15 +88,21 @@ export const extractActivitiesPhrasalData = (items: ItemRecord[]): ActivitiesPhr
     } else if (
       item.responseType === 'numberSelect' ||
       item.responseType === 'slider' ||
-      item.responseType === 'text' ||
-      item.responseType === 'paragraphText'
+      item.responseType === 'text'
     ) {
       const dateFieldData: ActivityPhrasalArrayFieldData = {
         type: 'array',
         values: item.answer.map((value) => `${value || ''}`),
         context: fieldDataContext,
       };
       fieldData = dateFieldData;
+    } else if (item.responseType === 'paragraphText') {
+      const dateFieldData: ActivityPhrasalParagraphFieldData = {
+        type: 'paragraph',
+        values: item.answer.map((value) => value || ''),
+        context: fieldDataContext,
+      };
+      fieldData = dateFieldData;
     } else if (item.responseType === 'singleSelect' || item.responseType === 'multiSelect') {
       const dateFieldData: ActivityPhrasalArrayFieldData = {
         type: 'array',