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

package/table/hooks/use-react-data-grid-columns.js

@@ -25,20 +25,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReactDataGridColumns = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
-const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const react_data_grid_1 = require("react-data-grid");
-const action_cell_base_1 = require("../components/action-cell-base");
-function useReactDataGridColumns(props) {
-    var _a;
-    const { onReload, actionCellWidth, schema, isRowSelectable, BodyCells, getOpenUrl, onOpen, getEditUrl, onEdit, onRemove, } = props;
-    const ActionCell = (_a = props.ActionCell) !== null && _a !== void 0 ? _a : action_cell_base_1.ActionCellBase;
+function useReactDataGridColumns(props, state) {
+    const { onReload, schema, isRowSelectable, bodyCells, actionCell } = props;
+    const columnsConfig = state.userConfig.columns;
     return (0, react_1.useMemo)(() => {
+        var _a;
         const columns = [];
         if (isRowSelectable) {
             columns.push(react_data_grid_1.SelectColumn);
         }
         for (const schemaColumn of schema.columns) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if ((_a = columnsConfig === null || columnsConfig === void 0 ? void 0 : columnsConfig[schemaColumn.name]) === null || _a === void 0 ? void 0 : _a.isHidden) {
+                continue;
+            }
             columns.push({
                 key: schemaColumn.name,
                 name: schemaColumn.label,
@@ -52,7 +54,7 @@ function useReactDataGridColumns(props) {
                 renderCell: (p) => {
                     var _a;
                     const columnType = schemaColumn.type;
-                    const BodyCell = (_a = BodyCells === null || BodyCells === void 0 ? void 0 : BodyCells[columnType]) !== null && _a !== void 0 ? _a : BodyCells === null || BodyCells === void 0 ? void 0 : BodyCells.default;
+                    const BodyCell = (_a = bodyCells === null || bodyCells === void 0 ? void 0 : bodyCells[columnType]) !== null && _a !== void 0 ? _a : bodyCells === null || bodyCells === void 0 ? void 0 : bodyCells.default;
                     if (!BodyCell) {
                         return null;
                     }
@@ -65,28 +67,18 @@ function useReactDataGridColumns(props) {
                 },
             });
         }
-        columns.push({
-            key: "__action_column",
-            name: "",
-            resizable: false,
-            headerCellClass: "uxf-data-grid__action-cell",
-            cellClass: "uxf-data-grid__action-cell",
-            width: actionCellWidth,
-            renderCell: (p) => (0, is_not_nil_1.isNotNil)(ActionCell) ? (react_1.default.createElement(ActionCell, { reload: async () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row, getEditUrl: getEditUrl, onEdit: onEdit, getOpenUrl: getOpenUrl, onOpen: onOpen, onRemove: onRemove })) : null,
-        });
+        if (actionCell) {
+            columns.push({
+                key: "__action_column",
+                name: "",
+                resizable: false,
+                headerCellClass: "uxf-data-grid__action-cell",
+                cellClass: "uxf-data-grid__action-cell",
+                width: actionCell.width,
+                renderCell: (p) => react_1.default.createElement(actionCell.Component, { reload: async () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row }),
+            });
+        }
         return columns;
-    }, [
-        ActionCell,
-        actionCellWidth,
-        schema.columns,
-        BodyCells,
-        isRowSelectable,
-        onOpen,
-        getOpenUrl,
-        onEdit,
-        getEditUrl,
-        onRemove,
-        onReload,
-    ]);
+    }, [columnsConfig, actionCell, schema.columns, bodyCells, isRowSelectable, onReload]);
 }
 exports.useReactDataGridColumns = useReactDataGridColumns;

package/table/index.d.ts

@@ -1 +1,3 @@
+export * from "./components/action-cell";
+export * from "./components/action-cell-wrapper";
 export * from "./table";

package/table/index.js

@@ -14,4 +14,6 @@ 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("./components/action-cell"), exports);
+__exportStar(require("./components/action-cell-wrapper"), exports);
 __exportStar(require("./table"), exports);

package/table/table.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./types";
-export declare function Table(props: TableProps<any>): React.JSX.Element | null;
+export declare function Table(props: TableProps<any>): React.JSX.Element;

package/table/table.js

@@ -27,10 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
+const show_1 = require("@uxf/core/components/show");
 const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
 const react_1 = __importStar(require("react"));
 const react_data_grid_1 = __importDefault(require("react-data-grid"));
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
+const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 const use_react_data_grid_columns_1 = require("./hooks/use-react-data-grid-columns");
 const defaultKeyExtractor = (r) => r.id;
 const DefaultNoRowsFallback = () => react_1.default.createElement("div", null, "no rows");
@@ -41,7 +43,7 @@ function Table(props) {
     const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
     const keyExtractor = (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor;
     const contentHeight = typeof rowHeight === "function"
-        ? props.data.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        ? props.data.reduce((prev, curr) => prev + rowHeight(curr))
         : (rowHeight + 1) * props.data.length;
     const reactDataGridStyles = {
         border: 0,
@@ -56,9 +58,12 @@ function Table(props) {
         renderCheckbox: (args) => react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { ...args }),
         noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: error, loading: isLoading }),
     }), [NoRowsFallback, error, isLoading]);
