refactor (lib)

Author: securedeveloper

lib/components/ExcelFile.js

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {saveAs} from "file-saver";
+import XLSX from "xlsx";
+
+import ExcelSheet from "../elements/ExcelSheet";
+import {strToArrBuffer, excelSheetFromAoA} from "../utils/DataUtil";
+
+class ExcelFile extends React.Component {
+    static  props = {
+        filename: PropTypes.string,
+        element: PropTypes.any,
+        children: function (props, propName, componentName) {
+            React.Children.forEach(props[propName], child => {
+                if (child.type !== ExcelSheet) {
+                    throw new Error('<ExcelFile> can only have <ExcelSheet> as children. ');
+                }
+            });
+        }
+    };
+
+    static defaultProps = {
+        filename: "Download.xlsx",
+        element: <button>Download</button>
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.handleDownload = this.download.bind(this);
+        this.createSheetData = this.createSheetData.bind(this);
+    }
+
+    createSheetData(sheet) {
+        const columns = sheet.props.children;
+        const sheetData = [React.Children.map(columns, column => column.props.label)];
+        const data = typeof (sheet.props.data) === 'function' ? sheet.props.data() : sheet.props.data;
+
+        data.forEach(row => {
+            const sheetRow = [];
+
+            React.Children.forEach(columns, column => {
+                const getValue = typeof (column.props.value) === 'function' ? column.props.value : row => row[column.props.value];
+                sheetRow.push(getValue(row) || '');
+            });
+
+            sheetData.push(sheetRow);
+        });
+
+        return sheetData;
+    }
+
+    download() {
+        const wb = {
+            SheetNames: React.Children.map(this.props.children, sheet => sheet.props.name),
+            Sheets: {}
+        };
+
+        React.Children.forEach(this.props.children, sheet => {
+            wb.Sheets[sheet.props.name] = excelSheetFromAoA(this.createSheetData(sheet));
+        });
+
+        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'binary'});
+        saveAs(new Blob([strToArrBuffer(wbout)], {type: "application/octet-stream"}), this.props.filename);
+    }
+
+    render() {
+        return (<span onClick={this.handleDownload}>{this.props.element}</span>);
+    }
+}
+
+export default ExcelFile;

lib/elements/ExcelColumn.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+
+export default class ExcelColumn extends React.Component {
+    static propsTypes = {
+        label: PropTypes.string.isRequired,
+        value: PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.bool,
+            PropTypes.string,
+            PropTypes.func
+        ]).isRequired
+    };
+
+    render() {
+        return null;
+    }
+}

lib/elements/ExcelSheet.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExcelColumn from "./ExcelColumn";
+
+
+export default class ExcelSheet extends React.Component {
+    static propsTypes = {
+        name: PropTypes.string.isRequired,
+        value: PropTypes.oneOfType([
+            PropTypes.array,
+            PropTypes.func
+        ]).isRequired,
+        children: PropTypes.arrayOf((propValue, key) => {
+            const type = propValue[key];
+
+            if (type !== ExcelColumn) {
+                throw new Error("<ExcelSheet> can only have <ExcelColumn> as children");
+            }
+        }).isRequired
+    };
+
+    render() {
+        return null;
+    }
+}

lib/index.js

@@ -0,0 +1,9 @@
+import ExcelFile from "./components/ExcelFile";
+import ExcelSheet from "./elements/ExcelSheet";
+import ExcelColumn from "./elements/ExcelColumn";
+
+module.exports = {
+    ExcelFile,
+    ExcelSheet,
+    ExcelColumn
+};

lib/utils/DataUtil.js

@@ -0,0 +1,75 @@
+import XLSX from "xlsx";
+
+const strToArrBuffer = (s) => {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+
+    for (var i = 0; i != s.length; ++i) {
+        view[i] = s.charCodeAt(i) & 0xFF;
+    }
+
+    return buf;
+};
+
+const dateToNumber = (v, date1904) => {
+    if (date1904) {
+        v += 1462;
+    }
+
+    var epoch = Date.parse(v);
+
+    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+};
+
+const excelSheetFromAoA = (data) => {
+    var ws = {};
+    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
+
+    for (var R = 0; R != data.length; ++R) {
+        for (var C = 0; C != data[R].length; ++C) {
+            if (range.s.r > R) {
+                range.s.r = R;
+            }
+
+            if (range.s.c > C) {
+                range.s.c = C;
+            }
+
+            if (range.e.r < R) {
+                range.e.r = R;
+            }
+
+            if (range.e.c < C) {
+                range.e.c = C;
+            }
+
+            var cell = {v: data[R][C]};
+            if (cell.v === null) {
+                continue;
+            }
+
+            var cellRef = XLSX.utils.encode_cell({c: C, r: R});
+            if (typeof cell.v === 'number') {
+                cell.t = 'n';
+            } else if (typeof cell.v === 'boolean') {
+                cell.t = 'b';
+            } else if (cell.v instanceof Date) {
+                cell.t = 'n';
+                cell.z = XLSX.SSF._table[14];
+                cell.v = dateToNumber(cell.v);
+            } else {
+                cell.t = 's';
+            }
+
+            ws[cellRef] = cell;
+        }
+    }
+
+    if (range.s.c < 10000000) {
+        ws['!ref'] = XLSX.utils.encode_range(range);
+    }
+
+    return ws;
+};
+
+export {strToArrBuffer, dateToNumber, excelSheetFromAoA};