🔧 fix(exportModal/index.tsx): change function component to forwardRef component to support ref forwarding

🔧 fix(exportModal/index.tsx): update usage of children prop to use props.children for better readability
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-13 18:38:57 -03:00
commit 7672bc3c3e

View file

@ -1,5 +1,5 @@
import { Download } from "lucide-react"; import { Download } from "lucide-react";
import { ReactNode, useContext, useState } from "react"; import { ReactNode, forwardRef, useContext, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox"; import { Checkbox } from "../../components/ui/checkbox";
@ -10,7 +10,7 @@ import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils"; import { removeApiKeys } from "../../utils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
export default function ExportModal({ children }: { children: ReactNode }) { const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const { flows, tabId, updateFlow, downloadFlow, saveFlow } = const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext); useContext(TabsContext);
@ -21,7 +21,7 @@ export default function ExportModal({ children }: { children: ReactNode }) {
); );
return ( return (
<BaseModal size="smaller"> <BaseModal size="smaller">
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
<BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}> <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Export</span> <span className="pr-2">Export</span>
@ -80,4 +80,5 @@ export default function ExportModal({ children }: { children: ReactNode }) {
</BaseModal.Footer> </BaseModal.Footer>
</BaseModal> </BaseModal>
); );
} });
export default ExportModal;