diff --git a/README.md b/README.md index 79efdb2..5e5e97d 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ Property | Type | Description **id** | *string* | ID attribute of button element. **className** | *string* | Class attribute of button element. **buttonText** | *string* | Button text. +**children** | *element* | Child elements to render instead of the button text. ## Example diff --git a/package.json b/package.json index 3d6892f..a016438 100644 --- a/package.json +++ b/package.json @@ -1,67 +1,68 @@ { - "name": "react-html-table-to-excel", - "version": "2.0.0", - "description": "Small react component for converting and downloading HTML table to Excel file", - "main": "index.js", - "scripts": { - "build": "./node_modules/.bin/babel ./src/ReactHTMLTableToExcel.jsx -o index.js", - "prepublish": "npm run build", - "client:test": "NODE_ENV=test jest", - "client:test:watch": "NODE_ENV=test jest --watch" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/zsusac/ReactHTMLTableToExcel.git" - }, - "keywords": [ - "react", - "excel", - "table", - "html", - "xls" - ], - "author": "Zvonimir Susac ", - "license": "MIT", - "bugs": { - "url": "https://github.com/zsusac/ReactHTMLTableToExcel/issues" - }, - "homepage": "https://github.com/zsusac/ReactHTMLTableToExcel#readme", - "jest": { - "rootDir": "./", - "moduleNameMapper": { - "^.+\\.(css|less)$": "/CSSStub.js" - }, - "collectCoverage": true, - "coverageDirectory": "/../../coverage", - "verbose": true, - "coveragePathIgnorePatterns": [ - "/../../node_modules/" - ] - }, - "peerDependencies": { - "react": "^15.x.x" - }, - "devDependencies": { - "babel-cli": "^6.24.1", - "babel-eslint": "^7.2.3", - "babel-preset-es2015": "^6.24.1", - "babel-preset-react": "^6.24.1", - "babel-preset-stage-0": "^6.24.1", - "chai": "^3.5.0", - "chai-enzyme": "^0.6.1", - "enzyme": "^2.8.2", - "eslint": "^3.19.0", - "eslint-config-airbnb": "^14.1.0", - "eslint-plugin-import": "^2.2.0", - "eslint-plugin-jsx-a11y": "^5.0.1", - "eslint-plugin-react": "^7.0.0", - "jest": "^20.0.1", - "react": "^15.5.4", - "react-dom": "^15.5.4", - "react-test-renderer": "^15.5.4", - "sinon": "^2.2.0" - }, - "dependencies": { - "prop-types": "^15.5.10" - } + "name": "react-html-table-to-excel", + "version": "3.0.0", + "description": "Small react component for converting and downloading HTML table to Excel file", + "main": "index.js", + "scripts": { + "build": "./node_modules/.bin/babel ./src/ReactHTMLTableToExcel.jsx -o index.js", + "prepublish": "npm run build", + "client:test": "jest", + "client:test:watch": "jest --watch" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/zsusac/ReactHTMLTableToExcel.git" + }, + "keywords": [ + "react", + "excel", + "table", + "html", + "xls" + ], + "author": "Zvonimir Susac ", + "license": "MIT", + "bugs": { + "url": "https://github.com/zsusac/ReactHTMLTableToExcel/issues" + }, + "homepage": "https://github.com/zsusac/ReactHTMLTableToExcel#readme", + "jest": { + "rootDir": "./", + "moduleNameMapper": { + "^.+\\.(css|less)$": "/CSSStub.js" + }, + "collectCoverage": true, + "coverageDirectory": "/../../coverage", + "verbose": true, + "coveragePathIgnorePatterns": [ + "/../../node_modules/" + ] + }, + "peerDependencies": { + "react": "^16.x.x" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "babel-eslint": "^7.2.3", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babel-preset-stage-0": "^6.24.1", + "chai": "^3.5.0", + "chai-enzyme": "^1.0.0-beta.1", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.6", + "eslint": "^8.18.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-plugin-import": "^2.2.0", + "eslint-plugin-jsx-a11y": "^6.6.0", + "eslint-plugin-react": "^7.30.1", + "jest": "^20.0.4", + "react": "^16.14.0", + "react-dom": "^16.14.0", + "react-test-renderer": "^16.14.0", + "sinon": "^2.2.0" + }, + "dependencies": { + "prop-types": "^15.8.1" + } } \ No newline at end of file diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx index fd32011..a34951e 100644 --- a/src/ReactHTMLTableToExcel.jsx +++ b/src/ReactHTMLTableToExcel.jsx @@ -3,57 +3,58 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; const propTypes = { - table: PropTypes.string.isRequired, - filename: PropTypes.string.isRequired, - sheet: PropTypes.string.isRequired, - id: PropTypes.string, - className: PropTypes.string, - buttonText: PropTypes.string, + table: PropTypes.string.isRequired, + filename: PropTypes.string.isRequired, + sheet: PropTypes.string.isRequired, + id: PropTypes.string, + className: PropTypes.string, + buttonText: PropTypes.string, + children: PropTypes.element }; const defaultProps = { - id: 'button-download-as-xls', - className: 'button-download', - buttonText: 'Download', + id: 'button-download-as-xls', + className: 'button-download', + buttonText: 'Download' }; class ReactHTMLTableToExcel extends Component { - constructor(props) { - super(props); - this.handleDownload = this.handleDownload.bind(this); - } - - static base64(s) { - return window.btoa(unescape(encodeURIComponent(s))); - } - - static format(s, c) { - return s.replace(/{(\w+)}/g, (m, p) => c[p]); - } - - handleDownload() { - if (!document) { - if (process.env.NODE_ENV !== 'production') { - console.error('Failed to access document object'); - } - - return null; - } - - if (document.getElementById(this.props.table).nodeType !== 1 || document.getElementById(this.props.table).nodeName !== 'TABLE') { - if (process.env.NODE_ENV !== 'production') { - console.error('Provided table property is not html table element'); - } - - return null; - } - - const table = document.getElementById(this.props.table).outerHTML; - const sheet = String(this.props.sheet); - const filename = `${String(this.props.filename)}.xls`; - - const uri = 'data:application/vnd.ms-excel;base64,'; - const template = + constructor(props) { + super(props); + this.handleDownload = this.handleDownload.bind(this); + } + + static base64(s) { + return window.btoa(unescape(encodeURIComponent(s))); + } + + static format(s, c) { + return s.replace(/{(\w+)}/g, (m, p) => c[p]); + } + + handleDownload() { + if (!document) { + if (process.env.NODE_ENV !== 'production') { + console.error('Failed to access document object'); + } + + return null; + } + + if (document.getElementById(this.props.table).nodeType !== 1 || document.getElementById(this.props.table).nodeName !== 'TABLE') { + if (process.env.NODE_ENV !== 'production') { + console.error('Provided table property is not html table element'); + } + + return null; + } + + const table = document.getElementById(this.props.table).outerHTML; + const sheet = String(this.props.sheet); + const filename = `${String(this.props.filename)}.xls`; + + const uri = 'data:application/vnd.ms-excel;base64,'; + const template = '{table}'; - const context = { - worksheet: sheet || 'Worksheet', - table, - }; - - // If IE11 - if (window.navigator.msSaveOrOpenBlob) { - const fileData = [ - `${''}${table}`, - ]; - const blobObject = new Blob(fileData); - document.getElementById('react-html-table-to-excel').click()(() => { - window.navigator.msSaveOrOpenBlob(blobObject, filename); - }); - - return true; - } - - const element = window.document.createElement('a'); - element.href = + const context = { + worksheet: sheet || 'Worksheet', + table + }; + + // If IE11 + if (window.navigator.msSaveOrOpenBlob) { + const fileData = [ + `${''}${table}` + ]; + const blobObject = new Blob(fileData); + document.getElementById('react-html-table-to-excel').click()(() => { + window.navigator.msSaveOrOpenBlob(blobObject, filename); + }); + + return true; + } + + const element = window.document.createElement('a'); + element.href = uri + ReactHTMLTableToExcel.base64( - ReactHTMLTableToExcel.format(template, context), + ReactHTMLTableToExcel.format(template, context) ); - element.download = filename; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - - return true; - } - - render() { - return ( - - ); - } + element.download = filename; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + + return true; + } + + render() { + return ( + + ); + } } ReactHTMLTableToExcel.propTypes = propTypes; diff --git a/test/index.test.js b/test/index.test.js index 734604e..d1e4c97 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -1,10 +1,14 @@ import React from 'react'; import chai, { expect } from 'chai'; import chaiEnzyme from 'chai-enzyme'; +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; import { shallow } from 'enzyme'; import sinon from 'sinon'; import ReactHTMLTableToExcel from '../src/ReactHTMLTableToExcel'; +configure({ adapter: new Adapter() }); + chai.use(chaiEnzyme()); const props = {