native-document 1.0.15 → 1.0.16-8.2

package/src/components/table/SimpleTable.js

@@ -0,0 +1,139 @@
+import Column from './Column';
+import ColumnGroup from './ColumnGroup';
+import BaseComponent from '../BaseComponent';
+
+/**
+ *
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
+export default function SimpleTable(props = {}) {
+    if(!(this instanceof SimpleTable)) {
+        return new SimpleTable(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        header:      [],
+        columns:     [],
+        hasGroups:   false,
+        data:        null,
+        empty:       null,
+        onRowClick:  null,
+        rowProps:    null,
+        noHeader:    null,
+        cellProps:   null,
+        headerProps: null,
+        props,
+    };
+}
+
+BaseComponent.extends(SimpleTable);
+
+SimpleTable.defaultTemplate = null;
+
+/**
+ * Registers the render template for SimpleTable.
+ * @param {(description: {
+ *     header: Array<Column|ColumnGroup>,
+ *     columns: Column[],
+ *     data: *[]|Observable<*[]>|null,
+ *     empty: NdChild|null,
+ *     onRowClick: ((row: *, event: MouseEvent) => void)|null,
+ *     rowProps: ((row: *) => GlobalAttributes)|null,
+ *     noHeader: boolean|null,
+ *     props: GlobalAttributes,
+ * }, instance: SimpleTable) => NdChild} template
+ */
+SimpleTable.use = function(template) {
+    SimpleTable.defaultTemplate = template;
+};
+
+/**
+ * @param {GlobalAttributes} [props]
+ * @returns {SimpleTable}
+ */
+SimpleTable.create = function(props) {
+    return new SimpleTable(props);
+};
+
+/**
+ * @param {string} key
+ * @param {NdChild} title
+ * @param {GlobalAttributes} [props]
+ * @param {((col: Column) => void)} [callback]
+ * @returns {this}
+ */
+SimpleTable.prototype.column = function(key, title, props, callback) {
+    if(typeof props === 'function') {
+        callback = props;
+        props = {};
+    }
+    const column = new Column(key);
+    column.title(title);
+    column.props(props);
+    callback && callback(column);
+    this.$description.columns.push(column);
+    this.$description.header.push(column);
+    return this;
+};
+
+/**
+ * @param {NdChild} title
+ * @param {(group: ColumnGroup) => void} callback
+ * @returns {this}
+ */
+SimpleTable.prototype.group = function(title, callback) {
+    const group = new ColumnGroup(title);
+    callback && callback(group);
+    this.$description.columns.push(...group.columns());
+    this.$description.header.push(group);
+    this.$description.hasGroups = true;
+    return this;
+};
+
+/**
+ * @param {*} data
+ * @returns {this}
+ */
+SimpleTable.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+/**
+ * @param {NdChild} content
+ * @returns {this}
+ */
+SimpleTable.prototype.empty = function(content) {
+    this.$description.empty = content;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+SimpleTable.prototype.noHeader = function() {
+    this.$description.noHeader = true;
+    return this;
+};
+
+/**
+ * @param {(row: *, event: MouseEvent) => void} handler
+ * @returns {this}
+ */
+SimpleTable.prototype.onRowClick = function(handler) {
+    this.$description.onRowClick = handler;
+    return this;
+};
+
+/**
+ * @param {(row: *) => GlobalAttributes} fn
+ * @returns {this}
+ */
+SimpleTable.prototype.rowProps = function(fn) {
+    this.$description.rowProps = fn;
+    return this;
+};

package/src/components/table/index.js

@@ -0,0 +1,7 @@
+import SimpleTable from './SimpleTable';
+import DataTable from './DataTable';
+
+export {
+    SimpleTable,
+    DataTable,
+};

package/src/components/table/types/Column.d.ts

@@ -0,0 +1,49 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ColumnDescription = {
+        key: string;
+        align: 'left' | 'center' | 'right' | null;
+        searchable: boolean | null;
+        visible: ObservableItem<boolean> | boolean | null;
+        header: ValidChild | null;
+        render: ((value: unknown, row: unknown, index: number) => ValidChild) | null;
+        colspan: number | null;
+        pinned: 'left' | 'right' | null;
+        rowspan: number | null;
+        sortable: boolean | ((a: unknown, b: unknown) => number) | null;
+        onClick: ((value: unknown, row: unknown, event: MouseEvent) => void) | null;
+        props: GlobalAttributes;
+    };
+
+export interface ColumnInterface {
+    sortable(customSortFn?: ((a: unknown, b: unknown) => number) | null): this;
+    searchable(): this;
+    hidden(): this;
+    props(props?: Record<string, unknown>): this;
+    pinned(orientation: 'left' | 'right'): this;
+    pinnedAtLeft(): this;
+    pinnedAtRight(): this;
+    visible(condition?: boolean | ObservableItem<boolean>): this;
+    align(align: 'left' | 'center' | 'right'): this;
+    center(): this;
+    right(): this;
+    header(template: ValidChild): this;
+    title(title: ValidChild): this;
+    colspan(count: number): this;
+    rowspan(count: number): this;
+    render(fn: (value: unknown, row: unknown, index: number) => ValidChild): this;
+    value(fn: (row: unknown) => unknown): this;
+    onClick(handler: (value: unknown, row: unknown, event: MouseEvent) => void): this;
+}
+
+
+export declare function Column(key: string, props?: Record<string, unknown>): ColumnInterface;
+export declare namespace Column {
+
+
+    function use(template: (description: ColumnDescription, instance: ColumnInterface) => ValidChild): void;
+
+
+}

package/src/components/table/types/ColumnGroup.d.ts

@@ -0,0 +1,28 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ColumnInterface } from './Column';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ColumnGroupDescription = {
+        header: ValidChild;
+        columns: ColumnInterface[];
+        align: 'left' | 'center' | 'right' | null;
+        props: GlobalAttributes;
+    };
+
+export interface ColumnGroupInterface {
+    column(key: string, title: ValidChild, callback?: (col: ColumnInterface) => void): this;
+    title(title: ValidChild): this;
+    header(title: ValidChild): this;
+    columns(): ColumnInterface[];
+    align(align: 'left' | 'center' | 'right'): this;
+}
+
+
+export declare function ColumnGroup(title: ValidChild, props?: Record<string, unknown>): ColumnGroupInterface;
+export declare namespace ColumnGroup {
+
+
+    function use(template: (description: ColumnGroupDescription, instance: ColumnGroupInterface) => ValidChild): void;
+
+
+}

