@teselagen/ui 0.8.6-beta.22 → 0.8.6-beta.24

package/src/DataTable/EditabelCell.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  isNumeric,
+  initialValue
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isNumeric]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/DataTable/EditabelCell.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  isNumeric,
+  initialValue
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isNumeric]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/DataTable/RenderCell.jsx

@@ -0,0 +1,191 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Checkbox, Icon } from "@blueprintjs/core";
+import {
+  getIdOrCodeOrIndex,
+  isBottomRightCornerOfRectangle,
+  PRIMARY_SELECTED_VAL
+} from "./utils";
+import { DropdownCell } from "./DropdownCell";
+import { EditableCell } from "./EditabelCell";
+import { getVals } from "./getVals";
+import { CellDragHandle } from "./CellDragHandle";
+
+export const RenderCell = ({
+  oldFunc,
+  getCopyTextForCell,
+  column,
+  isCellEditable,
+  isEntityDisabled,
+  finishCellEdit,
+  formName,
+  noEllipsis,
+  cancelCellEdit,
+  getCellHoverText,
+  selectedCells,
+  isSelectionARectangle,
+  startCellEdit,
+  tableRef,
+  onDragEnd,
+  args
+}) => {
+  const editingCell = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormEditingCell
+  );
+  const initialValue = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormInitialValue
+  );
+
+  const [row] = args;
+  const rowId = getIdOrCodeOrIndex(row.original, row.index);
+  const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
+  let val = oldFunc(...args);
+  const oldVal = val;
+  const text = getCopyTextForCell(val, row, column);
+  const dataTest = {
+    "data-test": "tgCell_" + column.path
+  };
+  const fullValue = row.original?.[row.column.path];
+
+  if (isEditingCell) {
+    if (column.type === "genericSelect") {
+      const GenericSelectComp = column.GenericSelectComp;
+
+      return (
+        <GenericSelectComp
+          rowId={rowId}
+          fullValue={fullValue}
+          initialValue={text}
+          {...dataTest}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    }
+    if (column.type === "dropdown" || column.type === "dropdownMulti") {
+      return (
+        <DropdownCell
+          isMulti={dataTest.isMulti || column.type === "dropdownMulti"}
+          initialValue={dataTest.initialValue || text}
+          options={getVals(column.values)}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    } else {
+      return (
+        <EditableCell
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+          isNumeric={column.type === "number"}
+          initialValue={initialValue || text}
+          finishEdit={newVal => {
+            finishCellEdit(cellId, newVal);
+          }}
+        />
+      );
+    }
+  }
+
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = (
+      <Checkbox
+        disabled={isEntityDisabled(row.original)}
+        className="tg-cell-edit-boolean-checkbox"
+        checked={oldVal === "True"}
+        onChange={e => {
+          const checked = e.target.checked;
+          finishCellEdit(cellId, checked);
+        }}
+      />
+    );
+    noEllipsis = true;
+  }
+
+  //wrap the original tableColumn.Cell function in another div in order to add a title attribute
+  let title = text;
+  if (getCellHoverText) title = getCellHoverText(...args);
+  else if (column.getTitleAttr) title = column.getTitleAttr(...args);
+  const isSelectedCell = selectedCells?.[cellId];
+  const {
+    isRect,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  } = isSelectionARectangle();
+
+  return (
+    <>
+      <div
+        style={{
+          ...(!noEllipsis && {
+            textOverflow: "ellipsis",
+            overflow: "hidden"
+          })
+        }}
+        {...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}
+      </div>
+      {isCellEditable &&
+        (column.type === "dropdown" ||
+          column.type === "dropdownMulti" ||
+          column.type === "genericSelect") && (
+          <Icon
+            icon="caret-down"
+            style={{
+              position: "absolute",
+              right: 5,
+              opacity: 0.3
+            }}
+            className="cell-edit-dropdown"
+            onClick={() => {
+              startCellEdit(cellId);
+            }}
+          />
+        )}
+
+      {isSelectedCell &&
+        (isRect
+          ? isBottomRightCornerOfRectangle({
+              cellId,
+              selectionGrid,
+              lastRowIndex,
+              lastCellIndex,
+              entityMap,
+              pathToIndex
+            })
+          : isSelectedCell === PRIMARY_SELECTED_VAL) && (
+          <CellDragHandle
+            key={cellId}
+            thisTable={tableRef.current.tableRef}
+            cellId={cellId}
+            isSelectionARectangle={isSelectionARectangle}
+            onDragEnd={onDragEnd}
+          />
+        )}
+    </>
+  );
+};

