@layers-app/shared 0.0.34 → 0.0.37

package/dist/components/table/store.d.ts

@@ -0,0 +1,98 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { TableAPI } from './api';
+import { TableFilterComparisonOption, TableFilterSettings, TableFilterValue } from './helpers/filter';
+import { TableColumnState, TableColumnType, TableProps, TableSortModel } from './types';
+export type UseStore = UseBoundStore<StoreApi<Store>>;
+export interface TableFilterRow extends TableFilterSettings {
+    id: string;
+    field: {
+        value: string;
+        label: string;
+        type: TableColumnType;
+    };
+    comparison: TableFilterComparisonOption;
+    value: TableFilterValue;
+}
+export type Store = {
+    sort: TableSortModel | null;
+    page: number;
+    pageSize: number;
+    selected: string[];
+    expanded: string[];
+    pinnedTop: string[];
+    pinnedBottom: string[];
+    search: string;
+    columnsState: Partial<Record<string, Partial<TableColumnState>>>;
+    filterState: {
+        rows: TableFilterRow[];
+        combiner: 'and' | 'or';
+    };
+    props: Required<TableProps>;
+    rootRef: HTMLDivElement;
+    scrollRef: HTMLDivElement;
+    api: TableAPI;
+};
+export type CreateTableStoreProps = {
+    defaultPage?: number;
+    defaultSort?: TableSortModel;
+    defaultPageSize?: number;
+    defaultSearch?: string;
+    defaultPinnedTop?: string[];
+    defaultPinnedBottom?: string[];
+    id?: string;
+    saveState?: boolean;
+};
+export declare const createTableStore: (props?: CreateTableStoreProps) => {
+    useStore: UseBoundStore<Omit<StoreApi<Store>, "persist"> & {
+        persist: {
+            setOptions: (options: Partial<import('zustand/middleware').PersistOptions<Store, {
+                page: number;
+                sort: TableSortModel | null;
+                search: string;
+                pageSize: number;
+            }>>) => void;
+            clearStorage: () => void;
+            rehydrate: () => Promise<void> | void;
+            hasHydrated: () => boolean;
+            onHydrate: (fn: (state: Store) => void) => () => void;
+            onFinishHydration: (fn: (state: Store) => void) => () => void;
+            getOptions: () => Partial<import('zustand/middleware').PersistOptions<Store, {
+                page: number;
+                sort: TableSortModel | null;
+                search: string;
+                pageSize: number;
+            }>>;
+        };
+    }>;
+    api: {
+        setPageSize: (v: number) => void;
+        setPage: (v: number) => void;
+        setSort: (v: TableSortModel | null) => void;
+        downloadCSV: () => void;
+        downloadExcel: () => void;
+        setSelected: (selected: string[]) => void;
+        toggleColumn: (v: string) => void;
+        setVisibleColumns: (v: string[]) => void;
+        setSearch: (v: string) => void;
+        setPrevPage: () => void;
+        setNextPage: () => void;
+        setColumnWidth: (field: string, setWidth: number) => void;
+        toggleRowExpand: (id: string) => void;
+        setHeaderWidth: (id: string, width: number) => void;
+        setRootRef: (rootRef: HTMLDivElement) => void;
+        setScrollRef: (scrollRef: HTMLDivElement) => void;
+        calculateColumnWidths: (clear?: boolean) => void;
+        selectVisibleRows: () => void;
+        unselectVisibleRows: () => void;
+        unselectRow: (id: string) => void;
+        selectRow: (id: string) => void;
+        addFilterRow: (field?: string) => void;
+        removeFilterRow: (id: string) => void;
+        changeFilterRow: ({ id, ...newRow }: Pick<TableFilterRow, "id"> & Partial<Omit<TableFilterRow, "id">>) => void;
+        setFilterCombiner: (combiner: "and" | "or") => void;
+        clearFilter: () => void;
+        setAutosize: () => void;
+        removeAutosize: () => void;
+    };
+};
+export type CreateTableReturn = ReturnType<typeof createTableStore>;

