@vuu-ui/vuu-utils 0.5.14 → 0.5.15

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@vuu-ui/vuu-utils",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "author": "heswell",
+  "main": "src/index.ts",
   "license": "Apache-2.0",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs",
+    "test": "vitest run",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
   "devDependencies": {
-    "@vuu-ui/vuu-datagrid-types": "0.5.14",
-    "@vuu-ui/vuu-protocol-types": "0.5.14"
+    "@vuu-ui/vuu-datagrid-types": "0.5.15",
+    "@vuu-ui/vuu-protocol-types": "0.5.15"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "files": [
-    "cjs",
-    "esm",
-    "/types"
-  ],
-  "module": "esm/index.js",
-  "main": "cjs/index.js",
-  "types": "types/index.d.ts"
-}
+  }
+}

package/src/DataWindow.ts

@@ -0,0 +1,111 @@
+import { WindowRange } from "./range-utils";
+import { metadataKeys } from "./column-utils";
+
+export type DataItem = string | number | boolean;
+export type DataRow = [
+  /** index */
+  number,
+  /** render index */
+  number,
+  /** isLeaf */
+  boolean,
+  /** isExpanded */
+  boolean,
+  /** depth  */
+  number,
+  /** child count */
+  number,
+  /** key  */
+  string,
+  /** selected */
+  number,
+  /** data values  */
+  ...DataItem[]
+];
+export type RangeLike = { from: number; to: number };
+
+const { KEY } = metadataKeys;
+
+const log = (message: string) =>
+  console.log(`%c[DataWindow] ${message}`, "color: purple;font-weight: bold;");
+export class DataWindow {
+  private range: WindowRange;
+  public data: DataRow[];
+  public rowCount = 0;
+  constructor({ from, to }: RangeLike) {
+    log(`constructor ${from} - ${to}`);
+    this.range = new WindowRange(from, to);
+    //internal data is always 0 based, we add range.from to determine an offset
+    this.data = new Array(to - from);
+    // window.dataWindow = this.data;
+    // log(`constructor initial range ${from} - ${to}`);
+  }
+
+  setRowCount = (rowCount: number) => {
+    // log(`rowCount => ${rowCount}`);
+    if (rowCount < this.data.length) {
+      this.data.length = rowCount;
+    }
+    this.rowCount = rowCount;
+  };
+
+  // return true if existing row was updated
+  add(data: DataRow) {
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      const isUpdate = this.data[internalIndex] !== undefined;
+      this.data[internalIndex] = data;
+      return isUpdate;
+    } else {
+      return false;
+    }
+  }
+
+  getAtIndex(index: number) {
+    return this.range.isWithin(index) &&
+      this.data[index - this.range.from] != null
+      ? this.data[index - this.range.from]
+      : undefined;
+  }
+
+  getByKey(key: string) {
+    return this.data.find((row) => row[KEY] === key);
+  }
+
+  isWithinRange(index: number) {
+    return this.range.isWithin(index) && index <= this.rowCount;
+  }
+
+  setRange(from: number, to: number) {
+    log(`setRange ${from} ${to}`);
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(to - from);
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+
+  hasData(from: number, to: number) {
+    const offset = this.range.from;
+    const start = from - offset;
+    const end = Math.min(to - offset - 1, this.rowCount - 1);
+    return this.data[start] !== undefined && this.data[end] !== undefined;
+  }
+
+  getData(from: number, to: number): any[] {
+    const { from: clientFrom, to: clientTo } = this.range;
+    const startOffset = Math.max(0, from - clientFrom);
+    const endOffset = Math.min(to - clientFrom, this.rowCount ?? to);
+    return this.data.slice(startOffset, endOffset);
+  }
+}

package/src/array-utils.ts

