@teselagen/ui 0.4.14 → 0.4.15

package/src/DataTable/utils/formatPasteData.js

@@ -0,0 +1,16 @@
+import { getFieldPathToField } from "./getFieldPathToField";
+
+export 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;
+};

package/src/DataTable/utils/getAllRows.js

@@ -0,0 +1,11 @@
+export const getAllRows = e => {
+  const el = e.target.querySelector(".data-table-container")
+    ? e.target.querySelector(".data-table-container")
+    : e.target.closest(".data-table-container");
+
+  const allRowEls = el.querySelectorAll(".rt-tr");
+  if (!allRowEls || !allRowEls.length) {
+    return;
+  }
+  return allRowEls;
+};

package/src/DataTable/utils/getCellCopyText.js

@@ -0,0 +1,7 @@
+export const getCellCopyText = cellWrapper => {
+  const text = cellWrapper && cellWrapper.getAttribute("data-copy-text");
+  const jsonText = cellWrapper && cellWrapper.getAttribute("data-copy-json");
+
+  const textContent = text || cellWrapper.textContent || "";
+  return [textContent, jsonText];
+};

package/src/DataTable/utils/getCellInfo.js

@@ -0,0 +1,36 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const getCellInfo = ({
+  columnIndex,
+  columnPath,
+  rowId,
+  schema,
+  entities,
+  rowIndex,
+  isEntityDisabled,
+  entity
+}) => {
+  const leftpath = schema.fields[columnIndex - 1]?.path;
+  const rightpath = schema.fields[columnIndex + 1]?.path;
+  const cellIdToLeft = leftpath && `${rowId}:${leftpath}`;
+  const cellIdToRight = rightpath && `${rowId}:${rightpath}`;
+  const rowAboveId =
+    entities[rowIndex - 1] &&
+    getIdOrCodeOrIndex(entities[rowIndex - 1], rowIndex - 1);
+  const rowBelowId =
+    entities[rowIndex + 1] &&
+    getIdOrCodeOrIndex(entities[rowIndex + 1], rowIndex + 1);
+  const cellIdAbove = rowAboveId && `${rowAboveId}:${columnPath}`;
+  const cellIdBelow = rowBelowId && `${rowBelowId}:${columnPath}`;
+
+  const cellId = `${rowId}:${columnPath}`;
+  const rowDisabled = isEntityDisabled(entity);
+  return {
+    cellId,
+    cellIdAbove,
+    cellIdToRight,
+    cellIdBelow,
+    cellIdToLeft,
+    rowDisabled
+  };
+};

package/src/DataTable/utils/getFieldPathToField.js

@@ -0,0 +1,7 @@
+export const getFieldPathToField = schema => {
+  const fieldPathToField = {};
+  schema.fields.forEach(f => {
+    fieldPathToField[f.path] = f;
+  });
+  return fieldPathToField;
+};

package/src/DataTable/utils/getIdOrCodeOrIndex.js

@@ -1,4 +1,4 @@
-export default (record, rowIndex) => {
+export const getIdOrCodeOrIndex = (record, rowIndex) => {
   if (record.id || record.id === 0) {
     return record.id;
   } else if (record.code) {

package/src/DataTable/utils/getLastSelectedEntity.js

@@ -0,0 +1,11 @@
+export const getLastSelectedEntity = idMap => {
+  let lastSelectedEnt;
+  let latestTime;
+  Object.values(idMap).forEach(({ time, entity }) => {
+    if (!latestTime || time > latestTime) {
+      lastSelectedEnt = entity;
+      latestTime = time;
+    }
+  });
+  return lastSelectedEnt;
+};

package/src/DataTable/utils/getNewEntToSelect.js

@@ -0,0 +1,25 @@
+export const getNewEntToSelect = ({
+  type,
+  lastSelectedIndex,
+  entities,
+  isEntityDisabled
+}) => {
+  let newIndexToSelect;
+  if (type === "up") {
+    newIndexToSelect = lastSelectedIndex - 1;
+  } else {
+    newIndexToSelect = lastSelectedIndex + 1;
+  }
+  const newEntToSelect = entities[newIndexToSelect];
+  if (!newEntToSelect) return;
+  if (isEntityDisabled && isEntityDisabled(newEntToSelect)) {
+    return getNewEntToSelect({
+      type,
+      lastSelectedIndex: newIndexToSelect,
+      entities,
+      isEntityDisabled
+    });
+  } else {
+    return newEntToSelect;
+  }
+};

package/src/DataTable/utils/getRowCopyText.js

@@ -0,0 +1,28 @@
+import { getCellCopyText } from "./getCellCopyText";
+import { flatMap } from "lodash-es";
+
+export const getRowCopyText = (rowEl, { specificColumn } = {}) => {
+  //takes in a row element
+  if (!rowEl) return [];
+  const textContent = [];
+  const jsonText = [];
+
+  for (const cellEl of rowEl.children) {
+    const cellChild = cellEl.querySelector(`[data-copy-text]`);
+    if (!cellChild) {
+      if (specificColumn) continue; //strip it
+      continue; //just leave it blank
+    }
+    if (
+      specificColumn &&
+      cellChild.getAttribute("data-test") !== specificColumn
+    ) {
+      continue;
+    }
+    const [t, j] = getCellCopyText(cellChild);
+    textContent.push(t);
+    jsonText.push(j);
+  }
+
+  return [flatMap(textContent).join("\t"), jsonText];
+};

package/src/DataTable/utils/handleCopyColumn.js

@@ -0,0 +1,21 @@
+import { getAllRows } from "./getAllRows";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import { handleCopyRows } from "./handleCopyRows";
+
+export const handleCopyColumn = (e, cellWrapper, selectedRecords) => {
+  const specificColumn = cellWrapper.getAttribute("data-test");
+  let rowElsToCopy = getAllRows(e);
+  if (!rowElsToCopy) return;
+  if (selectedRecords) {
+    const ids = selectedRecords.map(e => getIdOrCodeOrIndex(e)?.toString());
+    rowElsToCopy = Array.from(rowElsToCopy).filter(rowEl => {
+      const id = rowEl.closest(".rt-tr-group")?.getAttribute("data-test-id");
+      return id !== undefined && ids.includes(id);
+    });
+  }
+  if (!rowElsToCopy) return;
+  handleCopyRows(rowElsToCopy, {
+    specificColumn,
+    onFinishMsg: "Column Copied"
+  });
+};

package/src/DataTable/utils/handleCopyHelper.js

@@ -0,0 +1,15 @@
+import copy from "copy-to-clipboard";
+
+export const 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"
+    });
+  if (message) {
+    window.toastr.success(message);
+  }
+};

