Merge pull request #457 from beda-software/context-readonly-widgets

Update readonly QR form item and group controls

src/components/BaseQuestionnaireResponseForm/ReadonlyQuestionnaireResponseForm.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import {
     calcInitialContext,
@@ -8,6 +9,13 @@ import {
     QuestionnaireResponseFormProvider,
 } from 'sdc-qrf';
 
+import {
+    ItemControlGroupItemReadonlyWidgetsContext,
+    ItemControlQuestionItemReadonlyWidgetsContext,
+} from 'src/components/BaseQuestionnaireResponseForm/context';
+import { MarkdownRenderControl } from 'src/components/BaseQuestionnaireResponseForm/readonly-widgets/MarkdownRender';
+
+import { AudioAttachment } from './readonly-widgets/AudioAttachment';
 import { QuestionBoolean } from './readonly-widgets/boolean';
 import { QuestionChoice } from './readonly-widgets/choice';
 import { QuestionDateTime } from './readonly-widgets/date';
@@ -19,7 +27,6 @@ import { AnxietyScore, DepressionScore } from './readonly-widgets/score';
 import { QuestionText, TextWithInput } from './readonly-widgets/string';
 import { TimeRangePickerControl } from './readonly-widgets/TimeRangePickerControl';
 import { UploadFile } from './readonly-widgets/UploadFile';
-import { AudioAttachment } from './readonly-widgets/AudioAttachment';
 
 interface Props extends Partial<QRFContextData> {
     formData: QuestionnaireResponseFormData;
@@ -40,6 +47,9 @@ export function ReadonlyQuestionnaireResponseForm(props: Props) {
 
     const formValues = watch();
 
+    const ItemControlQuestionItemReadonlyWidgetsFromContext = useContext(ItemControlQuestionItemReadonlyWidgetsContext);
+    const ItemControlGroupItemReadonlyWidgetsFromContext = useContext(ItemControlGroupItemReadonlyWidgetsContext);
+
     return (
         <FormProvider {...methods}>
             <form>
@@ -54,6 +64,7 @@ export function ReadonlyQuestionnaireResponseForm(props: Props) {
                         row: Row,
                         'time-range-picker': TimeRangePickerControl,
                         ...itemControlGroupItemComponents,
+                        ...ItemControlGroupItemReadonlyWidgetsFromContext,
                     }}
                     questionItemComponents={{
                         text: QuestionText,
@@ -76,7 +87,9 @@ export function ReadonlyQuestionnaireResponseForm(props: Props) {
                         'depression-score': DepressionScore,
                         'input-inside-text': TextWithInput,
                         'audio-recorder-uploader': AudioAttachment,
+                        'markdown-editor': MarkdownRenderControl,
                         ...itemControlQuestionItemComponents,
+                        ...ItemControlQuestionItemReadonlyWidgetsFromContext,
                     }}
                 >
                     <>

src/components/BaseQuestionnaireResponseForm/context.ts

@@ -7,6 +7,9 @@ import { BaseQuestionnaireResponseFormProps } from '.';
 export const ItemControlQuestionItemWidgetsContext = createContext<ItemControlQuestionItemComponentMapping>({});
 export const ItemControlGroupItemWidgetsContext = createContext<ItemControlGroupItemComponentMapping>({});
 
+export const ItemControlQuestionItemReadonlyWidgetsContext = createContext<ItemControlQuestionItemComponentMapping>({});
+export const ItemControlGroupItemReadonlyWidgetsContext = createContext<ItemControlGroupItemComponentMapping>({});
+
 interface BaseQuestionnaireResponseFormPropsContextProps extends BaseQuestionnaireResponseFormProps {
     submitting: boolean;
     debouncedSaveDraft?: DebouncedFunc<(currentFormValues: FormItems) => Promise<void>>;

src/components/BaseQuestionnaireResponseForm/readonly-widgets/MarkdownRender/index.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import Markdown from 'react-markdown';
+import { QuestionItemProps } from 'sdc-qrf';
+
+import { useFieldController } from 'src/components/BaseQuestionnaireResponseForm/hooks';
+
+import s from '../ReadonlyWidgets.module.scss';
+import { S } from '../ReadonlyWidgets.styles';
+
+export function MarkdownRenderControl({ parentPath, questionItem }: QuestionItemProps) {
+    const { linkId, text } = questionItem;
+    const fieldName = [...parentPath, linkId, 0, 'value', 'string'];
+    const { value } = useFieldController(fieldName, questionItem);
+
+    return (
+        <S.Question className={classNames(s.question, s.column, 'form__question')}>
+            <span className={s.questionText}>{text}</span>
+            <Markdown>{value || '-'}</Markdown>
+        </S.Question>
+    );
+}