Add onHeadersMapped fn

From: tableflowhq#230

Author: tooga

README.md

@@ -224,6 +224,13 @@ Example `data`:
 }
 ```
 
+### onHeadersMapped (_function_)
+Callback function that fires when headers have been mapped (when you dont want to wait for onComplete and you just want the mapped headers and the original uploaded file). It returns `selectedHeaderRow` which tells which row was selected as a header row in the previous step, `mappedHeaders` an object that contains the mapping definitions and  `originalFile` which is the `File` object representing the original uploaded file without any modifications to it.
+When `onHeadersMapped` is defined, `onComplete` callback will not be fired.
+```jsx
+onHeadersMapped={(selectedHeaderRow, mappedHeaders, originalFile) => console.log(mappedHeaders)}
+```
+
 ### darkMode (_boolean_, default: `false`)
 
 Toggle between dark mode (`true`) and light mode (`false`).

src/components/CSVImporter/CSVImporter.stories.tsx

@@ -50,6 +50,8 @@ const Template: Story<typeof ImporterComponent> = (args: CSVImporterProps) => {
     ...args,
   };
 
+  console.log(props);
+
   return (
     <div>
       {args.isModal && <button onClick={() => setIsOpen(true)}>Import</button>}
@@ -74,3 +76,14 @@ Importer.args = {
     },
   },
 };
+
+const onHeadersMapped: CSVImporterProps['onHeadersMapped'] = async (selectedHeaderRow, mappedHeaders, originalFile) => {
+  console.log("onHeadersMapped:", selectedHeaderRow, mappedHeaders, originalFile);
+  return;
+};
+
+export const ImporterWithHeadersMapped = Template.bind({});
+ImporterWithHeadersMapped.args = {
+  ...Importer.args,
+  onHeadersMapped,
+};

src/components/CSVImporter/index.tsx

@@ -20,6 +20,7 @@ const CSVImporter = forwardRef((importerProps: CSVImporterProps, forwardRef?: an
     primaryColor = "#7a5ef8",
     className,
     onComplete,
+    onHeadersMapped,
     customStyles,
     showDownloadTemplateButton,
     skipHeaderRowSelection,

src/importer/features/main/index.tsx

@@ -26,6 +26,7 @@ export default function Main(props: CSVImporterProps) {
     modalOnCloseTriggered = () => null,
     template,
     onComplete,
+    onHeadersMapped,
     customStyles,
     showDownloadTemplateButton,
     skipHeaderRowSelection,
@@ -43,6 +44,7 @@ export default function Main(props: CSVImporterProps) {
   // Error handling
   const [initializationError, setInitializationError] = useState<string | null>(null);
   const [dataError, setDataError] = useState<string | null>(null);
+  const [originalFile, setOriginalFile] = useState<File | null>(null);
 
   // File data
   const emptyData = {
@@ -90,6 +92,7 @@ export default function Main(props: CSVImporterProps) {
     setColumnMapping({});
     setDataError(null);
     setStep(StepEnum.Upload);
+    setOriginalFile(null);
   };
 
   const requestClose = () => {
@@ -121,6 +124,7 @@ export default function Main(props: CSVImporterProps) {
             setDataError={setDataError}
             onSuccess={async (file: File) => {
               setDataError(null);
+              setOriginalFile(file);
               const fileType = file.name.slice(file.name.lastIndexOf(".") + 1);
               if (!["csv", "xls", "xlsx"].includes(fileType)) {
                 setDataError(t("Only CSV, XLS, and XLSX files can be uploaded"));
@@ -199,7 +203,18 @@ export default function Main(props: CSVImporterProps) {
             onSuccess={(columnMapping) => {
               setIsSubmitting(true);
               setColumnMapping(columnMapping);
-
+              if (onHeadersMapped) {
+                onHeadersMapped(selectedHeaderRow, columnMapping, originalFile)
+                  .then(() => {
+                    setIsSubmitting(false);
+                    goNext();
+                  })
+                  .catch((error) => {
+                    console.error("onHeadersMapped error", error);
+                    setDataError("An error occurred while processing the data");
+                  });
+                return;
+              }
               // TODO (client-sdk): Move this type, add other data attributes (i.e. column definitions), and move the data processing to a function
               type MappedRow = {
                 index: number;

src/types/index.ts

@@ -1,5 +1,6 @@
 import { Resource } from "i18next";
 import { HTMLAttributes } from "react";
+import { TemplateColumnMapping } from "../importer/features/map-columns/types";
 
 type ModalParams = {
   isModal?: boolean;
@@ -14,6 +15,7 @@ export type CSVImporterProps = (HTMLAttributes<HTMLDialogElement> & HTMLAttribut
   primaryColor?: string;
   className?: string;
   onComplete?: (data: any) => void;
+  onHeadersMapped?: (selectedHeaderRow: number | null, mappedHeaders: { [index: number]: TemplateColumnMapping }, originalFile: File | null) => Promise<void>;
   waitOnComplete?: boolean;
   customStyles?: Record<string, string> | string;
   showDownloadTemplateButton?: boolean;