commit 0b29aa4c0fc76ad362192df1f42c9fcfbe64f50d Author: SheetJS Date: Tue Sep 12 16:02:06 2017 -0400 updated demos [ci skip] - frameworks: react, react-native, preact, next.js, weex, nuxt.js - deployments: nodejs server, duktape, chakra, electron, nw.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6a9a216 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +SheetJS +.next diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..724fa6f --- /dev/null +++ b/Makefile @@ -0,0 +1,22 @@ +.PHONY: react +react: ## Simple server for react and clones + python -mSimpleHTTPServer + +.PHONY: next +next: ## next.js demo + # next doesn't support jsx extension + mkdir -p pages + cp sheetjs.jsx pages/sheetjs.js + next + +.PHONY: native +native: ## Build react-native project + bash ./native.sh + +.PHONY: ios +ios: native ## react-native ios sim + cd SheetJS; react-native run-ios; cd - + +.PHONY: android +android: native ## react-native android sim + cd SheetJS; react-native run-android; cd - diff --git a/README.md b/README.md new file mode 100644 index 0000000..2afe557 --- /dev/null +++ b/README.md @@ -0,0 +1,68 @@ +# React + +The `xlsx.core.min.js` and `xlsx.full.min.js` scripts are designed to be dropped +into web pages with script tags e.g. + +```html + +``` + +The library can also be imported directly from JSX code with: + +```js +import * as XLSX from 'xlsx'; +``` + +This demo shows a simple JSX 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 + +## Internal State + +The simplest state representation is an array of arrays. To avoid having the +table component depend on the library, the column labels are precomputed. The +state in this demo is shaped like the following object: + +```js +{ + cols: [ + { name: "A", key: 0 }, + { name: "B", key: 1 }, + { name: "C", key: 2 }, + ], + data: [ + [ "id", "name", "value" ], + [ 1, "sheetjs", 7262 ] + [ 2, "js-xlsx", 6969 ] + ] +} +``` + +The appropriate state model is application-specific. + +## React Native + +

+ +Reproducing the full project is straightforward: + +```bash +react-native init SheetJS +cd SheetJS +npm i -S xlsx react react-native react-native-table-component react-native-fs +cp ../react-native.js index.ios.js +cp ../react-native.js index.android.js +react-native link +``` + +This uses `react-native-fs` to read and write files on devices. The app will +prompt before reading and after writing data. The printed location will be: + +- android: path in the device filesystem +- iOS simulator: local path to file +- iOS device: a path accessible from iTunes App Documents view diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a1f85b --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + +SheetJS React Demo + + + + + + + + + +

SheetJS React Demo

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

+

+ + + + + diff --git a/native.sh b/native.sh new file mode 100755 index 0000000..5287ffd --- /dev/null +++ b/native.sh @@ -0,0 +1,17 @@ +#!/bin/bash + +if [ ! -e SheetJS ]; then + react-native init SheetJS + cd SheetJS + npm i -S xlsx react react-native react-native-table-component react-native-fs + cd - +fi +if [ ! -e SheetJS/logo.png ]; then + curl -O http://oss.sheetjs.com/assets/img/logo.png + mv logo.png SheetJS/logo.png +fi +cp react-native.js SheetJS/index.ios.js +cp react-native.js SheetJS/index.android.js +cd SheetJS; +react-native link +cd -; diff --git a/pages/.gitignore b/pages/.gitignore new file mode 100644 index 0000000..7902a8c --- /dev/null +++ b/pages/.gitignore @@ -0,0 +1 @@ +sheetjs.js diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 0000000..f7eac77 --- /dev/null +++ b/pages/index.js @@ -0,0 +1,26 @@ +import Head from 'next/head' +import SheetJSApp from './sheetjs.js' +export default () => ( +

+ + + SheetJS React Demo + + + + + + + + +

SheetJS React Demo

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

+

+ +

+) diff --git a/preact.html b/preact.html new file mode 100644 index 0000000..3e9bb6a --- /dev/null +++ b/preact.html @@ -0,0 +1,42 @@ + + + + + + +SheetJS React Demo + + + + + + + + + + + +

SheetJS React Demo

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

+

{c.name}
{ r[c.key] }

+ + + + + diff --git a/react-native.js b/react-native.js new file mode 100644 index 0000000..fff0f68 --- /dev/null +++ b/react-native.js @@ -0,0 +1,76 @@ +/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */ + +import * as XLSX from 'xlsx'; + +import React, { Component } from 'react'; +import { AppRegistry, StyleSheet, Text, View, Button, Alert, Image } from 'react-native'; +import { Table, Row, Rows } from 'react-native-table-component'; +import { writeFile, readFile, DocumentDirectoryPath } from 'react-native-fs' + +const DDP = DocumentDirectoryPath + "/"; + +const make_cols = refstr => Array.from({length: XLSX.utils.decode_range(refstr).e.c + 1}, (x,i) => XLSX.utils.encode_col(i)); + +export default class SheetJS extends Component { + constructor(props) { + super(props); + this.state = { + data: [[1,2,3],[4,5,6]], + cols: make_cols("A1:C2") + }; + this.importFile = this.importFile.bind(this); + this.exportFile = this.exportFile.bind(this); + }; + importFile() { + Alert.alert("Rename file to sheetjs.xlsx", "Copy to " + DDP, [ + {text: 'Cancel', onPress: () => {}, style: 'cancel' }, + {text: 'Import', onPress: () => { + readFile(DDP + "sheetjs.xlsx", 'ascii').then((res) => { + const wb = XLSX.read(res, {type:'binary'}); + const wsname = wb.SheetNames[0]; + const ws = wb.Sheets[wsname]; + const data = XLSX.utils.sheet_to_json(ws, {header:1}); + this.setState({ data: data, cols: make_cols(ws['!ref']) }); + }).catch((err) => { Alert.alert("importFile Error", "Error " + err.message); }); + }} + ]); + } + exportFile() { + const ws = XLSX.utils.aoa_to_sheet(this.state.data); + const wb = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(wb, ws, "SheetJS"); + const wbout = XLSX.write(wb, {type:"binary", bookType:"xlsx"}); + const file = DDP + "sheetjsw.xlsx"; + writeFile(file, wbout, 'ascii').then((res) =>{ + 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