Merge pull request #31 from Bunlong/v3.4.0

Upgrade Papaparse to Latest Version

Author: Bunlong

README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  ⭐️ Please support react-papaparse by giving a star! ⭐️
+</p>
+
 # react-papaparse
 
 The fastest in-browser CSV (or delimited text) parser for React.
@@ -209,6 +213,7 @@ export default class CSVReader extends Component {
         onDrop={this.handleOnDrop}
         onError={this.handleOnError}
         addRemoveButton
+        removeButtonColor='#659cef'
         onRemoveFile={this.handleOnRemoveFile}
       >
         <span>Drop CSV file here or click to upload.</span>

docs/src/components/screens/Demo.js

@@ -292,6 +292,7 @@ export default class Demo extends Component {
                           onDrop={this.handleOnDrop}
                           onError={this.handleOnError}
                           addRemoveButton
+                          removeButtonColor='#659cef'
                           onRemoveFile={this.handleOnRemoveFile}
                         >
                           <span>Drop CSV file here or click to upload.</span>

docs/src/components/screens/docs/CSVToJSON.js

@@ -111,6 +111,7 @@ const CSVToJSON = () => {
             <li><code>progressBarColor</code> is a property to be used to set the color of progress bar (for example, <code>progressBarColor='#659cef'</code>).</li>
             <li><code>style</code> is some styles to be applied to the <code>{'<input>'}</code> element.</li>
             <li><code>addRemoveButton</code> If true, this will add a button to remove or cancel (if already uploading) the file.</li>
+            <li><code>removeButtonColor</code> is a property to be used to set the color of remove button (for example, <code>removeButtonColor='#659cef'</code>).</li>
             <li><code>config</code> is a <a href='#config'>config object</a> which contains a callback.</li>
             <li>Doesn't return anything. Results are provided asynchronously to a callback function.</li>
           </ul>
@@ -149,6 +150,7 @@ const CSVToJSON = () => {
             <li><code>progressBarColor</code> is a property to be used to set the color of progress bar (for example, <code>progressBarColor='#659cef'</code>).</li>
             <li><code>style</code> is some styles to be applied to the <code>{'<input>'}</code> element.</li>
             <li><code>addRemoveButton</code> If true, this will add a button to remove or cancel (if already uploading) the file.</li>
+            <li><code>removeButtonColor</code> is a property to be used to set the color of remove button (for example, <code>removeButtonColor='#659cef'</code>).</li>
             <li><code>config</code> is a <a href='#config'>config object</a> which contains a callback.</li>
             <li>Doesn't return anything. Results are provided asynchronously to a callback function.</li>
           </ul>
@@ -187,6 +189,7 @@ const CSVToJSON = () => {
             <li><code>progressBarColor</code> is a property to be used to set the color of progress bar (for example, <code>progressBarColor='#659cef'</code>).</li>
             <li><code>style</code> is some styles to be applied to the <code>{'<input>'}</code> element.</li>
             <li><code>addRemoveButton</code> If true, this will add a button to remove or cancel (if already uploading) the file.</li>
+            <li><code>removeButtonColor</code> is a property to be used to set the color of remove button (for example, <code>removeButtonColor='#659cef'</code>).</li>
             <li><code>config</code> is a <a href='#config'>config object</a> which contains a callback.</li>
             <li>Doesn't return anything. Results are provided asynchronously to a callback function.</li>
           </ul>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-papaparse",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Fast and powerful React CSV parser for the browser that supports web workers and streaming large files. Converts CSV to JSON and JSON to CSV.",
   "author": "Bunlong <bunlong.van@gmail.com>",
   "license": "MIT",
@@ -94,7 +94,7 @@
     "dist"
   ],
   "dependencies": {
-    "@types/papaparse": "^5.0.3",
-    "papaparse": "^5.1.1"
+    "@types/papaparse": "^5.0.4",
+    "papaparse": "^5.2.0"
   }
 }

src/CSVReader.tsx

@@ -1,13 +1,11 @@
 import React, { CSSProperties } from 'react';
 import PapaParse from 'papaparse';
-import getSize from './util';
+import getSize, { lightenDarkenColor } from './util';
 import RemoveIcon from './RemoveIcon';
 import ProgressBar from './ProgressBar';
 
 const GREY = '#CCC';
 const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
-const RED = '#A01919';
-const RED_LIGHT = '#DD2222';
 
 const styles = {
   dropArea: {
@@ -90,6 +88,7 @@ interface Props {
   addRemoveButton?: boolean;
   onRemoveFile?: (data: any) => void;
   noProgressBar?: boolean;
+  removeButtonColor?: string;
 }
 
 interface State {
@@ -110,14 +109,17 @@ export default class CSVReader extends React.Component<Props, State> {
   fileSizeInfoRef: any = React.createRef<HTMLDivElement>();
   fileNameInfoRef: any = React.createRef<HTMLDivElement>();
 
+  REMOVE_ICON_COLOR = this.props.removeButtonColor || '#A01919';
+  REMOVE_ICON_COLOR_LIGHT = lightenDarkenColor(this.REMOVE_ICON_COLOR, 40);
+
   state = {
     dropAreaStyle: styles.dropArea,
     progressBar: 0,
     displayProgressBarStatus: 'none',
     file: null,
     timeout: null,
     files: null,
-    removeIconColor: RED,
+    removeIconColor: this.REMOVE_ICON_COLOR,
     isCanceled: false,
   } as State;
 
@@ -372,8 +374,10 @@ export default class CSVReader extends React.Component<Props, State> {
         <div
           style={styles.dropFileRemoveButton}
           onClick={(e) => this.removeFile(e)}
-          onMouseOver={() => this.changeRemoveIconColor(RED_LIGHT)}
-          onMouseOut={() => this.changeRemoveIconColor(RED)}
+          onMouseOver={() =>
+            this.changeRemoveIconColor(this.REMOVE_ICON_COLOR_LIGHT)
+          }
+          onMouseOut={() => this.changeRemoveIconColor(this.REMOVE_ICON_COLOR)}
         >
           <RemoveIcon color={removeIconColor} />
         </div>
@@ -383,12 +387,12 @@ export default class CSVReader extends React.Component<Props, State> {
     if (addRemoveButton) {
       return (
         <div style={styles.dropFileRemoveButton}>
-          <RemoveIcon color={RED} />
+          <RemoveIcon color={this.REMOVE_ICON_COLOR} />
         </div>
       );
     }
 
-    return <></>;
+    return null;
   };
 
   render() {

src/util.ts

@@ -18,3 +18,34 @@ export default function getSize(size: number) {
 
   return '';
 }
+
+export function lightenDarkenColor(col: string, amt: number) {
+  let usePound = false;
+  if (col[0] == '#') {
+    col = col.slice(1);
+    usePound = true;
+  }
+
+  const num = parseInt(col, 16);
+  let r = (num >> 16) + amt;
+  if (r > 255) {
+    r = 255;
+  } else if (r < 0) {
+    r = 0;
+  }
+
+  let b = ((num >> 8) & 0x00ff) + amt;
+  if (b > 255) {
+    b = 255;
+  } else if (b < 0) {
+    b = 0;
+  }
+
+  let g = (num & 0x0000ff) + amt;
+  if (g > 255) {
+    g = 255;
+  } else if (g < 0) {
+    g = 0;
+  }
+  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
+}