@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/initializeHasuraWhereAndFilter.js

@@ -0,0 +1,27 @@
+export function initializeHasuraWhereAndFilter(
+  additionalFilter,
+  where = {},
+  currentParams
+) {
+  where._and = where._and || [];
+  where._or = where._or || [];
+  if (typeof additionalFilter === "function") {
+    const newWhere = additionalFilter(where, currentParams);
+    if (newWhere) {
+      where = {
+        ...where,
+        ...newWhere
+      };
+    }
+  } else if (typeof additionalFilter === "object")
+    where._and.push(additionalFilter);
+}
+
+export const addCustomColumnFilters = (where, fields, currentParams) => {
+  fields.forEach(field => {
+    const { customColumnFilter, filterDisabled } = field;
+    if (filterDisabled || !customColumnFilter) return;
+    customColumnFilter(where, currentParams);
+  });
+};
+

package/{src/utils/isBeingCalledExcessively.js → isBeingCalledExcessively.js}

@@ -22,4 +22,3 @@ export const isBeingCalledExcessively = ({ uniqName }) => {
     throw new Error(`isBeingCalledExcessively: ${uniqName}`);
   }
 };
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.32",
+  "version": "0.7.33-beta.2",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/queryParams.js

@@ -0,0 +1,336 @@
+import queryString from "qs";
+import { uniqBy, clone, camelCase } from "lodash-es";
+import { tableQueryParamsToHasuraClauses } from "./tableQueryParamsToHasuraClauses";
+import { filterLocalEntitiesToHasura } from "./filterLocalEntitiesToHasura";
+import {
+  addCustomColumnFilters,
+  initializeHasuraWhereAndFilter
+} from "./initializeHasuraWhereAndFilter";
+
+const defaultPageSizes = [5, 10, 15, 25, 50, 100, 200, 400];
+
+export { defaultPageSizes };
+
+export function getMergedOpts(topLevel = {}, instanceLevel = {}) {
+  const merged = {
+    ...topLevel,
+    ...instanceLevel
+  };
+  return {
+    formName: "tgDataTable",
+    ...merged,
+    pageSize: merged.controlled_pageSize || merged.pageSize,
+    defaults: {
+      pageSize: merged.controlled_pageSize || 25,
+      order: [], //[-name, statusCode] //an array of camelCase display names with - sign to denote reverse
+      searchTerm: "",
+      page: 1,
+      filters: [
+        //filters look like this:
+        // {
+        //   selectedFilter: 'textContains', //camel case
+        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
+        //   filterValue: 'thomas',
+        // }
+      ],
+      ...(topLevel.defaults || {}),
+      ...(instanceLevel.defaults || {})
+    }
+  };
+}
+
+function safeStringify(val) {
+  if (val !== null && typeof val === "object") {
+    return JSON.stringify(val);
+  }
+  return val;
+}
+
+function safeParse(val) {
+  try {
+    return JSON.parse(val);
+  } catch (e) {
+    return val;
+  }
+}
+
+/**
+ *
+ * @param {object} field
+ * @returns the camelCase display name of the field, to be used for filters, sorting, etc
+ */
+export function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}
+
+export function getCurrentParamsFromUrl(location, isSimple) {
+  let { search } = location;
+  if (isSimple) {
+    search = window.location.href.split("?")[1] || "";
+  }
+
+  return parseFilters(queryString.parse(search, { ignoreQueryPrefix: true }));
+}
+
+export function setCurrentParamsOnUrl(newParams, replace, isSimple) {
+  const stringifiedFilters = stringifyFilters(newParams);
+  const search = `?${queryString.stringify(stringifiedFilters)}`;
+  if (isSimple) {
+    return window.location.replace(
+      `${window.location.href.split("?")[0]}${search}`
+    );
+  }
+  replace({
+    search
+  });
+}
+
+function stringifyFilters(newParams) {
+  let filters;
+  if (newParams.filters && newParams.filters.length) {
+    filters = newParams.filters.reduce(
+      (acc, { filterOn, selectedFilter, filterValue }, index) => {
+        acc +=
+          (index > 0 ? "::" : "") +
+          `${filterOn}__${camelCase(selectedFilter)}__${safeStringify(
+            Array.isArray(filterValue) ? filterValue.join(";") : filterValue
+          )}`;
+        return acc;
+      },
+      ""
+    );
+  }
+  let order;
+  if (newParams.order && newParams.order.length) {
+    order = newParams.order.reduce((acc, order, index) => {
+      acc += (index > 0 ? "___" : "") + order;
+      return acc;
+    }, "");
+  }
+  return {
+    ...newParams,
+    filters,
+    order
+  };
+}
+function parseFilters(newParams) {
+  return {
+    ...newParams,
+    order: newParams.order && newParams.order.split("___"),
+    filters:
+      newParams.filters &&
+      newParams.filters.split("::").map(filter => {
+        const splitFilter = filter.split("__");
+        const [filterOn, selectedFilter, filterValue] = splitFilter;
+        const parseFilterValue = filterValue => {
+          if (selectedFilter === "inList" || selectedFilter === "notInList") {
+            return filterValue.split(";");
+          }
+          if (
+            selectedFilter === "inRange" ||
+            selectedFilter === "outsideRange"
+          ) {
+            return filterValue.split(";").map(Number);
+          }
+          return safeParse(filterValue);
+        };
+        return {
+          filterOn,
+          selectedFilter,
+          filterValue: parseFilterValue(filterValue)
+        };
+      })
+  };
+}
+
+export function makeDataTableHandlers({
+  setNewParams,
+  defaults,
+  onlyOneFilter
+}) {
+  //all of these actions have currentParams bound to them as their last arg in withTableParams
+  const setSearchTerm = searchTerm => {
+    setNewParams(prev => ({
+      ...(prev ?? {}),
+      page: undefined, //set page undefined to return the table to page 1
+      searchTerm: searchTerm === defaults.searchTerm ? undefined : searchTerm
+    }));
+    onlyOneFilter && clearFilters();
+  };
+
+  const addFilters = newFilters => {
+    if (!newFilters) return;
+    setNewParams(prev => {
+      const filters = uniqBy(
+        [...newFilters, ...(onlyOneFilter ? [] : prev?.filters || [])],
+        "filterOn"
+      );
+      return {
+        ...(prev ?? {}),
+        page: undefined, //set page undefined to return the table to page 1
+        filters
+      };
+    });
+  };
+
+  const removeSingleFilter = filterOn =>
+    setNewParams(prev => {
+      const filters = prev?.filters
+        ? prev.filters.filter(filter => {
+            return filter.filterOn !== filterOn;
+          })
+        : undefined;
+      return { ...(prev ?? {}), filters };
+    });
+
+  const clearFilters = (additionalFilterKeys = []) => {
+    const toClear = {
+      filters: undefined,
+      searchTerm: undefined,
+      tags: undefined
+    };
+    additionalFilterKeys.forEach(key => {
+      toClear[key] = undefined;
+    });
+    setNewParams(toClear);
+  };
+
+  const setPageSize = pageSize =>
+    setNewParams(prev => ({
+      ...(prev ?? {}),
+      pageSize: pageSize === defaults.pageSize ? undefined : pageSize,
+      page: undefined //set page undefined to return the table to page 1
+    }));
+
+  const setOrder = (order, isRemove, shiftHeld) =>
+    setNewParams(prev => {
+      let newOrder = [];
+      if (shiftHeld) {
+        //first remove the old order
+        newOrder = [...(prev?.order || [])].filter(value => {
+          const shouldRemove =
+            value.replace(/^-/, "") === order.replace(/^-/, "");
+          return !shouldRemove;
+        });
+        //then, if we are adding, pop the order onto the array
+        if (!isRemove) {
+          newOrder.push(order);
+        }
+      } else {
+        if (isRemove) {
+          newOrder = [];
+        } else {
+          newOrder = [order];
+        }
+      }
+      return {
+        ...(prev ?? {}),
+        order: newOrder
+      };
+    });
+
+  const setPage = page => {
+    setNewParams(prev => ({
+      ...(prev ?? {}),
+      page: page === defaults.page ? undefined : page
+    }));
+  };
+
+  return {
+    setSearchTerm,
+    addFilters,
+    clearFilters,
+    removeSingleFilter,
+    setPageSize,
+    setPage,
+    setOrder,
+    setNewParams
+  };
+}
+
+export function getQueryParams({
+  currentParams,
+  // urlConnected,
+  defaults,
+  schema,
+  isInfinite,
+  entities,
+  isLocalCall,
+  additionalFilter,
+  doNotCoercePageSize,
+  // noOrderError,
+  // isCodeModel,
+  ownProps
+}) {
+  Object.keys(currentParams).forEach(function (key) {
+    if (currentParams[key] === undefined) {
+      delete currentParams[key]; //we want to use the default value if any of these are undefined
+    }
+  });
+  const tableQueryParams = {
+    ...defaults,
+    ...currentParams
+  };
+  let { page, pageSize, searchTerm, filters, order } = tableQueryParams;
+  if (page <= 0 || isNaN(page)) {
+    page = undefined;
+  }
+  if (isInfinite) {
+    page = undefined;
+    pageSize = undefined;
+  }
+  if (pageSize !== undefined && !doNotCoercePageSize) {
+    //pageSize might come in as an unexpected number so we coerce it to be one of the nums in our pageSizes array
+    const closest = clone(window.tgPageSizes || defaultPageSizes).sort(
+      (a, b) => Math.abs(pageSize - a) - Math.abs(pageSize - b)
+    )[0];
+    pageSize = closest;
+  }
+  const toReturn = {
+    //these are values that might be generally useful for the wrapped component
+    page,
+    pageSize: ownProps.controlled_pageSize || pageSize,
+    order,
+    filters,
+    searchTerm
+  };
+  // tnwtodo: need to make sure ignoreSearchTerm still works
+  // if (additionalOrFilterToUse && additionalOrFilterToUse.ignoreSearchTerm) {
+  //   searchTerm = "";
+  //   additionalOrFilterToUse = additionalOrFilterToUse.additionalOrFilterToUse;
+  // }
+
+  const { where, order_by, limit, offset } = tableQueryParamsToHasuraClauses({
+    page,
+    pageSize,
+    searchTerm,
+    filters,
+    order,
+    schema
+  });
+  initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
+  addCustomColumnFilters(where, schema.fields, currentParams);
+  if (isLocalCall) {
+    //if the table is local (aka not directly connected to a db) then we need to
+    //handle filtering/paging/sorting all on the front end
+    return filterLocalEntitiesToHasura(entities, {
+      where,
+      order_by,
+      limit,
+      offset,
+      isInfinite
+    });
+  } else {
+    return {
+      ...toReturn,
+      variables: {
+        where,
+        order_by,
+        limit,
+        offset
+      }
+    };
+  }
+}

