diff --git a/demos/react/Makefile b/demos/react/Makefile index a44ca61..92f449f 100644 --- a/demos/react/Makefile +++ b/demos/react/Makefile @@ -5,7 +5,7 @@ react: init ## Simple server for react and clones .PHONY: next next: init ## next.js demo mkdir -p pages static - cat nexthdr.js sheetjs.jsx > pages/sheetjs.js + cat nexthdr.js sheetjs.js > pages/sheetjs.js cp ../../shim.js static/shim.js next @@ -15,7 +15,7 @@ native: ## Build react-native project .PHONY: ios ios: native ## react-native ios sim - cd SheetJS; react-native run-ios --simulator="iPhone X"; cd - + cd SheetJS; cd ios; pod install; cd -; react-native run-ios --simulator="iPhone X"; cd - .PHONY: android android: native ## react-native android sim diff --git a/demos/react/README.md b/demos/react/README.md index 1d0ef07..060b3bc 100644 --- a/demos/react/README.md +++ b/demos/react/README.md @@ -13,19 +13,19 @@ The library can also be imported directly from JSX code with: import XLSX from 'xlsx'; ``` -This demo shows a simple JSX component transpiled in the browser using the babel +This demo shows a simple React component transpiled in the browser using the babel standalone library. Since there is no standard React table model, this demo settles on the array of arrays approach. Other scripts in this demo show: - server-rendered React component (with `next.js`) -- `preact` using the react compatibility library - `react-native` deployment for iOS and android +## How to run + Run `make react` to run the browser demo for React, or run `make next` to run the server-rendered demo using `next.js`. - ## Internal State 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. To run the React Native demo, run either `make ios` or `make android` while connected to a device or emulator. -## Other Demos - -#### Preact - -`preact-compat` is an easy-to-use compatibility layer that provides equivalents -for `React` and `ReactDOM`. The `preact` demo uses the same JSX component code! -[The docs](https://npm.im/preact-compat#use-without-webpackbrowserify) explain -how to convert the in-browser React demo to Preact. - #### Server-Rendered React Components with Next.js The demo uses the same component code as the in-browser version, but the build diff --git a/demos/react/index.html b/demos/react/index.html index a6cde0d..8487db4 100644 --- a/demos/react/index.html +++ b/demos/react/index.html @@ -6,9 +6,9 @@ SheetJS React Demo - - - + + + @@ -21,18 +21,7 @@ Issues? Something look weird? Click here and report an issue

- - + diff --git a/demos/react/preact.html b/demos/react/preact.html deleted file mode 100644 index b08d90d..0000000 --- a/demos/react/preact.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - -SheetJS Preact Demo - - - - - - - - - - - -
-

SheetJS Preact Demo

-
-Source Code Repo
-Issues? Something look weird? Click here and report an issue

