@teselagen/ui 0.3.41 → 0.3.42

package/src/DataTable/index.js

@@ -427,13 +427,14 @@ class DataTable extends React.Component {
   };
   formatAndValidateTableInitial = () => {
     const {
-      _origEntities: entities,
+      _origEntities,
+      entities,
       initialEntities,
       change,
       reduxFormCellValidation
     } = this.props;
     const { newEnts, validationErrors } = this.formatAndValidateEntities(
-      initialEntities || entities
+      initialEntities || entities || _origEntities
     );
     change("reduxFormEntities", newEnts);
     const toKeep = {};
@@ -616,17 +617,39 @@ class DataTable extends React.Component {
         } else if (e.clipboardData && e.clipboardData.getData) {
           toPaste = e.clipboardData.getData("text/plain");
         }
-        if (toPaste.includes(",")) {
-          //try papaparsing it out as a csv if it contains commas
-          try {
-            const { data, errors } = papaparse.parse(toPaste, {
-              header: false
+        const jsonToPaste = e.clipboardData.getData("application/json");
+        try {
+          const pastedJson = [];
+          JSON.parse(jsonToPaste).forEach(row => {
+            const newRow = [];
+            Object.values(row).forEach(cell => {
+              const cellVal = JSON.parse(cell);
+              newRow.push(cellVal);
             });
-            if (data?.length && !errors?.length) {
-              pasteData = data;
+            pastedJson.push(newRow);
+          });
+          pasteData = pastedJson;
+          // try to remove the header row if it exists
+          if (
+            pasteData[0] &&
+            pasteData[0][0] &&
+            pasteData[0][0].__isHeaderCell
+          ) {
+            pasteData = pasteData.slice(1);
+          }
+        } catch (e) {
+          if (toPaste.includes(",")) {
+            //try papaparsing it out as a csv if it contains commas
+            try {
+              const { data, errors } = papaparse.parse(toPaste, {
+                header: false
+              });
+              if (data?.length && !errors?.length) {
+                pasteData = data;
+              }
+            } catch (error) {
+              console.error(`error p982qhgpf9qh`, error);
             }
-          } catch (error) {
-            console.error(`error p982qhgpf9qh`, error);
           }
         }
         pasteData = pasteData.length ? pasteData : defaultParsePaste(toPaste);
@@ -643,13 +666,14 @@ class DataTable extends React.Component {
             const entityIdToEntity = getEntityIdToEntity(entities);
             Object.keys(reduxFormSelectedCells).forEach(cellId => {
               const [rowId, path] = cellId.split(":");
+
               const entity = entityIdToEntity[rowId].e;
               delete entity._isClean;
               const { error } = editCellHelper({
                 entity,
                 path,
                 schema,
-                newVal
+                newVal: formatPasteData({ newVal, path, schema })
               });
               if (error) {
                 newCellValidate[cellId] = error;
@@ -684,8 +708,8 @@ class DataTable extends React.Component {
               const indexToPath = invert(pathToIndex);
               const startCellIndex = pathToIndex[primaryCellPath];
               pasteData.forEach((row, i) => {
-                row.forEach((cell, j) => {
-                  if (cell) {
+                row.forEach((newVal, j) => {
+                  if (newVal) {
                     const cellIndexToChange = startCellIndex + j;
                     const entity = entitiesToManipulate[i];
                     if (entity) {
@@ -696,7 +720,11 @@ class DataTable extends React.Component {
                           entity,
                           path,
                           schema,
-                          newVal: cell
+                          newVal: formatPasteData({
+                            newVal,
+                            path,
+                            schema
+                          })
                         });
                         const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
                         if (!newSelectedCells[cellId]) {
@@ -812,18 +840,12 @@ class DataTable extends React.Component {
     const text = cellWrapper && cellWrapper.getAttribute("data-copy-text");
     const jsonText = cellWrapper && cellWrapper.getAttribute("data-copy-json");
 
-    const toRet = text || cellWrapper.textContent || "";
-    return [toRet, jsonText];
+    const textContent = text || cellWrapper.textContent || "";
+    return [textContent, jsonText];
   };
 
-  handleCopyRow = rowEl => {
-    //takes in a row element
-    const text = this.getRowCopyText(rowEl);
-    if (!text) return window.toastr.warning("No text to copy");
-    this.handleCopyHelper(text, undefined, "Row Copied");
-  };
   handleCopyColumn = (e, cellWrapper, selectedRecords) => {
-    const cellType = cellWrapper.getAttribute("data-test");
+    const specificColumn = cellWrapper.getAttribute("data-test");
     let rowElsToCopy = getAllRows(e);
     if (!rowElsToCopy) return;
     if (selectedRecords) {
@@ -834,14 +856,23 @@ class DataTable extends React.Component {
       });
     }
     if (!rowElsToCopy) return;
-    const textToCopy = map(rowElsToCopy, rowEl =>
-      this.getRowCopyText(rowEl, { cellType })
-    )
-      .filter(text => text)
-      .join("\n");
+    this.handleCopyRows(rowElsToCopy, {
+      specificColumn,
+      onFinishMsg: "Column Copied"
+    });
+  };
+  handleCopyRows = (rowElsToCopy, { specificColumn, onFinishMsg } = {}) => {
+    let textToCopy = [];
+    const jsonToCopy = [];
+    forEach(rowElsToCopy, rowEl => {
+      const [t, j] = this.getRowCopyText(rowEl, { specificColumn });
+      textToCopy.push(t);
+      jsonToCopy.push(j);
+    });
+    textToCopy = textToCopy.filter(text => text).join("\n");
     if (!textToCopy) return window.toastr.warning("No text to copy");
 
-    this.handleCopyHelper(textToCopy, undefined, "Column copied");
+    this.handleCopyHelper(textToCopy, jsonToCopy, onFinishMsg || "Row Copied");
   };
   updateEntitiesHelper = (ents, fn) => {
     const { change, reduxFormEntitiesUndoRedoStack = { currentVersion: 0 } } =
@@ -863,36 +894,41 @@ class DataTable extends React.Component {
     });
   };
 
-  getRowCopyText = (rowEl, { cellType } = {}) => {
+  getRowCopyText = (rowEl, { specificColumn } = {}) => {
     //takes in a row element
     if (!rowEl) return;
-    return flatMap(rowEl.children, cellEl => {
+    const textContent = [];
+    const jsonText = [];
+
+    forEach(rowEl.children, cellEl => {
       const cellChild = cellEl.querySelector(`[data-copy-text]`);
       if (!cellChild) {
-        if (cellType) return []; //strip it
+        if (specificColumn) return []; //strip it
         return; //just leave it blank
       }
-      if (cellType && cellChild.getAttribute("data-test") !== cellType) {
+      if (
+        specificColumn &&
+        cellChild.getAttribute("data-test") !== specificColumn
+      ) {
         return [];
       }
-      return this.getCellCopyText(cellChild);
-    }).join("\t");
-  };
+      const [t, j] = this.getCellCopyText(cellChild);
+      textContent.push(t);
+      jsonText.push(j);
+    });
 
-  handleCopyHelper = (stringToCopy, objToCopy, message) => {
-    const copyHandler = e => {
-      e.preventDefault();
+    return [flatMap(textContent).join("\t"), jsonText];
+  };
 
-      e.clipboardData.setData("application/json", JSON.stringify(objToCopy));
-      e.clipboardData.setData("text/plain", stringToCopy);
-    };
-    document.addEventListener("copy", copyHandler);
+  handleCopyHelper = (stringToCopy, jsonToCopy, message) => {
     !window.Cypress &&
       copy(stringToCopy, {
+        onCopy: clipboardData => {
+          clipboardData.setData("application/json", JSON.stringify(jsonToCopy));
+        },
         // keep this so that pasting into spreadsheets works.
         format: "text/plain"
       });
-    document.removeEventListener("copy", copyHandler);
     window.toastr.success(message);
   };
 
@@ -900,13 +936,9 @@ class DataTable extends React.Component {
     try {
       const allRowEls = getAllRows(e);
       if (!allRowEls) return;
-      //get row elements and call this.handleCopyRow for each
-      const textToCopy = map(allRowEls, rowEl => this.getRowCopyText(rowEl))
-        .filter(text => text)
-        .join("\n");
-      if (!textToCopy) return window.toastr.warning("No text to copy");
-
-      this.handleCopyHelper(textToCopy, undefined, "Table copied");
+      this.handleCopyRows(allRowEls, {
+        onFinishMsg: "Table Copied"
+      });
     } catch (error) {
       console.error(`error:`, error);
       window.toastr.error("Error copying rows.");
@@ -946,6 +978,7 @@ class DataTable extends React.Component {
     if (firstRowIndex === undefined) return;
     const allRows = getAllRows(e);
     let fullCellText = "";
+    const fullJson = [];
     times(selectionGrid.length, i => {
       const row = selectionGrid[i];
       if (fullCellText) {
@@ -954,20 +987,24 @@ class DataTable extends React.Component {
       if (!row) {
         return;
       } else {
+        const jsonRow = [];
         // ignore header
-        const rowCopyText = this.getRowCopyText(allRows[i + 1]).split("\t");
+        let [rowCopyText, json] = this.getRowCopyText(allRows[i + 1]);
+        rowCopyText = rowCopyText.split("\t");
         times(row.length, i => {
           const cell = row[i];
           if (cell) {
             fullCellText += rowCopyText[i];
+            jsonRow.push(json[i]);
           }
           if (i !== row.length - 1 && i >= firstCellIndex) fullCellText += "\t";
         });
+        fullJson.push(jsonRow);
       }
     });
     if (!fullCellText) return window.toastr.warning("No text to copy");
 
-    this.handleCopyHelper(fullCellText, undefined, "Selected cells copied");
+    this.handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
   };
 
   handleCopySelectedRows = (selectedRecords, e) => {
@@ -990,13 +1027,9 @@ class DataTable extends React.Component {
       if (!allRowEls) return;
       const rowEls = rowNumbersToCopy.map(i => allRowEls[i]);
 
-      //get row elements and call this.handleCopyRow for each const rowEls = this.getRowEls(rowNumbersToCopy)
-      const textToCopy = map(rowEls, rowEl => this.getRowCopyText(rowEl))
-        .filter(text => text)
-        .join("\n");
-      if (!textToCopy) return window.toastr.warning("No text to copy");
-
-      this.handleCopyHelper(textToCopy, undefined, "Selected rows copied");
+      this.handleCopyRows(rowEls, {
+        onFinishMsg: "Selected rows copied"
+      });
     } catch (error) {
       console.error(`error:`, error);
       window.toastr.error("Error copying rows.");
@@ -2489,6 +2522,7 @@ class DataTable extends React.Component {
         const dataTest = {
           "data-test": "tgCell_" + column.path
         };
+        const fullValue = row.original?.[row.column.path];
         if (isCellEditable && isBool) {
           val = (
             <Checkbox
@@ -2510,9 +2544,11 @@ class DataTable extends React.Component {
           if (reduxFormEditingCell === cellId) {
             if (column.type === "genericSelect") {
               const GenericSelectComp = column.GenericSelectComp;
+
               return (
                 <GenericSelectComp
                   rowId={rowId}
+                  fullValue={fullValue}
                   initialValue={text}
                   {...dataTest}
                   finishEdit={(newVal, doNotStopEditing) => {
@@ -2568,7 +2604,7 @@ class DataTable extends React.Component {
         //     return getIdOrCodeOrIndex(e, i) === rowId2;
         //   });
         // }
-
+        // if ()
         const {
           isRect,
           selectionGrid,
@@ -2577,6 +2613,7 @@ class DataTable extends React.Component {
           entityMap,
           pathToIndex
         } = this.isSelectionARectangle();
+        // const __isHeaderCell =
         return (
           <>
             <div
@@ -2589,6 +2626,15 @@ class DataTable extends React.Component {
               {...dataTest}
               className="tg-cell-wrapper"
               data-copy-text={text}
+              data-copy-json={JSON.stringify(
+                //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
+                column.type === "genericSelect"
+                  ? {
+                      __strVal: fullValue,
+                      __genSelCol: column.path
+                    }
+                  : { __strVal: text }
+              )}
               title={title || undefined}
             >
               {val}
@@ -2992,8 +3038,13 @@ class DataTable extends React.Component {
             onClick={() => {
               //TODOCOPY: we need to make sure that the cell copy is being used by the row copy.. right now we have 2 different things going on
               //do we need to be able to copy hidden cells? It seems like it should just copy what's on the page..?
+              const specificColumn = cellWrapper.getAttribute("data-test");
+              this.handleCopyRows([cellWrapper.closest(".rt-tr")], {
+                specificColumn,
+                onFinishMsg: "Cell copied"
+              });
               const [text, jsonText] = this.getCellCopyText(cellWrapper);
-              this.handleCopyHelper(text, jsonText, "Cell copied");
+              this.handleCopyHelper(text, jsonText);
             }}
             text="Cell"
           />
@@ -3031,7 +3082,7 @@ class DataTable extends React.Component {
           <MenuItem
             key="copySelectedRows"
             onClick={() => {
-              this.handleCopyRow(row);
+              this.handleCopyRows([row]);
               // loop through each cell in the row
             }}
             text="Row"
@@ -3296,6 +3347,10 @@ class DataTable extends React.Component {
         data-test={columnTitleTextified}
         data-path={path}
         data-copy-text={columnTitleTextified}
+        data-copy-json={JSON.stringify({
+          __strVal: columnTitleTextified,
+          __isHeaderCell: true
+        })}
         className={classNames("tg-react-table-column-header", {
           "sort-active": sortUp || sortDown
         })}
@@ -3633,3 +3688,18 @@ export function isEntityClean(e) {
   });
   return isClean;
 }
+
+const formatPasteData = ({ schema, newVal, path }) => {
+  const pathToField = getFieldPathToField(schema);
+  const column = pathToField[path];
+  if (column.type === "genericSelect") {
+    if (newVal?.__genSelCol === path) {
+      newVal = newVal.__strVal;
+    } else {
+      newVal = undefined;
+    }
+  } else {
+    newVal = Object.hasOwn(newVal, "__strVal") ? newVal.__strVal : newVal;
+  }
+  return newVal;
+};