package/rerenderOnWindowResize.js

@@ -0,0 +1,26 @@
+import { throttle } from "lodash-es";
+// use like this within a react component:
+
+// constructor(props){
+//   super(props)
+//   rerenderOnWindowResize(this)
+// }
+
+export default function rerenderOnWindowResize(that) {
+  that.updateDimensions = throttle(() => {
+    if (that.props.disabled) return;
+    that.forceUpdate();
+  }, 250);
+  const componentDidMount = that.componentDidMount;
+  const componentWillUnmount = that.componentWillUnmount;
+
+  that.componentDidMount = (...args) => {
+    componentDidMount && componentDidMount.bind(that)(...args);
+    window.addEventListener("resize", that.updateDimensions);
+  };
+
+  that.componentWillUnmount = (...args) => {
+    componentWillUnmount && componentWillUnmount.bind(that)(...args);
+    window.removeEventListener("resize", that.updateDimensions);
+  };
+}

package/showAppSpinner.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Overlay } from "@blueprintjs/core";
+import { renderOnDocSimple } from "./utils/renderOnDoc";
+import Loading from "./Loading";
+
+export default function showAppSpinner() {
+  return renderOnDocSimple(
+    <Overlay isOpen={true}>
+      <Loading centeredInPage loading></Loading>
+    </Overlay>
+  );
+}