package/dist/components/table/types.d.ts

@@ -0,0 +1,104 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Numbers } from './helpers/formatters';
+export type TableProps<ITEM extends TableRowModel = TableRowModel> = {
+    rows: ITEM[];
+    columns: TableColumnsProp<ITEM>;
+    loading?: boolean;
+    selection?: boolean;
+    sorting?: boolean;
+    searching?: boolean;
+    pagination?: boolean;
+    expanding?: boolean;
+    virtualization?: boolean;
+    pageSizeOptions?: number[];
+    rowCount?: number | null;
+    rowHeight?: number;
+    headerHeight?: number;
+    exportFileName?: string;
+};
+export type TableRowModel = {
+    id: string;
+    __children?: TableRowModel[];
+};
+export type TableColumnAlign = 'left' | 'right' | 'center';
+export type TableColumnPin = 'left' | 'right';
+export type TableRowPin = 'left' | 'right';
+export type TableExportSettings<ITEM = TableRowModel> = {
+    header?: string;
+    value?: (item: ITEM, value: any) => string | number | null;
+};
+export declare const tableColumnNumberTypes: readonly ["number", "currency", "percent", "ratio"];
+export type TableColumnNumberType = (typeof tableColumnNumberTypes)[number];
+export declare const tableColumnDateTypes: readonly ["day", "month", "quarter", "year", "datetime", "date"];
+export type TableColumnDateType = (typeof tableColumnDateTypes)[number];
+export type TableColumnType = 'string' | 'boolean' | TableColumnNumberType | TableColumnDateType;
+export type TableColumnsProp<ITEM extends TableRowModel = TableRowModel, COL extends TableColumnDef<ITEM> = TableColumnDef<ITEM>> = (COL | TableColumnGroupDef<ITEM, COL>)[];
+export type TableColumnGroupDef<ITEM extends TableRowModel = TableRowModel, COL extends TableColumnDef<ITEM> = TableColumnDef<ITEM>> = {
+    header: ReactNode;
+    id: string;
+    children: TableColumnsProp<ITEM, COL>;
+    headerStyle?: CSSProperties;
+};
+export type TableColumnDef<ITEM = TableRowModel> = {
+    field: string;
+    sortField?: string;
+    header: ReactNode;
+    headerTooltip?: ReactNode;
+    hidden?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: TableColumnAlign;
+    render?: (item: ITEM, value: any) => ReactNode;
+    cellStyle?: CSSProperties;
+    fullCellStyle?: CSSProperties;
+    headerStyle?: CSSProperties;
+    headerContentStyle?: CSSProperties;
+    sortable?: boolean;
+    pinned?: TableColumnPin;
+    resizable?: boolean;
+    exportable?: boolean;
+    filterable?: boolean;
+    filters?: {
+        field: string;
+        title: string;
+        type?: TableColumnType;
+    }[];
+    group?: string;
+    exportSettings?: TableExportSettings<ITEM> | TableExportSettings<ITEM>[];
+    management?: {
+        show: boolean;
+    };
+    width?: number;
+    flex?: number;
+    children?: TableColumnDef<ITEM>[];
+    aggregation?: {
+        type?: 'sum' | 'avg' | 'min' | 'max' | 'count';
+        render?: (value: ITEM[]) => ReactNode;
+    };
+    type?: TableColumnType | ({
+        type: 'number' | 'ratio';
+    } & Numbers.FormatterProps) | ({
+        type: 'percent';
+    } & Numbers.FormatterProps) | ({
+        type: 'currency';
+    } & Numbers.FormatterProps) | ({
+        type: 'date';
+    } & DateColumnProps);
+};
+export type TableSortDirection = 'desc' | 'asc';
+export type TableSortModel = {
+    field: string;
+    sort: TableSortDirection;
+};
+export type TableColumnState = TableColumnDef & {
+    id: string;
+    computedWidth?: number;
+    setWidth?: number;
+    finalWidth?: number;
+};
+export type RowMeta = {
+    main: boolean;
+};
+export type DateColumnProps = {
+    format?: string;
+};