@teselagen/ui 0.8.6-beta.23 → 0.8.6-beta.25

package/src/DataTable/utils/formatPasteData.ts

@@ -0,0 +1,34 @@
+import { getFieldPathToField } from "./getFieldPathToField";
+import type { Schema } from "./types/Schema";
+
+type GenericSelectValue = {
+  __strVal: string;
+  __genSelCol: string;
+};
+
+export const formatPasteData = ({
+  schema,
+  newVal,
+  path
+}: {
+  schema: Schema;
+  newVal: GenericSelectValue | string | number | boolean | null | undefined;
+  path: string;
+}) => {
+  const pathToField = getFieldPathToField(schema);
+  const column = pathToField[path];
+  if (column.type === "genericSelect") {
+    const value = newVal as GenericSelectValue;
+    if (value.__genSelCol === path) {
+      newVal = value.__strVal;
+    } else {
+      newVal = undefined;
+    }
+  } else {
+    newVal =
+      typeof newVal === "object" && newVal !== null && "__strVal" in newVal
+        ? newVal.__strVal
+        : newVal;
+  }
+  return newVal;
+};

package/src/DataTable/utils/getAllRows.js

@@ -1,9 +1,5 @@
-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");
+export const getAllRows = tableRef => {
+  const allRowEls = tableRef.current?.tableRef?.querySelectorAll(".rt-tr");
   if (!allRowEls || !allRowEls.length) {
     return;
   }

package/src/DataTable/utils/getAllRows.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from "react";
+
+export const getAllRows = (
+  tableRef: RefObject<{ tableRef: HTMLDivElement }>
+) => {
+  const allRowEls = tableRef.current?.tableRef?.querySelectorAll(".rt-tr");
+  if (!allRowEls || !allRowEls.length) {
+    return;
+  }
+  return allRowEls;
+};

package/src/DataTable/utils/getCellCopyText.ts

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

package/src/DataTable/utils/getCellInfo.ts

@@ -0,0 +1,46 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import { Entity } from "./types/Entity";
+
+export const getCellInfo = <T extends Entity>({
+  columnIndex,
+  columnPath,
+  rowId,
+  schema,
+  entities,
+  rowIndex,
+  isEntityDisabled,
+  entity
+}: {
+  columnIndex: number;
+  columnPath: string;
+  rowId: string | number;
+  schema: { fields: { path: string }[] };
+  entities: T[];
+  rowIndex: number;
+  isEntityDisabled: (entity: T) => boolean;
+  entity: T;
+}) => {
+  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.ts

@@ -0,0 +1,10 @@
+import { Field } from "./types/Field";
+import { Schema } from "./types/Schema";
+
+export const getFieldPathToField = (schema: Schema) => {
+  const fieldPathToField: { [path: string]: Field } = {};
+  schema.fields.forEach(f => {
+    fieldPathToField[f.path] = f;
+  });
+  return fieldPathToField;
+};

package/src/DataTable/utils/getIdOrCodeOrIndex.ts

@@ -0,0 +1,14 @@
+import type { Entity } from "./types/Entity";
+
+export const getIdOrCodeOrIndex = (record: Entity, rowIndex?: number) => {
+  if ("id" in record && (record.id || record.id === 0)) {
+    return record.id;
+  } else if ("code" in record && record.code) {
+    return record.code;
+  } else {
+    if (rowIndex === undefined || rowIndex === null) {
+      throw new Error("id, code, or rowIndex must be provided");
+    }
+    return rowIndex;
+  }
+};

package/src/DataTable/utils/getLastSelectedEntity.ts

@@ -0,0 +1,15 @@
+import { Entity } from "./types/Entity";
+
+export const getLastSelectedEntity = (idMap: {
+  [id: string]: { time: number; entity: Entity };
+}) => {
+  let lastSelectedEnt;
+  let latestTime: number | null = null;
+  Object.values(idMap).forEach(({ time, entity }) => {
+    if (!latestTime || time > latestTime) {
+      lastSelectedEnt = entity;
+      latestTime = time;
+    }
+  });
+  return lastSelectedEnt;
+};

package/src/DataTable/utils/getNewEntToSelect.ts

@@ -0,0 +1,32 @@
+import { Entity } from "./types/Entity";
+
+export const getNewEntToSelect = ({
+  type,
+  lastSelectedIndex,
+  entities,
+  isEntityDisabled
+}: {
+  type: "up" | "down";
+  lastSelectedIndex: number;
+  entities: Entity[];
+  isEntityDisabled?: (entity: Entity) => boolean;
+}): Entity | undefined => {
+  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
+    }) as Entity;
+  } else {
+    return newEntToSelect;
+  }
+};

