@box-kite/react 2.2.4 → 2.2.5

package/components/dataGrid/models/gridModel.d.ts

@@ -9,6 +9,7 @@ import { default as EditModel } from './editModel';
 import { default as ExportModel } from './exportModel';
 import { default as FilterModel } from './filterModel';
 import { default as GroupRowModel } from './groupRowModel';
+import { default as ListModel } from './listModel';
 import { DataGridLocaleText } from './localeText';
 import { default as PaginationModel } from './paginationModel';
 import { default as RangeModel } from './rangeModel';
@@ -239,6 +240,8 @@ export default class GridModel<TRow> {
     readonly edits: EditModel<TRow>;
     /** The current cell, the block of cells marked around it, and what the clipboard is written from. */
     readonly range: RangeModel<TRow>;
+    /** The grid drawn as a list, for a phone. */
+    readonly list: ListModel<TRow>;
     /**
      * Throw the fetched blocks away and ask for them again. The grid invalidates on its own whenever it
      * changes the query; this is for the half it cannot see — a filter of the page's own, a row somebody

package/components/dataGrid/models/listModel.d.ts

@@ -0,0 +1,129 @@
+import { FilterValue, Key } from '../contracts/dataGridContract';
+import { default as ColumnModel } from './columnModel';
+import { default as GridModel } from './gridModel';
+import { default as GroupRowModel } from './groupRowModel';
+import { default as RowModel } from './rowModel';
+/** 36rem: where Polaris, Roselli and the Scottish Government's tables all give up on columns. */
+export declare const DEFAULT_LIST_BREAKPOINT = 576;
+/** How many labelled values an item shows before the rest wait for the record view. */
+export declare const DEFAULT_LIST_FIELDS = 4;
+/** How many items one "Show more" adds — a couple of screens of phone. */
+export declare const DEFAULT_LIST_BATCH = 20;
+/** Which columns an item draws where. Every list is in column order. */
+export interface ListItemLayout<TRow> {
+    title?: ColumnModel<TRow>;
+    kicker?: ColumnModel<TRow>;
+    subtitle: ColumnModel<TRow>[];
+    end?: ColumnModel<TRow>;
+    fields: ColumnModel<TRow>[];
+    /** The columns only the record view shows. */
+    detail: ColumnModel<TRow>[];
+}
+/** One column filter that is set, the way its chip says it. */
+export interface ActiveFilterChip<TRow> {
+    column: ColumnModel<TRow>;
+    label: string;
+    value: string;
+}
+export type ListSheet = 'sort' | 'filter';
+/** One entry of the list, and where it sits in the grid's own rows — which is what a record is opened at. */
+export interface ListEntry<TRow> {
+    row: RowModel<TRow> | GroupRowModel<TRow>;
+    index: number;
+}
+/**
+ * The grid drawn for a phone: a list of items instead of a table. It decides when the grid switches, which
+ * column goes where in an item, how many items are drawn, which sheet is open, whether the list is selecting,
+ * and which row the record view is on. The rows, the filters and the sort stay the grid's — an item is another
+ * drawing of the same row, so whatever a table does to a row it does to an item.
+ */
+export default class ListModel<TRow> {
+    readonly grid: GridModel<TRow>;
+    constructor(grid: GridModel<TRow>);
+    private get config();
+    get breakpoint(): number;
+    private _width;
+    /** The grid's own width in px, 0 until something has measured it — which a server render never does. */
+    get width(): number;
+    /** Whether the grid draws a list. `auto` decides on the grid's own width rather than the viewport's. */
+    get active(): boolean;
+    /** Report the grid's width. Only crossing the breakpoint redraws anything. */
+    setWidth: (width: number) => void;
+    /**
+     * Which column goes where. A column's `list` role wins; otherwise the first data column is the title, the
+     * first end-aligned one — a total, an amount — sits opposite it, the next few are fields and the rest wait
+     * for the record view. A grouped column is its group's header, so it is not repeated in every item.
+     */
+    readonly layout: import('../../../utils/memo').Memo<{
+        title: ColumnModel<TRow> | undefined;
+        kicker: ColumnModel<TRow> | undefined;
+        subtitle: ColumnModel<TRow>[];
+        end: ColumnModel<TRow> | undefined;
+        fields: ColumnModel<TRow>[];
+        detail: ColumnModel<TRow>[];
+    }>;
+    /** Every column the record view lists, in column order. */
+    get recordColumns(): ColumnModel<TRow>[];
+    private get batch();
+    private _limit?;
+    /**
+     * What the list is a list of. A different answer is a different list, so "Show more" starts again from one
+     * batch — while opening a group or a detail panel changes the rows and not the question, and keeps what the
+     * reader has already scrolled through.
+     */
+    private get query();
+    /** Where the list is cut: whole batches, or nowhere when the grid is paginated, since a page is the batch. */
+    private get count();
+    private _more;
+    /**
+     * The entries drawn now, up to the cut — a detail panel is drawn inside its own item. A walk from the top
+     * rather than a filter, because a datasource's list is lazy and walking all of it is a model per row.
+     */
+    get visibleItems(): ListEntry<TRow>[];
+    /** Whether entries are left past the cut. Read after `visibleItems`, which is what measures it. */
+    get hasMore(): boolean;
+    /** How many entries the next "Show more" adds. Read after `visibleItems`. */
+    get nextBatch(): number;
+    showMore: () => void;
+    private _selecting;
+    /**
+     * Whether a press on an item ticks it rather than opening it. Selection is a mode on a phone — iOS's edit
+     * mode, Android's contextual bar — because a checkbox on every item is a target a thumb hits by accident.
+     */
+    get selecting(): boolean;
+    setSelecting: (selecting: boolean) => void;
+    /** The id of a row's checkbox, which the item's title is the label of — so a press anywhere on the item ticks it. */
+    checkboxId(key: Key): string;
+    private _sheet;
+    /** Which bottom sheet is open — the sort or the filters — or `null`. */
+    get sheet(): ListSheet | null;
+    openSheet: (sheet: ListSheet | null) => void;
+    /** The columns the sort sheet offers. */
+    get sortableColumns(): ColumnModel<TRow>[];
+    /** The column the grid is sorted by, when it is one the sheet offers. */
+    get sortedColumn(): ColumnModel<TRow> | undefined;
+    /** The columns the filter sheet offers. */
+    get filterableColumns(): ColumnModel<TRow>[];
+    /** Every column filter that is set, the way a chip says it. */
+    get activeFilters(): ActiveFilterChip<TRow>[];
+    /** A filter in words: `“ali”`, `≥ 30`, `20–40`, `Japan, Spain +2`. */
+    describe(column: ColumnModel<TRow>, filter: FilterValue): string;
+    private _record;
+    /** The row the record view is showing, or `undefined` while it is shut. */
+    get record(): RowModel<TRow> | undefined;
+    /** Whether pressing an item opens its record. */
+    get recordViewEnabled(): boolean;
+    /** Open the record view on a row, at its index in the grid's rows. */
+    openRecord: (row: RowModel<TRow>, index: number) => void;
+    closeRecord: () => void;
+    private neighbour;
+    get hasPreviousRecord(): boolean;
+    get hasNextRecord(): boolean;
+    /** Step to the record before or after this one, past group headers and detail panels. */
+    stepRecord: (step: 1 | -1) => void;
+    /** Where the record sits among the rows — "3 of 40" — counting rows, not group headers. */
+    get recordPosition(): {
+        position: number;
+        total: number;
+    } | undefined;
+}

package/components/dataGrid/models/localeText.d.ts

@@ -101,6 +101,38 @@ export interface DataGridLocaleText {
     previousPage: string;
     nextPage: string;
     lastPage: string;
+    /** The sort button before anything is sorted, and the sort sheet's title. */
+    sortBy: string;
+    /** The sort button once a column is sorted: the column and the direction. */
+    sortedBy: (column: string, descending: boolean) => string;
+    ascending: string;
+    descending: string;
+    /** The filters button and the filter sheet's title. */
+    filters: string;
+    /** The filters button's accessible name, with how many are set. */
+    filtersLabel: (count: number) => string;
+    /** The filter sheet's main button: it closes the sheet and says how many rows are left. */
+    showRows: (count: number) => string;
+    /** What closes a sheet or the record view. */
+    close: string;
+    /** The button under the cards: how many the next press adds. */
+    showMore: (count: number) => string;
+    /** Under the cards: how many of the rows are drawn. */
+    shownCount: (shown: number, total: number) => string;
+    /** The record view's pager: "3 of 40". */
+    recordPosition: (position: number, total: number) => string;
+    previousRow: string;
+    nextRow: string;
+    /** The heading over a `rowDetail` panel in the record view. */
+    details: string;
+    /** The toggle that puts the list into selecting, where a press ticks a row rather than opening it. */
+    selectRows: string;
+    clearSearch: string;
+    /** The record view's button beside an editable value; its name is `editCell`. */
+    edit: string;
+    /** The list's selection bar: how many rows are ticked, short enough for a phone's width. */
+    selectedRows: (count: number) => string;
+    selectAll: string;
     /** What the live region says when the selection changes. */
     selectionAnnouncement: (selected: number, total: number) => string;
 }

package/components/dataGrid/models/viewportModel.d.ts

@@ -59,7 +59,5 @@ export default class ViewportModel<TRow> {
     get emptyHeight(): number;
     /** Where a row sits inside the scrolled body — what a keyboard jump scrolls to. */
     rowTop(index: number): number;
-    /** Binary search for the first row whose offset is <= scrollTop (variable-height rows). */
-    private findStartIndex;
     window(scrollTop: number, direction?: ScrollDirection): ViewportWindow;
 }

package/components/dataGrid/useListLayout.d.ts

@@ -0,0 +1,13 @@
+import { default as DataGridList } from './components/dataGridList';
+type ListLayout = typeof DataGridList;
+/**
+ * Fetch the list layout. It is a chunk of its own — the sheets, the record view and the `<dialog>` under them
+ * are 10 KB gzipped a wide screen never draws — so it is asked for the first time a grid is narrow.
+ */
+export declare function loadListLayout(): Promise<ListLayout>;
+/**
+ * The list layout's component once it has arrived, or `undefined` while the grid should go on drawing its
+ * table. No `React.lazy`: a Suspense boundary is the one thing a React 16 or 17 server cannot render.
+ */
+export default function useListLayout(active: boolean): ListLayout | undefined;
+export {};