added more rhf

helsenorge · Feb 7, 2024 · e4a3132 · e4a3132
1 parent 2c7a12a
commit e4a3132
Show file tree

Hide file tree

Showing 13 changed files with 218 additions and 73 deletions.
diff --git a/src/components/formcomponents/boolean/boolean.tsx b/src/components/formcomponents/boolean/boolean.tsx
@@ -6,8 +6,10 @@ import { ThunkDispatch } from 'redux-thunk';
 
 import { QuestionnaireItem, QuestionnaireResponseItemAnswer, QuestionnaireResponseItem, Questionnaire } from '../../../types/fhir';
 import { ValidationProps } from '../../../types/formTypes/validation';
+import { Resources } from '../../../types/resources';
 
 import Checkbox from '@helsenorge/designsystem-react/components/Checkbox';
+import FormGroup from '@helsenorge/designsystem-react/components/FormGroup';
 import Label from '@helsenorge/designsystem-react/components/Label';
 
 // import Validation from '@helsenorge/designsystem-react/components/Validation';
@@ -21,9 +23,7 @@ import { getValidationTextExtension } from '../../../util/extension';
 import { getId, getText, getTextValidationErrorMessage, isReadOnly, isRequired, renderPrefix } from '../../../util/index';
 import { mapStateToProps, mergeProps, mapDispatchToProps } from '../../../util/map-props';
 import { Path } from '../../../util/refero-core';
-import { Resources } from '../../../types/resources';
 import withCommonFunctions, { WithCommonFunctionsProps } from '../../with-common-functions';
