@uxf/data-grid 11.23.0 → 11.24.0

package/_store/reducer.js

@@ -77,7 +77,7 @@ const reducer = (state, action) => {
                     f: state.request.f.filter((filter) => filter.name !== action.name),
                 },
             };
-        case "FILTER_RESET":
+        case "FILTER_CLEAR_ALL":
             return {
                 ...state,
                 request: {

package/_story-utils/grid-type.d.ts

@@ -8,6 +8,7 @@ export type GridType = {
         link: "url";
         day: "date";
         dayAndTime: "datetime";
+        hidden: "hidden";
     };
     filters: {
         text: "text";

package/_story-utils/schema.js

@@ -11,6 +11,7 @@ exports.schema = {
         { name: "link", type: "url", label: "Link" },
         { name: "day", type: "date", label: "Date" },
         { name: "dayAndTime", type: "datetime", label: "Datetime" },
+        { name: "hidden", type: "hidden", label: "Hidden", hidden: true },
     ],
     filters: [
         { name: "text", type: "text", label: "Text" },

package/data-grid.stories.js

@@ -34,6 +34,29 @@ const data_grid_1 = require("./data-grid");
 const table_1 = require("./table");
 const use_data_grid_control_1 = require("./use-data-grid-control");
 const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
+const 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 });
+    },
+};
 function Default() {
     const [noBorder, setNoBorder] = (0, react_1.useState)(false);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
@@ -54,29 +77,7 @@ function Default() {
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value), name: "noBorder" }),
-        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(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, isRowSelectable: true, actionCell: actionCell }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/hidden-columns/hidden-columns.js

@@ -8,7 +8,9 @@ const toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importDefault(require("react"));
 /** @deprecated Use DataGridHiddenColumns */
 function HiddenColumns(props) {
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns
+        .filter((column) => !column.hidden)
+        .map((column) => {
         var _a, _b, _c, _d;
         return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden), onChange: (value) => value ? props.actions.showColumn(column.name) : props.actions.hideColumn(column.name), name: column.name }));
     })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.23.0",
+  "version": "11.24.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@uxf/core": "11.22.0",
     "@uxf/core-react": "11.22.0",
-    "@uxf/ui": "11.23.0",
+    "@uxf/ui": "11.24.0",
     "dayjs": "1.11.10",
     "deepmerge": "4.3.1",
     "fast-glob": "3.3.2",

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

@@ -37,6 +37,9 @@ function useReactDataGridColumns(props, state) {
             columns.push(react_data_grid_1.SelectColumn);
         }
         for (const schemaColumn of schema.columns) {
+            if (schemaColumn.hidden) {
+                continue;
+            }
             const isHidden = (_b = (_a = userConfigColumns === null || userConfigColumns === void 0 ? void 0 : userConfigColumns[schemaColumn.name]) === null || _a === void 0 ? void 0 : _a.isHidden) !== null && _b !== void 0 ? _b : (_c = schemaColumn.config) === null || _c === void 0 ? void 0 : _c.isHidden;
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (isHidden) {

package/table/types.d.ts

@@ -1,5 +1,5 @@
 import { Nullish } from "@uxf/core/types";
-import { ActionCellComponent, BodyCellComponents } from "../types/components";
+import { BodyCellComponents, DataGridActionCell } from "../types/components";
 import { KeyExtractor } from "../types/core";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
@@ -16,10 +16,7 @@ export interface TableProps<Row> extends DataGridControl {
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     keyExtractor?: KeyExtractor;
     bodyCells?: BodyCellComponents<any, any>;
-    actionCell?: {
-        width: number;
-        Component: ActionCellComponent<any>;
-    };
+    actionCell?: DataGridActionCell<Row>;
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
 }

package/table-v2/table-v2.js

@@ -18,7 +18,9 @@ const DefaultBodyCell = () => "Unknown body cell.";
 function TableV2(props) {
     var _a, _b, _c, _d;
     const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
-    const visibleColumns = props.schema.columns.filter((column) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
+    const visibleColumns = props.schema.columns
+        .filter((column) => !column.hidden)
+        .filter((column) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
     const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions);
     const gridTemplateRows = (0, get_grid_template_rows_1.getGridTemplateRows)(props.data, (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36, (_c = props.rowHeight) !== null && _c !== void 0 ? _c : 44);
     const gridTemplateColumnsWithoutAction = visibleColumns

package/table-v2/types.d.ts

@@ -18,7 +18,7 @@ export interface TableProps<Row> extends DataGridControl {
     bodyCells?: BodyCellComponents<any, any>;
     actionCell?: {
         width: number;
-        Component: ActionCellComponent<any>;
+        Component: ActionCellComponent<Row>;
     };
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;

package/types/components.d.ts

@@ -1,5 +1,9 @@
 import { ComponentType, FC } from "react";
 import { BaseGridType, Columns, Filter } from "./schema";
+export type DataGridActionCell<Row> = {
+    width: number;
+    Component: ActionCellComponent<Row>;
+};
 export interface ActionCellProps<R> {
     row: R;
     reload: () => void;

package/types/schema.d.ts

@@ -23,6 +23,7 @@ export type Column<Name, Type> = {
     label: string | ReactElement;
     type: Type;
     sort?: boolean;
+    hidden?: boolean;
     config?: ColumnConfig;
 };
 export type ColumnConfig = {

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

@@ -6,6 +6,7 @@ export declare function createActions(dispatch: Dispatch<any>): {
     changePerPage: (perPage: number) => void;
     filter: (name: string, value: any, op?: string) => void;
     filterClear: (name: string) => void;
+    filterClearAll: () => void;
     sort: (columnName: string, direction?: string | null) => void;
     sortClear: () => void;
     search: (search: string) => void;

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

@@ -7,6 +7,7 @@ function createActions(dispatch) {
         changePerPage: (perPage) => dispatch({ type: "CHANGE_PER_PAGE", perPage }),
         filter: (name, value, op) => dispatch({ type: "FILTER", name, value, op }),
         filterClear: (name) => dispatch({ type: "FILTER_CLEAR", name }),
+        filterClearAll: () => dispatch({ type: "FILTER_CLEAR_ALL" }),
         sort: (columnName, direction = null) => dispatch({ type: "SORT", columnName, direction }),
         sortClear: () => dispatch({ type: "SORT_CLEAR" }),
         search: (search) => dispatch({ type: "FULLTEXT", search }),

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

@@ -15,6 +15,7 @@ export declare function useDataGridControl<T extends BaseGridType>(config: UseDa
         changePerPage: (perPage: number) => void;
         filter: (name: string, value: any, op?: string | undefined) => void;
         filterClear: (name: string) => void;
+        filterClearAll: () => void;
         sort: (columnName: string, direction?: string | null) => void;
         sortClear: () => void;
         search: (search: string) => void;