Merge branch 'master' into dependabot/npm_and_yarn/eslint-4.18.2

Author: securedeveloper

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="0.6.0"></a>
+# [0.6.0](https://github.com/securedeveloper/react-data-export/compare/v0.5.0...v0.6.0) (2020-01-20)
+
+
+### Features
+
+* if the header has style then the style should be used ([855d37a](https://github.com/securedeveloper/react-data-export/commit/855d37a))
+
+
+
 <a name="0.5.0"></a>
 # [0.5.0](https://github.com/securedeveloper/react-data-export/compare/v0.4.2...v0.5.0) (2018-09-24)
 

dist/ExcelPlugin/utils/DataUtil.js

@@ -71,7 +71,7 @@ var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet) {
                 fixRange(range, 0, 0, rowCount, xSteps, ySteps);
                 var colTitle = col;
                 if ((typeof col === 'undefined' ? 'undefined' : _typeof(col)) === 'object') {
-                    colTitle = col.title;
+                    //colTitle = col.title; //moved to getHeaderCell
                     columnsWidth.push(col.width || { wpx: 80 }); /* wch (chars), wpx (pixels) - e.g. [{wch:6},{wpx:50}] */
                 }
                 getHeaderCell(colTitle, cellRef, ws);
@@ -102,8 +102,8 @@ var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet) {
 
 function getHeaderCell(v, cellRef, ws) {
     var cell = {};
-    var headerCellStyle = { font: { bold: true } };
-    cell.v = v;
+    var headerCellStyle = v.style ? v.style : { font: { bold: true } }; //if style is then use it
+    cell.v = v.title;
     cell.t = 's';
     cell.s = headerCellStyle;
     ws[cellRef] = cell;

examples/styled_excel_sheet.md

@@ -62,5 +62,8 @@ class App extends Component {
 ```
 
 ## Output
-![Download Button](http://i64.tinypic.com/2mey8na.jpg)
-![Excel File Outpu](http://i63.tinypic.com/2qko404.jpg)
+![Download Button](https://blvenglu.sirv.com/github/download_styled_excel_sheet.png)
+![Excel File Outpu](https://blvenglu.sirv.com/github/styled_excel_sheet.png)
+[Codesandbox](https://codesandbox.io/s/styledexcelsheet-hf5oo "Codesandbox | styled_excel_sheet")
+
+

package-lock.json

@@ -1,7 +1,8 @@
 {
   "name": "react-data-export",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "description": "A set of tools to export dataset from react to different formats.",
   "repository": {
     "type": "git",

package.json

@@ -58,7 +58,7 @@ const excelSheetFromDataSet = (dataSet) => {
                 fixRange(range, 0, 0, rowCount, xSteps, ySteps);
                 var colTitle = col;
                 if (typeof col === 'object'){
-                    colTitle = col.title;
+                    //colTitle = col.title; //moved to getHeaderCell
                     columnsWidth.push(col.width || {wpx:80}); /* wch (chars), wpx (pixels) - e.g. [{wch:6},{wpx:50}] */
                 }
                 getHeaderCell(colTitle, cellRef, ws);
@@ -89,8 +89,8 @@ const excelSheetFromDataSet = (dataSet) => {
 
 function getHeaderCell(v, cellRef, ws) {
     var cell = {};
-    var headerCellStyle = {font: {bold: true}};
-    cell.v = v;
+    var headerCellStyle = v.style ? v.style : { font: { bold: true } }; //if style is then use it
+    cell.v = v.title;
     cell.t = 's';
     cell.s = headerCellStyle;
     ws[cellRef] = cell;

src/ExcelPlugin/utils/DataUtil.js

@@ -1,73 +1,75 @@
 /* index.d.ts (C) react-data-export */
 
 // TypeScript Version: 2.2
+declare module 'react-data-export' {
+  import * as React from 'react'
 
-export interface ExcelFileProps {
+  export interface ExcelFileProps {
     filename?: string;
     fileExtension?: string;
     element?: any; //Download Element
-    children?: Array<ExcelSheetProps>;
-}
+    children?: Array<React.ReactChild> | React.ReactChild; // Array<ExcelSheetProps>;
+  }
 
-export interface ExcelSheetProps {
+  export interface ExcelSheetProps {
     name: string;
     data?: Array<object>;
     dataSet?: Array<ExcelSheetData>;
     value?: Array<string> | Function;
-    children?: Array<ExcelColumnProps>
-}
+    children?: Array<React.ReactChild> | React.ReactChild; // Array<ExcelColumnProps>
+  }
 
-export interface ExcelSheetData {
+  export interface ExcelSheetData {
     xSteps?: number;
     ySteps?: number;
     columns: Array<string>;
     data: Array<ExcelCellData>;
-}
+  }
 
-export type ExcelCellData = ExcelValue | ExcelCell;
-export type ExcelValue = string | number | Date | boolean;
+  export type ExcelCellData = ExcelValue | ExcelCell | Array<ExcelValue>;
+  export type ExcelValue = string | number | Date | boolean;
 
-export interface ExcelCell {
+  export interface ExcelCell {
     value: ExcelCell;
     style: ExcelStyle;
-}
+  }
 
-export interface ExcelColumnProps {
+  export interface ExcelColumnProps {
     label: string;
     value: number | boolean | string | Function;
-}
+  }
 
-export interface ExcelStyle {
+  export interface ExcelStyle {
     fill?: ExcelCellFillType;
     font?: ExcelFont;
     numFmt?: ExcelNumFormat;
     alignment?: ExcelAlignment;
     border?: ExcelBorder;
-}
+  }
 
-/* ExcelCell Fill Type */
-export type ExcelCellPatternType = "solid" | "none";
+  /* ExcelCell Fill Type */
+  export type ExcelCellPatternType = "solid" | "none";
 
-export interface ExcelColorSpec {
+  export interface ExcelColorSpec {
     auto?: number; //default 1
     rgb?: string; //hex ARGB color
     theme?: ExcelTheme;
     indexed?: number;
-}
+  }
 
-export interface ExcelTheme {
+  export interface ExcelTheme {
     theme: string;
     tint: string;
-}
+  }
 
-export interface ExcelCellFillType {
+  export interface ExcelCellFillType {
     patternType?: ExcelCellPatternType;
     fgColor?: ExcelColorSpec;
     bgColor?: ExcelColorSpec;
-}
+  }
 
-/* Excel Font */
-export interface ExcelFont {
+  /* Excel Font */
+  export interface ExcelFont {
     name?: string;          // default `"Calibri"`
     sz?: number;             //font size in points default 11
     color?: ExcelColorSpec;
@@ -78,33 +80,33 @@ export interface ExcelFont {
     outline?: boolean;
     shadow?: boolean;
     vertAlign?: boolean;
-}
+  }
 
-/* ExcelNumFormat */
-export type ExcelNumFormat = "0" | "0.00%" | "0.0%" | "0.00%;\\(0.00%\\);\\-;@" | "m/dd/yy" | string;
+  /* ExcelNumFormat */
+  export type ExcelNumFormat = "0" | "0.00%" | "0.0%" | "0.00%;\\(0.00%\\);\\-;@" | "m/dd/yy" | string;
 
-/* ExcelAlignment */
-export interface ExcelAlignment {
+  /* ExcelAlignment */
+  export interface ExcelAlignment {
     vertical?: ExcelAlignmentType;
     horizontal?: ExcelAlignmentType;
     wrapText?: boolean;
     readingOrder?: ExcelReadingOrder;
     textRotation?: ExcelTextRotation;
-}
+  }
 
-export type ExcelTextRotation = 0 | 45 | 90 | 135 | 180 | 255;
+  export type ExcelTextRotation = 0 | 45 | 90 | 135 | 180 | 255;
 
-export enum ExcelReadingOrder { LeftToRight = 1, RightToLeft}
+  export enum ExcelReadingOrder { LeftToRight = 1, RightToLeft}
 
-export type ExcelAlignmentType = "bottom" | "center" | "top";
+  export type ExcelAlignmentType = "bottom" | "center" | "top";
 
-/* ExcelBorder */
-export interface ExcelBorder {
+  /* ExcelBorder */
+  export interface ExcelBorder {
     style: ExcelBorderStyle;
     color: ExcelColorSpec;
-}
+  }
 
-export type ExcelBorderStyle =
+  export type ExcelBorderStyle =
     "thin"
     | "medium"
     | "thick"
@@ -117,3 +119,19 @@ export type ExcelBorderStyle =
     | "dashDotDot"
     | "mediumDashDotDot"
     | "slantDashDot";
+
+  export class ExcelColumn extends React.Component<ExcelColumnProps, any> {
+  }
+
+  export class ExcelSheet extends React.Component<ExcelSheetProps, any> {
+  }
+
+  export class ExcelFile extends React.Component<ExcelFileProps, any> {
+  }
+
+  export namespace ReactExport {
+    export class ExcelFile extends React.Component<ExcelFileProps, any> {
+    }
+  }
+  export default ReactExport
+}