addin design styling to paragraph and text items

ChildMindInstitute · Aug 30, 2024 · 213ab21 · 213ab21
1 parent d5a073c
commit 213ab21
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 22 deletions.
diff --git a/src/entities/activity/ui/items/ParagraphTextItem.tsx b/src/entities/activity/ui/items/ParagraphTextItem.tsx
@@ -1,5 +1,8 @@
+import { useState } from 'react';
+
 import { ParagraphTextItem as ParagraphItemType } from '../../lib';
 
+import { Theme } from '~/shared/constants';
 import { TextItem as BaseTextItem, Box } from '~/shared/ui';
 import { useCustomTranslation } from '~/shared/utils';
 
@@ -18,12 +21,11 @@ export const ParagraphTextItem = ({
 }: ParagraphItemProps) => {
   const { maxResponseLength } = item.config;
   const numCharacters = value?.length || 0;
+  const [hasError, setHasError] = useState(numCharacters > maxResponseLength);
   const { t } = useCustomTranslation();
 
   const onHandleValueChange = (value: string) => {
-    if (value.length > maxResponseLength) {
-      return;
-    }
+    setHasError(value.length > maxResponseLength);
 
     if (value.length === 0) {
       return onValueChange([]);
@@ -39,14 +41,14 @@ export const ParagraphTextItem = ({
         onValueChange={onHandleValueChange}
         disabled={isDisabled}
         isMultiline={true}
-        maxCharacters={maxResponseLength}
+        hasError={hasError}
       />
       <Box
         display="flex"
         justifyContent="flex-end"
         alignItems="center"
         fontSize="small"
-        color="#72777F"
+        color={hasError ? Theme.colors.light.error : Theme.colors.light.outline}
         mr={2}
       >
         {`${t('charactersCount', { numCharacters, maxCharacters: maxResponseLength })}`}

diff --git a/src/entities/activity/ui/items/TextItem.tsx b/src/entities/activity/ui/items/TextItem.tsx
@@ -1,6 +1,12 @@
+import { useState } from 'react';
+
+import { Box } from '@mui/material';
+
 import { TextItem as TextItemType } from '../../lib';
 
+import { Theme } from '~/shared/constants';
 import { TextItem as BaseTextItem } from '~/shared/ui';
+import { useCustomTranslation } from '~/shared/utils';
 
 type TextItemProps = {
   item: TextItemType;
@@ -11,10 +17,15 @@ type TextItemProps = {
 
 export const TextItem = ({ item, value, onValueChange, isDisabled }: TextItemProps) => {
   const { maxResponseLength } = item.config;
+  const [hasError, setHasError] = useState(false);
+
+  const numCharacters = value?.length || 0;
+
+  const { t } = useCustomTranslation();
 
   const onHandleValueChange = (value: string) => {
     if (value.length > maxResponseLength) {
-      return;
+      setHasError(true);
     }
 
     if (value.length === 0) {
@@ -24,5 +35,24 @@ export const TextItem = ({ item, value, onValueChange, isDisabled }: TextItemPro
     return onValueChange([value]);
   };
 
-  return <BaseTextItem value={value} onValueChange={onHandleValueChange} disabled={isDisabled} />;
+  return (
+    <Box>
+      <BaseTextItem
+        value={value}
+        onValueChange={onHandleValueChange}
+        disabled={isDisabled}
+        isMultiline={false}
+      />
+      <Box
+        display="flex"
+        justifyContent="flex-end"
+        alignItems="center"
+        fontSize="small"
+        color={hasError ? `${Theme.colors.light.error}` : Theme.colors.light.outline}
+        mr={2}
+      >
+        {`${t('charactersCount', { numCharacters, maxCharacters: maxResponseLength })}`}
+      </Box>
+    </Box>
+  );
 };
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
@@ -19,6 +19,7 @@
     "pleaseProvideAdditionalText": "Please provide additional text",
     "pleaseListenToAudio": "Please listen to the audio until the end.",
     "onlyNumbersAllowed": "Only numbers are allowed",
+    "answerTooLarge": "Please provide a shorter answer",
     "question_count_plural": "{{length}} questions",
     "question_count_singular": "{{length}} question",
     "timedActivityTitle": "is a Timed Activity.",

diff --git a/src/i18n/fr/translation.json b/src/i18n/fr/translation.json
@@ -19,6 +19,7 @@
     "pleaseProvideAdditionalText": "Veuillez fournir un texte supplémentaire",
     "pleaseListenToAudio": "Veuillez écouter l'audio jusqu'à la fin.",
     "onlyNumbersAllowed": "Seuls les numéros sont autorisés",
+    "answerTooLarge": "Veuillez fournir une réponse plus courte",
 
     "timedActivityTitle": "est une activité chronométrée.",
     "youWillHaveToCompleteIt": "Vous aurez {{hours}} heures {{minutes}} minutes pour le terminer.",

diff --git a/src/shared/ui/Items/Text/index.tsx b/src/shared/ui/Items/Text/index.tsx
@@ -1,25 +1,16 @@
+import { Theme } from '~/shared/constants';
 import { BaseTextInput } from '~/shared/ui';
 
 type Props = {
   value: string | undefined;
   onValueChange: (value: string) => void;
   disabled: boolean;
   isMultiline?: boolean;
-  maxCharacters?: number;
+  hasError?: boolean;
 };
 
-export const TextItem = ({
-  value = '',
-  onValueChange,
-  disabled,
-  isMultiline,
-  maxCharacters,
-}: Props) => {
+export const TextItem = ({ value = '', onValueChange, disabled, isMultiline, hasError }: Props) => {
   const handleOnChange = (value: string) => {
-    if (isMultiline && maxCharacters && value.length > maxCharacters) {
-      return;
-    }
-
     onValueChange(value);
   };
   return (
@@ -35,18 +26,22 @@ export const TextItem = ({
       sx={
         isMultiline
           ? {
-              borderRadius: '12px',
               '& .MuiInputBase-input': {
                 '&::-webkit-scrollbar': {
                   width: '4px',
                 },
                 '&::-webkit-scrollbar-thumb': {
                   backgroundColor: '#C2C7CF',
-                  borderRadius: '100px',
                 },
               },
               '& .MuiInputBase-root': {
-                paddingRight: '2px', // Remove padding inside the input
+                paddingRight: '2px', // Reduce padding inside the input
+                ...(hasError ? { border: `2px  solid ${Theme.colors.light.error}` } : {}),
+                borderWidth: '2px',
+                borderRadius: '20px',
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                border: hasError ? 'none' : `2px solid ${Theme.colors.light.outline}`,
               },
             }
           : null

diff --git a/src/widgets/Survey/model/validateItem.ts b/src/widgets/Survey/model/validateItem.ts
@@ -29,6 +29,12 @@ function isAnswerShouldBeNumeric(item: appletModel.ItemRecord) {
   return false;
 }
 
+function isAnswerTooLarge(item: appletModel.ItemRecord) {
+  if (item.responseType === 'paragraphText' && item.config.maxResponseLength) {
+    return item.answer?.[0]?.length > item.config.maxResponseLength ?? true;
+  }
+}
+
 function isAnswerEmpty(item: appletModel.ItemRecord): boolean {
   if (item.responseType === 'timeRange') {
     const fromTime = Date.parse(item.answer[0]);
@@ -113,6 +119,7 @@ export function validateBeforeMoveForward({
 
   const shouldBeEmpty = isAnswerShouldBeEmpty(item);
   const isEmpty = isAnswerEmpty(item);
+  const isTooLarge = isAnswerTooLarge(item);
 
   if (!shouldBeEmpty && !isEmpty) {
     showWarning('pleaseAnswerTheQuestion');
@@ -133,6 +140,11 @@ export function validateBeforeMoveForward({
     return false;
   }
 
+  if (isTooLarge) {
+    showWarning('answerTooLarge');
+    return false;
+  }
+
   const hasAdditionalTextField = hasAdditionalResponse(item);
   const isAdditionalTextRequired = hasAdditionalTextField && requiresAdditionalResponse(item);
   const isAdditionalTextEmpty = hasAdditionalTextField && !item.additionalText;