@uxf/data-grid - npm Package Compare versions

Comparing version 11.0.0-beta.16 to 11.0.0-beta.17

data-grid.js

@@ -18,3 +18,2 @@ "use strict";
 const table_1 = require("./table");
-const action_cell_base_1 = require("./table/components/action-cell-base");
 const no_rows_fallback_1 = require("./table/no-rows-fallback");
@@ -27,3 +26,3 @@ const toolbar_control_1 = require("./toolbar-control");
 function DataGrid(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -33,13 +32,13 @@ react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid", props.noBorder && classes_1.NO_BORDER_CLASS, props.className) },
                 react_1.default.createElement(toolbar_tabs_1.ToolbarTabs, { state: props.state, actions: props.actions, schema: props.schema }),
-                react_1.default.createElement(toolbar_control_1.ToolbarControl, { state: props.state, actions: props.actions, gridName: props.gridName, filterHandlers: (_b = (_a = props.ui) === null || _a === void 0 ? void 0 : _a.FilterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, onCsvDownload: props.onCsvDownload }),
+                react_1.default.createElement(toolbar_control_1.ToolbarControl, { state: props.state, actions: props.actions, gridName: props.gridName, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, schema: props.schema, onCsvDownload: props.onCsvDownload }),
                 react_1.default.createElement(toolbar_customs_1.ToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.LinearProgress, { isLoading: props.isLoading }),
-            react_1.default.createElement(filter_list_1.FilterList, { state: props.state, actions: props.actions, schema: props.schema, gridName: props.gridName, filterHandlers: (_d = (_c = props.ui) === null || _c === void 0 ? void 0 : _c.FilterHandlers) !== null && _d !== void 0 ? _d : filter_handler_1.defaultFilterHandlers, className: props.noBorder ? classes_1.NO_BORDER_CLASS : undefined }),
-            react_1.default.createElement(table_1.Table, { state: props.state, actions: props.actions, schema: props.schema, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, BodyCells: (_h = (_g = props.ui) === null || _g === void 0 ? void 0 : _g.BodyCells) !== null && _h !== void 0 ? _h : body_cell_1.BodyCells, NoRowsFallback: (_k = (_j = props.ui) === null || _j === void 0 ? void 0 : _j.NoRowsFallback) !== null && _k !== void 0 ? _k : no_rows_fallback_1.NoRowsFallback, ActionCell: (_m = (_l = props.ui) === null || _l === void 0 ? void 0 : _l.ActionCell) !== null && _m !== void 0 ? _m : action_cell_base_1.ActionCellBase, onRemove: props.onRemove, onEdit: props.onEdit, getEditUrl: props.getEditUrl, onOpen: props.onOpen, getOpenUrl: props.getOpenUrl, onReload: props.onReload, isRowSelectable: props.isRowSelectable }),
+            react_1.default.createElement(filter_list_1.FilterList, { state: props.state, actions: props.actions, schema: props.schema, gridName: props.gridName, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, className: props.noBorder ? classes_1.NO_BORDER_CLASS : undefined }),
+            react_1.default.createElement(table_1.Table, { state: props.state, actions: props.actions, schema: props.schema, data: (_d = (_c = props.data) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, bodyCells: (_e = props.bodyCells) !== null && _e !== void 0 ? _e : body_cell_1.BodyCells, NoRowsFallback: (_f = props.NoRowsFallback) !== null && _f !== void 0 ? _f : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, onReload: props.onReload, isRowSelectable: props.isRowSelectable }),
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__footer", props.noBorder && classes_1.NO_BORDER_CLASS) },
                 react_1.default.createElement(rows_per_page_select_1.RowsPerPageSelect, { state: props.state, actions: props.actions }),
-                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, count: (_p = (_o = props.data) === null || _o === void 0 ? void 0 : _o.count) !== null && _p !== void 0 ? _p : 0, totalCount: (_r = (_q = props.data) === null || _q === void 0 ? void 0 : _q.totalCount) !== null && _r !== void 0 ? _r : 0 }),
-                react_1.default.createElement(pagination_1.Pagination, { state: props.state, actions: props.actions, count: (_t = (_s = props.data) === null || _s === void 0 ? void 0 : _s.count) !== null && _t !== void 0 ? _t : 0 }))),
-        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_v = (_u = props.ui) === null || _u === void 0 ? void 0 : _u.SelectedRowsToolbarActions) !== null && _v !== void 0 ? _v : DefaultSelectedRowsToolbarActions })));
+                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, totalCount: (_k = (_j = props.data) === null || _j === void 0 ? void 0 : _j.totalCount) !== null && _k !== void 0 ? _k : 0 }),
+                react_1.default.createElement(pagination_1.Pagination, { state: props.state, actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0 }))),
+        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions })));
 }
 exports.DataGrid = DataGrid;

