forked from sheetjs/docs.sheetjs.com
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
|
import React, { useState, type Node } from 'react';
|
|||
|
|
import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
|
|||
|
|
import { read, utils, version } from 'xlsx';
|
|||
|
|
import { getEnforcing } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
|
|||
|
|
const DocumentPicker = getEnforcing('DocumentPicker');
|
|||
|
|
|
|||
|
|
const App: () => Node = () => {
|
|||
|
|
|
|||
|
|
const [ aoa, setAoA ] = useState(["SheetJS".split(""), "5433795".split("")]);
|
|||
|
|
|
|||
|
|
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(`Error: ${err.message}`); }
|
|||
|
|
}}><Text style={styles.button}>Click here to Open File!</Text></TouchableHighlight>
|
|||
|
|
<ScrollView contentInsetAdjustmentBehavior="automatic">
|
|||
|
|
<View style={styles.table}>{aoa.map((row,R) => (
|
|||
|
|
<View style={styles.row} key={R}>{row.map((cell,C) => (
|
|||
|
|
<View style={styles.cell} key={C}><Text>{cell}</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;
|