package/src/components/table/types/DataTable.d.ts

@@ -0,0 +1,97 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { ColumnInterface } from './Column';
+import type { ColumnGroupInterface } from './ColumnGroup';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type DataTableDescription = {
+        header: Array<ColumnInterface | ColumnGroupInterface>;
+        columns: ColumnInterface[];
+        hasGroups: boolean;
+        data: unknown[] | ObservableItem<unknown[]> | null;
+        total: number | ObservableItem<number> | null;
+        mode: 'client' | 'server';
+        loading: boolean | ObservableItem<boolean> | null;
+        error: ValidChild | null;
+        defaultSort: { col: string; dir: 'asc' | 'desc' } | null;
+        multiSort: boolean;
+        searchable: boolean;
+        filterable: boolean;
+        defaultFilters: Record<string, unknown> | null;
+        pageSize: number | null;
+        pageSizes: number[] | null;
+        defaultPage: number;
+        selectable: boolean;
+        multiSelect: boolean;
+        editable: boolean;
+        expandable: ((row: unknown) => ValidChild) | null;
+        masterDetail: ((row: unknown) => ValidChild) | null;
+        bulkActions: Array<{ label: ValidChild; action: (rows: unknown[]) => void }> | null;
+        rowProps: ((row: unknown) => GlobalAttributes) | null;
+        empty: ValidChild | null;
+        layout: ((desc: DataTableDescription, instance: DataTableInterface) => ValidChild) | null;
+        labels: Record<string, string>;
+        props: GlobalAttributes;
+    };
+
+export interface DataTableInterface extends BaseComponent {
+    column(key: string, title: ValidChild, props?: Record<string, unknown>, callback?: (col: ColumnInterface) => void): this;
+    group(title: ValidChild, callback: (group: ColumnGroupInterface) => void): this;
+    data(data: unknown[] | ObservableItem<unknown[]>): this;
+    total(total: number | ObservableItem<number>): this;
+    clientSide(): this;
+    serverSide(): this;
+    loading(loading: boolean | ObservableItem<boolean>): this;
+    error(error: ValidChild | string): this;
+    defaultSort(col: string, dir?: 'asc' | 'desc'): this;
+    multiSort(enabled?: boolean): this;
+    onSort(handler: (col: string, dir: 'asc' | 'desc') => void): this;
+    searchable(enabled?: boolean): this;
+    filterable(enabled?: boolean): this;
+    defaultFilters(filters: Record<string, unknown>): this;
+    onSearch(handler: (query: string) => void): this;
+    onFilter(handler: (filters: unknown) => void): this;
+    pagination(pageSize: number): this;
+    pageSizes(sizes: number[]): this;
+    defaultPage(page: number): this;
+    onPage(handler: (page: number, pageSize: number) => void): this;
+    selectable(enabled?: boolean): this;
+    multiSelect(enabled?: boolean): this;
+    selectedRows(obs: ObservableItem<unknown[]>): this;
+    onSelect(handler: (rows: unknown[]) => void): this;
+    editable(enabled?: boolean): this;
+    onEdit(handler: (row: unknown, col: string, value: unknown) => void): this;
+    onEditCancel(handler: () => void): this;
+    export(label: ValidChild, format: 'csv' | 'xlsx' | string, filename?: string): this;
+    exportFileName(name: string): this;
+    onExport(handler: (format: string) => void): this;
+    expandable(renderFn: (row: unknown) => ValidChild, isExpandedIcon?: ValidChild, isNotExpandedIcon?: ValidChild): this;
+    masterDetail(renderFn: (row: unknown) => ValidChild): this;
+    bulkActions(actions: Array<{ label: ValidChild; action: (rows: unknown[]) => void }>): this;
+    render(renderFn: (description: DataTableDescription, instance: DataTableInterface) => ValidChild): this;
+    rowProps(fn: (row: unknown) => Record<string, unknown>): this;
+    onRowClick(handler: (row: unknown, event: MouseEvent) => void): this;
+    onRowDoubleClick(handler: (row: unknown, event: MouseEvent) => void): this;
+    onRowHover(handler: (row: unknown, event: MouseEvent) => void): this;
+    render(renderFn: (desc: DataTableDescription, instance: DataTableInterface) => ValidChild): this;
+    layout(layoutFn: (desc: DataTableDescription, instance: DataTableInterface) => ValidChild): this;
+    labels(labels: Record<string, string>): this;
+    persist(key: string, options?: Record<string, unknown>): this;
+    refresh(): this;
+    clearSelection(): this;
+    clearFilters(): this;
+    goToPage(page: number): this;
+    empty(content: ValidChild): this;
+}
+
+
+export declare function DataTable(props?: Record<string, unknown>): DataTableInterface;
+export declare namespace DataTable {
+
+
+    function use(template: (description: DataTableDescription, instance: DataTableInterface) => ValidChild): void;
+    function create(props?: Record<string, unknown>): DataTableInterface;
+
+
+}

