docs.sheetjs.com/docz/static/reactnative/rnw/App.tsx

43 lines
1.9 KiB
TypeScript
Raw Permalink Normal View History

2023-07-23 21:01:30 +00:00
import React, { useState, type FC } from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableHighlight, View, Alert } from 'react-native';
2023-05-11 21:28:29 +00:00
import { read, utils, version } from 'xlsx';
import { getEnforcing } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
const DocumentPicker = getEnforcing('DocumentPicker');
2023-07-23 21:01:30 +00:00
const App: FC = () => {
2023-05-11 21:28:29 +00:00
const [ aoa, setAoA ] = useState(["SheetJS".split(""), "5433795".split("")]);
2023-07-23 21:01:30 +00:00
const max_cols = aoa.reduce((acc,row) => Math.max(acc,row.length),1);
2023-05-11 21:28:29 +00:00
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 } ));
2023-07-23 21:01:30 +00:00
} catch(err) { Alert.alert(`Read Error`, `${err instanceof Error ? err.message : err}`); }
2023-05-11 21:28:29 +00:00
}}><Text style={styles.button}>Click here to Open File!</Text></TouchableHighlight>
<ScrollView contentInsetAdjustmentBehavior="automatic">
2023-07-23 21:01:30 +00:00
<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>
2023-05-11 21:28:29 +00:00
))}</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', },
});
2023-07-23 21:01:30 +00:00
export default App;