package/showDialogOnDocBody.js

@@ -0,0 +1,33 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+// import withDialog from "./enhancers/withDialog";
+import { Dialog } from "@blueprintjs/core";
+import { nanoid } from "nanoid";
+
+//this is only really useful for unconnected standalone simple dialogs
+//remember to pass usePortal={false} to the <Dialog/> component so it will close properly
+export default function showDialogOnDocBody(DialogComp, options = {}) {
+  const dialogHolder = document.createElement("div");
+  const className = "myDialog" + nanoid();
+  dialogHolder.className = className;
+  document.body.appendChild(dialogHolder);
+  const onClose = () => {
+    document.querySelector("." + className).remove();
+  };
+  let DialogCompToUse;
+  if (options.addDialogContainer) {
+    DialogCompToUse = props => {
+      return (
+        <Dialog usePortal={false} title="pass a {title} prop" isOpen {...props}>
+          <DialogComp {...props} hideModal={onClose} onClose={onClose} />
+        </Dialog>
+      );
+    };
+  } else {
+    DialogCompToUse = DialogComp;
+  }
+  const root = createRoot(dialogHolder);
+  root.render(
+    <DialogCompToUse hideModal={onClose} onClose={onClose} {...options} />
+  );
+}

package/simplifyHasuraWhere.js