package/src/DataTable/defaultProps.js

@@ -0,0 +1,45 @@
+import { noop } from "lodash-es";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  //NOTE: DO NOT SET DEFAULTS HERE FOR PROPS THAT GET COMPUTED AS PART OF PRESET GROUPS IN computePresets
+  addFilters: noop,
+  className: "",
+  clearFilters: noop,
+  contextMenu: noop,
+  disabled: false,
+  entities: [],
+  extraClasses: "",
+  filters: [],
+  isCopyable: true,
+  isEntityDisabled: noop,
+  isLoading: false,
+  isSimple: false,
+  isSingleSelect: false,
+  maxHeight: 600,
+  noHeader: false,
+  noSelect: false,
+  noUserSelect: false,
+  onDeselect: noop,
+  onMultiRowSelect: noop,
+  onRowClick: noop,
+  onRowSelect: noop,
+  onSingleRowSelect: noop,
+  page: 1,
+  pageSize: 10,
+  reduxFormExpandedEntityIdMap: {},
+  reduxFormSearchInput: "",
+  reduxFormSelectedEntityIdMap: {},
+  removeSingleFilter: noop,
+  resized: [],
+  resizePersist: noop,
+  setFilter: noop,
+  setOrder: noop,
+  setPage: noop,
+  setPageSize: noop,
+  setSearchTerm: noop,
+  showCount: false,
+  style: {},
+  withCheckboxes: false,
+  withSort: true
+};

package/src/DataTable/index.js

