forked from sheetjs/docs.sheetjs.com
43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import React, { useState, type FC } from 'react';
|
||
import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableHighlight, View, Alert } from 'react-native';
|
||
import { read, utils, version } from 'xlsx';
|
||
import { getEnforcing } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
|
||
const DocumentPicker = getEnforcing('DocumentPicker');
|
||
|
||
const App: FC = () => {
|
||
|
||
const [ aoa, setAoA ] = useState(["SheetJS".split(""), "5433795".split("")]);
|
||
const max_cols = aoa.reduce((acc,row) => Math.max(acc,row.length),1);
|
||
|
||
return (
|
||
<SafeAreaView style={styles.outer}>
|
||
<Text style={styles.title}>SheetJS × React Native Windows {version}</Text>
|
||
<TouchableHighlight onPress={async() => {
|
||
try {
|
||
const b64 = await DocumentPicker.PickAndRead();
|
||
const wb = read(b64);
|
||
setAoA(utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 } ));
|
||
} catch(err) { Alert.alert(`Read Error`, `${err instanceof Error ? err.message : err}`); }
|
||
}}><Text style={styles.button}>Click here to Open File!</Text></TouchableHighlight>
|
||
<ScrollView contentInsetAdjustmentBehavior="automatic">
|
||
<View style={styles.table}>{Array.from({length: aoa.length}, (_, R) => (
|
||
<View style={styles.row} key={R}>{Array.from({length: max_cols}, (_, C) => (
|
||
<View style={styles.cell} key={C}><Text>{String(aoa?.[R]?.[C]??"")}</Text></View>
|
||
))}</View>
|
||
))}</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
cell: { flex: 4 },
|
||
row: { flexDirection: 'row', justifyContent: 'space-evenly', padding: 10, backgroundColor: 'white', },
|
||
table: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', },
|
||
outer: { marginTop: 32, paddingHorizontal: 24, },
|
||
title: { fontSize: 24, fontWeight: '600', },
|
||
button: { marginTop: 8, fontSize: 18, fontWeight: '400', },
|
||
});
|
||
|
||
export default App;
|