-    const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props);
+    const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props, props.state);
     const onSelectRows = (value) => {
-        const selectedRows = Array.from(value).map((id) => props.data.find((row) => keyExtractor(row) === id));
+        const selectedRows = Array.from(value).map((id) => {
+            var _a, _b;
+            return (_b = (_a = props.state.selectedRows) === null || _a === void 0 ? void 0 : _a.find((row) => keyExtractor(row) === id)) !== null && _b !== void 0 ? _b : props.data.find((row) => keyExtractor(row) === id);
+        });
         props.actions.setSelectedRows(selectedRows);
     };
     const onSortColumnChange = (sortColumns) => {
@@ -72,9 +77,12 @@ function Table(props) {
     const sortColumns = props.state.request.sort && props.state.request.dir
         ? [{ columnKey: props.state.request.sort, direction: props.state.request.dir.toUpperCase() }]
         : [];
-    if (!isMounted) {
-        return null;
-    }
-    return (react_1.default.createElement(react_data_grid_1.default, { style: reactDataGridStyles, className: "uxf-data-grid__table", columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rowHeight, headerRowHeight: headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components }));
+    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
+        headerRowHeight: props.headerRowHeight,
+        rowHeight: props.rowHeight,
+        rows: props.data,
+    });
+    return (react_1.default.createElement(show_1.Show, { when: isMounted },
+        react_1.default.createElement(react_data_grid_1.default, { ref: rdgVisuals.ref, style: reactDataGridStyles, className: rdgVisuals.className, columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rdgVisuals.rowHeight, headerRowHeight: rdgVisuals.headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components })));
 }
 exports.Table = Table;

package/table/table.stories.js

@@ -14,7 +14,7 @@ const table_1 = require("./table");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(table_1.Table, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, BodyCells: body_cell_1.BodyCells, isRowSelectable: true, onOpen: console.log, onEdit: console.log, onRemove: console.log }),
+        react_1.default.createElement(table_1.Table, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/table/types.d.ts

@@ -1,6 +1,7 @@
 import { Nullish } from "@uxf/core/types";
-import { DataGridProps as RDGProps } from "react-data-grid";
-import { ActionCellComponent, BodyCellComponents, KeyExtractor, Schema } from "../types";
+import { ActionCellComponent, BodyCellComponents } from "../types/components";
+import { KeyExtractor } from "../types/core";
+import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
 export interface TableProps<Row> extends DataGridControl {
@@ -9,18 +10,15 @@ export interface TableProps<Row> extends DataGridControl {
     isLoading?: boolean;
     error?: any | Nullish;
     onReload?: () => void;
-    rowHeight?: RDGProps<any>["rowHeight"];
-    headerRowHeight?: RDGProps<any>["headerRowHeight"];
+    rowHeight?: number | ((row: Row) => number);
+    headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     keyExtractor?: KeyExtractor;
-    BodyCells?: BodyCellComponents<any, any>;
-    ActionCell?: ActionCellComponent<any>;
-    actionCellWidth?: number;
+    bodyCells?: BodyCellComponents<any, any>;
+    actionCell?: {
+        width: number;
+        Component: ActionCellComponent<any>;
+    };
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
-    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;
 }

package/toolbar-control/toolbar-control.js

@@ -15,8 +15,8 @@ function ToolbarControl(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(hide_1.Hide, { when: !props.schema.fullText },
             react_1.default.createElement(fulltext_input_1.FulltextInput, { state: props.state, actions: props.actions })),
-        react_1.default.createElement(filters_button_1.FiltersButton, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers }),
+        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.ExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload })),
         react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { state: props.state, actions: props.actions, schema: props.schema }),
-        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.ExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload }))));
+        react_1.default.createElement(filters_button_1.FiltersButton, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers })));
 }
 exports.ToolbarControl = ToolbarControl;

package/types/components.d.ts

@@ -3,11 +3,6 @@ import { RequestFilter } from "./api";
 import { BaseGridType, Columns, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
-    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;
     reload: () => void;
 }
 export type ActionCellComponent<R> = FC<ActionCellProps<R>>;

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

@@ -1,10 +1,13 @@
-import { DataGridProps as RDGProps } from "react-data-grid";
+import { FilterHandlers } from "../filter-handler";
+import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
+import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
+import { TableProps } from "../table/types";
 import { ToolbarCustomsProps } from "../toolbar-customs";
 import { DataGridControl } from "../use-data-grid-control";
 import { DataGridFetchingResult } from "../use-data-grid-fetching";
+import { BodyCellComponents } from "./components";
 import { CsvDownloadHandler, KeyExtractor } from "./core";
 import { BaseGridType, Schema } from "./schema";
-import { UIComponents } from "./ui-components";
 export type DataGridControlProps = DataGridControl;
 export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
 export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