@@ -0,0 +1,37 @@
+export type PartitionTest<T> = (value: T, index: number) => boolean;
+
+export function partition<T>(
+  array: T[],
+  test: PartitionTest<T>,
+  pass: T[] = [],
+  fail: T[] = []
+): [T[], T[]] {
+  for (let i = 0, len = array.length; i < len; i++) {
+    (test(array[i], i) ? pass : fail).push(array[i]);
+  }
+  return [pass, fail];
+}
+
+// Note order of items can be different between arrays
+// If an identityProperty is not defined, item identity is used
+export function itemsChanged<T = unknown>(
+  currentItems: T[],
+  newItems: T[],
+  identityProperty?: string
+) {
+  if (currentItems.length !== newItems.length) {
+    return true;
+  }
+  if (identityProperty === undefined) {
+    return !currentItems.every((item) => newItems.includes(item));
+  } else {
+    return currentItems.some(
+      (currentItem) =>
+        newItems.findIndex(
+          (newItem) =>
+            (newItem as { [key: string]: unknown })[identityProperty] ===
+            (currentItem as { [key: string]: unknown })[identityProperty]
+        ) === -1
+    );
+  }
+}

package/src/column-utils.ts

@@ -0,0 +1,224 @@
+import {
+  ColumnDescriptor,
+  GroupColumnDescriptor,
+  KeyedColumnDescriptor,
+} from "@vuu-ui/vuu-datagrid-types";
+import { VuuGroupBy } from "@vuu-ui/vuu-protocol-types";
+import { instrumentPriceColumns } from "../../../showcase/src/examples/DataGrid/columnMetaData";
+import { Row } from "./row-utils";
+
+export interface ColumnMap {
+  [columnName: string]: number;
+}
+
+const SORT_ASC = "asc";
+
+export type SortCriteriaItem = string | [string, "asc"]; // TODO where is 'desc'?
+
+export function mapSortCriteria(
+  sortCriteria: SortCriteriaItem[],
+  columnMap: ColumnMap,
+  metadataOffset = 0
+): [number, "asc"][] {
+  return sortCriteria.map((s) => {
+    if (typeof s === "string") {
+      return [columnMap[s] + metadataOffset, "asc"];
+    } else if (Array.isArray(s)) {
+      const [columnName, sortDir] = s;
+      return [columnMap[columnName] + metadataOffset, sortDir || SORT_ASC];
+    } else {
+      throw Error("columnUtils.mapSortCriteria invalid input");
+    }
+  });
+}
+
+export const isKeyedColumn = (
+  column: ColumnDescriptor
+): column is KeyedColumnDescriptor => {
+  return typeof (column as KeyedColumnDescriptor).key === "number";
+};
+
+export const isNumericColumn = ({ serverDataType }: ColumnDescriptor) =>
+  serverDataType === undefined
+    ? false
+    : serverDataType === "int" ||
+      serverDataType === "long" ||
+      serverDataType === "double";
+
+export const toColumnDescriptor = (name: string): ColumnDescriptor => ({
+  name,
+});
+
+const EMPTY_COLUMN_MAP = {} as const;
+
+export function buildColumnMap(
+  columns?: (KeyedColumnDescriptor | string)[]
+): ColumnMap {
+  const start = metadataKeys.count;
+  if (columns) {
+    return columns.reduce((map, column, i) => {
+      if (typeof column === "string") {
+        map[column] = start + i;
+      } else if (typeof column.key === "number") {
+        map[column.name] = column.key;
+      } else {
+        map[column.name] = start + i;
+      }
+      return map;
+    }, {} as ColumnMap);
+  } else {
+    return EMPTY_COLUMN_MAP;
+  }
+}
+
+export function projectUpdates(updates: number[]): number[] {
+  const results: number[] = [];
+  const metadataOffset = metadataKeys.count - 2;
+  for (let i = 0; i < updates.length; i += 3) {
+    results[i] = updates[i] + metadataOffset;
+    results[i + 1] = updates[i + 1];
+    results[i + 2] = updates[i + 2];
+  }
+  return results;
+}
+
+export function projectColumns(
+  tableRowColumnMap: ColumnMap,
+  columns: ColumnDescriptor[]
+) {
+  const columnCount = columns.length;
+  const { IDX, RENDER_IDX, DEPTH, COUNT, KEY, SELECTED, count } = metadataKeys;
+  return (startIdx: number, offset: number, selectedRows: Row[] = []) =>
+    (row: Row, i: number) => {
+      // selectedRows are indices of rows within underlying dataset (not sorted or filtered)
+      // row is the original row from this set, with original index in IDX pos, which might
+      // be overwritten with a different value below if rows are sorted/filtered
+      const baseRowIdx: any = row[IDX]; // TODO
+      const out = [];
+      for (let i = 0; i < columnCount; i++) {
+        const colIdx = tableRowColumnMap[columns[i].name];
+        out[count + i] = row[colIdx];
+      }
+
+      out[IDX] = startIdx + i + offset;
+      out[RENDER_IDX] = 0;
+      out[DEPTH] = 0;
+      out[COUNT] = 0;
+      out[KEY] = row[tableRowColumnMap.KEY];
+      out[SELECTED] = selectedRows.includes(baseRowIdx) ? 1 : 0;
+      return out;
+    };
+}
+
+export const metadataKeys = {
+  IDX: 0,
+  RENDER_IDX: 1,
+  IS_LEAF: 2,
+  IS_EXPANDED: 3,
+  DEPTH: 4,
+  COUNT: 5,
+  KEY: 6,
+  SELECTED: 7,
+  count: 8,
+  // TODO following only used in datamodel
+  PARENT_IDX: "parent_idx",
+  IDX_POINTER: "idx_pointer",
+  FILTER_COUNT: "filter_count",
+  NEXT_FILTER_IDX: "next_filter_idx",
+} as const;
+
+// This method mutates the passed columns array
+const insertColumn = (
+  columns: KeyedColumnDescriptor[],
+  column: KeyedColumnDescriptor
+) => {
+  const { originalIdx } = column;
+  if (typeof originalIdx === "number") {
+    for (let i = 0; i < columns.length; i++) {
+      const { originalIdx: colIdx = -1 } = columns[i];
+      if (colIdx > originalIdx) {
+        columns.splice(i, 0, column);
+        return columns;
+      }
+    }
+  }
+  columns.push(column);
+  return columns;
+};
+
+export const flattenColumnGroup = (
+  columns: KeyedColumnDescriptor[]
+): KeyedColumnDescriptor[] => {
+  if (columns[0]?.isGroup) {
+    const [groupColumn, ...nonGroupedColumns] = columns as [
+      GroupColumnDescriptor,
+      ...KeyedColumnDescriptor[]
+    ];
+    groupColumn.columns.forEach((groupColumn) => {
+      insertColumn(nonGroupedColumns, groupColumn);
+    });
+    return nonGroupedColumns;
+  } else {
+    return columns;
+  }
+};
+
+export function extractGroupColumn(
+  columns: KeyedColumnDescriptor[],
+  groupBy?: VuuGroupBy
+): [GroupColumnDescriptor | null, KeyedColumnDescriptor[]] {
+  if (groupBy && groupBy.length > 0) {
+    const flattenedColumns = flattenColumnGroup(columns);
+    // Note: groupedColumns will be in column order, not groupBy order
+    const [groupedColumns, rest] = flattenedColumns.reduce(
+      (result, column, i) => {
+        const [g, r] = result;
+        if (groupBy.includes(column.name)) {
+          g.push({
+            ...column,
+            originalIdx: i,
+          });
+        } else {
+          r.push(column);
+        }
+
+        return result;
+      },
+      [[], []] as [KeyedColumnDescriptor[], KeyedColumnDescriptor[]]
+    );
+    if (groupedColumns.length !== groupBy.length) {
+      throw Error(
+        `extractGroupColumn: no column definition found for all groupBy cols ${JSON.stringify(
+          groupBy
+        )} `
+      );
+    }
+    const groupCount = groupBy.length;
+    const groupCols: KeyedColumnDescriptor[] = groupBy.map((name, idx) => {
+      // Keep the cols in same order defined on groupBy
+      const column = groupedColumns.find(
+        (col) => col.name === name
+      ) as KeyedColumnDescriptor;
+      return {
+        ...column,
+        groupLevel: groupCount - idx,
+      };
+    });
+
+    const groupCol = {
+      key: -1,
+      name: "group-col",
+      heading: ["group-col"],
+      isGroup: true,
+      columns: groupCols,
+      width: groupCols.map((c) => c.width).reduce((a, b) => a + b) + 100,
+    } as GroupColumnDescriptor;
+
+    return [groupCol, rest];
+  }
+  return [null, flattenColumnGroup(columns)];
+}
+
+export const isGroupColumn = (
+  column: KeyedColumnDescriptor
+): column is GroupColumnDescriptor => column.isGroup === true;

