From b519be86cad8109450c5c368d7e8eb781cacca81 Mon Sep 17 00:00:00 2001 From: Sean Walker Date: Tue, 28 Jun 2022 21:45:55 -0500 Subject: [PATCH 1/2] Updated dependencies to use react 16. Added children to the button so we can render icons and other content if desired. The tests do not work yet, there are enzyme issues to deal with. --- package.json | 132 +++++++++++++------------- src/ReactHTMLTableToExcel.jsx | 173 +++++++++++++++++----------------- 2 files changed, 153 insertions(+), 152 deletions(-) diff --git a/package.json b/package.json index 3d6892f..311e37f 100644 --- a/package.json +++ b/package.json @@ -1,67 +1,67 @@ { - "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" - } -} \ No newline at end of file + "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": "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": "^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", + "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" + } +} 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; From 2fe7544b1797489f219ad3c8a4ed5def84ad58c6 Mon Sep 17 00:00:00 2001 From: Sean Walker Date: Tue, 28 Jun 2022 21:53:35 -0500 Subject: [PATCH 2/2] Updated enzyme config, tests pass now. --- README.md | 1 + package.json | 7 ++++--- test/index.test.js | 4 ++++ 3 files changed, 9 insertions(+), 3 deletions(-) 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 311e37f..a016438 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "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" + "client:test": "jest", + "client:test:watch": "jest --watch" }, "repository": { "type": "git", @@ -50,6 +50,7 @@ "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", @@ -64,4 +65,4 @@ "dependencies": { "prop-types": "^15.8.1" } -} +} \ No newline at end of file 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 = {