@@ -0,0 +1,80 @@
+export function simplifyHasuraWhere(whereClause) {
+  const simplifiedWhere = {};
+
+  for (const key in whereClause) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (whereClause.hasOwnProperty(key)) {
+      const value = whereClause[key];
+
+      if (
+        typeof value === "object" &&
+        value !== null &&
+        !Array.isArray(value)
+      ) {
+        if (key.includes(".")) {
+          // Handle dot-nested where clauses
+          const keys = key.split(".");
+          let currentObj = simplifiedWhere;
+          for (let i = 0; i < keys.length - 1; i++) {
+            const nestedKey = keys[i];
+            if (!currentObj[nestedKey]) {
+              currentObj[nestedKey] = {};
+            }
+            currentObj = currentObj[nestedKey];
+          }
+          if (typeof value === "object" && value !== null && "_eq" in value) {
+            currentObj[keys[keys.length - 1]] = value;
+          } else {
+            currentObj[keys[keys.length - 1]] = { _eq: value };
+          }
+        } else {
+          // Handle regular Hasura operators or already nested objects.
+          if (
+            typeof value === "object" &&
+            value !== null &&
+            !("_eq" in value) &&
+            !("_gt" in value) &&
+            !("_lt" in value) &&
+            !("_gte" in value) &&
+            !("_lte" in value) &&
+            !("_in" in value) &&
+            !("_nin" in value) &&
+            !("_neq" in value) &&
+            !("_like" in value) &&
+            !("_nlike" in value) &&
+            !("_ilike" in value) &&
+            !("_nilike" in value) &&
+            !("_similar" in value) &&
+            !("_nsimilar" in value) &&
+            !("_regex" in value) &&
+            !("_nregex" in value) &&
+            !("_iregex" in value) &&
+            !("_niregex" in value)
+          ) {
+            simplifiedWhere[key] = simplifyHasuraWhere(value);
+          } else {
+            simplifiedWhere[key] = value;
+          }
+        }
+      } else {
+        // Handle simplified _eq where clauses
+        if (key.includes(".")) {
+          const keys = key.split(".");
+          let currentObj = simplifiedWhere;
+          for (let i = 0; i < keys.length - 1; i++) {
+            const nestedKey = keys[i];
+            if (!currentObj[nestedKey]) {
+              currentObj[nestedKey] = {};
+            }
+            currentObj = currentObj[nestedKey];
+          }
+          currentObj[keys[keys.length - 1]] = { _eq: value };
+        } else {
+          simplifiedWhere[key] = { _eq: value };
+        }
+      }
+    }
+  }
+
+  return simplifiedWhere;
+}

package/src/CellDragHandle.js

