fix(info co): fix info co length limit

ReseauEntourage · Jul 27, 2023 · 4b28d25 · 4b28d25
1 parent 9c90079
commit 4b28d25
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/src/components/forms/GenericField.js b/src/components/forms/GenericField.js
@@ -469,6 +469,7 @@ export const GenericField = ({
     case 'radio-new': {
       return (
         <RadioNew
+          limit={data.limit}
           options={data.options}
           id={`${formId}-${data.id}`}
           name={data.name}
@@ -483,6 +484,7 @@ export const GenericField = ({
     case 'radio-async-new': {
       return (
         <RadioAsyncNew
+          limit={data.limit}
           loadOptions={async () => {
             const options = await data.loadOptions();
             updateFieldOptions({ [data.id]: options });

diff --git a/src/components/forms/schema/formCandidateInscription.ts b/src/components/forms/schema/formCandidateInscription.ts
@@ -221,6 +221,7 @@ export const formCandidateInscription = {
       title:
         'Selectionnez la date de la prochaine réunion d’information à laquelle vous souhaitez participer :',
       component: 'radio-async-new',
+      limit: 7,
       dynamicFilter: (getValue) => {
         return ANTENNE_INFO.find((antenne) => {
           return antenne.dpt === getValue('location');

diff --git a/src/components/utils/Inputs/Radio/Radio.tsx b/src/components/utils/Inputs/Radio/Radio.tsx
@@ -15,6 +15,7 @@ export function Radio({
   errorMessage,
   hidden,
   value: valueProp,
+  limit = options.length,
 }: RadioComponentProps) {
   const [checkedRadio, setCheckedRadio] = useState<number>();
 
@@ -53,31 +54,35 @@ export function Radio({
         <>
           <legend>{legend}</legend>
           <div className="inputs-container">
-            {options.map(({ inputId, label, value, filterData }, i) => {
-              if (filter && filterData && filter !== filterData) return null;
-              if (!inputId) inputId = `radio-${value.replace(/\s+/g, '')}`;
-              return (
-                <label
-                  htmlFor={inputId}
-                  className={i === checkedRadio ? 'checked' : ''}
-                  key={`${i}-${uuidValue}`}
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <input
-                    type="radio"
-                    value={value}
-                    id={inputId}
-                    data-testid={inputId}
-                    name={name}
-                    checked={i === checkedRadio}
-                    onChange={(e) => {
-                      onHandleRadio(i, e);
-                    }}
-                  />
-                  {label}
-                </label>
-              );
-            })}
+            {options
+              .filter(({ filterData }) => {
+                return !(filter && filterData && filter !== filterData);
+              })
+              .slice(0, limit)
+              .map(({ inputId, label, value }, i) => {
+                if (!inputId) inputId = `radio-${value.replace(/\s+/g, '')}`;
+                return (
+                  <label
+                    htmlFor={inputId}
+                    className={i === checkedRadio ? 'checked' : ''}
+                    key={`${i}-${uuidValue}`}
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    <input
+                      type="radio"
+                      value={value}
+                      id={inputId}
+                      data-testid={inputId}
+                      name={name}
+                      checked={i === checkedRadio}
+                      onChange={(e) => {
+                        onHandleRadio(i, e);
+                      }}
+                    />
+                    {label}
+                  </label>
+                );
+              })}
           </div>
         </>
       )}

diff --git a/src/components/utils/Inputs/Radio/Radio.types.ts b/src/components/utils/Inputs/Radio/Radio.types.ts
@@ -16,6 +16,7 @@ export interface RadioAsyncComponentProps {
   hidden?: boolean;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   value: string;
+  limit?: number;
 }
 
 export interface RadioComponentProps {
@@ -29,4 +30,5 @@ export interface RadioComponentProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 
   value: string;
+  limit?: number;
 }
diff --git a/src/components/utils/Inputs/Radio/RadioAsync.tsx b/src/components/utils/Inputs/Radio/RadioAsync.tsx
@@ -13,6 +13,7 @@ export function RadioAsync({
   errorMessage,
   hidden,
   value,
+  limit,
 }: RadioAsyncComponentProps) {
   const [options, setOptions] = useState([]);
 
@@ -31,6 +32,7 @@ export function RadioAsync({
           onChange={onChange}
           filter={filter}
           options={options}
+          limit={limit}
           hidden={hidden}
           errorMessage={errorMessage}
           value={value}