package/src/data-utils.ts

@@ -0,0 +1,60 @@
+export type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
+
+export const UP1 = "up1";
+export const UP2 = "up2";
+export const DOWN1 = "down1";
+export const DOWN2 = "down2";
+
+export const isValidNumber = (n: unknown): n is number =>
+  typeof n === "number" && isFinite(n);
+
+export function getMovingValueDirection(
+  newValue: number,
+  direction?: valueChangeDirection,
+  prevValue?: number,
+  /** the number of decimal places to take into account when highlighting a change  */
+  decimalPlaces?: number
+): valueChangeDirection {
+  if (
+    !isFinite(newValue) ||
+    prevValue === undefined ||
+    direction === undefined
+  ) {
+    return "";
+  } else {
+    let diff = newValue - prevValue;
+    if (diff) {
+      // make sure there is still a diff when reduced to number of decimals to be displayed
+      if (typeof decimalPlaces === "number") {
+        diff =
+          +newValue.toFixed(decimalPlaces) - +prevValue.toFixed(decimalPlaces);
+      }
+    }
+
+    if (diff) {
+      if (direction === "") {
+        if (diff < 0) {
+          return DOWN1;
+        } else {
+          return UP1;
+        }
+      } else if (diff > 0) {
+        if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
+          return UP1;
+        } else {
+          return UP2;
+        }
+      } else if (
+        direction === UP1 ||
+        direction === UP2 ||
+        direction === DOWN2
+      ) {
+        return DOWN1;
+      } else {
+        return DOWN2;
+      }
+    } else {
+      return "";
+    }
+  }
+}

