@hpcc-js/dgrid2 0.0.0 → 2.2.0

package/types-3.4/__package__.d.ts

@@ -1,4 +1,4 @@
 export declare const PKG_NAME = "@hpcc-js/dgrid2";
-export declare const PKG_VERSION = "0.0.0";
-export declare const BUILD_VERSION = "2.102.11";
+export declare const PKG_VERSION = "2.2.0";
+export declare const BUILD_VERSION = "2.103.2";
 //# sourceMappingURL=__package__.d.ts.map

package/types-3.4/hooks.d.ts

@@ -0,0 +1,6 @@
+import { Widget } from "@hpcc-js/common";
+export declare function useData(widget: Widget): [
+    string[],
+    Array<string | number>[]
+];
+//# sourceMappingURL=hooks.d.ts.map

package/types-3.4/reactTable.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Table } from "./table";
+export declare type QuerySortItem = {
+    attribute: string;
+    descending: boolean;
+};
+export interface ReactTableProps {
+    table: Table;
+    sort?: QuerySortItem;
+}
+export declare const ReactTable: React.FunctionComponent<ReactTableProps>;
+//# sourceMappingURL=reactTable.d.ts.map

package/types-3.4/table.d.ts

@@ -1,17 +1,30 @@
 import { HTMLWidget, publish } from "@hpcc-js/common";
 import "../src/table.css";
-export declare type QuerySortItem = {
-    attribute: string;
-    descending: boolean;
-};
+export declare type ColumnType = "boolean" | "number" | "string" | "time";
 export declare class Table extends HTMLWidget {
     protected _div: any;
     constructor();
+    noDataMessage: publish<this, string>;
     darkMode: publish<this, boolean>;
     multiSelect: publish<this, boolean>;
-    _prevRow: any;
-    _prevColumn: any;
-    private renderTable;
+    columnTypes: publish<this, {
+        [column: string]: ColumnType;
+    }>;
+    columnPatterns: publish<this, {
+        [column: string]: string;
+    }>;
+    columnFormats: publish<this, {
+        [column: string]: string;
+    }>;
+    columnType(column: string): ColumnType;
+    columnType(column: string, type: ColumnType): this;
+    columnPattern(column: string): string;
+    columnPattern(column: string, pattern: string): this;
+    columnFormat(column: string): string;
+    columnFormat(column: string, format: string): this;
+    private _prevRow;
+    private _prevColumn;
+    onRowClickCallback(row: any, column: any): void;
     enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;

package/src/table.tsx

@@ -1,165 +0,0 @@
-import { HTMLWidget, publish } from "@hpcc-js/common";
-import * as React from "preact/compat";
-import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
-
-import "../src/table.css";
-
-export type QuerySortItem = { attribute: string, descending: boolean };
-function copyAndSort<T>(items: T[], attribute: string, descending?: boolean): T[] {
-    const key = attribute as keyof T;
-    return [...items].sort((a: T, b: T) => {
-        if (a[key] < b[key]) {
-            return descending ? 1 : -1;
-        } else if (a[key] > b[key]) {
-            return descending ? -1 : 1;
-        }
-        return 0;
-    });
-}
-
-interface ReactTableProps {
-    columns: string[];
-    data: Array<string | number>[];
-    onRowClickCallback: (row: any) => void;
-    sort?: QuerySortItem,
-    darkMode?: boolean;
-    multiSelect?: boolean;
-}
-
-const ReactTable: React.FunctionComponent<ReactTableProps> = ({
-    columns,
-    data,
-    onRowClickCallback,
-    sort,
-    darkMode = false,
-    multiSelect = false
-}) => {
-    const [listColumns, setListColumns] = React.useState<Column<object>[]>([]);
-    const [sortColumn, setSortColumn] = React.useState<SortColumn>();
-    const [items, setItems] = React.useState<any[]>([]);
-    const [selectedRows, setSelectedRows] = React.useState<ReadonlySet<number>>(() => new Set());
-
-    //  Columns  ---
-    React.useEffect(() => {
-        setListColumns([
-            ...multiSelect ? [SelectColumn] : [],
-            ...columns.map(column => ({
-                key: column,
-                name: column,
-                resizable: true,
-                sortable: true,
-                minWidth: 80,
-            }))
-        ]);
-    }, [columns, multiSelect]);
-
-    const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
-        const futureSortColumn = sortColumns.slice(-1)[0];
-        const sorted = futureSortColumn !== undefined;
-        const isSortedDescending: boolean = futureSortColumn?.direction === "DESC";
-        setSortColumn(futureSortColumn);
-        setItems(copyAndSort(items, sorted ? futureSortColumn.columnKey : "key", sorted ? isSortedDescending : false));
-    }, [items]);
-
-    const rowKeyGetter = React.useCallback((row: any) => {
-        return row.key;
-    }, []);
-
-    const onSelectedRowsChange = React.useCallback((selectedRows: Set<any>) => {
-        setSelectedRows(selectedRows);
-        onRowClickCallback(items.filter(row => selectedRows.has(rowKeyGetter(row))));
-    }, [items, onRowClickCallback, rowKeyGetter]);
-
-    const onRowClick = React.useCallback((row, column) => {
-        onRowClickCallback(items.filter(item => rowKeyGetter(item) === rowKeyGetter(row)));
-    }, [items, onRowClickCallback, rowKeyGetter]);
-
-    //  Rows  ---
-    React.useEffect(() => {
-        let items = data.map((row, index) => {
-            const retVal = {
-                key: index
-            };
-            columns.forEach((column, index) => {
-                retVal[column] = row[index];
-            });
-            return retVal;
-        });
-        if (sort?.attribute) {
-            items = copyAndSort(items, sort.attribute, sort.descending);
-        }
-        setItems(items);
-    }, [columns, data, sort]);
-
-    return <DataGrid
-        columns={listColumns}
-        headerRowHeight={24}
-        rows={items}
-        rowKeyGetter={rowKeyGetter}
-        rowHeight={20}
-        className={darkMode ? "rdg-dark" : "rdg-light"}
-        sortColumns={sortColumn ? [sortColumn] : []}
-        onSortColumnsChange={onSortColumnsChange}
-        selectedRows={selectedRows}
-        onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
-        onRowClick={multiSelect ? undefined : onRowClick}
-        aria-describedby={""}
-        aria-label={""}
-        aria-labelledby={""}
-        style={{ height: "100%" }}
-    />;
-};
-
-export class Table extends HTMLWidget {
-
-    protected _div;
-
-    constructor() {
-        super();
-    }
-
-    @publish(false, "boolean", "Dark Mode")
-    darkMode: publish<this, boolean>;
-    @publish(false, "boolean", "Multiple Selection")
-    multiSelect: publish<this, boolean>;
-
-    _prevRow;
-    _prevColumn;
-    private renderTable() {
-        return <ReactTable columns={this.columns()} data={this.data()} darkMode={this.darkMode()} onRowClickCallback={(row, column = "") => {
-            if (this._prevRow && JSON.stringify(this._prevRow) !== JSON.stringify(row)) {
-                this.click(this._prevRow, this._prevColumn ?? "", false);
-            }
-            if (row) {
-                this.click(row, column, true);
-            }
-            this._prevRow = row;
-            this._prevColumn = column;
-        }} />;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._div = element
-            .append("div")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._div.style("width", this.width() + "px");
-        this._div.style("height", this.height() + "px");
-        React.render(this.renderTable(), this._div.node());
-    }
-
-    exit(domNode, element) {
-        React.unmountComponentAtNode(this._div.node());
-        this._div.remove();
-        super.exit(domNode, element);
-    }
-
-    //  Events  ---
-    click(row, col, sel) {
-    }
-}
-Table.prototype._class += " dgrid2_Table";

