diff --git a/.npmignore b/.npmignore index 7595163..d0f7437 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,6 @@ .DS_Store node_modules npm-debug.log + +#ignore source +src/ diff --git a/index.js b/index.js index 27bb0f1..c7f1570 100644 --- a/index.js +++ b/index.js @@ -3,136 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true }); +exports.ReactHTMLTableToExcelButton = undefined; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +var _ReactHTMLTableToExcel = require('./lib/ReactHTMLTableToExcel'); -var _react = require('react'); +var _ReactHTMLTableToExcel2 = _interopRequireDefault(_ReactHTMLTableToExcel); -var _react2 = _interopRequireDefault(_react); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); +var _ReactHTMLTableToExcelButton = require('./lib/ReactHTMLTableToExcelButton'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window, document, Blob */ - - -var propTypes = { - table: _propTypes2.default.string.isRequired, - filename: _propTypes2.default.string.isRequired, - sheet: _propTypes2.default.string.isRequired, - id: _propTypes2.default.string, - className: _propTypes2.default.string, - buttonText: _propTypes2.default.string -}; - -var defaultProps = { - id: 'button-download-as-xls', - className: 'button-download', - buttonText: 'Download' -}; - -var ReactHTMLTableToExcel = function (_Component) { - _inherits(ReactHTMLTableToExcel, _Component); - - function ReactHTMLTableToExcel(props) { - _classCallCheck(this, ReactHTMLTableToExcel); - - var _this = _possibleConstructorReturn(this, (ReactHTMLTableToExcel.__proto__ || Object.getPrototypeOf(ReactHTMLTableToExcel)).call(this, props)); - - _this.handleDownload = _this.handleDownload.bind(_this); - return _this; - } - - _createClass(ReactHTMLTableToExcel, [{ - key: 'handleDownload', - value: function 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; - } - - var table = document.getElementById(this.props.table).outerHTML; - var sheet = String(this.props.sheet); - var filename = String(this.props.filename) + '.xls'; - - var uri = 'data:application/vnd.ms-excel;base64,'; - var template = '{table}'; - - var context = { - worksheet: sheet || 'Worksheet', - table: table - }; - - // If IE11 - if (window.navigator.msSaveOrOpenBlob) { - var fileData = ['' + ('') + table + '']; - var blobObject = new Blob(fileData); - document.getElementById('react-html-table-to-excel').click()(function () { - window.navigator.msSaveOrOpenBlob(blobObject, filename); - }); - - return true; - } - - var element = window.document.createElement('a'); - element.href = uri + ReactHTMLTableToExcel.base64(ReactHTMLTableToExcel.format(template, context)); - element.download = filename; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - - return true; - } - }, { - key: 'render', - value: function render() { - return _react2.default.createElement( - 'button', - { - id: this.props.id, - className: this.props.className, - type: 'button', - onClick: this.handleDownload - }, - this.props.buttonText - ); - } - }], [{ - key: 'base64', - value: function base64(s) { - return window.btoa(unescape(encodeURIComponent(s))); - } - }, { - key: 'format', - value: function format(s, c) { - return s.replace(/{(\w+)}/g, function (m, p) { - return c[p]; - }); - } - }]); - - return ReactHTMLTableToExcel; -}(_react.Component); - -ReactHTMLTableToExcel.propTypes = propTypes; -ReactHTMLTableToExcel.defaultProps = defaultProps; - -exports.default = ReactHTMLTableToExcel; +exports.default = _ReactHTMLTableToExcel2.default; +exports.ReactHTMLTableToExcelButton = _ReactHTMLTableToExcelButton.ReactHTMLTableToExcelButton; \ No newline at end of file diff --git a/lib/ReactHTMLTableToExcel.js b/lib/ReactHTMLTableToExcel.js new file mode 100644 index 0000000..4fbd503 --- /dev/null +++ b/lib/ReactHTMLTableToExcel.js @@ -0,0 +1,125 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window, document, Blob */ + + +var withReactHTMLTableToExcel = function withReactHTMLTableToExcel(WrappedComponent) { + var ReactHTMLTableToExcel = function (_React$Component) { + _inherits(ReactHTMLTableToExcel, _React$Component); + + function ReactHTMLTableToExcel(props) { + _classCallCheck(this, ReactHTMLTableToExcel); + + var _this = _possibleConstructorReturn(this, (ReactHTMLTableToExcel.__proto__ || Object.getPrototypeOf(ReactHTMLTableToExcel)).call(this, props)); + + _this.handleDownload = _this.handleDownload.bind(_this); + return _this; + } + + _createClass(ReactHTMLTableToExcel, [{ + key: 'handleDownload', + value: function 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; + } + + var table = document.getElementById(this.props.table).outerHTML; + var sheet = String(this.props.sheet); + var filename = String(this.props.filename) + '.xls'; + + var uri = 'data:application/vnd.ms-excel;base64,'; + var template = '{table}'; + + var context = { + worksheet: sheet || 'Worksheet', + table: table + }; + + // If IE11 + if (window.navigator.msSaveOrOpenBlob) { + var fileData = ['' + ('') + table + '']; + var blobObject = new Blob(fileData); + document.getElementById('react-html-table-to-excel').click()(function () { + window.navigator.msSaveOrOpenBlob(blobObject, filename); + }); + + return true; + } + + var element = window.document.createElement('a'); + element.href = uri + ReactHTMLTableToExcel.base64(ReactHTMLTableToExcel.format(template, context)); + element.download = filename; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + + return true; + } + }, { + key: 'render', + value: function render() { + return _react2.default.createElement(WrappedComponent, _extends({}, this.props, { + onClick: this.handleDownload + })); + } + }], [{ + key: 'base64', + value: function base64(s) { + return window.btoa(unescape(encodeURIComponent(s))); + } + }, { + key: 'format', + value: function format(s, c) { + return s.replace(/{(\w+)}/g, function (m, p) { + return c[p]; + }); + } + }]); + + return ReactHTMLTableToExcel; + }(_react2.default.Component); + + ReactHTMLTableToExcel.propTypes = { + table: _propTypes2.default.string.isRequired, + filename: _propTypes2.default.string.isRequired, + sheet: _propTypes2.default.string.isRequired + }; + + return ReactHTMLTableToExcel; +}; + +exports.default = withReactHTMLTableToExcel; \ No newline at end of file diff --git a/lib/ReactHTMLTableToExcelButton.js b/lib/ReactHTMLTableToExcelButton.js new file mode 100644 index 0000000..654b7f9 --- /dev/null +++ b/lib/ReactHTMLTableToExcelButton.js @@ -0,0 +1,54 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.ReactHTMLTableToExcelButton = undefined; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _ReactHTMLTableToExcel = require('./ReactHTMLTableToExcel'); + +var _ReactHTMLTableToExcel2 = _interopRequireDefault(_ReactHTMLTableToExcel); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var Button = function Button(props) { + return _react2.default.createElement( + 'button', + { + id: props.id, + className: props.className, + onClick: props.onClick + }, + props.buttonText + ); +}; + +Button.propTypes = { + // because of ReactHTMLTableToExcel HOC + table: _propTypes2.default.string.isRequired, + filename: _propTypes2.default.string.isRequired, + sheet: _propTypes2.default.string.isRequired, + + id: _propTypes2.default.string, + className: _propTypes2.default.string, + buttonText: _propTypes2.default.string, + onClick: _propTypes2.default.func.isRequired +}; + +Button.defaultProps = { + id: 'button-download-as-xls', + className: 'button-download', + buttonText: 'Download' +}; + +var ReactHTMLTableToExcelButton = (0, _ReactHTMLTableToExcel2.default)(Button); + +exports.ReactHTMLTableToExcelButton = ReactHTMLTableToExcelButton; \ No newline at end of file diff --git a/package.json b/package.json index 3d6892f..8d94c32 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "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", + "build": "./node_modules/.bin/babel -d lib/ src/", "prepublish": "npm run build", "client:test": "NODE_ENV=test jest", "client:test:watch": "NODE_ENV=test jest --watch" diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx index fd32011..95d5fca 100644 --- a/src/ReactHTMLTableToExcel.jsx +++ b/src/ReactHTMLTableToExcel.jsx @@ -1,113 +1,103 @@ /* global window, document, Blob */ -import React, { Component } from 'react'; +import React 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, -}; - -const defaultProps = { - 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))); - } +const withReactHTMLTableToExcel = WrappedComponent => { + class ReactHTMLTableToExcel extends React.Component { + constructor(props) { + super(props); + this.handleDownload = this.handleDownload.bind(this); + } - static format(s, c) { - return s.replace(/{(\w+)}/g, (m, p) => c[p]); - } + 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'); + } - handleDownload() { - if (!document) { - if (process.env.NODE_ENV !== 'production') { - console.error('Failed to access document object'); + return null; } - 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'); + } - 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; } - 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 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); - }); + const element = window.document.createElement('a'); + element.href = + uri + + ReactHTMLTableToExcel.base64( + ReactHTMLTableToExcel.format(template, context), + ); + element.download = filename; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); return true; } - const element = window.document.createElement('a'); - element.href = - uri + - ReactHTMLTableToExcel.base64( - ReactHTMLTableToExcel.format(template, context), + render() { + return ( + ); - element.download = filename; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - - return true; + } } - render() { - return ( - - ); - } + ReactHTMLTableToExcel.propTypes = { + table: PropTypes.string.isRequired, + filename: PropTypes.string.isRequired, + sheet: PropTypes.string.isRequired, + }; + + return ReactHTMLTableToExcel; } -ReactHTMLTableToExcel.propTypes = propTypes; -ReactHTMLTableToExcel.defaultProps = defaultProps; -export default ReactHTMLTableToExcel; +export default withReactHTMLTableToExcel; \ No newline at end of file diff --git a/src/ReactHTMLTableToExcelButton.jsx b/src/ReactHTMLTableToExcelButton.jsx new file mode 100644 index 0000000..9085afa --- /dev/null +++ b/src/ReactHTMLTableToExcelButton.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import withReactHTMLTableToExcel from './ReactHTMLTableToExcel'; + +const Button = (props) => ( + +); + +Button.propTypes = { + // because of ReactHTMLTableToExcel HOC + table: PropTypes.string.isRequired, + filename: PropTypes.string.isRequired, + sheet: PropTypes.string.isRequired, + + id: PropTypes.string, + className: PropTypes.string, + buttonText: PropTypes.string, + onClick: PropTypes.func.isRequired, +}; + +Button.defaultProps = { + id: 'button-download-as-xls', + className: 'button-download', + buttonText: 'Download', +}; + +const ReactHTMLTableToExcelButton = withReactHTMLTableToExcel(Button); + +export { ReactHTMLTableToExcelButton };