@@ -43,7 +43,7 @@ import {
 import { arrayMove } from "@dnd-kit/sortable";
 import classNames from "classnames";
 import scrollIntoView from "dom-scroll-into-view";
-import ReactTable from "@teselagen/react-table";
+import ReactTable, { VIRTUALIZE_CUTOFF_LENGTH } from "@teselagen/react-table";
 import immer, { produceWithPatches, enablePatches, applyPatches } from "immer";
 import papaparse from "papaparse";
 import { useDispatch, useSelector } from "react-redux";
@@ -141,6 +141,7 @@ const DataTable = ({
   );
   const tableRef = useRef();
   const alreadySelected = useRef(false);
+  const [noVirtual, setNoVirtual] = useState(false);
   const [onlyShowRowsWErrors, setOnlyShowRowsWErrors] = useState(false);
   const [entitiesUndoRedoStack, setEntitiesUndoRedoStack] = useState({
     currentVersion: 0
@@ -1145,70 +1146,94 @@ const DataTable = ({
     updateValidation
   ]);
 
-  const handleCopySelectedCells = useCallback(
-    e => {
-      // if the current selection is consecutive cells then copy with
-      // tabs between. if not then just select primary selected cell
-      if (isEmpty(selectedCells)) return;
-      const pathToIndex = getFieldPathToIndex(schema);
-      const entityIdToEntity = getEntityIdToEntity(entities);
-      const selectionGrid = [];
-      let firstRowIndex;
-      let firstCellIndex;
-      Object.keys(selectedCells).forEach(key => {
-        const [rowId, path] = key.split(":");
-        const eInfo = entityIdToEntity[rowId];
-        if (eInfo) {
-          if (firstRowIndex === undefined || eInfo.i < firstRowIndex) {
-            firstRowIndex = eInfo.i;
-          }
-          if (!selectionGrid[eInfo.i]) {
-            selectionGrid[eInfo.i] = [];
-          }
-          const cellIndex = pathToIndex[path];
-          if (firstCellIndex === undefined || cellIndex < firstCellIndex) {
-            firstCellIndex = cellIndex;
-          }
-          selectionGrid[eInfo.i][cellIndex] = true;
+  const waitUntilAllRowsAreRendered = useCallback(() => {
+    return new Promise(resolve => {
+      const interval = setInterval(() => {
+        const allRowEls =
+          tableRef.current?.tableRef?.querySelectorAll(".rt-tr-group");
+        if (allRowEls?.length === entities.length) {
+          clearInterval(interval);
+          resolve();
         }
-      });
-      if (firstRowIndex === undefined) return;
-      const allRows = getAllRows(e);
-      let fullCellText = "";
-      const fullJson = [];
-      times(selectionGrid.length, i => {
-        const row = selectionGrid[i];
-        if (fullCellText) {
-          fullCellText += "\n";
+      }, 50);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleCopySelectedCells = useCallback(async () => {
+    // if the current selection is consecutive cells then copy with
+    // tabs between. if not then just select primary selected cell
+    if (isEmpty(selectedCells)) return;
+
+    // Temporarily disable virtualization for large tables
+    if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+      setNoVirtual(true);
+      await waitUntilAllRowsAreRendered();
+    }
+
+    const pathToIndex = getFieldPathToIndex(schema);
+    const entityIdToEntity = getEntityIdToEntity(entities);
+    const selectionGrid = [];
+    let firstRowIndex;
+    let firstCellIndex;
+    Object.keys(selectedCells).forEach(key => {
+      const [rowId, path] = key.split(":");
+      const eInfo = entityIdToEntity[rowId];
+      if (eInfo) {
+        if (firstRowIndex === undefined || eInfo.i < firstRowIndex) {
+          firstRowIndex = eInfo.i;
         }
-        if (!row) {
-          return;
-        } else {
-          const jsonRow = [];
-          // ignore header
-          let [rowCopyText, json] = 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 (!selectionGrid[eInfo.i]) {
+          selectionGrid[eInfo.i] = [];
         }
-      });
-      if (!fullCellText) return window.toastr.warning("No text to copy");
+        const cellIndex = pathToIndex[path];
+        if (firstCellIndex === undefined || cellIndex < firstCellIndex) {
+          firstCellIndex = cellIndex;
+        }
+        selectionGrid[eInfo.i][cellIndex] = true;
+      }
+    });
+    if (firstRowIndex === undefined) return;
+    const allRows = getAllRows(tableRef);
+    let fullCellText = "";
+    const fullJson = [];
+    times(selectionGrid.length, i => {
+      const row = selectionGrid[i];
+      if (fullCellText) {
+        fullCellText += "\n";
+      }
+      if (!row) {
+        return;
+      } else {
+        const jsonRow = [];
+        // ignore header
+        let [rowCopyText, json] = 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");
 
-      handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
-    },
-    [entities, selectedCells, schema]
-  );
+    handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
+
+    // Re-enable virtualization if it was disabled
+    setNoVirtual(false);
+  }, [entities, selectedCells, schema, waitUntilAllRowsAreRendered]);
 
   const handleCopySelectedRows = useCallback(
-    (selectedRecords, e) => {
+    async selectedRecords => {
+      if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+        setNoVirtual(true);
+        await waitUntilAllRowsAreRendered();
+      }
       const idToIndex = entities.reduce((acc, e, i) => {
         acc[e.id || e.code] = i;
         return acc;
@@ -1223,10 +1248,10 @@ const DataTable = ({
       if (!rowNumbersToCopy.length) return;
       rowNumbersToCopy.unshift(0); //add in the header row
       try {
-        const allRowEls = getAllRows(e);
+        const allRowEls = getAllRows(tableRef);
         if (!allRowEls) return;
         const rowEls = rowNumbersToCopy.map(i => allRowEls[i]);
-
+        if (window.Cypress) window.Cypress.__copiedRowsLength = rowEls.length;
         handleCopyRows(rowEls, {
           onFinishMsg: "Selected rows copied"
         });
@@ -1234,8 +1259,9 @@ const DataTable = ({
         console.error(`error:`, error);
         window.toastr.error("Error copying rows.");
       }
+      setNoVirtual(false);
     },
-    [entities]
+    [entities, waitUntilAllRowsAreRendered]
   );
 
   const handleCopyHotkey = useCallback(
@@ -2096,7 +2122,7 @@ const DataTable = ({
             <MenuItem
               key="copyColumn"
               onClick={() => {
-                handleCopyColumn(e, cellWrapper);
+                handleCopyColumn(tableRef, cellWrapper);
               }}
               text="Column"
             />
@@ -2106,7 +2132,7 @@ const DataTable = ({
               <MenuItem
                 key="copyColumnSelected"
                 onClick={() => {
-                  handleCopyColumn(e, cellWrapper, selectedRecords);
+                  handleCopyColumn(tableRef, cellWrapper, selectedRecords);
                 }}
                 text="Column (Selected)"
               />
@@ -2146,7 +2172,7 @@ const DataTable = ({
           <MenuItem
             key="copyFullTableRows"
             onClick={() => {
-              handleCopyTable(e);
+              handleCopyTable(tableRef);
               // loop through each cell in the row
             }}
             text="Table"
@@ -2754,6 +2780,7 @@ const DataTable = ({
       <ReactTable
         data={filteredEnts}
         ref={tableRef}
+        noVirtual={noVirtual}
         className={classNames({
           isCellEditable,
           "tg-table-loading": isLoading,
@@ -2835,7 +2862,8 @@ const DataTable = ({
       resizePersist,
       resized,
       rowsToShow,
-      style
+      style,
+      noVirtual
     ]
   );
 
@@ -3152,8 +3180,8 @@ const DataTable = ({
                 )}
               </div>
               <Button
-                onClick={e => {
-                  handleCopyTable(e, { isDownload: true });
+                onClick={() => {
+                  handleCopyTable(tableRef, { isDownload: true });
                 }}
                 data-tip="Download Table as CSV"
                 minimal

package/src/DataTable/utils/computePresets.js

@@ -0,0 +1,42 @@
+import { omitBy, isNil } from "lodash-es";
+//we use this to make adding preset prop groups simpler
+export default function computePresets(props = {}) {
+  const { isSimple } = props;
+  let toReturn = omitBy(props, isNil);
+  toReturn.pageSize = toReturn.controlled_pageSize || toReturn.pageSize;
+  if (isSimple) {
+    //isSimplePreset
+    toReturn = {
+      noHeader: true,
+      noFooter: !props.withPaging,
+      noPadding: true,
+      noFullscreenButton: true,
+      hidePageSizeWhenPossible: !props.withPaging,
+      isInfinite: !props.withPaging,
+      hideSelectedCount: true,
+      withTitle: false,
+      withSearch: false,
+      compact: true,
+      withPaging: false,
+      withFilter: false,
+      ...toReturn
+    };
+  } else {
+    toReturn = {
+      // the usual defaults:
+      noFooter: false,
+      noPadding: false,
+      compact: true,
+      noFullscreenButton: false,
+      hidePageSizeWhenPossible: false,
+      isInfinite: false,
+      hideSelectedCount: false,
+      withTitle: true,
+      withSearch: true,
+      withPaging: true,
+      withFilter: true,
+      ...toReturn
+    };
+  }
+  return toReturn || {};
+}

package/src/DataTable/utils/convertSchema.ts

@@ -0,0 +1,79 @@
+import { camelCase } from "lodash-es";
+import { startCase, keyBy, map } from "lodash-es";
+
+type Field = {
+  type?: string;
+  displayName?: string;
+  path?: string;
+  filterDisabled?: boolean;
+  sortDisabled?: boolean;
+};
+
+type Schema = { fields: (Field | string)[] };
+
+type CompleteField = Field & {
+  type: string;
+  displayName: string;
+  path: string;
+};
+
+type CompleteSchema = {
+  fields: CompleteField[];
+};
+
+const convertSchema = (schema: Schema): CompleteSchema => {
+  let schemaToUse = schema;
+  if (!schemaToUse.fields && Array.isArray(schema)) {
+    schemaToUse = {
+      fields: schema
+    };
+  }
+  schemaToUse = {
+    ...schemaToUse
+  };
+  schemaToUse.fields = schemaToUse.fields.map((field, i) => {
+    if (typeof field === "string") {
+      return {
+        displayName: startCase(camelCase(field)),
+        path: field,
+        type: "string"
+      };
+    } else {
+      const fieldToUse = { ...(field as Field) };
+      fieldToUse.type = fieldToUse.type || "string";
+      fieldToUse.displayName =
+        fieldToUse.displayName || startCase(camelCase(fieldToUse.path || ""));
+      // paths are needed for column resizing
+      if (!fieldToUse.path) {
+        fieldToUse.filterDisabled = true;
+        fieldToUse.sortDisabled = true;
+        fieldToUse.path = "fake-path" + i;
+      }
+      return fieldToUse as CompleteField;
+    }
+  });
+  return schemaToUse as CompleteSchema;
+};
+
+export function mergeSchemas(_originalSchema: Schema, _overrideSchema: Schema) {
+  const originalSchema = convertSchema(_originalSchema);
+  const overrideSchema = convertSchema(_overrideSchema);
+
+  const overridesByKey = keyBy(overrideSchema.fields, "path");
+  return {
+    ...originalSchema,
+    ...overrideSchema,
+    fields: originalSchema.fields
+      .map(f => {
+        const override = overridesByKey[f.path];
+        if (override) {
+          delete overridesByKey[f.path];
+          return override;
+        }
+        return f;
+      })
+      .concat(map(overridesByKey))
+  };
+}
+
+export default convertSchema;