diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..ab5b6a80 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "workbench.colorCustomizations": { + "editorIndentGuide.activeBackground": "#20e20e9e" + } +} \ No newline at end of file diff --git a/dist/ExcelPlugin/components/ExcelFile.js b/dist/ExcelPlugin/components/ExcelFile.js index ae7d84ba..4dd627c4 100644 --- a/dist/ExcelPlugin/components/ExcelFile.js +++ b/dist/ExcelPlugin/components/ExcelFile.js @@ -84,6 +84,9 @@ var ExcelFile = function (_React$Component) { value: function download() { var _this2 = this; + if (this.props.onGenerationStart) { + this.props.onGenerationStart(); + } var wb = { SheetNames: _react2.default.Children.map(this.props.children, function (sheet) { return sheet.props.name; @@ -104,6 +107,10 @@ var ExcelFile = function (_React$Component) { var wbout = _tempaXlsx2.default.write(wb, { bookType: fileExtension, bookSST: true, type: 'binary' }); (0, _fileSaver.saveAs)(new Blob([(0, _DataUtil.strToArrBuffer)(wbout)], { type: "application/octet-stream" }), fileName); + + if (this.props.onFileGenerated) { + this.props.onFileGenerated(); + } } }, { key: "getFileName", @@ -165,6 +172,8 @@ ExcelFile.props = { filename: _propTypes2.default.string, fileExtension: _propTypes2.default.string, element: _propTypes2.default.any, + onFileGenerated: _propTypes2.default.function, + onGenerationStart: _propTypes2.default.function, children: function children(props, propName, componentName) { _react2.default.Children.forEach(props[propName], function (child) { if (child.type !== _ExcelSheet2.default) { diff --git a/package.json b/package.json index 6313f869..258cb296 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-data-export", - "version": "0.6.0", + "version": "0.6.1", "main": "dist/index.js", "types": "types/index.d.ts", "description": "A set of tools to export dataset from react to different formats.", @@ -73,4 +73,4 @@ "@commitlint/config-conventional" ] } -} +} \ No newline at end of file diff --git a/src/ExcelPlugin/components/ExcelFile.js b/src/ExcelPlugin/components/ExcelFile.js index 753a257b..1a6198c9 100644 --- a/src/ExcelPlugin/components/ExcelFile.js +++ b/src/ExcelPlugin/components/ExcelFile.js @@ -1,20 +1,22 @@ import React from "react"; import PropTypes from "prop-types"; -import {saveAs} from "file-saver"; +import { saveAs } from "file-saver"; import XLSX from "tempa-xlsx"; import ExcelSheet from "../elements/ExcelSheet"; -import {strToArrBuffer, excelSheetFromAoA, excelSheetFromDataSet} from "../utils/DataUtil"; +import { strToArrBuffer, excelSheetFromAoA, excelSheetFromDataSet } from "../utils/DataUtil"; class ExcelFile extends React.Component { fileExtensions = ['xlsx', 'xls', 'csv', 'txt', 'html']; defaultFileExtension = 'xlsx'; - static props = { + static props = { hideElement: PropTypes.bool, filename: PropTypes.string, fileExtension: PropTypes.string, element: PropTypes.any, + onFileGenerated: PropTypes.function, + onGenerationStart: PropTypes.function, children: function (props, propName, componentName) { React.Children.forEach(props[propName], child => { if (child.type !== ExcelSheet) { @@ -64,6 +66,9 @@ class ExcelFile extends React.Component { } download() { + if (this.props.onGenerationStart) { + this.props.onGenerationStart(); + } const wb = { SheetNames: React.Children.map(this.props.children, sheet => sheet.props.name), Sheets: {} @@ -79,9 +84,13 @@ class ExcelFile extends React.Component { const fileExtension = this.getFileExtension(); const fileName = this.getFileName(); - const wbout = XLSX.write(wb, {bookType: fileExtension, bookSST: true, type: 'binary'}); + const wbout = XLSX.write(wb, { bookType: fileExtension, bookSST: true, type: 'binary' }); + + saveAs(new Blob([strToArrBuffer(wbout)], { type: "application/octet-stream" }), fileName); - saveAs(new Blob([strToArrBuffer(wbout)], {type: "application/octet-stream"}), fileName); + if (this.props.onFileGenerated) { + this.props.onFileGenerated(); + } } getFileName() { @@ -121,7 +130,7 @@ class ExcelFile extends React.Component { } else { return ({element}); } - + } } diff --git a/types/index.d.ts b/types/index.d.ts index 1ee4149a..ffe8cc32 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,32 +1,29 @@ -/* index.d.ts (C) react-data-export */ - -// TypeScript Version: 2.2 -declare module 'react-data-export' { - import * as React from 'react' - +declare module "react-data-export" { export interface ExcelFileProps { filename?: string; + onFileGenerated?: () => void; + onGenerationStart?: () => void; fileExtension?: string; - element?: any; //Download Element - children?: Array | React.ReactChild; // Array; + element?: any; + children?: any } export interface ExcelSheetProps { name: string; - data?: Array; - dataSet?: Array; - value?: Array | Function; - children?: Array | React.ReactChild; // Array + data?: () => any | any[]; + dataSet?: any; + value?: string[] | Function; + children?: any } export interface ExcelSheetData { xSteps?: number; ySteps?: number; columns: Array; - data: Array; + data: any } - export type ExcelCellData = ExcelValue | ExcelCell | Array; + export type ExcelCellData = ExcelValue | ExcelCell; export type ExcelValue = string | number | Date | boolean; export interface ExcelCell { @@ -96,7 +93,7 @@ declare module 'react-data-export' { export type ExcelTextRotation = 0 | 45 | 90 | 135 | 180 | 255; - export enum ExcelReadingOrder { LeftToRight = 1, RightToLeft} + enum ExcelReadingOrder { LeftToRight = 1, RightToLeft } export type ExcelAlignmentType = "bottom" | "center" | "top"; @@ -106,32 +103,12 @@ declare module 'react-data-export' { color: ExcelColorSpec; } - export type ExcelBorderStyle = - "thin" - | "medium" - | "thick" - | "dotted" - | "hair" - | "dashed" - | "mediumDashed" - | "dashDot" - | "mediumDashDot" - | "dashDotDot" - | "mediumDashDotDot" - | "slantDashDot"; - - export class ExcelColumn extends React.Component { - } - - export class ExcelSheet extends React.Component { - } - - export class ExcelFile extends React.Component { - } + export type ExcelBorderStyle = "thin" | "medium" | "thick" | "dotted" | "hair" | "dashed" | "mediumDashed" | "dashDot" | "mediumDashDot" | "dashDotDot" | "mediumDashDotDot" | "slantDashDot"; - export namespace ReactExport { - export class ExcelFile extends React.Component { - } + declare class ExcelFile extends React.Component { + static ExcelSheet: typeof ExcelSheet + static ExcelColumn: typeof ExcelColumn } - export default ReactExport + declare class ExcelSheet extends React.Component { } + declare class ExcelColumn extends React.Component { } }