package/src/components/table/types/SimpleTable.d.ts

@@ -0,0 +1,40 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { ColumnInterface } from './Column';
+import type { ColumnGroupInterface } from './ColumnGroup';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type SimpleTableDescription = {
+        header: Array<ColumnInterface | ColumnGroupInterface>;
+        columns: ColumnInterface[];
+        hasGroups: boolean;
+        data: unknown[] | ObservableItem<unknown[]> | null;
+        empty: ValidChild | null;
+        onRowClick: ((row: unknown, event: MouseEvent) => void) | null;
+        rowProps: ((row: unknown) => GlobalAttributes) | null;
+        noHeader: boolean | null;
+        props: GlobalAttributes;
+    };
+
+export interface SimpleTableInterface extends BaseComponent {
+    column(key: string, title: ValidChild, props?: Record<string, unknown>, callback?: (col: ColumnInterface) => void): this;
+    group(title: ValidChild, callback: (group: ColumnGroupInterface) => void): this;
+    data(data: unknown[] | ObservableItem<unknown[]>): this;
+    empty(content: ValidChild): this;
+    noHeader(): this;
+    render(renderFn: (description: SimpleTableDescription, instance: SimpleTableInterface) => ValidChild): this;
+    onRowClick(handler: (row: unknown, event: MouseEvent) => void): this;
+    rowProps(fn: (row: unknown) => Record<string, unknown>): this;
+}
+
+
+export declare function SimpleTable(props?: Record<string, unknown>): SimpleTableInterface;
+export declare namespace SimpleTable {
+
+
+    function use(template: (description: SimpleTableDescription, instance: SimpleTableInterface) => ValidChild): void;
+    function create(props?: Record<string, unknown>): SimpleTableInterface;
+
+
+}