package/src/date-utils.ts

@@ -0,0 +1,4 @@
+//TODO
+export const formatDate = (date: Date, format: string) => {
+  return date.toUTCString();
+};

package/src/event-emitter.ts

@@ -0,0 +1,139 @@
+export interface Event {}
+
+export type EventListener = (evtName: string, ...args: any[]) => void;
+
+export type EventListenerMap = {
+  [eventName: string]: EventListener[] | EventListener;
+};
+
+function isArrayOfListeners(
+  listeners: EventListener | EventListener[]
+): listeners is EventListener[] {
+  return Array.isArray(listeners);
+}
+
+function isOnlyListener(
+  listeners: EventListener | EventListener[]
+): listeners is EventListener {
+  return !Array.isArray(listeners);
+}
+
+export interface IEventEmitter {
+  emit: (type: string, ...args: unknown[]) => void;
+}
+
+export class EventEmitter implements IEventEmitter {
+  private _events?: EventListenerMap;
+
+  constructor() {
+    this._events = {};
+  }
+
+  addListener(type: string, listener: EventListener) {
+    if (!this._events) {
+      this._events = {};
+    }
+
+    const listeners = this._events[type];
+
+    if (!listeners) {
+      this._events[type] = listener;
+    } else if (isArrayOfListeners(listeners)) {
+      listeners.push(listener);
+    } else if (isOnlyListener(listeners)) {
+      this._events[type] = [listeners, listener];
+    }
+  }
+
+  removeListener(type: string, listener: EventListener) {
+    if (!this._events || !this._events[type]) {
+      return;
+    }
+
+    const listenerOrListeners = this._events[type];
+    let position = -1;
+
+    if (listenerOrListeners === listener) {
+      delete this._events[type];
+    } else if (Array.isArray(listenerOrListeners)) {
+      for (let i = length; i-- > 0; ) {
+        if (listenerOrListeners[i] === listener) {
+          position = i;
+          break;
+        }
+      }
+
+      if (position < 0) {
+        return;
+      }
+
+      if (listenerOrListeners.length === 1) {
+        listenerOrListeners.length = 0;
+        delete this._events[type];
+      } else {
+        listenerOrListeners.splice(position, 1);
+      }
+    }
+  }
+
+  removeAllListeners(type: string) {
+    if (!this._events) {
+      return;
+    } else if (type === undefined) {
+      delete this._events;
+    } else {
+      delete this._events[type];
+    }
+  }
+
+  emit(type: string, ...args: unknown[]) {
+    if (this._events) {
+      const handler = this._events[type];
+      if (handler) {
+        invokeHandler(handler, type, args);
+      }
+      const wildcardHandler = this._events["*"];
+      if (wildcardHandler) {
+        invokeHandler(wildcardHandler, type, args);
+      }
+    }
+  }
+
+  once(type: string, listener: EventListener) {
+    const handler = (evtName: string, message: unknown) => {
+      this.removeListener(evtName, handler);
+      listener(evtName, message);
+    };
+
+    this.on(type, handler);
+  }
+
+  on(type: string, listener: EventListener) {
+    return this.addListener(type, listener);
+  }
+}
+
+function invokeHandler(
+  handler: EventListener | EventListener[],
+  type: string,
+  args: unknown[]
+) {
+  if (isArrayOfListeners(handler)) {
+    handler.slice().forEach((listener) => invokeHandler(listener, type, args));
+  } else {
+    switch (args.length) {
+      case 0:
+        handler(type);
+        break;
+      case 1:
+        handler(type, args[0]);
+        break;
+      case 2:
+        handler(type, args[0], args[1]);
+        break;
+      // slower
+      default:
+        handler.call(null, type, ...args);
+    }
+  }
+}