-
-
- - - - - diff --git a/demos/react/react-native.js b/demos/react/react-native.js index 4d48eb6..b0913db 100644 --- a/demos/react/react-native.js +++ b/demos/react/react-native.js @@ -1,8 +1,17 @@ /* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */ import XLSX from 'xlsx'; - import React, { Component } from 'react'; -import { AppRegistry, StyleSheet, Text, View, Button, Alert, Image, ScrollView, TouchableWithoutFeedback } from 'react-native'; +import { + AppRegistry, + StyleSheet, + Text, + View, + Button, + Alert, + Image, + ScrollView, + TouchableWithoutFeedback +} from 'react-native'; import { Table, Row, Rows, TableWrapper } from 'react-native-table-component'; // react-native-fs @@ -68,34 +77,36 @@ export default class SheetJS extends Component { Alert.alert("exportFile success", "Exported to " + file); }).catch((err) => { Alert.alert("exportFile Error", "Error " + err.message); }); }; - render() { return ( - - - - SheetJS React Native Demo - Import Data - + +
+ +
+ + ); +} + +if(typeof module !== 'undefined') module.exports = SheetJSApp + +/* -------------------------------------------------------------------------- */ + +/* + Simple HTML5 file drag-and-drop wrapper + usage: ... + handleFile(file:File):void; +*/ + +function DragDropFile({ handleFile, children }) { + const suppress = (e) => { e.stopPropagation(); e.preventDefault(); }; + const handleDrop = (e) => { e.stopPropagation(); e.preventDefault(); + const files = e.dataTransfer.files; + if(files && files[0]) handleFile(files[0]); + }; + + return ( +
+ {children} +
+ ); +} + +/* + Simple HTML5 file input wrapper + usage: + handleFile(file:File):void; +*/ + +function DataInput({ handleFile }) { + const handleChange = (e) => { + const files = e.target.files; + if(files && files[0]) handleFile(files[0]); + }; + + return ( +
+
+ +
+ +
+
+ ) +} + +/* + Simple HTML Table + usage: + data:Array >; + cols:Array<{name:string, key:number|string}>; +*/ +function OutTable({ data, cols }) { + return ( +
+ + + {cols.map((c) => )} + + + {data.map((r,i) => + {cols.map(c => )} + )} + +
{c.name}
{ r[c.key] }
+
+ ); +} + +/* list of supported file types */ +const SheetJSFT = [ + "xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm" +].map(x => `.${x}`).join(","); + +/* generate an array of column objects */ +const make_cols = refstr => { + let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1; + for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i} + return o; +}; diff --git a/demos/react/sheetjs.jsx b/demos/react/sheetjs.jsx deleted file mode 100644 index 4da567f..0000000 --- a/demos/react/sheetjs.jsx +++ /dev/null @@ -1,143 +0,0 @@ -/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */ -/* Notes: - - usage: `ReactDOM.render( , document.getElementById('app') );` - - xlsx.full.min.js is loaded in the head of the HTML page - - this script should be referenced with type="text/babel" - - babel.js in-browser transpiler should be loaded before this script -*/ -class SheetJSApp extends React.Component { - constructor(props) { - super(props); - this.state = { - data: [], /* Array of Arrays e.g. [["a","b"],[1,2]] */ - cols: [] /* Array of column objects e.g. { name: "C", K: 2 } */ - }; - this.handleFile = this.handleFile.bind(this); - this.exportFile = this.exportFile.bind(this); - }; - handleFile(file/*:File*/) { - /* Boilerplate to set up FileReader */ - const reader = new FileReader(); - const rABS = !!reader.readAsBinaryString; - reader.onload = (e) => { - /* Parse data */ - const bstr = e.target.result; - const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'}); - /* Get first worksheet */ - const wsname = wb.SheetNames[0]; - const ws = wb.Sheets[wsname]; - /* Convert array of arrays */ - const data = XLSX.utils.sheet_to_json(ws, {header:1}); - /* Update state */ - this.setState({ data: data, cols: make_cols(ws['!ref']) }); - }; - if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file); - }; - exportFile() { - /* convert state to workbook */ - const ws = XLSX.utils.aoa_to_sheet(this.state.data); - const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, "SheetJS"); - /* generate XLSX file and send to client */ - XLSX.writeFile(wb, "sheetjs.xlsx") - }; - render() { return ( - -
- -
-
- -
-
- -
- -); }; -}; - -if(typeof module !== 'undefined') module.exports = SheetJSApp - -/* -------------------------------------------------------------------------- */ - -/* - Simple HTML5 file drag-and-drop wrapper - usage: ... - handleFile(file:File):void; -*/ -class DragDropFile extends React.Component { - constructor(props) { - super(props); - this.onDrop = this.onDrop.bind(this); - }; - suppress(evt) { evt.stopPropagation(); evt.preventDefault(); }; - onDrop(evt) { evt.stopPropagation(); evt.preventDefault(); - const files = evt.dataTransfer.files; - if(files && files[0]) this.props.handleFile(files[0]); - }; - render() { return ( -
- {this.props.children} -
- ); }; -}; - -/* - Simple HTML5 file input wrapper - usage: - handleFile(file:File):void; -*/ -class DataInput extends React.Component { - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - }; - handleChange(e) { - const files = e.target.files; - if(files && files[0]) this.props.handleFile(files[0]); - }; - render() { return ( -
-
- - -
-
- ); }; -} - -/* - Simple HTML Table - usage: - data:Array >; - cols:Array<{name:string, key:number|string}>; -*/ -class OutTable extends React.Component { - constructor(props) { super(props); }; - render() { return ( -
- - - {this.props.cols.map((c) => )} - - - {this.props.data.map((r,i) => - {this.props.cols.map(c => )} - )} - -
{c.name}
{ r[c.key] }
-
- ); }; -}; - -/* list of supported file types */ -const SheetJSFT = [ - "xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm" -].map(function(x) { return "." + x; }).join(","); - -/* generate an array of column objects */ -const make_cols = refstr => { - let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1; - for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i} - return o; -};