(core) add grist.onRecord and grist.onRecords event handlers

Summary:
This simplifies writing custom widgets that access selected
data.  To access the record at which the cursor is set, and
get any future changes to it as the cursor moves or data
changes, it suffices now to do:

```
grist.ready();
grist.onRecord(record => /* render */);
```

Similarly to access the set of selected records, and get any
changes, it suffices now to do:

```
grist.ready();
grist.onRecords(records => /* render */);
```

The `records` argument will be a list of objects, each of which
is a single record.  This is distinct from the column-based
representation favored in Grist up ontil now.  That remains
how methods like `fetchTable` or `fetchSelectedTable` represent
their results.  In the future, methods named like `fetchRecords`
or `fetchSelectedRecords` could be added that return lists.

Test Plan: extended tests

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2583
This commit is contained in:
Paul Fitzpatrick 2020-08-13 14:13:16 -04:00
parent 4e11b6a922
commit ac5452c89f
6 changed files with 60 additions and 6 deletions

View File

@ -2,6 +2,10 @@
* This mirrors action definitions from sandbox/grist/actions.py
*/
// Some definitions have moved to be part of plugin API.
import { CellValue } from 'app/plugin/GristData';
export { CellValue, RowRecord } from 'app/plugin/GristData';
import map = require('lodash/map');
export type AddRecord = ['AddRecord', string, number, ColValues];
@ -83,7 +87,6 @@ export function getTableId(action: DocAction): string {
// Helper types used in the definitions above.
export type CellValue = number|string|boolean|null|[string, any?];
export interface ColValues { [colId: string]: CellValue; }
export interface BulkColValues { [colId: string]: CellValue[]; }
export interface ColInfoMap { [colId: string]: ColInfo; }
@ -98,11 +101,6 @@ export interface ColInfoWithId extends ColInfo {
id: string;
}
export interface RowRecord {
id: number;
[colId: string]: CellValue;
}
// Multiple records in column-oriented format, i.e. same as BulkColValues but with a mandatory
// 'id' column. This is preferred over TableDataAction in external APIs.
export interface TableColValues {

View File

@ -23,6 +23,7 @@ export const GristDocAPI = t.iface([], {
export const GristView = t.iface([], {
"fetchSelectedTable": t.func("any"),
"fetchSelectedRecord": t.func("any", t.param("rowId", "number")),
});
const exportedTypeSuite: t.ITypeSuite = {

View File

@ -96,4 +96,7 @@ export interface GristView {
// TODO: return type is Promise{[colId: string]: CellValue[]}> but cannot be specified because
// ts-interface-builder does not properly support index-signature.
fetchSelectedTable(): Promise<any>;
// Similar TODO to fetchSelectedTable for return type.
fetchSelectedRecord(rowId: number): Promise<any>;
}

6
app/plugin/GristData.ts Normal file
View File

@ -0,0 +1,6 @@
export type CellValue = number|string|boolean|null|[string, any?];
export interface RowRecord {
id: number;
[colId: string]: CellValue;
}

View File

@ -1,3 +1,6 @@
/**
* This module was automatically generated by `ts-interface-builder`
*/
import * as t from "ts-interface-checker";
// tslint:disable:object-literal-key-quotes
@ -16,9 +19,17 @@ export const GristColumn = t.iface([], {
"type": "string",
});
export const APIType = t.enumtype({
"ImportSourceAPI": 0,
"ImportProcessorAPI": 1,
"ParseOptionsAPI": 2,
"ParseFileAPI": 3,
});
const exportedTypeSuite: t.ITypeSuite = {
GristTable,
GristTables,
GristColumn,
APIType,
};
export default exportedTypeSuite;

View File

@ -19,6 +19,7 @@
// tslint:disable:no-console
import { GristAPI, GristDocAPI, GristView, RPC_GRISTAPI_INTERFACE } from './GristAPI';
import { RowRecord } from './GristData';
import { ImportSource, ImportSourceAPI, InternalImportSourceAPI } from './InternalImportSourceAPI';
import { RenderOptions, RenderTarget } from './RenderOptions';
import { checkers } from './TypeCheckers';
@ -45,6 +46,40 @@ export const docApi = {
export const on = rpc.on.bind(rpc);
// For custom widgets, add a handler that will be called whenever the
// row with the cursor changes - either by switching to a different row, or
// by some value within the row potentially changing. Handler may
// in the future be called with null if the cursor moves away from
// any row.
// TODO: currently this will be called even if the content of a different row
// changes.
export function onRecord(callback: (data: RowRecord | null) => unknown) {
on('message', async function(msg) {
if (!msg.tableId || !msg.rowId) { return; }
const rec = await docApi.fetchSelectedRecord(msg.rowId);
callback(rec);
});
}
// For custom widgets, add a handler that will be called whenever the
// selected records change. Handler will be called with a list of records.
export function onRecords(callback: (data: RowRecord[]) => unknown) {
on('message', async function(msg) {
if (!msg.tableId || !msg.dataChange) { return; }
const data = await docApi.fetchSelectedTable();
if (!data.id) { return; }
const rows: RowRecord[] = [];
for (let i = 0; i < data.id.length; i++) {
const row: RowRecord = {id: data.id[i]};
for (const key of Object.keys(data)) {
row[key] = data[key][i];
}
rows.push(row);
}
callback(rows);
});
}
/**
* Calling `addImporter(...)` adds a safeBrowser importer. It is a short-hand for forwarding calls
* to an `ImportSourceAPI` implementation registered in the file at `path`. It takes care of