@uxf/data-grid 10.0.7 → 11.0.0-beta.2

package/types/components.d.ts

@@ -1,13 +1,6 @@
-import { PaginationProps } from "@uxf/ui/pagination/pagination";
-import React, { ComponentType, FC, ReactElement, ReactNode } from "react";
-import { RenderCheckboxProps } from "react-data-grid";
-import { RequestFilter, Response } from "./api";
-import { ChangeHiddenColumnsHandler, CsvDownloadHandler } from "./core";
-import { BaseGridType, Columns, Filter, Filters, Schema } from "./schema";
-import { DataGridState } from "./state";
-/**
- * Action cell
- */
+import { ComponentType, FC } from "react";
+import { RequestFilter } from "./api";
+import { BaseGridType, Columns, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
     onOpen?: (row: R) => void;
@@ -15,47 +8,20 @@ export interface ActionCellProps<R> {
     onEdit?: (row: R) => void;
     getEditUrl?: (row: R) => string | null | undefined;
     onRemove?: (row: R, reload: () => void) => void;
-    reload: () => Promise<void>;
+    reload: () => void;
 }
 export type ActionCellComponent<R> = FC<ActionCellProps<R>>;
-/**
- * Body cell
- */
 export interface BodyCellProps<C, R> {
     value: any;
     column: C;
     row: R;
-    reload: () => Promise<void>;
+    reload: () => void;
 }
 export type BodyCellComponent<C extends BaseGridType["columns"], R> = ComponentType<BodyCellProps<Columns<C>, R>>;
 export type BodyCellComponents<C, R> = {
     [key: string]: BodyCellComponent<C, R>;
     default: BodyCellComponent<C, R>;
 };
-/**
- * Container
- */
-export interface ContainerProps {
-    noBorder?: boolean;
-    children: ReactNode;
-    className?: string;
-}
-export type ContainerComponent = FC<ContainerProps>;
-/**
- * Filter list
- */
-export interface FilterListProps<F extends Filter<any, any>, T> {
-    gridName?: string;
-    filters: F[];
-    filtersData: RequestFilter<T>[];
-    onFilter: (value: RequestFilter<T>) => void;
-    filterHandlers: FilterHandlers;
-    noBorder: boolean | null | undefined;
-}
-export type FilterListComponent<F extends BaseGridType["filters"], T = any> = ComponentType<FilterListProps<Filters<F>, T>>;
-/**
- * Filters
- */
 export interface FilterProps<F extends Filter<any, any>, T> {
     gridName?: string;
     filter: F;
@@ -63,124 +29,3 @@ export interface FilterProps<F extends Filter<any, any>, T> {
     onFilter: (value: RequestFilter<T>) => void;
     onClear: () => void;
 }
-export type FilterComponent<F extends BaseGridType["filters"], T = any> = ComponentType<FilterProps<Filters<F>, T>>;
-export interface FilterHandler {
-    input: FilterComponent<any>;
-    listItem: FilterComponent<any>;
-}
-export interface FilterHandlers {
-    [key: string]: FilterHandler;
-}
-/**
- * Footer
- */
-export interface FooterProps {
-    children: ReactNode;
-    noBorder?: boolean;
-}
-export type FooterComponent = FC<FooterProps>;
-/**
- * Linear progress
- */
-export interface LinearProgressProps {
-    loading: boolean;
-}
-export type LinearProgressComponent = FC<LinearProgressProps>;
-/**
- * No rows fallback
- */
-export interface NoRowsFallbackProps {
-    error?: any;
-    loading: boolean;
-}
-export type NoRowsFallbackComponent = React.FC<NoRowsFallbackProps>;
-/**
- * Pagination
- */
-export type PaginationComponent = React.FC<PaginationProps>;
-/**
- * Pagination rows per page select
- */
-export interface PaginationRowsPerPageSelectProps {
-    value: number;
-    onChange: (value: number) => void;
-}
-export type PaginationRowsPerPageSelectComponent = FC<PaginationRowsPerPageSelectProps>;
-/**
- * Pagination counts
- */
-export interface PaginationCountsProps {
-    page: number;
-    perPage: number;
-    response?: Response;
-}
-export type PaginationCountsComponent = FC<PaginationCountsProps>;
-/**
- * Selected rows toolbar
- */
-export interface SelectedRowsToolbarProps {
-    selectedRows?: Set<number>;
-    onChangeSelectedRows?: (rows: Set<number>) => void;
-    Actions?: SelectedRowsToolbarActionsComponent;
-    reload: () => Promise<void>;
-}
-export type SelectedRowsToolbarComponent = FC<SelectedRowsToolbarProps>;
-/**
- * Select row checkbox
- */
-export type SelectRowCheckboxComponent = React.FC<RenderCheckboxProps>;
-/**
- * Selected rows toolbar actions
- */
-export interface SelectedRowsToolbarActionsProps {
-    selectedRows: Set<number>;
-    onChangeSelectedRows: (rows: Set<number>) => void;
-    reload: () => Promise<void>;
-}
-export type SelectedRowsToolbarActionsComponent = FC<SelectedRowsToolbarActionsProps>;
-/**
- * Toolbar
- */
-export interface ToolbarProps {
-    children: ReactNode;
-    noBorder?: boolean;
-}
-export type ToolbarComponent = FC<ToolbarProps>;
-/**
- * Toolbar control
- */
-export interface ToolbarControlProps {
-    gridName: string | undefined;
-    schema: Schema<any>;
-    dispatch: (action: any) => void;
-    filterHandlers: FilterHandlers;
-    onFulltextChange: (value: string) => void;
-    noBorder: boolean | null | undefined;
-    onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
-    onCsvDownload?: CsvDownloadHandler;
-    hiddenColumns?: string[];
-    showFulltext?: boolean;
-    state: DataGridState;
-}
-export type ToolbarControlComponent = React.FC<ToolbarControlProps>;
-/**
- * Toolbar customs
- */
-export interface ToolbarCustomsProps {
-    buttons?: {
-        label: string | ReactElement;
-        onClick?: () => void;
-        href?: string;
-        variant?: "default" | "outlined" | "text";
-    }[];
-}
-export type ToolbarCustomsComponent = React.FC<ToolbarCustomsProps>;
-/**
- * Toolbar tabs
- */
-export interface ToolbarTabsProps {
-    activeTab: string | null;
-    onChange: (tabName: string) => void;
-    schema: Schema<any>;
-}
-export type ToolbarTabsComponent = React.FC<ToolbarTabsProps>;

package/types/data-grid-props.d.ts

@@ -1,38 +1,31 @@
-import { MutableRefObject, ReactNode } from "react";
 import { DataGridProps as RDGProps } from "react-data-grid";
-import { Request } from "./api";
-import { ToolbarCustomsProps } from "./components";
-import { CallbackRef, ChangeHiddenColumnsHandler, Config, CsvDownloadHandler, KeyExtractor, Loader } from "./core";
+import { ToolbarCustomsProps } from "../toolbar-customs";
+import { DataGridControl } from "../use-data-grid-control";
+import { DataGridFetchingResult } from "../use-data-grid-fetching";
+import { CsvDownloadHandler, KeyExtractor } from "./core";
 import { BaseGridType, Schema } from "./schema";
 import { UIComponents } from "./ui-components";
-export type DataGridBaseProps<GridType extends BaseGridType, R> = {
-    callbackRef?: MutableRefObject<CallbackRef | undefined>;
+export type DataGridControlProps = DataGridControl;
+export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
+export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     schema: Schema<GridType>;
-    loader: Loader;
     gridName?: string;
-    title?: ReactNode;
     keyExtractor?: KeyExtractor;
-    initialState?: Request | string;
-    onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
     onCsvDownload?: CsvDownloadHandler;
-    hiddenColumns?: string[];
-    onChangeSelectedRows?: (selectedRows: Set<number>) => void;
-    selectedRows?: Set<number>;
-    onOpen?: (row: R) => void;
-    getOpenUrl?: (row: R) => string | null | undefined;
-    onEdit?: (row: R) => void;
-    getEditUrl?: (row: R) => string | null | undefined;
-    onRemove?: (row: R, reload: () => void) => void;
+    onOpen?: (row: Row) => void;
+    getOpenUrl?: (row: Row) => string | null | undefined;
+    onEdit?: (row: Row) => void;
+    getEditUrl?: (row: Row) => string | null | undefined;
+    onRemove?: (row: Row, reload: () => void) => void;
     noBorder?: boolean;
     rowHeight?: RDGProps<any>["rowHeight"];
     headerRowHeight?: RDGProps<any>["headerRowHeight"];
-    defaultConfig?: Config<GridType["columns"]>;
-    rowClass?: (row: R) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
+    rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     debug?: boolean;
     className?: string;
     customActions?: ToolbarCustomsProps["buttons"];
     mode?: "light" | "dark";
+    ui?: UIComponents<GridType, Row>;
+    isRowSelectable?: boolean;
 };
-export type DataGridProps<GridType extends BaseGridType, R> = DataGridBaseProps<GridType, R> & {
-    ui: UIComponents<GridType, R>;
-};
+export type DataGridProps<GridType extends BaseGridType, Row> = DataGridBaseProps<GridType, Row> & DataGridDataProps<Row> & DataGridControlProps;

package/types/state.d.ts

@@ -1,6 +1,6 @@
 import { RequestFilter, Response } from "./api";
 import { DataGridSortDir } from "./schema";
-type GridRequest = {
+export type GridRequest = {
     f: RequestFilter[];
     sort: string | null;
     dir: DataGridSortDir | null;
@@ -9,11 +9,15 @@ type GridRequest = {
     search: string;
     tab: string | null;
 };
+interface ColumnConfig {
+    isHidden: boolean;
+    width?: number;
+}
 export interface DataGridState {
-    loading?: boolean;
     response?: Response;
     request: GridRequest;
-    error?: any;
+    selectedRows?: any[];
+    columnConfig: Record<string, ColumnConfig>;
     tabRequests: {
         [tab: string]: GridRequest;
     };

package/types/ui-components.d.ts

@@ -1,4 +1,7 @@
-import { ActionCellComponent, BodyCellComponents, ContainerComponent, FilterHandlers, FilterListComponent, LinearProgressComponent, NoRowsFallbackComponent, PaginationComponent, PaginationCountsComponent, PaginationRowsPerPageSelectComponent, SelectedRowsToolbarActionsComponent, SelectedRowsToolbarComponent, SelectRowCheckboxComponent, ToolbarComponent, ToolbarControlComponent, ToolbarCustomsComponent, ToolbarTabsComponent } from "./components";
+import { FilterHandlers } from "../filter-handler";
+import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
+import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
+import { ActionCellComponent, BodyCellComponents } from "./components";
 import { BaseGridType } from "./schema";
 export type ActionCellWithRequiredWidth<R> = {
     ActionCell?: ActionCellComponent<R>;
@@ -8,20 +11,8 @@ export type ActionCellWithRequiredWidth<R> = {
     actionCellWidth?: never;
 };
 export type UIComponents<GridType extends BaseGridType, R> = {
-    BodyCells: BodyCellComponents<GridType["columns"], R>;
-    Container: ContainerComponent;
-    FilterHandlers: FilterHandlers;
-    FilterList: FilterListComponent<GridType["filters"], R>;
-    LinearProgress: LinearProgressComponent;
-    NoRowsFallback: NoRowsFallbackComponent;
-    Pagination: PaginationComponent;
-    PaginationCounts: PaginationCountsComponent;
-    PaginationRowsPerPageSelect: PaginationRowsPerPageSelectComponent;
-    SelectRowCheckbox: SelectRowCheckboxComponent;
-    SelectedRowsToolbar: SelectedRowsToolbarComponent;
+    BodyCells?: BodyCellComponents<GridType["columns"], R>;
+    FilterHandlers?: FilterHandlers;
+    NoRowsFallback?: NoRowsFallbackComponent;
     SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
-    Toolbar: ToolbarComponent;
-    ToolbarControl: ToolbarControlComponent;
-    ToolbarCustoms: ToolbarCustomsComponent;
-    ToolbarTabs: ToolbarTabsComponent;
 } & ActionCellWithRequiredWidth<R>;

package/use-data-grid-control/actions-factory.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch } from "react";
+import { RequestFilter } from "../types/api";
+export declare function createActions(dispatch: Dispatch<any>): {
+    changePage: (page: number) => void;
+    changePerPage: (perPage: number) => void;
+    filter: (filterValue: RequestFilter) => void;
+    sort: (columnName: string, direction: string) => void;
+    sortClear: () => void;
+    search: (search: string) => void;
+    changeTab: (tabName: string) => void;
+    setSelectedRows: (rows: any[]) => void;
+    hideColumn: (name: string) => void;
+    showColumn: (name: string) => void;
+};

package/use-data-grid-control/actions-factory.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createActions = void 0;
+function createActions(dispatch) {
+    return {
+        changePage: (page) => dispatch({ type: "CHANGE_PAGE", page }),
+        changePerPage: (perPage) => dispatch({ type: "CHANGE_PER_PAGE", perPage }),
+        filter: (filterValue) => dispatch({ type: "FILTER", filterValue }),
+        sort: (columnName, direction) => dispatch({ type: "SORT", columnName, direction }),
+        sortClear: () => dispatch({ type: "SORT_CLEAR" }),
+        search: (search) => dispatch({ type: "FULLTEXT", search }),
+        changeTab: (tabName) => dispatch({ type: "CHANGE_TAB", name: tabName }),
+        setSelectedRows: (rows) => dispatch({ type: "SET_SELECTED_ROWS", rows }),
+        hideColumn: (name) => dispatch({ type: "HIDE_COLUMN", name }),
+        showColumn: (name) => dispatch({ type: "SHOW_COLUMN", name }),
+    };
+}
+exports.createActions = createActions;

package/use-data-grid-control/index.d.ts

@@ -0,0 +1 @@
+export * from "./use-data-grid-control";

package/use-data-grid-control/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-data-grid-control"), exports);

package/use-data-grid-control/use-data-grid-control.d.ts

@@ -0,0 +1,25 @@
+import { Nullish } from "@uxf/core/types";
+import { Request } from "../types/api";
+import { Schema } from "../types/schema";
+interface Config {
+    schema: Schema<any>;
+    initialState?: Request | string | Nullish;
+    isDebug?: boolean;
+}
+export declare function useDataGridControl(config: Config): {
+    state: import("..").DataGridState;
+    actions: {
+        changePage: (page: number) => void;
+        changePerPage: (perPage: number) => void;
+        filter: (filterValue: import("../types/api").RequestFilter<any>) => void;
+        sort: (columnName: string, direction: string) => void;
+        sortClear: () => void;
+        search: (search: string) => void;
+        changeTab: (tabName: string) => void;
+        setSelectedRows: (rows: any[]) => void;
+        hideColumn: (name: string) => void;
+        showColumn: (name: string) => void;
+    };
+};
+export type DataGridControl = ReturnType<typeof useDataGridControl>;
+export {};

package/use-data-grid-control/use-data-grid-control.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridControl = void 0;
+const react_1 = require("react");
+const reducer_1 = require("../_store/reducer");
+const actions_factory_1 = require("./actions-factory");
+function useDataGridControl(config) {
+    const [state, dispatch] = (0, react_1.useReducer)(config.isDebug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(config.schema, config.initialState));
+    const actions = (0, react_1.useMemo)(() => (0, actions_factory_1.createActions)(dispatch), [dispatch]);
+    return { state, actions };
+}
+exports.useDataGridControl = useDataGridControl;

package/use-data-grid-fetching/index.d.ts

@@ -0,0 +1 @@
+export * from "./use-data-grid-fetching";

package/use-data-grid-fetching/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-data-grid-fetching"), exports);

package/use-data-grid-fetching/use-data-grid-fetching.d.ts

@@ -0,0 +1,16 @@
+import { Loader } from "../types/core";
+import { Schema } from "../types/schema";
+import { DataGridControl } from "../use-data-grid-control";
+interface Response<Row> {
+    result: Row[];
+    count: number;
+    totalCount: number;
+}
+export interface DataGridFetchingResult<Row> {
+    isLoading: boolean;
+    error?: any;
+    data: Response<Row> | null;
+    onReload: () => void;
+}
+export declare function useDataGridFetching(loader: Loader, schema: Schema<any>, gridName: string, state: DataGridControl["state"]): DataGridFetchingResult<any>;
+export {};

package/use-data-grid-fetching/use-data-grid-fetching.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridFetching = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+function useDataGridFetching(loader, schema, gridName, state) {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [data, setData] = (0, react_1.useState)(null);
+    const stringStateRequest = JSON.stringify(state.request);
+    const reload = (0, react_1.useCallback)(() => {
+        const stateRequest = JSON.parse(stringStateRequest);
+        const request = (0, utils_1.createRequest)(stateRequest, schema.sort, schema.dir);
+        loader(gridName, request, (0, utils_1.encodeFilter)(request))
+            .then((response) => {
+            setData(response);
+            setError(null);
+            setIsLoading(false);
+        })
+            .catch((e) => {
+            // eslint-disable-next-line no-console
+            console.error(e);
+            setIsLoading(false);
+            setError(e);
+        });
+    }, [stringStateRequest, schema.dir, schema.sort, loader, gridName]);
+    (0, react_1.useEffect)(() => {
+        reload();
+    }, [reload]);
+    return {
+        data,
+        isLoading,
+        error,
+        onReload: reload,
+    };
+}
+exports.useDataGridFetching = useDataGridFetching;

package/utils/classes.d.ts

@@ -0,0 +1 @@
+export declare const NO_BORDER_CLASS = "no-border";

package/utils/classes.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NO_BORDER_CLASS = void 0;
+exports.NO_BORDER_CLASS = "no-border";

package/utils.d.ts

@@ -1,7 +1,6 @@
-import { DataGridSortDir, DataGridState, Request } from "./types";
+import { Request } from "./types/api";
+import { DataGridSortDir } from "./types/schema";
+import { GridRequest } from "./types/state";
 export declare function decodeFilter(filterString: string): null | Request;
 export declare function encodeFilter(request: Request): string;
-export declare function createRequest(state: DataGridState, defaultSort: string, defaultDir: DataGridSortDir): Request;
-export type ClassArray = ClassValue[];
-export type ClassValue = ClassArray | Record<string, any> | string | number | null | boolean | undefined;
-export declare function cx(...classes: ClassValue[]): string;
+export declare function createRequest(request: GridRequest, defaultSort: string, defaultDir: DataGridSortDir): Request;

package/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cx = exports.createRequest = exports.encodeFilter = exports.decodeFilter = void 0;
+exports.createRequest = exports.encodeFilter = exports.decodeFilter = void 0;
 function decodeFilter(filterString) {
     try {
         const filter = JSON.parse(decodeURIComponent(escape(atob(filterString))));
@@ -21,67 +21,16 @@ function encodeFilter(request) {
     return btoa(unescape(encodeURIComponent(JSON.stringify(request))));
 }
 exports.encodeFilter = encodeFilter;
-function createRequest(state, defaultSort, defaultDir) {
+function createRequest(request, defaultSort, defaultDir) {
     var _a, _b;
     return {
-        sort: (_a = state.request.sort) !== null && _a !== void 0 ? _a : defaultSort,
-        dir: (_b = state.request.dir) !== null && _b !== void 0 ? _b : defaultDir,
-        perPage: state.request.perPage,
-        page: state.request.page,
-        f: state.request.f.filter((f) => f.value !== undefined && f.value !== null && f.value !== ""),
-        search: state.request.search,
-        tab: state.request.tab,
+        sort: (_a = request.sort) !== null && _a !== void 0 ? _a : defaultSort,
+        dir: (_b = request.dir) !== null && _b !== void 0 ? _b : defaultDir,
+        perPage: request.perPage,
+        page: request.page,
+        f: request.f.filter((f) => f.value !== undefined && f.value !== null && f.value !== ""),
+        search: request.search,
+        tab: request.tab,
     };
 }
 exports.createRequest = createRequest;
-function toVal(mix) {
-    let k;
-    let y;
-    let str = "";
-    if (typeof mix === "string" || typeof mix === "number") {
-        str += mix;
-    }
-    else if (typeof mix === "object") {
-        if (Array.isArray(mix)) {
-            for (k = 0; k < mix.length; k++) {
-                if (mix[k]) {
-                    if ((y = toVal(mix[k]))) {
-                        if (str) {
-                            str += " ";
-                        }
-                        str += y;
-                    }
-                }
-            }
-        }
-        else {
-            for (k in mix) {
-                if (mix === null || mix === void 0 ? void 0 : mix[k]) {
-                    if (str) {
-                        str += " ";
-                    }
-                    str += k;
-                }
-            }
-        }
-    }
-    return str;
-}
-function cx(...classes) {
-    let i = 0;
-    let tmp;
-    let x;
-    let str = "";
-    while (i < classes.length) {
-        if ((tmp = classes[i++])) {
-            if ((x = toVal(tmp))) {
-                if (str) {
-                    str += " ";
-                }
-                str += x;
-            }
-        }
-    }
-    return str;
-}
-exports.cx = cx;

package/hooks/useColumns.d.ts

@@ -1,3 +0,0 @@
-import { Column } from "react-data-grid";
-import { DataGridProps } from "../types";
-export declare const useColumns: (props: DataGridProps<any, any>, reload: () => Promise<void>) => Column<any>[];