[components,excel][m]: add support for multiple sheets

packages/components/src/components/Excel.tsx

@@ -10,18 +10,15 @@ export type ExcelProps = {
 
 export function Excel({ url }: ExcelProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [activeSheetName, setActiveSheetName] = useState<string>();
+  const [workbook, setWorkbook] = useState<any>();
   const [rows, setRows] = useState<any>();
   const [cols, setCols] = useState<any>();
 
-  useEffect(() => {
+  const loadSpreadsheet = (wb: any, name: string) => {
-    setIsLoading(true);
+    console.log(name)
-
+    setActiveSheetName(name);
-    fetch(url)
+    const ws = wb.Sheets[name];
-      .then((res) => res.arrayBuffer())
-      .then((f) => {
-        const wb = read(f);
-        const ws = wb.Sheets[wb.SheetNames[0]];
-
     const rows = utils.sheet_to_json(ws, { header: 1 });
 
     const range = utils.decode_range(ws['!ref'] || 'A1');
@@ -30,14 +27,22 @@ export function Excel({ url }: ExcelProps) {
       name: utils.encode_col(i),
       editor: textEditor,
     }));
-
-
     setRows(rows);
     setCols(columns);
+  };
 
+  useEffect(() => {
+    setIsLoading(true);
+
+    fetch(url)
+      .then((res) => res.arrayBuffer())
+      .then((f) => {
+        const wb = read(f);
+        setWorkbook(wb);
+        loadSpreadsheet(wb, wb.SheetNames[0]);
         setIsLoading(false);
       });
-  }, []);
+  }, [url]);
 
   return isLoading ? (
     <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
@@ -46,7 +51,23 @@ export function Excel({ url }: ExcelProps) {
   ) : (
     <>
       {cols && rows && (
+        <div>
           <DataGrid columns={cols} rows={rows} onRowsChange={setRows} />
+          <div className="border-t">
+            {workbook.SheetNames.map((name: string, idx: number) => {
+              return (
+                <button
+                  className={`px-3 pb-1 pt-2 border-b border-l border-r ${
+                    name == activeSheetName ? 'font-bold' : ''
+                  }`}
+                  onClick={() => loadSpreadsheet(workbook, name)}
+                >
+                  {name}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       )}
     </>
   );