@@ -0,0 +1,132 @@
+import { flatMap } from "lodash-es";
+import { forEach } from "lodash-es";
+import React, { useCallback, useRef } from "react";
+
+export const CellDragHandle = ({
+  thisTable,
+  onDragEnd,
+  cellId,
+  isSelectionARectangle
+}) => {
+  const xStart = useRef(0);
+  const timeoutkey = useRef();
+  const rowsToSelect = useRef();
+  const rectangleCellPaths = useRef();
+
+  const handleDrag = useCallback(
+    e => {
+      const table = thisTable.querySelector(".rt-table");
+      const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
+      const [rowId, path] = cellId.split(":");
+      const selectedTr = table.querySelector(
+        `.rt-tr-group.with-row-data[data-test-id="${rowId}"]`
+      );
+      if (!selectedTr) return;
+      const selectedIndex = selectedTr.dataset.index;
+
+      if (selectedTr && trs.length) {
+        const selectedY = selectedTr.getBoundingClientRect().y;
+        const cursorY = e.clientY;
+        clearTimeout(timeoutkey.current);
+        const updateScrollIfNecessary = () => {
+          const { y, height } = table.getBoundingClientRect();
+          if (cursorY < y) {
+            table.scrollBy(0, -5);
+          } else if (cursorY > y + height) {
+            table.scrollBy(0, 5);
+          }
+        };
+        updateScrollIfNecessary();
+        timeoutkey.current = setInterval(() => {
+          updateScrollIfNecessary();
+        }, 10);
+
+        const isCursorBelow = cursorY > selectedY;
+        rowsToSelect.current = [];
+        forEach(trs, (tr, index) => {
+          let isSelectedForUpdate;
+          const rowId = tr.dataset.testId;
+          const changeDashedBorder = (path, on) => {
+            tr.querySelector(
+              `[data-test="tgCell_${path}"]`
+            ).parentNode.classList[on ? "add" : "remove"]("selectedForUpdate");
+          };
+          if (isCursorBelow ? index > selectedIndex : index < selectedIndex) {
+            const { y, height } = tr.getBoundingClientRect();
+            if (isCursorBelow ? y < cursorY : y + height > cursorY) {
+              rowsToSelect.current.push(rowId);
+              isSelectedForUpdate = true;
+              //add dashed borders
+
+              if (rectangleCellPaths.current) {
+                rectangleCellPaths.current.forEach(path => {
+                  changeDashedBorder(path, true);
+                });
+              } else {
+                changeDashedBorder(path, true);
+              }
+            }
+          }
+          if (!isSelectedForUpdate) {
+            if (rectangleCellPaths.current) {
+              rectangleCellPaths.current.forEach(path => {
+                changeDashedBorder(path, false);
+              });
+            } else {
+              changeDashedBorder(path, false);
+            }
+          }
+        });
+      }
+    },
+    [cellId, thisTable]
+  );
+
+  const onMouseUp = useCallback(() => {
+    clearTimeout(timeoutkey.current);
+    const table = thisTable;
+    const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
+    const [, path] = cellId.split(":");
+    //remove the dashed borders
+    forEach(trs, tr => {
+      if (rectangleCellPaths.current) {
+        rectangleCellPaths.current.forEach(path => {
+          const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
+          el.parentNode.classList.remove("selectedForUpdate");
+        });
+      } else {
+        const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
+        el.parentNode.classList.remove("selectedForUpdate");
+      }
+    });
+    document.removeEventListener("mousemove", handleDrag, false);
+    document.removeEventListener("mouseup", onMouseUp, false);
+    onDragEnd(
+      flatMap(rowsToSelect.current, id => {
+        if (rectangleCellPaths.current) {
+          return rectangleCellPaths.current.map(path => {
+            return `${id}:${path}`;
+          });
+        } else {
+          return `${id}:${path}`;
+        }
+      })
+    );
+  }, [cellId, handleDrag, onDragEnd, thisTable]);
+
+  return (
+    <div
+      onMouseDown={e => {
+        rowsToSelect.current = [];
+        xStart.current = e.clientX;
+        const { isRect, selectedPaths } = isSelectionARectangle();
+        if (isRect) {
+          rectangleCellPaths.current = selectedPaths;
+        }
+        document.addEventListener("mousemove", handleDrag, false);
+        document.addEventListener("mouseup", onMouseUp, false);
+      }}
+      className="cellDragHandle"
+    />
+  );
+};