package/src/DataTable/utils/handleCopyColumn.js

@@ -2,9 +2,9 @@ import { getAllRows } from "./getAllRows";
 import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
 import { handleCopyRows } from "./handleCopyRows";
 
-export const handleCopyColumn = (e, cellWrapper, selectedRecords) => {
+export const handleCopyColumn = (tableRef, cellWrapper, selectedRecords) => {
   const specificColumn = cellWrapper.getAttribute("data-test");
-  let rowElsToCopy = getAllRows(e);
+  let rowElsToCopy = getAllRows(tableRef);
   if (!rowElsToCopy) return;
   if (selectedRecords) {
     const ids = selectedRecords.map(e => getIdOrCodeOrIndex(e)?.toString());

package/src/DataTable/utils/handleCopyTable.js

@@ -1,9 +1,9 @@
 import { getAllRows } from "./getAllRows";
 import { handleCopyRows } from "./handleCopyRows";
 
-export const handleCopyTable = (e, opts) => {
+export const handleCopyTable = (tableRef, opts) => {
   try {
-    const allRowEls = getAllRows(e);
+    const allRowEls = getAllRows(tableRef);
     if (!allRowEls) return;
     handleCopyRows(allRowEls, {
       ...opts,

package/src/DataTable/utils/initializeHasuraWhereAndFilter.ts

@@ -0,0 +1,35 @@
+type Filter = {
+  [key: string]:
+    | { _eq: string | number | boolean }
+    | { _in: (string | number | boolean)[] }
+    | { _gt: number }
+    | { _lt: number }
+    | { _gte: number }
+    | { _lte: number };
+};
+type Where = { _and?: Filter[]; _or?: Filter[] };
+type CurrentParams = object;
+
+export function initializeHasuraWhereAndFilter(
+  additionalFilter:
+    | ((where: Where, currentParams: CurrentParams) => Filter | void)
+    | Filter
+    | undefined
+    | null,
+  where: Where = {},
+  currentParams: CurrentParams
+) {
+  where._and = where._and || [];
+  where._or = where._or || [];
+  if (typeof additionalFilter === "function") {
+    const newWhere = additionalFilter(where, currentParams);
+    if (newWhere) {
+      Object.assign(where, newWhere);
+    }
+  } else if (
+    typeof additionalFilter === "object" &&
+    additionalFilter !== null
+  ) {
+    where._and.push(additionalFilter);
+  }
+}

package/src/DataTable/utils/isBottomRightCornerOfRectangle.ts

@@ -0,0 +1,27 @@
+export const isBottomRightCornerOfRectangle = ({
+  cellId,
+  selectionGrid,
+  lastRowIndex,
+  lastCellIndex,
+  entityMap,
+  pathToIndex
+}: {
+  cellId: string;
+  selectionGrid: (string | undefined)[][];
+  lastRowIndex: number;
+  lastCellIndex: number;
+  entityMap: Record<string, { i: number }>;
+  pathToIndex: Record<string, number>;
+}) => {
+  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.ts

@@ -0,0 +1,15 @@
+export function isEntityClean(e: { [key: string]: unknown } | null): boolean {
+  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/primarySelectedValue.ts

@@ -0,0 +1 @@
+export const PRIMARY_SELECTED_VAL = "main_cell";

package/src/DataTable/utils/removeCleanRows.ts

@@ -0,0 +1,25 @@
+import { isEntityClean } from "./isEntityClean";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const removeCleanRows = (
+  entities: ({ [key: string]: unknown } & { _isClean?: boolean })[],
+  cellValidation: Record<string, unknown>
+) => {
+  const toFilterOut: Record<string, boolean> = {};
+  const entsToUse = (entities || []).filter(e => {
+    if (!(e._isClean || isEntityClean(e))) return true;
+    else {
+      toFilterOut[getIdOrCodeOrIndex(e)] = true;
+      return false;
+    }
+  });
+
+  const validationToUse: Record<string, unknown> = {};
+  Object.entries(cellValidation || {}).forEach(([k, v]) => {
+    const [rowId] = k.split(":");
+    if (!toFilterOut[rowId]) {
+      validationToUse[k] = v;
+    }
+  });
+  return { entsToUse, validationToUse };
+};

package/src/DataTable/utils/selection.ts

@@ -0,0 +1,11 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const getSelectedRowsFromEntities = (
+  entities: { [key: string]: unknown }[],
+  idMap: Record<string, boolean>
+) => {
+  if (!idMap) return [];
+  return entities.reduce((acc: number[], entity, i) => {
+    return idMap[getIdOrCodeOrIndex(entity, i)] ? acc.concat([i]) : acc;
+  }, []);
+};

package/src/DataTable/utils/types/Entity.ts

@@ -0,0 +1,7 @@
+export type Entity =
+  | {
+      id?: string | number;
+    }
+  | {
+      code?: string;
+    };

package/src/DataTable/utils/types/Field.ts

@@ -0,0 +1,4 @@
+export type Field = {
+  path: string;
+  type: "genericSelect" | string;
+};

package/src/DataTable/utils/types/OrderBy.ts

@@ -0,0 +1,15 @@
+type OrderByClause<T = { id: string }> = {
+  path?: string;
+  direction?: "asc" | "desc";
+  type?: string;
+  sortFn?:
+    | ((record: T) => unknown)
+    | string
+    | Array<((record: T) => unknown) | string>;
+  getValueToFilterOn?: (record: T) => unknown;
+};
+
+export type OrderBy =
+  | OrderByClause
+  | OrderByClause[]
+  | Record<string, "asc" | "desc">;

package/src/DataTable/utils/types/Schema.ts

@@ -0,0 +1,5 @@
+import { Field } from "./Field";
+
+export type Schema = {
+  fields: Field[];
+};

package/src/DataTable/utils/useDeepEqualMemo.js

@@ -0,0 +1,10 @@
+import { isEqual } from "lodash-es";
+import { useRef } from "react";
+
+export const useDeepEqualMemo = value => {
+  const ref = useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+};

package/src/DataTable/utils/useTableEntities.ts

@@ -0,0 +1,60 @@
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { change, initialize } from "redux-form";
+
+type _Entity = { [key: string]: unknown } & { id: string };
+
+type SelectedEntityIdMap<Entity extends _Entity> = Record<
+  string,
+  { entity: Entity; time: number; index?: number }
+>;
+
+export const useTableEntities = <Entity extends _Entity>(
+  tableFormName: string
+) => {
+  const dispatch = useDispatch();
+  const selectTableEntities = useCallback(
+    (entities: { id: string }[] = []) => {
+      initialize(tableFormName, {}, true, {
+        keepDirty: true,
+        updateUnregisteredFields: true,
+        keepValues: true
+      });
+      const selectedEntityIdMap: SelectedEntityIdMap<{ id: string }> = {};
+      entities.forEach(entity => {
+        selectedEntityIdMap[entity.id] = {
+          entity,
+          time: Date.now()
+        };
+      });
+      dispatch(
+        change(
+          tableFormName,
+          "reduxFormSelectedEntityIdMap",
+          selectedEntityIdMap
+        )
+      );
+    },
+    [dispatch, tableFormName]
+  );
+
+  const { allOrderedEntities, selectedEntities } = useSelector(
+    (state: {
+      form: Record<
+        string,
+        {
+          values?: {
+            allOrderedEntities?: Entity[];
+            reduxFormSelectedEntityIdMap?: SelectedEntityIdMap<Entity>;
+          };
+        }
+      >;
+    }) => ({
+      allOrderedEntities:
+        state.form?.[tableFormName]?.values?.allOrderedEntities,
+      selectedEntities:
+        state.form?.[tableFormName]?.values?.reduxFormSelectedEntityIdMap
+    })
+  );
+  return { selectTableEntities, allOrderedEntities, selectedEntities };
+};