Skip to content

Commit 58e59dc

Browse files
nullhooknullhook
committed
updates to react demo
- bump react and babel - converted to functional components removed preact demo renamed jsx to js for next make instruction removed image component added pod install for pod linking
1 parent 333deae commit 58e59dc

File tree

7 files changed

+192
-241
lines changed

7 files changed

+192
-241
lines changed

‎demos/react/Makefile

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ react: init ## Simple server for react and clones
55
.PHONY: next
66
next: init ## next.js demo
77
mkdir -p pages static
8-
cat nexthdr.js sheetjs.jsx > pages/sheetjs.js
8+
cat nexthdr.js sheetjs.js > pages/sheetjs.js
99
cp ../../shim.js static/shim.js
1010
next
1111

@@ -15,7 +15,7 @@ native: ## Build react-native project
1515

1616
.PHONY: ios
1717
ios: native ## react-native ios sim
18-
cd SheetJS; react-native run-ios --simulator="iPhone X"; cd -
18+
cd SheetJS; cd ios; pod install; cd -; react-native run-ios --simulator="iPhone X"; cd -
1919

2020
.PHONY: android
2121
android: native ## react-native android sim

‎demos/react/README.md

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@ The library can also be imported directly from JSX code with:
1313
import XLSX from 'xlsx';
1414
```
1515

16-
This demo shows a simple JSX component transpiled in the browser using the babel
16+
This demo shows a simple React component transpiled in the browser using the babel
1717
standalone library. Since there is no standard React table model, this demo
1818
settles on the array of arrays approach.
1919

2020
Other scripts in this demo show:
2121
- server-rendered React component (with `next.js`)
22-
- `preact` using the react compatibility library
2322
- `react-native` deployment for iOS and android
2423

24+
## How to run
25+
2526
Run `make react` to run the browser demo for React, or run `make next` to run
2627
the server-rendered demo using `next.js`.
2728

28-
2929
## Internal State
3030

3131
The simplest state representation is an array of arrays. To avoid having the
@@ -116,15 +116,6 @@ set in the iOS project `Info.plist` file.
116116
To run the React Native demo, run either `make ios` or `make android` while
117117
connected to a device or emulator.
118118

119-
## Other Demos
120-
121-
#### Preact
122-
123-
`preact-compat` is an easy-to-use compatibility layer that provides equivalents
124-
for `React` and `ReactDOM`. The `preact` demo uses the same JSX component code!
125-
[The docs](https://npm.im/preact-compat#use-without-webpackbrowserify) explain
126-
how to convert the in-browser React demo to Preact.
127-
128119
#### Server-Rendered React Components with Next.js
129120

130121
The demo uses the same component code as the in-browser version, but the build

‎demos/react/index.html

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
77
<title>SheetJS React Demo</title>
88
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
9-
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
9+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
10+
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
11+
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
1212
<script src="node_modules/xlsx/dist/shim.min.js"></script>
1313
<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>
1414
<style>body, #app { height: 100%; };</style>
@@ -21,18 +21,7 @@ <h1><a href="http://sheetjs.com">SheetJS React Demo</a></h1>
2121
<a href="https://github.com/SheetJS/js-xlsx/issues">Issues? Something look weird? Click here and report an issue</a><br /><br />
2222
</div>
2323
<div id="app" class="container-fluid"></div>
24-
<script type="text/babel" src="sheetjs.jsx"></script>
25-
<script type="text/javascript">
26-
var _gaq = _gaq || [];
27-
_gaq.push(['_setAccount', 'UA-36810333-1']);
28-
_gaq.push(['_trackPageview']);
29-
30-
(function() {
31-
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
32-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
33-
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
34-
})();
35-
</script>
24+
<script type="text/babel" src="sheetjs.js"></script>
3625
<script type="text/babel">
3726
ReactDOM.render( <SheetJSApp />, document.getElementById('app') );
3827
</script>

‎demos/react/preact.html

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎demos/react/react-native.js

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
22
import XLSX from 'xlsx';
3-
43
import React, { Component } from 'react';
5-
import { AppRegistry, StyleSheet, Text, View, Button, Alert, Image, ScrollView, TouchableWithoutFeedback } from 'react-native';
4+
import {
5+
AppRegistry,
6+
StyleSheet,
7+
Text,
8+
View,
9+
Button,
10+
Alert,
11+
Image,
12+
ScrollView,
13+
TouchableWithoutFeedback
14+
} from 'react-native';
615
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
716

817
// react-native-fs
@@ -68,34 +77,36 @@ export default class SheetJS extends Component {
6877
Alert.alert("exportFile success", "Exported to " + file);
6978
}).catch((err) => { Alert.alert("exportFile Error", "Error " + err.message); });
7079
};
71-
render() { return (
72-
<ScrollView contentContainerStyle={styles.container} vertical={true}>
73-
<Text style={styles.welcome}> </Text>
74-
<Image style={{width: 128, height: 128}} source={require('./logo.png')} />
75-
<Text style={styles.welcome}>SheetJS React Native Demo</Text>
76-
<Text style={styles.instructions}>Import Data</Text>
77-
<Button onPress={this.importFile} title="Import data from a spreadsheet" color="#841584" />
78-
<Text style={styles.instructions}>Export Data</Text>
79-
<Button disabled={!this.state.data.length} onPress={this.exportFile} title="Export data to XLSX" color="#841584" />
8080

81-
<Text style={styles.instructions}>Current Data</Text>
81+
render() {
82+
return (
83+
<ScrollView contentContainerStyle={styles.container} vertical={true}>
84+
<Text style={styles.welcome}> </Text>
85+
<Text style={styles.welcome}>SheetJS React Native Demo</Text>
86+
<Text style={styles.instructions}>Import Data</Text>
87+
<Button onPress={this.importFile} title="Import data from a spreadsheet" color="#841584" />
88+
<Text style={styles.instructions}>Export Data</Text>
89+
<Button disabled={!this.state.data.length} onPress={this.exportFile} title="Export data to XLSX" color="#841584" />
90+
91+
<Text style={styles.instructions}>Current Data</Text>
8292

83-
<ScrollView style={styles.table} horizontal={true} >
84-
<Table style={styles.table}>
85-
<TableWrapper>
86-
<Row data={this.state.cols} style={styles.thead} textStyle={styles.text} widthArr={this.state.widthArr}/>
87-
</TableWrapper>
88-
<TouchableWithoutFeedback>
89-
<ScrollView vertical={true}>
90-
<TableWrapper>
91-
<Rows data={this.state.data} style={styles.tr} textStyle={styles.text} widthArr={this.state.widthArr}/>
92-
</TableWrapper>
93+
<ScrollView style={styles.table} horizontal={true} >
94+
<Table style={styles.table}>
95+
<TableWrapper>
96+
<Row data={this.state.cols} style={styles.thead} textStyle={styles.text} widthArr={this.state.widthArr}/>
97+
</TableWrapper>
98+
<TouchableWithoutFeedback>
99+
<ScrollView vertical={true}>
100+
<TableWrapper>
101+
<Rows data={this.state.data} style={styles.tr} textStyle={styles.text} widthArr={this.state.widthArr}/>
102+
</TableWrapper>
103+
</ScrollView>
104+
</TouchableWithoutFeedback>
105+
</Table>
93106
</ScrollView>
94-
</TouchableWithoutFeedback>
95-
</Table>
96-
</ScrollView>
97-
</ScrollView>
98-
); };
107+
</ScrollView>
108+
);
109+
};
99110
};
100111

101112
const styles = StyleSheet.create({

‎demos/react/sheetjs.js

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
2+
/* Notes:
3+
- usage: `ReactDOM.render( <SheetJSApp />, document.getElementById('app') );`
4+
- xlsx.full.min.js is loaded in the head of the HTML page
5+
- this script should be referenced with type="text/babel"
6+
- babel.js in-browser transpiler should be loaded before this script
7+
*/
8+
function SheetJSApp() {
9+
const [data, setData] = React.useState([]);
10+
const [cols, setCols] = React.useState([]);
11+
12+
const handleFile = (file) => {
13+
const reader = new FileReader();
14+
const rABS = !!reader.readAsBinaryString;
15+
reader.onload = (e) => {
16+
/* Parse data */
17+
const bstr = e.target.result;
18+
const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'});
19+
/* Get first worksheet */
20+
const wsname = wb.SheetNames[0];
21+
const ws = wb.Sheets[wsname];
22+
/* Convert array of arrays */
23+
const data = XLSX.utils.sheet_to_json(ws, {header:1});
24+
/* Update state */
25+
setData(data);
26+
setCols(make_cols(ws['!ref']))
27+
};
28+
if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file);
29+
}
30+
31+
const exportFile = () => {
32+
/* convert state to workbook */
33+
const ws = XLSX.utils.aoa_to_sheet(data);
34+
const wb = XLSX.utils.book_new();
35+
XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
36+
/* generate XLSX file and send to client */
37+
XLSX.writeFile(wb, "sheetjs.xlsx")
38+
};
39+
40+
return (
41+
<DragDropFile handleFile={handleFile}>
42+
<div className="row"><div className="col-xs-12">
43+
<DataInput handleFile={handleFile} />
44+
</div></div>
45+
<div className="row"><div className="col-xs-12">
46+
<button disabled={!data.length} className="btn btn-success" onClick={exportFile}>Export</button>
47+
</div></div>
48+
<div className="row"><div className="col-xs-12">
49+
<OutTable data={data} cols={cols} />
50+
</div></div>
51+
</DragDropFile>
52+
);
53+
}
54+
55+
if(typeof module !== 'undefined') module.exports = SheetJSApp
56+
57+
/* -------------------------------------------------------------------------- */
58+
59+
/*
60+
Simple HTML5 file drag-and-drop wrapper
61+
usage: <DragDropFile handleFile={handleFile}>...</DragDropFile>
62+
handleFile(file:File):void;
63+
*/
64+
65+
function DragDropFile({ handleFile, children }) {
66+
const suppress = (e) => { e.stopPropagation(); e.preventDefault(); };
67+
const handleDrop = (e) => { e.stopPropagation(); e.preventDefault();
68+
const files = e.dataTransfer.files;
69+
if(files && files[0]) handleFile(files[0]);
70+
};
71+
72+
return (
73+
<div
74+
onDrop={handleDrop}
75+
onDragEnter={suppress}
76+
onDragOver={suppress}
77+
>
78+
{children}
79+
</div>
80+
);
81+
}
82+
83+
/*
84+
Simple HTML5 file input wrapper
85+
usage: <DataInput handleFile={callback} />
86+
handleFile(file:File):void;
87+
*/
88+
89+
function DataInput({ handleFile }) {
90+
const handleChange = (e) => {
91+
const files = e.target.files;
92+
if(files && files[0]) handleFile(files[0]);
93+
};
94+
95+
return (
96+
<form className="form-inline">
97+
<div className="form-group">
98+
<label htmlFor="file">Drag or choose a spreadsheet file</label>
99+
<br />
100+
<input
101+
type="file"
102+
className="form-control"
103+
id="file"
104+
accept={SheetJSFT}
105+
onChange={handleChange}
106+
/>
107+
</div>
108+
</form>
109+
)
110+
}
111+
112+
/*
113+
Simple HTML Table
114+
usage: <OutTable data={data} cols={cols} />
115+
data:Array<Array<any> >;
116+
cols:Array<{name:string, key:number|string}>;
117+
*/
118+
function OutTable({ data, cols }) {
119+
return (
120+
<div className="table-responsive">
121+
<table className="table table-striped">
122+
<thead>
123+
<tr>{cols.map((c) => <th key={c.key}>{c.name}</th>)}</tr>
124+
</thead>
125+
<tbody>
126+
{data.map((r,i) => <tr key={i}>
127+
{cols.map(c => <td key={c.key}>{ r[c.key] }</td>)}
128+
</tr>)}
129+
</tbody>
130+
</table>
131+
</div>
132+
);
133+
}
134+
135+
/* list of supported file types */
136+
const SheetJSFT = [
137+
"xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm"
138+
].map(x => `.${x}`).join(",");
139+
140+
/* generate an array of column objects */
141+
const make_cols = refstr => {
142+
let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1;
143+
for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i}
144+
return o;
145+
};

0 commit comments

Comments
 (0)