fix: csv export

nusr · Mar 14, 2024 · 1449be1 · 1449be1
1 parent a633992
commit 1449be1
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -29,24 +29,24 @@
   "devDependencies": {
     "@testing-library/react": "14.2.1",
     "@types/jest": "29.5.12",
-    "@types/react": "18.2.63",
-    "@types/react-dom": "18.2.20",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@types/react": "18.2.65",
+    "@types/react-dom": "18.2.22",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
     "canvas": "2.11.2",
     "esbuild": "0.20.1",
     "eslint": "8.57.0",
     "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "puppeteer": "22.4.0",
-    "typescript": "5.3.3"
+    "puppeteer": "22.4.1",
+    "typescript": "5.4.2"
   },
   "engines": {
     "node": ">=16"
   },
   "dependencies": {
-    "@sentry/react": "7.105.0",
+    "@sentry/react": "7.106.1",
     "chart.js": "4.4.2",
     "jszip": "3.10.1",
     "react": "18.2.0",

diff --git a/src/canvas/util.ts b/src/canvas/util.ts
@@ -32,7 +32,6 @@ export function measureText(
     return measureTextMap.get(mapKey)!;
   }
   const t = ctx.measureText(char);
-  // console.log(t, char);
   const { width } = t;
   const result = Math.ceil(width / dpr());
   measureTextMap.set(mapKey, result);

diff --git a/src/containers/Excel/exportCSV.ts b/src/containers/Excel/exportCSV.ts
@@ -1,51 +1,121 @@
 import { IController, ResultType } from '@/types';
-import {
-  saveAs, coordinateToString,
-  getWorkSheetKey
-} from '@/util';
+import { saveAs, coordinateToString, getWorkSheetKey, assert } from '@/util';
 
-function processRow(row: ResultType[]) {
-  let finalVal = '';
-  for (let j = 0;j < row.length;j++) {
-    const t = row[j] ?? '';
-    let innerValue = '';
-    if (t === 0) {
-      innerValue = t.toString();
-    }
-    if (t) {
-      innerValue = t.toString();
-    }
-    let result = innerValue.replace(/"/g, '""');
-    if (result.search(/("|,|\n)/g) >= 0) {
-      result = `"${result}"`;
+function processItem(value: any) {
+  const type = typeof value;
+  if (type === 'string') {
+    return value;
+  } else if (type === 'bigint') {
+    return '' + value;
+  } else if (type === 'number') {
+    return '' + value;
+  } else if (type === 'boolean') {
+    return value ? 'TRUE' : 'FALSE';
+  } else if (value instanceof Date) {
+    return '' + value.getTime();
+  } else if (type === 'object' && value !== null) {
+    return JSON.stringify(value);
+  } else {
+    return '';
+  }
+}
+
+function processRow(row: any[]) {
+  const delimiter = ',';
+  const quote = '"';
+  const escape_formulas = false;
+  const quoted_string = false;
+  const escape = '"';
+  const quoted = false;
+  const record_delimiter = '\n';
+
+  let csvRecord = '';
+  for (let j = 0; j < row.length; j++) {
+    const field = row[j];
+    let value = processItem(field);
+    if ('' === value) {
+      csvRecord += value;
+    } else if (value) {
+      assert(
+        typeof value === 'string',
+        `Formatter must return a string, null or undefined, got ${JSON.stringify(
+          value,
+        )}`,
+      );
+      const containsdelimiter =
+        delimiter.length && value.indexOf(delimiter) >= 0;
+      const containsQuote = value.indexOf(quote) >= 0;
+      const containsEscape = value.indexOf(escape) >= 0 && escape !== quote;
+      const containsRecordDelimiter = value.indexOf(record_delimiter) >= 0;
+      const quotedString = quoted_string && typeof field === 'string';
+      if (escape_formulas) {
+        switch (value[0]) {
+          case '=':
+          case '+':
+          case '-':
+          case '@':
+          case '\t':
+          case '\r':
+          case '\uFF1D': // Unicode '='
+          case '\uFF0B': // Unicode '+'
+          case '\uFF0D': // Unicode '-'
+          case '\uFF20': // Unicode '@'
+            value = `'${value}`;
+            break;
+        }
+      }
+      const shouldQuote =
+        containsQuote === true ||
+        containsdelimiter ||
+        containsRecordDelimiter ||
+        quoted ||
+        quotedString;
+      if (shouldQuote === true && containsEscape === true) {
+        const regexp =
+          escape === '\\'
+            ? // @ts-ignore
+              new RegExp(escape + escape, 'g')
+            : new RegExp(escape, 'g');
+        value = value.replace(regexp, escape + escape);
+      }
+      if (containsQuote === true) {
+        const regexp = new RegExp(quote, 'g');
+        value = value.replace(regexp, escape + quote);
+      }
+      if (shouldQuote === true) {
+        value = quote + value + quote;
+      }
+      csvRecord += value;
     }
-    if (j > 0) {
-      finalVal += ',';
+    if (j !== row.length - 1) {
+      csvRecord += delimiter;
     }
-    finalVal += result;
   }
-  return `${finalVal}\n`;
+  return csvRecord;
 }
 export function exportToCsv(fileName: string, controller: IController) {
-  const sheetData = controller.toJSON()[getWorkSheetKey(controller.getCurrentSheetId())];
-  let csvFile = '';
+  const sheetData =
+    controller.toJSON()[getWorkSheetKey(controller.getCurrentSheetId())];
+  const csvList: string[] = [];
   const sheetInfo = controller.getSheetInfo(controller.getCurrentSheetId());
   if (sheetData) {
-    for (let row = 0;row < sheetInfo.rowCount;row++) {
+    for (let row = 0; row < sheetInfo.rowCount; row++) {
       const list: ResultType[] = [];
-      for (let col = 0;col < sheetInfo.colCount;col++) {
+      for (let col = 0; col < sheetInfo.colCount; col++) {
         const key = coordinateToString(row, col);
         const value = sheetData[key];
         if (!value) {
           list.push('');
           continue;
         }
-        const t = value.formula ?? value.value;
+        const t = value.formula || value.value;
         list.push(t);
       }
-      csvFile += processRow(list);
+      csvList.push(processRow(list));
     }
   }
-  const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
+  const blob = new Blob([csvList.join('\n')], {
+    type: 'text/csv;charset=utf-8;',
+  });
   saveAs(blob, fileName);
 }
diff --git a/src/containers/FloatElement/index.tsx b/src/containers/FloatElement/index.tsx
@@ -127,7 +127,6 @@ export const FloatElementContainer: React.FunctionComponent<Props> = memo(
       const handlePointerUp = (event: PointerEvent) => {
         event.stopPropagation();
         event.preventDefault();
-        console.log(state.current);
         if (!activeUuid) {
           state.current = { ...INITIAL_STATE };
           return;

diff --git a/src/containers/ToolBar/index.tsx b/src/containers/ToolBar/index.tsx
@@ -219,7 +219,6 @@ export const ToolbarContainer: React.FunctionComponent<Props> = ({
         active={isMergeCell}
         onClick={() => {
           const { range, isMerged } = controller.getActiveRange();
-          console.log(range, isMerged);
           if (isMerged) {
             controller.deleteMergeCell(range);
           } else {

diff --git a/src/util/style.ts b/src/util/style.ts
@@ -241,7 +241,6 @@ export function parseHTML(html: string) {
     styleList.push(list);
   }
   template = null;
-  console.log(styleList);
   return {
     textList,
     styleList,