Merge pull request #998 from betagouv/tech_clean_loader

Remplacement composant LoadingBouton et Loader anciens par nouveaux
betagouv · Feb 5, 2025 · 7c70481 · 7c70481
2 parents 6562336 + ca584a2
commit 7c70481
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 124 deletions.
diff --git a/src/components/EligibilityForm/components/ContactForm.tsx b/src/components/EligibilityForm/components/ContactForm.tsx
@@ -1,10 +1,9 @@
-import { Button } from '@codegouvfr/react-dsfr/Button';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
 import { type ReactNode, useRef } from 'react';
 import * as Yup from 'yup';
 
-import Loader from '@/components/Loader';
+import Button from '@/components/ui/Button';
 import { AnalyticsFormId } from '@/services/analytics';
 import { type ContactFormInfos } from '@/types/Summary/Demand';
 
@@ -53,13 +52,9 @@ export const ContactForm = ({ onSubmit, isLoading, cardMode, city, heatingTypeIn
           <ContactInformation cardMode={cardMode} city={city} heatingTypeInput={heatingTypeInput} />
           <ContactConsent />
           <ContactFormFooter>
-            {isLoading ? (
-              <Loader color="#4550e5" show />
-            ) : (
-              <Button type="submit" disabled={isLoading}>
-                Envoyer
-              </Button>
-            )}
+            <Button type="submit" loading={isLoading}>
+              Envoyer
+            </Button>
             {formik.isSubmitting && !formik.isValid && (
               <p className="fr-error-text">Veuillez remplir les champs obligatoires(*) avant d'envoyer votre demande</p>
             )}

diff --git a/src/components/Loader/Loader.style.tsx b/src/components/Loader/Loader.style.tsx
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -28,6 +28,7 @@ const Button: React.FC<ButtonProps> = ({
   full,
   href,
   type = 'button',
+  disabled,
   onClick: onExternalClick,
   stopPropagation,
   loading,
@@ -51,7 +52,7 @@ const Button: React.FC<ButtonProps> = ({
       e.stopPropagation();
     }
 
-    if (props.disabled) {
+    if (disabled) {
       return;
     }
 
@@ -64,6 +65,7 @@ const Button: React.FC<ButtonProps> = ({
       iconId={loading ? 'ri-loader-3-line' : (iconId as any) /** FIXME */}
       $full={full}
       $loading={loading}
+      disabled={(disabled || loading) as any /** FIXME cause incompatibility with DSFR Button */}
       type={type as any /** FIXME cause incompatibility with DSFR Button */}
       {...props}
     >

diff --git a/src/components/ui/LoadingButton.tsx b/src/components/ui/LoadingButton.tsx
diff --git a/src/pages/reseaux/modifier.tsx b/src/pages/reseaux/modifier.tsx
@@ -1,5 +1,4 @@
 import { Alert } from '@codegouvfr/react-dsfr/Alert';
-import { Button } from '@codegouvfr/react-dsfr/Button';
 import { RadioButtons } from '@codegouvfr/react-dsfr/RadioButtons';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -10,9 +9,9 @@ import Input from '@/components/form/dsfr/Input';
 import NetworkSearchInput from '@/components/Network/NetworkSearchInput';
 import SimplePage from '@/components/shared/page/SimplePage';
 import Box from '@/components/ui/Box';
+import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
 import Icon from '@/components/ui/Icon';
-import LoadingButton from '@/components/ui/LoadingButton';
 import Text from '@/components/ui/Text';
 import { type ModificationReseau } from '@/pages/api/modification-reseau';
 import { type NetworkSearchResult } from '@/pages/api/networks/search';
@@ -366,7 +365,7 @@ function ModifierReseauxPage() {
               aria-hidden
             />
             <div className="fr-grid-row fr-grid-row--top">
-              <Button type="button" onClick={() => fileUploadInputRef.current!.click()} priority="secondary">
+              <Button onClick={() => fileUploadInputRef.current!.click()} priority="secondary">
                 Choisir un fichier
               </Button>
               <Box ml="2w">
@@ -405,9 +404,9 @@ function ModifierReseauxPage() {
             )}
             <Text mt="6w">Les informations transmises seront validées manuellement par France Chaleur Urbaine avant mise en ligne.</Text>
 
-            <LoadingButton className="fr-mt-2w" submit isLoading={isSubmitting} disabled={fichiersError !== null}>
+            <Button className="fr-mt-2w" type="submit" loading={isSubmitting} disabled={fichiersError !== null}>
               Soumettre la demande de modification
-            </LoadingButton>
+            </Button>
 
             {apiError && (
               <Text color="error" mt="2w">