package/src/getUniqueId.ts

@@ -0,0 +1 @@
+export const getUniqueId = () => `hw-${Math.round(Math.random() * 1e5)}`;

package/src/input-utils.ts

@@ -0,0 +1,50 @@
+const actionKeys = {
+  Enter: 'Enter',
+  Delete: 'Delete'
+};
+
+const navigationKeys = {
+  Home: 'Home',
+  End: 'End',
+  ArrowRight: 'ArrowRight',
+  ArrowLeft: 'ArrowLeft',
+  ArrowDown: 'ArrowDown',
+  ArrowUp: 'ArrowUp',
+  Tab: 'Tab'
+};
+const functionKeys = {
+  F1: 'F1',
+  F2: 'F2',
+  F3: 'F3',
+  F4: 'F4',
+  F5: 'F5',
+  F6: 'F6',
+  F7: 'F7',
+  F8: 'F8',
+  F9: 'F9',
+  F10: 'F10',
+  F11: 'F11',
+  F12: 'F12'
+};
+
+const specialKeys = {
+  ...actionKeys,
+  ...navigationKeys,
+  ...functionKeys
+};
+type specialKey = keyof typeof specialKeys;
+
+const isSpecialKey = (key: string): key is specialKey => key in specialKeys;
+
+export const isCharacterKey = (evt: KeyboardEvent) => {
+  if (isSpecialKey(evt.key)) {
+    return false;
+  }
+  if (typeof evt.which === 'number' && evt.which > 0) {
+    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which !== 8;
+  }
+};
+
+export const isQuoteKey = (evt: KeyboardEvent) => {
+  return evt.key === '"' || evt.key === "'";
+};

package/src/invariant.ts

@@ -0,0 +1,10 @@
+export function invariant(condition: boolean, message: string) {
+  if (!condition) {
+    const error = new Error(message);
+    error.name = 'Invariant Violation';
+    // TODO what is framesToPop?
+    // @ts-ignore
+    error.framesToPop = 1; // we don't care about invariant's own frame
+    throw error;
+  }
+}