package/src/DataTable/utils/handleCopyRows.js

@@ -0,0 +1,23 @@
+import download from "downloadjs";
+import { getRowCopyText } from "./getRowCopyText";
+import { handleCopyHelper } from "./handleCopyHelper";
+
+export const handleCopyRows = (
+  rowElsToCopy,
+  { specificColumn, onFinishMsg, isDownload } = {}
+) => {
+  let textToCopy = [];
+  const jsonToCopy = [];
+  rowElsToCopy.forEach(rowEl => {
+    const [t, j] = 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");
+  if (isDownload) {
+    download(textToCopy.replaceAll("\t", ","), "tableData.csv", "text/csv");
+  } else {
+    handleCopyHelper(textToCopy, jsonToCopy, onFinishMsg || "Row Copied");
+  }
+};

package/src/DataTable/utils/index.js

@@ -0,0 +1,51 @@
+import { isEntityClean } from "./isEntityClean";
+import { getSelectedRowsFromEntities } from "./selection";
+import { removeCleanRows } from "./removeCleanRows";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import computePresets from "./computePresets";
+import { getRecordsFromIdMap } from "./withSelectedEntities";
+import { formatPasteData } from "./formatPasteData";
+import { getFieldPathToField } from "./getFieldPathToField";
+import {
+  defaultParsePaste,
+  getEntityIdToEntity,
+  getFieldPathToIndex,
+  getNumberStrAtEnd,
+  stripNumberAtEnd
+} from "./utils";
+import { getAllRows } from "./getAllRows";
+import { getNewEntToSelect } from "./getNewEntToSelect";
+import { getLastSelectedEntity } from "./getLastSelectedEntity";
+import { getCellInfo } from "./getCellInfo";
+import { getCellCopyText } from "./getCellCopyText";
+import { getRowCopyText } from "./getRowCopyText";
+import { handleCopyHelper } from "./handleCopyHelper";
+import { handleCopyRows } from "./handleCopyRows";
+import { handleCopyColumn } from "./handleCopyColumn";
+import { isBottomRightCornerOfRectangle } from "./isBottomRightCornerOfRectangle";
+
+export {
+  computePresets,
+  defaultParsePaste,
+  formatPasteData,
+  getAllRows,
+  getCellCopyText,
+  getCellInfo,
+  getEntityIdToEntity,
+  getFieldPathToIndex,
+  getFieldPathToField,
+  getIdOrCodeOrIndex,
+  getLastSelectedEntity,
+  getNewEntToSelect,
+  getNumberStrAtEnd,
+  getRecordsFromIdMap,
+  getRowCopyText,
+  getSelectedRowsFromEntities,
+  handleCopyColumn,
+  handleCopyHelper,
+  handleCopyRows,
+  isBottomRightCornerOfRectangle,
+  isEntityClean,
+  removeCleanRows,
+  stripNumberAtEnd
+};

package/src/DataTable/utils/isBottomRightCornerOfRectangle.js

@@ -0,0 +1,20 @@
+export const isBottomRightCornerOfRectangle = ({
+  cellId,
+  selectionGrid,
+  lastRowIndex,
+  lastCellIndex,
+  entityMap,
+  pathToIndex
+}) => {
+  selectionGrid.forEach(row => {
+    // remove undefineds from start of row
+    while (row[0] === undefined && row.length) row.shift();
+  });
+  const [rowId, cellPath] = cellId.split(":");
+  const ent = entityMap[rowId];
+  if (!ent) return;
+  const { i } = ent;
+  const cellIndex = pathToIndex[cellPath];
+  const isBottomRight = i === lastRowIndex && cellIndex === lastCellIndex;
+  return isBottomRight;
+};

package/src/DataTable/utils/isEntityClean.js

@@ -0,0 +1,15 @@
+export function isEntityClean(e) {
+  if (typeof e !== "object" || e === null) {
+    return true; // or return false depending on what you want for non-object inputs
+  }
+  let isClean = true;
+  for (const [key, val] of Object.entries(e)) {
+    if (key === "id") continue;
+    if (key === "_isClean") continue;
+    if (val) {
+      isClean = false;
+      break;
+    }
+  }
+  return isClean;
+}

package/src/DataTable/utils/removeCleanRows.js

@@ -0,0 +1,22 @@
+import { isEntityClean } from "./isEntityClean";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const removeCleanRows = (reduxFormEntities, reduxFormCellValidation) => {
+  const toFilterOut = {};
+  const entsToUse = (reduxFormEntities || []).filter(e => {
+    if (!(e._isClean || isEntityClean(e))) return true;
+    else {
+      toFilterOut[getIdOrCodeOrIndex(e)] = true;
+      return false;
+    }
+  });
+
+  const validationToUse = {};
+  Object.entries(reduxFormCellValidation || {}).forEach(([k, v]) => {
+    const [rowId] = k.split(":");
+    if (!toFilterOut[rowId]) {
+      validationToUse[k] = v;
+    }
+  });
+  return { entsToUse, validationToUse };
+};

package/src/DataTable/utils/rowClick.js

@@ -1,6 +1,6 @@
 import { isEmpty, forEach, range } from "lodash-es";
 import { getSelectedRowsFromEntities } from "./selection";
-import getIdOrCodeOrIndex from "./getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
 import { getRecordsFromIdMap } from "./withSelectedEntities";
 
 export default function rowClick(e, rowInfo, entities, props) {
@@ -124,8 +124,10 @@ export function changeSelectedEntities({ idMap, entities = [], change }) {
   change("reduxFormSelectedEntityIdMap", newIdMap);
 }
 
-export function finalizeSelection({ idMap, entities, props }) {
-  const {
+export function finalizeSelection({
+  idMap,
+  entities,
+  props: {
     onDeselect,
     onSingleRowSelect,
     onMultiRowSelect,
@@ -133,7 +135,8 @@ export function finalizeSelection({ idMap, entities, props }) {
     onRowSelect,
     noSelect,
     change
-  } = props;
+  }
+}) {
   if (noSelect) return;
   if (
     noDeselectAll &&

package/src/DataTable/utils/selection.js

@@ -1,4 +1,4 @@
-import getIdOrCodeOrIndex from "./getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
 
 export const getSelectedRowsFromEntities = (entities, idMap) => {
   if (!idMap) return [];

package/src/DataTable/utils/utils.js

@@ -0,0 +1,37 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const getFieldPathToIndex = schema => {
+  const fieldToIndex = {};
+  schema.fields.forEach((f, i) => {
+    fieldToIndex[f.path] = i;
+  });
+  return fieldToIndex;
+};
+
+export const defaultParsePaste = str => {
+  return str.split(/\r\n|\n|\r/).map(row => row.split("\t"));
+};
+
+export const getEntityIdToEntity = entities => {
+  const entityIdToEntity = {};
+  entities.forEach((e, i) => {
+    entityIdToEntity[getIdOrCodeOrIndex(e, i)] = { e, i };
+  });
+  return entityIdToEntity;
+};
+
+const endsWithNumber = str => {
+  return /[0-9]+$/.test(str);
+};
+
+export const getNumberStrAtEnd = str => {
+  if (endsWithNumber(str)) {
+    return str.match(/[0-9]+$/)[0];
+  }
+
+  return null;
+};
+
+export const stripNumberAtEnd = str => {
+  return str?.replace?.(getNumberStrAtEnd(str), "");
+};

package/src/DataTable/validateTableWideErrors.js

@@ -1,4 +1,4 @@
-import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./utils";
 import { getCellVal } from "./getCellVal";
 import { forEach, isArray } from "lodash-es";
 import { startCase } from "lodash-es";

package/src/FillWindow.js

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { createPortal } from "react";
 import { isFunction } from "lodash-es";
-import reactDom from "react-dom";
 import rerenderOnWindowResize from "./rerenderOnWindowResize";
 import "./FillWindow.css";
 
@@ -63,7 +62,7 @@ export default class FillWindow extends React.Component {
           : this.props.children}
       </div>
     );
-    if (asPortal) return reactDom.createPortal(inner, window.document.body);
+    if (asPortal) return createPortal(inner, window.document.body);
     return inner;
   }
 }