Extrait la modale de téléchargement du graphe dans un composant

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import { TIndicateurDefinition } from '@/app/app/pages/collectivite/Indicateurs/types';
 import { useIndicateurValeurs } from '@/app/app/pages/collectivite/Indicateurs/useIndicateurValeurs';
 import PictoIndicateurVide from '@/app/ui/pictogrammes/PictoIndicateurVide';
-import { Button, EmptyCard, Icon, Modal } from '@/ui';
+import { Button, EmptyCard, Icon } from '@/ui';
+import DownloadIndicateurChartModal from '../../chart/DownloadIndicateurChart';
 import IndicateurChartNew from '../../chart/IndicateurChartNew';
 import { DataSourceTooltip } from './DataSourceTooltip';
 import { transformeValeurs } from './transformeValeurs';
@@ -88,23 +89,13 @@ const IndicateurDetailChart = ({
           </DataSourceTooltip>
         )}
       </div>
-      {isChartOpen && (
-        <Modal
-          size="xl"
-          openState={{
-            isOpen: isChartOpen,
-            setIsOpen: setIsChartOpen,
-          }}
-          render={() => (
-            <IndicateurChartNew
-              data={data}
-              isLoading={isLoadingValeurs}
-              title={definition.titre}
-              variant="modal"
-            />
-          )}
-        />
-      )}
+
+      <DownloadIndicateurChartModal
+        openState={{ isOpen: isChartOpen, setIsOpen: setIsChartOpen }}
+        data={data}
+        isLoading={isLoadingValeurs}
+        title={definition.titre}
+      />
     </>
   ) : (
     <EmptyCard

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/DownloadIndicateurChart.tsx

@@ -0,0 +1,36 @@
+import { Modal } from '@/ui';
+import { OpenState } from '@/ui/utils/types';
+import IndicateurChartNew, { IndicateurChartData } from './IndicateurChartNew';
+
+type Props = {
+  openState: OpenState;
+  data: IndicateurChartData;
+  isLoading: boolean;
+  title?: string;
+};
+
+const DownloadIndicateurChartModal = ({
+  openState,
+  data,
+  isLoading,
+  title,
+}: Props) => {
+  if (!openState.isOpen) return null;
+
+  return (
+    <Modal
+      size="xl"
+      openState={openState}
+      render={() => (
+        <IndicateurChartNew
+          data={data}
+          isLoading={isLoading}
+          title={title}
+          variant="modal"
+        />
+      )}
+    />
+  );
+};
+
+export default DownloadIndicateurChartModal;

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/IndicateurCard/IndicateurCard.tsx

@@ -7,7 +7,6 @@ import {
   CardProps,
   Checkbox,
   EmptyCard,
-  Modal,
   Notification,
   Tooltip,
 } from '@/ui';
@@ -25,6 +24,7 @@ import IndicateurCardOptions from '@/app/app/pages/collectivite/Indicateurs/list
 import PictoIndicateurComplet from '@/app/ui/pictogrammes/PictoIndicateurComplet';
 import PictoIndicateurVide from '@/app/ui/pictogrammes/PictoIndicateurVide';
 import { BadgeACompleter } from '@/app/ui/shared/Badge/BadgeACompleter';
+import DownloadIndicateurChartModal from '../../chart/DownloadIndicateurChart';
 import IndicateurChartNew, {
   IndicateurChartData,
 } from '../../chart/IndicateurChartNew';
@@ -319,23 +319,15 @@ export const IndicateurCardBase = ({
         </Card>
       </div>
 
-      {isDownloadChartOpen && (
-        <Modal
-          size="xl"
-          openState={{
-            isOpen: isDownloadChartOpen,
-            setIsOpen: setIsDownloadChartOpen,
-          }}
-          render={() => (
-            <IndicateurChartNew
-              data={data}
-              isLoading={isLoading}
-              title={chartInfo?.titre}
-              variant="modal"
-            />
-          )}
-        />
-      )}
+      <DownloadIndicateurChartModal
+        openState={{
+          isOpen: isDownloadChartOpen,
+          setIsOpen: setIsDownloadChartOpen,
+        }}
+        data={data}
+        isLoading={isLoading}
+        title={definition?.titre}
+      />
     </>
   );
 };