data-grid.stories.js

@@ -27,2 +27,3 @@ "use strict";
 exports.Default = void 0;
+const buildArray_1 = require("@uxf/core/utils/buildArray");
 const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
@@ -34,2 +35,3 @@ const toggle_1 = require("@uxf/ui/toggle");
 const data_grid_1 = require("./data-grid");
+const table_1 = require("./table");
 const use_data_grid_control_1 = require("./use-data-grid-control");
@@ -50,5 +52,27 @@ const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value) }),
-        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, noBorder: noBorder, onRemove: console.log, getOpenUrl: () => "https://www.uxf.cz", getEditUrl: () => "https://www.uxf.cz", isRowSelectable: true }),
+        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, noBorder: noBorder, isRowSelectable: true, actionCell: {
+                width: 100,
+                Component: () => {
+                    const actionCellActions = (0, buildArray_1.buildArray)()
+                        .add({
+                        icon: "arrow-right",
+                        isIconButton: true,
+                        href: "https://www.uxf.cz",
+                        target: "_blank",
+                    })
+                        .add({
+                        icon: "file",
+                        label: "Download",
+                        onClick: console.log,
+                    })
+                        .add({
+                        icon: "cloud",
+                        label: "Reload",
+                        onClick: console.log,
+                    });
+                    return react_1.default.createElement(table_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
+                },
+            } }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package.json

 {
   "name": "@uxf/data-grid",
-  "version": "11.0.0-beta.16",
+  "version": "11.0.0-beta.17",
   "description": "UXF DataGrid",
@@ -30,3 +30,3 @@ "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "dependencies": {
-    "@uxf/ui": "11.0.0-beta.16",
+    "@uxf/ui": "11.0.0-beta.17",
     "dayjs": "1.11.10",
@@ -33,0 +33,0 @@ "react-data-grid": "7.0.0-beta.39"

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

@@ -28,10 +28,6 @@ "use strict";
 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, state) {
-    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;
+    const { onReload, schema, isRowSelectable, bodyCells, actionCell } = props;
     const columnsConfig = state.userConfig.columns;
@@ -62,3 +58,3 @@ return (0, react_1.useMemo)(() => {
                     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) {
@@ -76,27 +72,16 @@ return null;
         }
-        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;
-    }, [
-        columnsConfig,
-        ActionCell,
-        actionCellWidth,
-        schema.columns,
-        BodyCells,
-        isRowSelectable,
-        onOpen,
-        getOpenUrl,
-        onEdit,
-        getEditUrl,
-        onRemove,
-        onReload,
-    ]);
+    }, [columnsConfig, actionCell, schema.columns, bodyCells, isRowSelectable, onReload]);
 }
 exports.useReactDataGridColumns = useReactDataGridColumns;

table/index.d.ts

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

table/index.js

@@ -17,2 +17,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/action-cell"), exports);
+__exportStar(require("./components/action-cell-wrapper"), exports);
 __exportStar(require("./table"), exports);

table/table.d.ts

 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;

table/table.js

@@ -30,2 +30,3 @@ "use strict";
 exports.Table = void 0;
+const show_1 = require("@uxf/core/components/show");
 const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
@@ -35,2 +36,3 @@ const react_1 = __importStar(require("react"));
 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");
@@ -46,3 +48,3 @@ const defaultKeyExtractor = (r) => r.id;
     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;
@@ -81,7 +83,10 @@ const reactDataGridStyles = {
         : [];
-    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;

table/table.stories.js

@@ -17,5 +17,5 @@ "use strict";
     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;

table/types.d.ts

 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";
@@ -12,16 +13,13 @@ import { NoRowsFallbackComponent } from "./no-rows-fallback";
     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;
 }

types/components.d.ts

@@ -6,7 +6,2 @@ import { ComponentType, FC } from "react";
     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;
@@ -13,0 +8,0 @@ }

types/data-grid-props.d.ts

@@ -1,8 +0,11 @@
-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;
@@ -15,18 +18,16 @@ export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
     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;

types/index.d.ts

@@ -7,2 +7,1 @@ export * from "./api";
 export * from "./state";
-export * from "./ui-components";

types/index.js

@@ -23,2 +23,1 @@ "use strict";
 __exportStar(require("./state"), exports);
-__exportStar(require("./ui-components"), exports);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

166621

decreased by-1.05%

Lines of code

3717

decreased by-0.61%

Dependency changes

• + Added@uxf/ui@11.0.0-beta.17(transitive)

• - Removed@uxf/ui@11.0.0-beta.16(transitive)

• Updated@uxf/ui@11.0.0-beta.17