-import FormGroup from '@helsenorge/designsystem-react/components/FormGroup';
 
 export interface BooleanProps extends WithCommonFunctionsProps {
   item: QuestionnaireItem;
@@ -80,7 +80,7 @@ const Boolean = ({
       promptLoginMessage();
     }
   };
-  const filedState = getFieldState(getId(item.linkId));
+  const { error } = getFieldState(getId(item.linkId));
   const labelText = `${renderPrefix(item)} ${getText(item, onRenderMarkdown, questionnaire, resources)}`;
 
   if (pdf) {
@@ -106,28 +106,25 @@ const Boolean = ({
   // helpElement={this.props.renderHelpElement()}
   // validateOnExternalUpdate={true}
   // isStyleBlue
-  console.log('filedState', filedState);
+  console.log('filedState', error);
   console.log('getValidationTextExtension', getValidationTextExtension(item));
   const getRequiredErrorMessage = (item: QuestionnaireItem): string | undefined => {
     return isRequired(item) ? resources?.formRequiredErrorMessage : undefined;
   };
   return (
     <div className="page_refero__component page_refero__component_boolean">
-      <Checkbox
-        {...register(getId(item.linkId), {
-          required: { value: isRequired(item), message: getRequiredErrorMessage(item) || '' },
-          disabled: isReadOnly(item),
-          onChange: handleChange,
-        })}
-        label={<Label labelTexts={[{ text: labelText }]} afterLabelChildren={<>{renderHelpButton()}</>} />}
-        required={isRequired(item)}
-        checked={getBooleanValue(answer, item)}
-        onChange={handleChange}
-        disabled={isReadOnly(item)}
-        className="page_refero__input"
-        errorText={filedState.error?.message}
-        error={filedState.invalid}
-      />
+      <FormGroup error={error?.message}>
+        <Checkbox
+          {...register(getId(item.linkId), {
+            required: { value: isRequired(item), message: getRequiredErrorMessage(item) || '' },
+            disabled: isReadOnly(item),
+            onChange: handleChange,
+          })}
+          label={<Label labelTexts={[{ text: labelText }]} afterLabelChildren={<>{renderHelpButton()}</>} />}
+          checked={getBooleanValue(answer, item)}
+          className="page_refero__input"
+        />
+      </FormGroup>
       {renderDeleteButton('page_refero__deletebutton--margin-top')}
       {repeatButton}
       {children ? <div className="nested-fieldset nested-fieldset--full-height">{children}</div> : null}

diff --git a/src/components/formcomponents/choice-common/autosuggest-view.tsx b/src/components/formcomponents/choice-common/autosuggest-view.tsx
@@ -5,6 +5,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { AutoSuggestProps } from '../../../types/autoSuggestProps';
 import { ValueSet, QuestionnaireItem, Questionnaire, Coding, QuestionnaireResponseItemAnswer } from '../../../types/fhir';
+import { Resources } from '../../../types/resources';
 
 import Loader from '@helsenorge/designsystem-react/components/Loader';
 import NotificationPanel from '@helsenorge/designsystem-react/components/NotificationPanel';
@@ -14,13 +15,12 @@ import Autosuggest, { Suggestion } from '@helsenorge/autosuggest/components/auto
 import { debounce } from '@helsenorge/core-utils/debounce';
 
 import { OPEN_CHOICE_ID } from '../../../constants';
+import { OPEN_CHOICE_SYSTEM } from '../../../constants/codingsystems';
 import ItemType from '../../../constants/itemType';
 import { getValidationTextExtension } from '../../../util/extension';
 import { isRequired, getId, getSublabelText } from '../../../util/index';
-import { Resources } from '../../../types/resources';
 import Label from '../label';
 import SubLabel from '../sublabel';
-import { OPEN_CHOICE_SYSTEM } from '../../../constants/codingsystems';
 
 interface AutosuggestViewProps {
   handleChange: (code?: string, systemArg?: string, displayArg?: string) => void;

diff --git a/src/components/formcomponents/choice/checkbox-view.tsx b/src/components/formcomponents/choice/checkbox-view.tsx
@@ -43,6 +43,7 @@ const CheckboxView = ({
   repeatButton,
   renderDeleteButton,
   onRenderMarkdown,
+  renderHelpButton,
 }: Props): JSX.Element | null => {
   if (!options) {
     return null;
@@ -88,6 +89,7 @@ const CheckboxView = ({
                 <Label
                   labelTexts={[{ text: checkbox.label }]}
                   sublabel={<Sublabel id="select-sublabel" sublabelTexts={[{ text: subLabelText, type: 'normal' }]} />}
+                  afterLabelChildren={<>{renderHelpButton()}</>}
                 />
               }
               checked={checkbox.checked}

diff --git a/src/components/formcomponents/choice/slider-view.tsx b/src/components/formcomponents/choice/slider-view.tsx
@@ -33,8 +33,9 @@ const SliderView: React.FC<SliderProps> = ({ item, handleChange, children }) =>
   }, []);
 
   const onValueChange = (index: number): void => {
+    console.log('index', index);
     const code = item.answerOption?.[index]?.valueCoding.code;
-
+    console.log('code', code);
     if (code) {
       handleChange(code);
     }
@@ -43,11 +44,12 @@ const SliderView: React.FC<SliderProps> = ({ item, handleChange, children }) =>
   return (
     <div className="page_refero__component page_refero__component_choice page_refero__component_choice_slider">
       <Slider
-        {...register(getId(item.linkId), { required: isRequired(item), onChange: onValueChange })}
+        {...register(getId(item.linkId), { required: isRequired(item) })}
         title={title}
         labelLeft={leftRightLabels?.[0]}
         labelRight={leftRightLabels?.[1]}
         steps={sliderSteps}
+        onChange={onValueChange}
       />
       {children ? <div className="nested-fieldset nested-fieldset--full-height">{children}</div> : undefined}
     </div>

diff --git a/src/components/formcomponents/decimal/decimal.tsx b/src/components/formcomponents/decimal/decimal.tsx
@@ -10,7 +10,6 @@ import { Resources } from '../../../types/resources';
 
 import Input from '@helsenorge/designsystem-react/components/Input';
 import Label, { Sublabel } from '@helsenorge/designsystem-react/components/Label';
-import Validation from '@helsenorge/designsystem-react/components/Validation';
 
 import layoutChange from '@helsenorge/core-utils/hoc/layout-change';
 

diff --git a/src/components/formcomponents/display/display.tsx b/src/components/formcomponents/display/display.tsx
@@ -4,14 +4,14 @@ import DOMPurify from 'dompurify';
 import { connect } from 'react-redux';
 
 import { Questionnaire, QuestionnaireItem } from '../../../types/fhir';
+import { Resources } from '../../../types/resources';
 
 import designsystemtypography from '@helsenorge/designsystem-react/scss/typography.module.scss';
 
 import itemControlConstants from '../../../constants/itemcontrol';
 import { getItemControlExtensionValue, getMarkdownExtensionValue } from '../../../util/extension';
 import { renderPrefix, getText, getId } from '../../../util/index';
 import { mapStateToProps, mergeProps, mapDispatchToProps } from '../../../util/map-props';
-import { Resources } from '../../../types/resources';
 
 export interface Props {
   id?: string;

diff --git a/src/components/formcomponents/open-choice/open-choice.tsx b/src/components/formcomponents/open-choice/open-choice.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../../types/fhir';
 import { Options } from '../../../types/formTypes/radioGroupOptions';
 import { ValidationProps } from '../../../types/formTypes/validation';
+import { Resources } from '../../../types/resources';
 
 import CheckboxView from './checkbox-view';
 import DropdownView from './dropdown-view';
@@ -27,13 +28,13 @@ import {
   removeCodingStringValueAsync,
 } from '../../../actions/newValue';
 import { OPEN_CHOICE_ID } from '../../../constants';
+import { OPEN_CHOICE_SYSTEM } from '../../../constants/codingsystems';
 import ItemControlConstants from '../../../constants/itemcontrol';
 import { GlobalState } from '../../../reducers';
 import { isReadOnly, isDataReceiver } from '../../../util';
 import {
   renderOptions,
   getOptions,
-  getErrorMessage,
   validateInput,
   shouldShowExtraChoice,
   getDisplay,
@@ -43,12 +44,10 @@ import {
 } from '../../../util/choice';
 import { mapStateToProps, mergeProps, mapDispatchToProps } from '../../../util/map-props';
 import { Path } from '../../../util/refero-core';
-import { Resources } from '../../../types/resources';
 import withCommonFunctions, { WithCommonFunctionsProps } from '../../with-common-functions';
 import SliderView from '../choice/slider-view';
 import AutosuggestView from '../choice-common/autosuggest-view';
 import TextView from '../textview';
-import { OPEN_CHOICE_SYSTEM } from '../../../constants/codingsystems';
 
 export interface OpenChoiceProps extends WithCommonFunctionsProps {
   item: QuestionnaireItem;
@@ -366,7 +365,6 @@ const OpenChoice: React.FC<OpenChoiceProps & ValidationProps> = props => {
       <RadioView
         options={options}
         item={item}
-        getErrorMessage={(value: string): string => getErrorMessage(item, value, resources, containedResources)}
         handleChange={handleChange}
         validateInput={(value: string): boolean => validateInput(item, value, containedResources, resources)}
         id={id}

diff --git a/src/components/formcomponents/open-choice/radio-view.tsx b/src/components/formcomponents/open-choice/radio-view.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 
 import { Collapse } from 'react-collapse';
+import { useFormContext } from 'react-hook-form';
 
 import { Questionnaire, QuestionnaireItem, QuestionnaireResponseItemAnswer } from '../../../types/fhir';
 import { Options } from '../../../types/formTypes/radioGroupOptions';
+import { Resources } from '../../../types/resources';
 
 import FormGroup from '@helsenorge/designsystem-react/components/FormGroup';
 import Label, { Sublabel } from '@helsenorge/designsystem-react/components/Label';
@@ -12,8 +14,6 @@ import Validation from '@helsenorge/designsystem-react/components/Validation';
 
 import { shouldShowExtraChoice, validateInput } from '../../../util/choice';
 import { getId, getSublabelText, getText, isRequired } from '../../../util/index';
-import { Resources } from '../../../types/resources';
-import { useFormContext } from 'react-hook-form';
 
 interface Props {
   options?: Array<Options>;
@@ -24,7 +24,6 @@ interface Props {
   selected?: Array<string | undefined>;
   validateInput: (value: string) => boolean;
   resources?: Resources;
-  getErrorMessage: (val: string) => string;
   renderDeleteButton: (className: string) => JSX.Element | undefined;
   renderOpenField: () => JSX.Element | undefined;
   repeatButton: JSX.Element;
@@ -45,7 +44,6 @@ const RadioView: React.SFC<Props> = ({
   // validateInput,
   resources,
   children,
-  getErrorMessage,
   repeatButton,
   renderDeleteButton,
   renderOpenField,
@@ -65,17 +63,23 @@ const RadioView: React.SFC<Props> = ({
   // helpButton={renderHelpButton()}
   // validateOnExternalUpdate={true}
 
-  const { register } = useFormContext();
+  const { register, getFieldState } = useFormContext();
+  const { error, invalid } = getFieldState(getId(item.linkId));
   return (
     <div className="page_refero__component page_refero__component_openchoice page_refero__component_openchoice_radiobutton">
       <Collapse isOpened>
-        <FormGroup
-          legend={getText(item, onRenderMarkdown, questionnaire, resources)}
-          error={getErrorMessage(selectedValue) !== '' ? getErrorMessage(selectedValue) : undefined}
-        >
+        <FormGroup legend={getText(item, onRenderMarkdown, questionnaire, resources)} error={invalid ? error?.message : undefined}>
           {options.map((option: Options, index: number) => (
             <RadioButton
-              {...register(getId(item.linkId), { required: isRequired(item), onChange: handleChange })}
+              {...register(getId(item.linkId), {
+                required: {
+                  message: resources?.oppgiVerdi || '',
+                  value: isRequired(item),
+                },
+                onChange: handleChange,
+                disabled: option.disabled,
+                value: option.type,
+              })}
               inputId={getId(id) + index.toLocaleString()}
               size="medium"
               testId="radioButton-openChoice"
@@ -89,10 +93,6 @@ const RadioView: React.SFC<Props> = ({
                 />
               }
               defaultChecked={selectedValue === option.type}
-              value={option.type}
-              onChange={() => handleChange}
-              disabled={option.disabled}
-              required={isRequired(item)}
             />
           ))}
         </FormGroup>

diff --git a/src/components/formcomponents/open-choice/text-field.tsx b/src/components/formcomponents/open-choice/text-field.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 
+import { ValidationRule, useFormContext } from 'react-hook-form';
+
 import { Questionnaire, QuestionnaireItem, QuestionnaireResponseItemAnswer } from '../../../types/fhir';
 import { ValidationProps } from '../../../types/formTypes/validation';
+import { Resources } from '../../../types/resources';
 
 import Input from '@helsenorge/designsystem-react/components/Input';
 import Label, { Sublabel } from '@helsenorge/designsystem-react/components/Label';
@@ -19,9 +22,7 @@ import {
   renderPrefix,
   getText,
 } from '../../../util/index';
-import { Resources } from '../../../types/resources';
 import Pdf from '../textview';
-import { ValidationRule, useFormContext } from 'react-hook-form';
 
 interface Props {
   id?: string;
@@ -43,7 +44,6 @@ const textField: React.SFC<Props & ValidationProps> = ({
   children,
   onRenderMarkdown,
   resources,
-  ...other
 }) => {
   if (pdf) {
     return (
@@ -58,32 +58,35 @@ const textField: React.SFC<Props & ValidationProps> = ({
   const subLabelText = getSublabelText(item, onRenderMarkdown, questionnaire, resources);
 
   // showLabel={false}
-  // pattern={getRegexExtension(item)}
   // validateOnExternalUpdate={true}
   // FORANDRET ONBLUR TIL ONCHANGE
   const pattern: ValidationRule<RegExp> | undefined = getRegexExtension(item)
     ? new RegExp(getRegexExtension(item) as string, 'g')
     : undefined;
+  const minLength = getMinLengthExtensionValue(item);
+  const maxLength = getMaxLength(item);
+  const validationText = getValidationTextExtension(item) || '';
   return (
     <Input
-      {...register(getId(item.linkId), { required: isRequired(item), onChange: handleStringChange, onBlur: handleStringChange, pattern })}
+      {...register(getId(item.linkId), {
+        required: isRequired(item),
+        onChange: handleStringChange,
+        onBlur: handleStringChange,
+        pattern,
+        disabled: isReadOnly(item),
+        min: minLength && { value: minLength, message: validationText },
+        max: maxLength && { value: maxLength, message: validationText },
+      })}
       type="text"
       inputId={getId(id)}
-      name={getId(id)}
       defaultValue={getStringValue(answer)}
       label={
         <Label
           labelTexts={[{ text: labelText, type: 'semibold' }]}
           sublabel={<Sublabel id="select-sublabel" sublabelTexts={[{ text: subLabelText, type: 'normal' }]} />}
         />
       }
-      required={isRequired(item)}
       placeholder={getPlaceholder(item)}
-      min={getMinLengthExtensionValue(item)}
-      max={getMaxLength(item)}
-      readOnly={isReadOnly(item)}
-      onChange={handleStringChange}
-      errorText={getValidationTextExtension(item)}
     />
   );
 };

diff --git a/src/components/formcomponents/quantity/quantity.tsx b/src/components/formcomponents/quantity/quantity.tsx
@@ -157,7 +157,7 @@ const Quantity: React.FC<QuantityProps & ValidationProps> = props => {
             max: maxValue && { value: maxValue, message: validationText },
             min: minValue && { value: minValue, message: validationText },
             onChange: handleChange,
-            value: value,
+            value,
             pattern,
           })}
           label={
@@ -169,7 +169,6 @@ const Quantity: React.FC<QuantityProps & ValidationProps> = props => {
           }
           type="number"
           inputId={inputId}
-          name={inputId}
           defaultValue={value !== undefined ? value + '' : ''}
           placeholder={getPlaceholder(item)}
           className="page_refero__quantity"