forked from sheetjs/docs.sheetjs.com
70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
|
/* sheetjs (C) SheetJS -- https://sheetjs.com */
|
|||
|
|
|
|||
|
|
import './App.css'
|
|||
|
|
import { useCallback, useState } from '@lynx-js/react'
|
|||
|
|
import SheetJSLogo from './assets/SheetJS-logo.png';
|
|||
|
|
import { read, utils, WorkSheet } from 'xlsx';
|
|||
|
|
|
|||
|
|
const make_width = (ws: WorkSheet): number[] => {
|
|||
|
|
const aoa = utils.sheet_to_json(ws, { header: 1 }), res: number[] = [];
|
|||
|
|
aoa.forEach((r: any) => { r.forEach((c: any, C: any) => { res[C] = Math.max(res[C] || 60, String(c).length * 10); }); });
|
|||
|
|
for (let C = 0; C < res.length; ++C) if (!res[C]) res[C] = 60;
|
|||
|
|
return res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function App() {
|
|||
|
|
const [data, setData] = useState<any[]>([
|
|||
|
|
"SheetJS".split(""),
|
|||
|
|
[5, 4, 3, 3, 7, 9, 5],
|
|||
|
|
[8, 6, 7, 5, 3, 0, 9]
|
|||
|
|
]);
|
|||
|
|
const [widths, setWidths] = useState<number[]>(Array.from({ length: 7 }, () => 20));
|
|||
|
|
|
|||
|
|
const importFile = useCallback(async () => {
|
|||
|
|
try {
|
|||
|
|
const ab = await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer();
|
|||
|
|
const wb = read(ab);
|
|||
|
|
|
|||
|
|
/* convert first worksheet to AOA */
|
|||
|
|
const wsname = wb.SheetNames[0];
|
|||
|
|
const ws = wb.Sheets[wsname];
|
|||
|
|
const data = utils.sheet_to_json(ws, { header: 1 });
|
|||
|
|
/* update state */
|
|||
|
|
setData(data);
|
|||
|
|
console.log(data);
|
|||
|
|
|
|||
|
|
setWidths(make_width(ws));
|
|||
|
|
} catch (err) {
|
|||
|
|
console.log("importFile Error", "Error " + ((err as any).message || err));
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<view className='App'>
|
|||
|
|
<text className="Title">
|
|||
|
|
<image className="Logo" src={SheetJSLogo} /> SheetJS × React Lynx
|
|||
|
|
</text>
|
|||
|
|
<view className="Button" bindtap={importFile}>
|
|||
|
|
<text>IMPORT DATA FROM A SPREADSHEET</text>
|
|||
|
|
</view>
|
|||
|
|
<text style={{ margin: '8px', fontWeight: '600'}}>Current Data</text>
|
|||
|
|
<view className='Table'>
|
|||
|
|
{data.map((row, rowIndex) => (
|
|||
|
|
<view key={`row-${rowIndex}`} className="Row">
|
|||
|
|
{Array.isArray(row) && row.map((cell, cellIndex) => (
|
|||
|
|
<view
|
|||
|
|
key={`cell-${rowIndex}-${cellIndex}`}
|
|||
|
|
className="Cell"
|
|||
|
|
style={{ width: `${widths[cellIndex]}px` }}
|
|||
|
|
>
|
|||
|
|
<text>{cell}</text>
|
|||
|
|
</view>
|
|||
|
|
))}
|
|||
|
|
</view>
|
|||
|
|
))}
|
|||
|
|
</view>
|
|||
|
|
<view style={{ flex: 1 }}></view>
|
|||
|
|
</view>
|
|||
|
|
)
|
|||
|
|
}
|