@uxf/data-grid 11.37.0 → 11.38.0

package/_story-utils/loader.js

@@ -26,6 +26,7 @@ const loader = async (_, request) => {
     return {
         count: filteredData.length,
         totalCount: data_1.data.length,
+        tabCounts: { all: 20, "only-odd-ids": 10 },
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };

package/data-grid-custom-example.stories.js

@@ -39,11 +39,12 @@ function DataGrid() {
         loader: loader_1.loader,
         schema,
         state: control.state,
+        isWithTabCounts: true,
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(root_1.DataGridRoot, null,
             react_1.default.createElement(toolbar_1.DataGridToolbar, null,
-                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { ...control, schema: schema }),
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { ...control, schema: schema, tabCounts: data === null || data === void 0 ? void 0 : data.tabCounts }),
                 react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { ...control, filterHandlers: filterHandlers, schema: schema }),
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: toolbarCustomButtons })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: isLoading }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.37.0",
+    "version": "11.38.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",

package/toolbar-tabs/toolbar-tabs.d.ts

@@ -1,3 +1,4 @@
+import { Nullish } from "@uxf/core/types";
 import React from "react";
 import { ChangeTabFilterBehavior } from "../types";
 import { Schema } from "../types/schema";
@@ -5,5 +6,6 @@ import { DataGridControl } from "../use-data-grid-control";
 export interface DataGridToolbarTabsProps extends DataGridControl {
     changeTabFilterBehavior?: ChangeTabFilterBehavior;
     schema: Schema<any>;
+    tabCounts?: Record<string, number> | Nullish;
 }
 export declare function DataGridToolbarTabs(props: DataGridToolbarTabsProps): React.JSX.Element;

package/toolbar-tabs/toolbar-tabs.js

@@ -11,13 +11,15 @@ const icon_1 = require("@uxf/ui/icon");
 const modal_service_1 = require("@uxf/ui/modal/modal-service");
 const react_1 = __importDefault(require("react"));
 function Tab(props) {
-    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-data-grid__toolbar-tab", props.isActive && "is-active"), onClick: props.onClick }, props.title));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-data-grid__toolbar-tab", props.isActive && "is-active"), onClick: props.onClick },
+        props.title,
+        props.tabCount ? " (" + props.tabCount + ")" : ""));
 }
 function DataGridToolbarTabs(props) {
     var _a, _b, _c, _d;
     return (react_1.default.createElement(show_1.Show, { when: Boolean((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs" },
-            react_1.default.createElement("nav", { "aria-label": "Tabs", className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((tab) => (react_1.default.createElement(Tab, { isActive: props.state.request.tab === tab.name, key: tab.name, onClick: () => { var _a; return props.actions.changeTab(tab, (_a = props.changeTabFilterBehavior) !== null && _a !== void 0 ? _a : "filtersPerTab"); }, title: tab.label })))),
+            react_1.default.createElement("nav", { "aria-label": "Tabs", className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((tab) => (react_1.default.createElement(Tab, { isActive: props.state.request.tab === tab.name, key: tab.name, onClick: () => { var _a; return props.actions.changeTab(tab, (_a = props.changeTabFilterBehavior) !== null && _a !== void 0 ? _a : "filtersPerTab"); }, tabCount: props.tabCounts ? props.tabCounts[tab.name] : undefined, title: tab.label })))),
             react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--mobile" },
                 react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-button", onClick: () => {
                         var _a;

package/types/api.d.ts

@@ -1,3 +1,4 @@
+import { Nullish } from "@uxf/core/types";
 import { DataGridSort } from "./schema";
 export type ResultItem = any;
 export interface RequestFilter<T = any> {
@@ -12,9 +13,11 @@ export interface Request {
     perPage?: number;
     search?: string;
     tab?: string | null;
+    withTabCounts?: true | null;
 }
 export interface Response {
     totalCount: number;
     count: number;
+    tabCounts: Record<string, number> | Nullish;
     result: ResultItem[];
 }

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

@@ -1,9 +1,11 @@
+import { Nullish } from "@uxf/core/types";
 import { Loader } from "../types/core";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
 interface Response<Row> {
     result: Row[];
     count: number;
+    tabCounts: Record<string, number> | Nullish;
     totalCount: number;
 }
 export interface DataGridFetchingResult<Row> {
@@ -16,6 +18,7 @@ export interface UseDataGridFetchingConfig {
     loader?: Loader;
     schema: Schema<any>;
     state: DataGridControl["state"];
+    isWithTabCounts?: true;
 }
 export declare function useDataGridFetching(config: UseDataGridFetchingConfig): DataGridFetchingResult<any>;
 export {};

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

@@ -12,7 +12,7 @@ function useDataGridFetching(config) {
     const stringStateRequest = JSON.stringify(state.request);
     const reload = (0, react_1.useCallback)(() => {
         const stateRequest = JSON.parse(stringStateRequest);
-        const request = (0, utils_1.createRequest)(stateRequest);
+        const request = (0, utils_1.createRequest)(stateRequest, { isWithTabCounts: config.isWithTabCounts });
         setIsLoading(true);
         loader(config.schema.name, request, (0, utils_1.encodeFilter)(request))
             .then((response) => {

package/utils.d.ts

@@ -2,4 +2,6 @@ import { Request } from "./types/api";
 import { GridRequest } from "./types/state";
 export declare function decodeFilter(filterString: string): null | Request;
 export declare function encodeFilter(request: Request): string;
-export declare function createRequest(request: GridRequest): Request;
+export declare function createRequest(request: GridRequest, config?: {
+    isWithTabCounts?: true;
+} | undefined): Request;

package/utils.js

@@ -24,7 +24,7 @@ function decodeFilter(filterString) {
 function encodeFilter(request) {
     return btoa(unescape(encodeURIComponent(JSON.stringify(request))));
 }
-function createRequest(request) {
+function createRequest(request, config = undefined) {
     return {
         perPage: request.perPage,
         page: request.page,
@@ -32,5 +32,6 @@ function createRequest(request) {
         s: request.s || undefined,
         search: request.search,
         tab: request.tab,
+        withTabCounts: config === null || config === void 0 ? void 0 : config.isWithTabCounts,
     };
 }