@teselagen/ui 0.9.7 → 0.10.2

package/src/DataTable/RenderCell.jsx

@@ -1,191 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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/utils/computePresets.js

@@ -1,42 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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;

package/src/DataTable/utils/formatPasteData.ts

@@ -1,34 +0,0 @@
-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.ts

@@ -1,11 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/initializeHasuraWhereAndFilter.ts

@@ -1,35 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/src/DataTable/utils/removeCleanRows.ts

@@ -1,26 +0,0 @@
-import { isEntityClean } from "./isEntityClean";
-import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
-import { Entity } from "./types/Entity";
-
-export const removeCleanRows = (
-  entities: Entity[],
-  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

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-type SharedFields = {
-  _isClean?: boolean;
-};
-
-export type Entity = (
-  | {
-      id?: string | number;
-    }
-  | {
-      code?: string;
-    }
-) &
-  SharedFields;

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

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