@@ -12,20 +15,18 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     gridName?: string;
     keyExtractor?: KeyExtractor;
     onCsvDownload?: CsvDownloadHandler;
-    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"];
+    rowHeight?: number | ((row: Row) => number);
+    headerRowHeight?: number;
     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>;
+    actionCell?: TableProps<Row>["actionCell"];
+    bodyCells?: BodyCellComponents<GridType["columns"], Row>;
+    filterHandlers?: FilterHandlers;
+    NoRowsFallback?: NoRowsFallbackComponent;
+    SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
     isRowSelectable?: boolean;
+    isDebug?: boolean;
 };
 export type DataGridProps<GridType extends BaseGridType, Row> = DataGridBaseProps<GridType, Row> & DataGridDataProps<Row> & DataGridControlProps;

package/types/index.d.ts

@@ -4,4 +4,3 @@ export * from "./core";
 export * from "./data-grid-props";
 export * from "./schema";
 export * from "./state";
-export * from "./ui-components";

package/types/index.js

@@ -20,4 +20,3 @@ __exportStar(require("./core"), exports);
 __exportStar(require("./data-grid-props"), exports);
 __exportStar(require("./schema"), exports);
 __exportStar(require("./state"), exports);
-__exportStar(require("./ui-components"), exports);

package/types/state.d.ts

@@ -1,4 +1,4 @@
-import { RequestFilter, Response } from "./api";
+import { RequestFilter } from "./api";
 import { DataGridSortDir } from "./schema";
 export type GridRequest = {
     f: RequestFilter[];
@@ -13,11 +13,14 @@ interface ColumnConfig {
     isHidden: boolean;
     width?: number;
 }
+export interface DataGridUserConfig {
+    columns?: Record<string, ColumnConfig>;
+    perPage?: number;
+}
 export interface DataGridState {
-    response?: Response;
     request: GridRequest;
     selectedRows?: any[];
-    columnConfig: Record<string, ColumnConfig>;
+    userConfig: DataGridUserConfig;
     tabRequests: {
         [tab: string]: GridRequest;
     };

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

@@ -1,13 +1,15 @@
 import { Nullish } from "@uxf/core/types";
 import { Request } from "../types/api";
 import { Schema } from "../types/schema";
+import { DataGridUserConfig } from "../types/state";
 interface Config {
     schema: Schema<any>;
     initialState?: Request | string | Nullish;
     isDebug?: boolean;
+    initialUserConfig?: DataGridUserConfig | Nullish;
 }
 export declare function useDataGridControl(config: Config): {
-    state: import("..").DataGridState;
+    state: import("../types/state").DataGridState;
     actions: {
         changePage: (page: number) => void;
         changePerPage: (perPage: number) => void;

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

@@ -5,7 +5,7 @@ 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 [state, dispatch] = (0, react_1.useReducer)(config.isDebug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(config.schema, config.initialState, config.initialUserConfig));
     const actions = (0, react_1.useMemo)(() => (0, actions_factory_1.createActions)(dispatch), [dispatch]);
     return { state, actions };
 }

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

@@ -12,5 +12,11 @@ export interface DataGridFetchingResult<Row> {
     data: Response<Row> | null;
     onReload: () => void;
 }
-export declare function useDataGridFetching(loader: Loader, schema: Schema<any>, gridName: string, state: DataGridControl["state"]): DataGridFetchingResult<any>;
+interface Config {
+    loader: Loader;
+    schema: Schema<any>;
+    gridName: string;
+    state: DataGridControl["state"];
+}
+export declare function useDataGridFetching(config: Config): DataGridFetchingResult<any>;
 export {};

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

@@ -3,7 +3,8 @@ 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) {
+function useDataGridFetching(config) {
+    const { state, schema, loader, gridName } = config;
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);
@@ -11,6 +12,7 @@ function useDataGridFetching(loader, schema, gridName, state) {
     const reload = (0, react_1.useCallback)(() => {
         const stateRequest = JSON.parse(stringStateRequest);
         const request = (0, utils_1.createRequest)(stateRequest, schema.sort, schema.dir);
+        setIsLoading(true);
         loader(gridName, request, (0, utils_1.encodeFilter)(request))
             .then((response) => {
             setData(response);

package/table/components/action-cell-base.d.ts

@@ -1,4 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import { ActionCellComponent } from "../../types";
-export declare const ActionCellWrapper: FC<PropsWithChildren>;
-export declare const ActionCellBase: ActionCellComponent<any>;

package/types/ui-components.d.ts

@@ -1,18 +0,0 @@
-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>;
-    actionCellWidth: number;
-} | {
-    ActionCell?: never;
-    actionCellWidth?: never;
-};
-export type UIComponents<GridType extends BaseGridType, R> = {
-    BodyCells?: BodyCellComponents<GridType["columns"], R>;
-    FilterHandlers?: FilterHandlers;
-    NoRowsFallback?: NoRowsFallbackComponent;
-    SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
-} & ActionCellWithRequiredWidth<R>;

package/types/ui-components.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });