/
App.js
126 lines (113 loc) · 4.54 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { Component } from 'react';
import './App.css';
import {OutTable, ExcelRenderer} from 'react-excel-renderer';
import { Jumbotron, Col, Input, InputGroup, InputGroupAddon, FormGroup, Label, Button, Fade, FormFeedback, Container, Card } from 'reactstrap';
class App extends Component {
constructor(props){
super(props);
this.state={
isOpen: false,
dataLoaded: false,
isFormInvalid: false,
rows: null,
cols: null
}
this.fileHandler = this.fileHandler.bind(this);
this.toggle = this.toggle.bind(this);
this.openFileBrowser = this.openFileBrowser.bind(this);
this.renderFile = this.renderFile.bind(this);
this.openNewPage = this.openNewPage.bind(this);
this.fileInput = React.createRef();
}
renderFile = (fileObj) => {
//just pass the fileObj as parameter
ExcelRenderer(fileObj, (err, resp) => {
if(err){
console.log(err);
}
else{
this.setState({
dataLoaded: true,
cols: resp.cols,
rows: resp.rows
});
}
});
}
fileHandler = (event) => {
if(event.target.files.length){
let fileObj = event.target.files[0];
let fileName = fileObj.name;
//check for file extension and pass only if it is .xlsx and display error message otherwise
if(fileName.slice(fileName.lastIndexOf('.')+1) === "xlsx"){
this.setState({
uploadedFileName: fileName,
isFormInvalid: false
});
this.renderFile(fileObj)
}
else{
this.setState({
isFormInvalid: true,
uploadedFileName: ""
})
}
}
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
openFileBrowser = () => {
this.fileInput.current.click();
}
openNewPage = (chosenItem) => {
const url = chosenItem === "github" ? "https://github.com/ashishd751/react-excel-renderer" : "https://medium.com/@ashishd751/render-and-display-excel-sheets-on-webpage-using-react-js-af785a5db6a7";
window.open(url, '_blank');
}
render() {
return (
<div>
<div>
<Jumbotron className="jumbotron-background">
<h1 className="display-3">react-excel-renderer</h1>
<p className="lead">Welcome to the demo of react-excel-renderer.</p>
<Button className="primary jumbotron-button" onClick={this.openNewPage.bind(this,"github")}>GitHub</Button>{' '}
<Button className="primary jumbotron-button" onClick={this.openNewPage.bind(this,"medium")}>Medium</Button>
<hr className="my-2" />
<p>Developed with <span className="fa fa-heart"></span> by Ashish Deshpande</p>
</Jumbotron>
</div>
<Container>
<form>
<FormGroup row>
<Label for="exampleFile" xs={6} sm={4} lg={2} size="lg">Upload</Label>
<Col xs={4} sm={8} lg={10}>
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button color="info" style={{color: "white", zIndex: 0}} onClick={this.openFileBrowser.bind(this)}><i className="cui-file"></i> Browse…</Button>
<input type="file" hidden onChange={this.fileHandler.bind(this)} ref={this.fileInput} onClick={(event)=> { event.target.value = null }} style={{"padding":"10px"}} />
</InputGroupAddon>
<Input type="text" className="form-control" value={this.state.uploadedFileName} readOnly invalid={this.state.isFormInvalid} />
<FormFeedback>
<Fade in={this.state.isFormInvalid} tag="h6" style={{fontStyle: "italic"}}>
Please select a .xlsx file only !
</Fade>
</FormFeedback>
</InputGroup>
</Col>
</FormGroup>
</form>
{this.state.dataLoaded &&
<div>
<Card body outline color="secondary" className="restrict-card">
<OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />
</Card>
</div>}
</Container>
</div>
);
}
}
export default App;