package/src/test.ts

@@ -1,41 +0,0 @@
-import { Table } from "./table";
-
-export { Test1 as Test };
-
-export class Test1 extends Table {
-
-    constructor() {
-        super();
-        this
-            .columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
-            .data([
-                ["A", -25, -23, -25, -22],
-                ["B", -20, -21, -25, -21],
-                ["C", -18, -20, -25, -19],
-                ["D", -17, -17, -25, -18],
-                ["E", -16, -15, -19, -18],
-                ["F", -15, -14, -16, -16],
-                ["G", -12, -10, -14, -15],
-                ["H", -12, -8, -13, -15],
-                ["I", -11, -6, -12, -12],
-                ["J", -11, -6, -8, -12],
-                ["K", -9, 0, -5, -10],
-                ["L", -5, 1, -5, -9],
-                ["M", -5, 2, -4, -8],
-                ["N", -1, 4, -2, -7],
-                ["O", 3, 7, 0, -5],
-                ["P", 3, 8, 0, -3],
-                ["Q", 4, 8, 7, 0],
-                ["R", 6, 9, 11, 1],
-                ["S", 9, 11, 11, 5],
-                ["T", 10, 20, 12, 6],
-                ["U", 12, 20, 16, 8],
-                ["V", 12, 21, 18, 14],
-                ["W", 14, 21, 18, 18],
-                ["X", 15, 23, 21, 18],
-                ["Y", 21, 23, 23, 21],
-                ["Z", 23, 24, 24, 24]
-            ])
-            ;
-    }
-}

package/types/test.d.ts

@@ -1,6 +0,0 @@
-import { Table } from "./table";
-export { Test1 as Test };
-export declare class Test1 extends Table {
-    constructor();
-}
-//# sourceMappingURL=test.d.ts.map

package/types/test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../src/test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,qBAAa,KAAM,SAAQ,KAAK;;CAoC/B"}

package/types-3.4/test.d.ts

@@ -1,6 +0,0 @@
-import { Table } from "./table";
-export { Test1 as Test };
-export declare class Test1 extends Table {
-    constructor();
-}
-//# sourceMappingURL=test.d.ts.map