@teselagen/ui 0.8.6 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6",
+  "version": "0.9.1",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -17,7 +17,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@teselagen/react-table": "6.10.16",
+    "@teselagen/react-table": "6.10.18",
     "classnames": "^2.3.2",
     "color": "^3.2.1",
     "copy-to-clipboard": "^3.3.1",

package/src/DataTable/Columns.js

@@ -33,10 +33,10 @@ import getTextFromEl from "../utils/getTextFromEl";
 import rowClick, { finalizeSelection } from "./utils/rowClick";
 import { editCellHelper } from "./editCellHelper";
 import { getCellVal } from "./getCellVal";
-import { getCCDisplayName } from "./utils/queryParams";
 import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 dayjs.extend(localizedFormat);
 
@@ -104,7 +104,7 @@ const RenderColumnHeader = ({
   if (order && order.length) {
     order.forEach(order => {
       const orderField = order.replace("-", "");
-      if (orderField === ccDisplayName) {
+      if (orderField === path) {
         if (orderField === order) {
           ordering = "asc";
         } else {

package/src/DataTable/DisplayOptions.js

@@ -10,7 +10,7 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/queryParams";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 const DisplayOptions = ({
   compact,

package/src/DataTable/EditabelCell.js

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

package/src/DataTable/FilterAndSortMenu.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
-import { camelCase } from "lodash-es";
+import { camelCase, startCase } from "lodash-es";
 import classNames from "classnames";
 import {
   Menu,
@@ -349,43 +349,40 @@ function getFilterMenuItems(dataType) {
   let filterMenuItems = [];
   if (dataType === "string") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex",
-      "In List",
-      "Not In List",
-      "Is Empty",
-      "Not Empty"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex",
+      "inList",
+      "notInList",
+      "isEmpty",
+      "notEmpty"
     ];
   } else if (dataType === "lookup") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex"
     ];
   } else if (dataType === "boolean") {
-    filterMenuItems = ["True", "False"];
+    filterMenuItems = ["true", "false"];
   } else if (dataType === "number" || dataType === "integer") {
-    // else if (dataType === "lookup") {
-    //   filterMenuItems = ["None"];
-    // }
     filterMenuItems = [
-      "Greater Than",
-      "Less Than",
-      "In Range",
-      "Outside Range",
-      "Equal To",
-      "In List",
-      "Not In List"
+      "greaterThan",
+      "lessThan",
+      "inRange",
+      "outsideRange",
+      "equalTo",
+      "inList",
+      "notInList"
     ];
   } else if (dataType === "timestamp") {
-    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
+    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
   }
-  return filterMenuItems;
+  return filterMenuItems.map(item => startCase(item));
 }

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";
@@ -92,10 +92,9 @@ import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
-  getCCDisplayName,
-  getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
+  getCurrentParamsFromUrl,
   setCurrentParamsOnUrl
 } from "./utils/queryParams";
 import { useColumns } from "./Columns";
@@ -103,6 +102,7 @@ import { formValueSelector, change as _change } from "redux-form";
 import { throwFormError } from "../throwFormError";
 import { isObservableArray, toJS } from "mobx";
 import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -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
@@ -337,16 +338,6 @@ const DataTable = ({
 
   const queryParams = useMemo(() => {
     if (!isTableParamsConnected) {
-      const additionalFilterToUse =
-        typeof props.additionalFilter === "function"
-          ? props.additionalFilter
-          : () => props.additionalFilter;
-
-      const additionalOrFilterToUse =
-        typeof props.additionalOrFilter === "function"
-          ? props.additionalOrFilter
-          : () => props.additionalOrFilter;
-
       return getQueryParams({
         doNotCoercePageSize,
         currentParams,
@@ -356,8 +347,7 @@ const DataTable = ({
         schema: convertedSchema,
         isInfinite,
         isLocalCall,
-        additionalFilter: additionalFilterToUse,
-        additionalOrFilter: additionalOrFilterToUse,
+        additionalFilter: props.additionalFilter,
         noOrderError: props.noOrderError,
         isCodeModel: props.isCodeModel,
         ownProps: props
@@ -614,7 +604,7 @@ const DataTable = ({
                 : !val;
           });
         }
-        if (noValsForField) {
+        if (noValsForField && entities.length) {
           return {
             ...field,
             isHidden: true,
@@ -1156,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;
@@ -1234,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"
         });
@@ -1245,8 +1259,9 @@ const DataTable = ({
         console.error(`error:`, error);
         window.toastr.error("Error copying rows.");
       }
+      setNoVirtual(false);
     },
-    [entities]
+    [entities, waitUntilAllRowsAreRendered]
   );
 
   const handleCopyHotkey = useCallback(
@@ -2107,7 +2122,7 @@ const DataTable = ({
             <MenuItem
               key="copyColumn"
               onClick={() => {
-                handleCopyColumn(e, cellWrapper);
+                handleCopyColumn(tableRef, cellWrapper);
               }}
               text="Column"
             />
@@ -2117,7 +2132,7 @@ const DataTable = ({
               <MenuItem
                 key="copyColumnSelected"
                 onClick={() => {
-                  handleCopyColumn(e, cellWrapper, selectedRecords);
+                  handleCopyColumn(tableRef, cellWrapper, selectedRecords);
                 }}
                 text="Column (Selected)"
               />
@@ -2157,7 +2172,7 @@ const DataTable = ({
           <MenuItem
             key="copyFullTableRows"
             onClick={() => {
-              handleCopyTable(e);
+              handleCopyTable(tableRef);
               // loop through each cell in the row
             }}
             text="Table"
@@ -2765,6 +2780,7 @@ const DataTable = ({
       <ReactTable
         data={filteredEnts}
         ref={tableRef}
+        noVirtual={noVirtual}
         className={classNames({
           isCellEditable,
           "tg-table-loading": isLoading,
@@ -2846,7 +2862,8 @@ const DataTable = ({
       resizePersist,
       resized,
       rowsToShow,
-      style
+      style,
+      noVirtual
     ]
   );
 
@@ -3089,7 +3106,7 @@ const DataTable = ({
                     try {
                       const allEntities = await safeQuery(fragment, {
                         variables: {
-                          filter: variables.filter,
+                          where: variables.where,
                           sort: variables.sort
                         },
                         canCancel: true
@@ -3163,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/style.css

@@ -246,7 +246,7 @@ body:not(.drag-active)
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .ReactTable {

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 || {};
+}