react-csv-importer - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/components/ColumnDragSourceArea.js

@@ -30,5 +30,7 @@ var __assign = (this && this.__assign) || function () {
             React.createElement(ColumnDragCard, { hasHeaders: hasHeaders, column: column, isShadow: isDragged || isAssigned, isDraggable: !dragState && !isDragged && !isAssigned })),
-        React.createElement("div", { className: "CSVImporter_ColumnDragSourceArea__boxAction" }, isAssigned ? (React.createElement(IconButton, { label: "Clear column assignment", small: true, type: "replay", onClick: function () {
+        React.createElement("div", { className: "CSVImporter_ColumnDragSourceArea__boxAction" }, isAssigned ? (React.createElement(IconButton, { key: "clear" // key-prop helps clear focus on click
+            , label: "Clear column assignment", small: true, type: "replay", onClick: function () {
                 onUnassign(column);
-            } })) : (React.createElement(IconButton, { focusOnly: true, label: dragState && dragState.column === column
+            } })) : (React.createElement(IconButton, { key: "dragSelect" // key-prop helps clear focus on click
+            , focusOnly: true, label: dragState && dragState.column === column
                 ? 'Unselect column'
@@ -35,0 +37,0 @@ : 'Select column for assignment', small: true, type: "back", onClick: function () {

dist/components/Importer.js

@@ -40,3 +40,3 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 function ImporterCore(_a) {
-    var fields = _a.fields, processChunk = _a.processChunk, onFinish = _a.onFinish;
+    var fields = _a.fields, chunkSize = _a.chunkSize, processChunk = _a.processChunk, onStart = _a.onStart, onFinish = _a.onFinish;
     var _b = useState(null), selectedFile = _b[0], setSelectedFile = _b[1];
@@ -68,3 +68,3 @@ var _c = useState(null), preview = _c[0], setPreview = _c[1];
     }
-    return (React.createElement(ProgressDisplay, { preview: preview, fieldAssignments: fieldAssignments, processChunk: processChunk, onRestart: function () {
+    return (React.createElement(ProgressDisplay, { preview: preview, fieldAssignments: fieldAssignments, chunkSize: chunkSize, processChunk: processChunk, onStart: onStart, onReset: function () {
             // reset all state
@@ -77,7 +77,7 @@ setSelectedFile(null);
 export function Importer(_a) {
-    var processChunk = _a.processChunk, onFinish = _a.onFinish, children = _a.children;
+    var chunkSize = _a.chunkSize, processChunk = _a.processChunk, onStart = _a.onStart, onFinish = _a.onFinish, children = _a.children;
     var _b = useState([]), fields = _b[0], setFields = _b[1];
     return (React.createElement("div", { className: "CSVImporter_Importer" },
-        React.createElement(ImporterCore, { fields: fields, processChunk: processChunk, onFinish: onFinish }),
+        React.createElement(ImporterCore, { fields: fields, chunkSize: chunkSize, processChunk: processChunk, onStart: onStart, onFinish: onFinish }),
         React.createElement(FieldDefinitionContext.Provider, { value: setFields }, children)));
 }

dist/components/parser.js

@@ -19,3 +19,3 @@ import Papa from 'papaparse';
                 firstRows: rowAccumulator,
-                hasHeaders: false // placeholder to modify downstream
+                hasHeaders: true // placeholder to modify downstream
             });
@@ -25,3 +25,3 @@ }
         Papa.parse(file, {
-            chunkSize: 20000,
+            chunkSize: 10000,
             preview: PREVIEW_ROW_COUNT,
@@ -61,3 +61,3 @@ skipEmptyLines: true,
 }
-export function processFile(file, hasHeaders, fieldAssignments, reportProgress, callback) {
+export function processFile(file, hasHeaders, fieldAssignments, reportProgress, callback, chunkSize) {
     var fieldNames = Object.keys(fieldAssignments);
@@ -70,3 +70,3 @@ // wrap synchronous errors in promise
         Papa.parse(file, {
-            chunkSize: 100,
+            chunkSize: chunkSize || 10000,
             skipEmptyLines: true,
@@ -73,0 +73,0 @@ error: function (error) {

dist/components/ProgressDisplay.js

@@ -6,3 +6,3 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
 export function ProgressDisplay(_a) {
-    var preview = _a.preview, fieldAssignments = _a.fieldAssignments, processChunk = _a.processChunk, onRestart = _a.onRestart, onFinish = _a.onFinish;
+    var preview = _a.preview, chunkSize = _a.chunkSize, fieldAssignments = _a.fieldAssignments, processChunk = _a.processChunk, onReset = _a.onReset, onStart = _a.onStart, onFinish = _a.onFinish;
     var _b = useState(0), progressCount = _b[0], setProgressCount = _b[1];
@@ -12,2 +12,10 @@ var _c = useState(false), isComplete = _c[0], setIsComplete = _c[1];
     var _e = useState(false), isDismissed = _e[0], setIsDismissed = _e[1]; // prevents double-clicking finish
+    // notify on start of processing
+    // (separate effect in case of errors)
+    var onStartRef = useRef(onStart); // wrap in ref to avoid re-triggering
+    useEffect(function () {
+        if (onStartRef.current) {
+            onStartRef.current();
+        }
+    }, []);
     // ensure status gets focus when complete, in case status role is not read out
@@ -21,2 +29,3 @@ var statusRef = useRef(null);
     // perform main async parse
+    var chunkSizeRef = useRef(chunkSize); // wrap in ref to avoid re-triggering
     var processChunkRef = useRef(processChunk); // wrap in ref to avoid re-triggering
@@ -32,3 +41,3 @@ var asyncLockRef = useRef(0);
             setProgressCount(function (prev) { return prev + deltaCount; });
-        }, processChunkRef.current).then(function () {
+        }, processChunkRef.current, chunkSizeRef.current).then(function () {
             // ignore if stale
@@ -69,3 +78,3 @@ if (oplock !== asyncLockRef.current) {
             else {
-                onRestart();
+                onReset();
             }
@@ -72,0 +81,0 @@ } },

dist/index.d.ts

@@ -20,3 +20,5 @@ // external-facing type definitions for the entire library
 export interface ImporterProps<Row extends BaseRow> {
+  chunkSize?: number;
   processChunk: ParseCallback<Row>;
+  onStart?: () => void;
   onFinish?: () => void;
@@ -23,0 +25,0 @@ }

package.json

 {
   "name": "react-csv-importer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React CSV import widget with user-customizable mapping",
+  "keywords": [
+    "react",
+    "csv",
+    "upload",
+    "parser",
+    "import",
+    "papaparse"
+  ],
   "repository": {
@@ -6,0 +14,0 @@ "type": "git",

README.md

@@ -9,2 +9,4 @@ # React CSV Importer
 
+![React CSV Importer usage demo](https://github.com/beamworks/react-csv-importer/raw/860e16b33af5acc4427feb55c59dffc8fcf8714b/package-core/react-csv-importer-demo-20200914.gif)
+
 The UI theme is standalone (has no external dependencies such as Material UI) and tailored to
@@ -14,3 +16,3 @@ universally fit within most application design frameworks. Interface elements are tested for screen
 
-Example usage:
+## Example Usage
 
@@ -21,5 +23,11 @@ ```js
 <Importer
+  chunkSize={10000} // optional, internal parsing chunk size in bytes
+  onStart={() => {
+    // optional, invoked when user has mapped columns and started import
+    prepMyAppForIncomingData();
+  }}
   processChunk={async (rows) => {
+    // required, receives a list of parsed objects based on user column mapping
+    // (if this returns a promise, the widget will wait for it before parsing more data)
     for (row of rows) {
-      // console.log('saving row', row)
       await myAppMethod(row);
@@ -29,3 +37,4 @@ }
   onFinish={() => {
-    // console.log('import finished');
+    // optional, invoked when import is done and user clicked "Finish"
+    // (if this is not specified, the widget lets the user upload another file)
     goToMyAppNextPage();
@@ -40,1 +49,7 @@ }}
 ```
+
+## Dependencies
+
+- [PapaParse](https://www.papaparse.com/) for CSV parsing
+- [react-dropzone](https://react-dropzone.js.org/) for file upload
+- [react-use-gesture](https://github.com/react-spring/react-use-gesture) for drag-and-drop

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68725

increased by2.64%

Lines of code

1418

increased by0.93%

Number of lines in readme file

51

increased by41.67%

No dependency changes