@uxf/data-grid 11.2.5 → 11.3.0

package/_generator/index.js

@@ -108,9 +108,9 @@ function generate(jsonSchema, filename, outputDirectory, isLoaderRequired) {
         generateSchemaFile(gridName, relative(dirname(generatedSchemaFilename), filename)),
     );
 
-    writeFile(`${generatedPath}/data-grid.tsx`, generateDataGridFile(gridName, isLoaderRequired));
-    writeFile(`${generatedPath}/use-data-grid-control.ts`, generateUseDataGridControl(gridName));
-    writeFile(`${generatedPath}/use-data-grid-fetching.ts`, generateUseDataGridFetching(gridName, isLoaderRequired));
+    // writeFile(`${generatedPath}/data-grid.tsx`, generateDataGridFile(gridName, isLoaderRequired));
+    // writeFile(`${generatedPath}/use-data-grid-control.ts`, generateUseDataGridControl(gridName));
+    // writeFile(`${generatedPath}/use-data-grid-fetching.ts`, generateUseDataGridFetching(gridName, isLoaderRequired));
 }
 
 module.exports = (schemaDirectory, outputDirectory, requiredLoader) => {

package/_store/actions.d.ts

@@ -1,4 +1,4 @@
-import { DataGridSortDir, RequestFilter, Response } from "../types";
+import { DataGridSortDir, RequestFilter, Response, Tab } from "../types";
 export declare const dataGridActions: {
     filter: (filterValue: RequestFilter) => {
         type: string;
@@ -15,9 +15,9 @@ export declare const dataGridActions: {
         type: string;
         perPage: number;
     };
-    changeTab: (tabName: string) => {
+    changeTab: (tab: Tab) => {
         type: string;
-        name: string;
+        tab: Tab;
     };
     reload: () => {
         type: string;

package/_store/actions.js

@@ -17,9 +17,9 @@ exports.dataGridActions = {
         type: "CHANGE_PER_PAGE",
         perPage,
     }),
-    changeTab: (tabName) => ({
+    changeTab: (tab) => ({
         type: "CHANGE_TAB",
-        name: tabName,
+        tab,
     }),
     reload: () => ({
         type: "RELOAD",

package/_store/reducer.js

@@ -4,21 +4,22 @@ exports.debugReducer = exports.reducer = exports.getInitialState = void 0;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const utils_1 = require("../utils");
 const getInitialState = (schema, init, initialUserConfig) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const initialState = (0, is_nil_1.isNil)(init) ? {} : typeof init === "string" ? (_a = (0, utils_1.decodeFilter)(init)) !== null && _a !== void 0 ? _a : {} : init;
+    const tabName = (_e = (_b = initialState.tab) !== null && _b !== void 0 ? _b : (_d = (_c = schema.tabs) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : null;
+    const tabSort = tabName !== null ? (_g = (_f = schema.tabs) === null || _f === void 0 ? void 0 : _f.find((t) => t.name === tabName)) === null || _g === void 0 ? void 0 : _g.s : null;
     return {
         request: {
-            f: (_b = initialState.f) !== null && _b !== void 0 ? _b : [],
-            page: (_c = initialState.page) !== null && _c !== void 0 ? _c : 0,
-            dir: (_d = initialState.dir) !== null && _d !== void 0 ? _d : schema.dir,
-            sort: (_e = initialState.sort) !== null && _e !== void 0 ? _e : schema.sort,
-            perPage: (_g = (_f = initialState.perPage) !== null && _f !== void 0 ? _f : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _g !== void 0 ? _g : schema.perPage,
-            tab: (_l = (_h = initialState.tab) !== null && _h !== void 0 ? _h : (_k = (_j = schema.tabs) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : null,
-            search: (_m = initialState.search) !== null && _m !== void 0 ? _m : "",
+            f: (_h = initialState.f) !== null && _h !== void 0 ? _h : [],
+            s: (_k = (_j = initialState.s) !== null && _j !== void 0 ? _j : tabSort) !== null && _k !== void 0 ? _k : schema.s,
+            page: (_l = initialState.page) !== null && _l !== void 0 ? _l : 0,
+            perPage: (_o = (_m = initialState.perPage) !== null && _m !== void 0 ? _m : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _o !== void 0 ? _o : schema.perPage,
+            tab: tabName,
+            search: (_p = initialState.search) !== null && _p !== void 0 ? _p : "",
         },
         userConfig: {
-            columns: (_o = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _o !== void 0 ? _o : {},
-            perPage: (_p = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _p !== void 0 ? _p : schema.perPage,
+            columns: (_q = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _q !== void 0 ? _q : {},
+            perPage: (_r = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _r !== void 0 ? _r : schema.perPage,
         },
         tabRequests: {},
     };
@@ -75,8 +76,10 @@ const reducer = (state, action) => {
                 ...state,
                 request: {
                     ...state.request,
-                    sort: action.columnName,
-                    dir: action.direction,
+                    s: {
+                        name: action.columnName,
+                        dir: action.direction,
+                    },
                 },
             };
         case "SORT_CLEAR":
@@ -84,8 +87,7 @@ const reducer = (state, action) => {
                 ...state,
                 request: {
                     ...state.request,
-                    sort: null,
-                    dir: null,
+                    s: null,
                 },
             };
         case "FULLTEXT":
@@ -99,21 +101,20 @@ const reducer = (state, action) => {
             };
         case "CHANGE_TAB":
             // eslint-disable-next-line no-case-declarations,@typescript-eslint/no-unnecessary-condition
-            const tabHistory = (_a = state.tabRequests[action.name]) !== null && _a !== void 0 ? _a : {};
+            const tabHistory = (_a = state.tabRequests[action.tab.name]) !== null && _a !== void 0 ? _a : {};
             return {
                 ...state,
                 request: {
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     f: (_b = tabHistory.f) !== null && _b !== void 0 ? _b : [],
+                    s: (_d = (_c = tabHistory.s) !== null && _c !== void 0 ? _c : action.tab.s) !== null && _d !== void 0 ? _d : state.request.s,
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    search: (_c = tabHistory.search) !== null && _c !== void 0 ? _c : "",
+                    search: (_e = tabHistory.search) !== null && _e !== void 0 ? _e : "",
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    page: (_d = tabHistory.page) !== null && _d !== void 0 ? _d : 0,
+                    page: (_f = tabHistory.page) !== null && _f !== void 0 ? _f : 0,
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    perPage: (_e = tabHistory.perPage) !== null && _e !== void 0 ? _e : state.request.perPage,
-                    dir: (_f = tabHistory.dir) !== null && _f !== void 0 ? _f : state.request.dir,
-                    sort: (_g = tabHistory.sort) !== null && _g !== void 0 ? _g : state.request.sort,
-                    tab: action.name,
+                    perPage: (_g = tabHistory.perPage) !== null && _g !== void 0 ? _g : state.request.perPage,
+                    tab: action.tab.name,
                 },
                 tabRequests: {
                     ...state.tabRequests,

package/_story-utils/loader.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loader = void 0;
 const data_1 = require("./data");
 const loader = async (_, request) => {
-    const { page = 1, perPage = 10, tab, sort, dir, f } = request;
+    const { page = 1, perPage = 10, tab, s, f } = request;
     // eslint-disable-next-line no-console
     console.log("filter", f === null || f === void 0 ? void 0 : f.length);
     const filteredData = data_1.data
         .filter((item) => tab !== "only-odd-ids" || item.id % 2 === 0)
         .filter((item) => { var _a; return (request.search ? (_a = item.text) === null || _a === void 0 ? void 0 : _a.match(new RegExp(request.search, "i")) : true); })
         .sort((a, b) => {
-        if (!sort || !dir) {
+        if (!s) {
             return 1;
         }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -20,9 +20,9 @@ const loader = async (_, request) => {
         // @ts-ignore
         const second = b[sort];
         if (typeof first === "number") {
-            return dir === "asc" ? first - second : second - first;
+            return s.dir === "asc" ? first - second : second - first;
         }
-        return dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
+        return s.dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
     });
     // eslint-disable-next-line no-console
     console.log("loader", request);

package/_story-utils/schema.js

@@ -55,11 +55,20 @@ exports.schema = {
     ],
     tabs: [
         { name: "all", label: "All" },
-        { name: "only-odd-ids", label: "Only odd ids blablabla" },
+        {
+            name: "only-odd-ids",
+            label: "Only odd ids blablabla",
+            s: {
+                name: "id",
+                dir: types_1.DataGridSortDir.Desc,
+            },
+        },
         // { name: "only-odd-ids", label: "Only odd ids" },
     ],
-    dir: types_1.DataGridSortDir.Asc,
-    sort: "id",
+    s: {
+        name: "id",
+        dir: types_1.DataGridSortDir.Asc,
+    },
     perPage: 10,
     fullText: true,
 };

package/export-button/export-button.js

@@ -9,7 +9,7 @@ const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 function ExportButton(props) {
-    return (react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request, props.schema.sort, props.schema.dir)), title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
+    return (react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request)), title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
         react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" })));
 }
 exports.ExportButton = ExportButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.2.5",
+  "version": "11.3.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -31,7 +31,7 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@uxf/ui": "11.1.0",
+    "@uxf/ui": "11.3.0",
     "dayjs": "1.11.10",
     "fast-glob": "^3.3.2",
     "qs": "6.11.2",

package/table/table.js

@@ -74,8 +74,8 @@ function Table(props) {
             props.actions.sortClear();
         }
     };
-    const sortColumns = props.state.request.sort && props.state.request.dir
-        ? [{ columnKey: props.state.request.sort, direction: props.state.request.dir.toUpperCase() }]
+    const sortColumns = props.state.request.s
+        ? [{ columnKey: props.state.request.s.name, direction: props.state.request.s.dir.toUpperCase() }]
         : [];
     const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
         headerRowHeight: props.headerRowHeight,

package/toolbar-tabs/toolbar-tabs.js

@@ -17,13 +17,13 @@ function ToolbarTabs(props) {
     var _a, _b, _c, _d;
     return (react_1.default.createElement(show_1.Show, { when: !!((_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", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.state.request.tab === t.name, onClick: () => props.actions.changeTab(t.name) })))),
+            react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.state.request.tab === t.name, onClick: () => props.actions.changeTab(t) })))),
             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, { variant: "text", className: "uxf-data-grid__toolbar-tabs-button", size: "sm", onClick: () => {
                         var _a;
                         return (0, modal_service_1.openModal)({
                             children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: item.name, variant: "text", size: "xl", onClick: () => {
-                                    props.actions.changeTab(item.name);
+                                    props.actions.changeTab(item);
                                     (0, modal_service_1.closeModal)();
                                 } },
                                 item.name === props.state.request.tab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),

package/types/api.d.ts

@@ -1,4 +1,4 @@
-import { DataGridSortDir } from "./schema";
+import { DataGridSort } from "./schema";
 export type ResultItem = any;
 export interface RequestFilter<T = any> {
     name: string;
@@ -8,8 +8,7 @@ export interface RequestFilter<T = any> {
 }
 export interface Request {
     f?: RequestFilter[];
-    sort?: string;
-    dir?: DataGridSortDir;
+    s?: DataGridSort;
     page?: number;
     perPage?: number;
     search?: string;

package/types/schema.d.ts

@@ -3,10 +3,15 @@ export declare enum DataGridSortDir {
     Asc = "asc",
     Desc = "desc"
 }
+export interface DataGridSort {
+    name: string;
+    dir: DataGridSortDir;
+}
 export interface Tab {
     name: string;
     label: string;
     icon?: string;
+    s?: DataGridSort;
 }
 export type BaseGridType = {
     columns: any;
@@ -44,8 +49,7 @@ export interface Schema<GritType extends BaseGridType> {
     columns: Columns<GritType["columns"]>[];
     filters: Filters<GritType["filters"]>[];
     tabs?: Tab[];
-    sort: string;
-    dir: DataGridSortDir;
+    s: DataGridSort;
     perPage: number;
     fullText?: boolean;
 }

package/types/state.d.ts

@@ -1,9 +1,8 @@
 import { RequestFilter } from "./api";
-import { DataGridSortDir } from "./schema";
+import { DataGridSort } from "./schema";
 export type GridRequest = {
     f: RequestFilter[];
-    sort: string | null;
-    dir: DataGridSortDir | null;
+    s: DataGridSort | null;
     page: number;
     perPage: number;
     search: string;

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

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

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

@@ -9,7 +9,7 @@ function createActions(dispatch) {
         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 }),
+        changeTab: (tab) => dispatch({ type: "CHANGE_TAB", tab }),
         setSelectedRows: (rows) => dispatch({ type: "SET_SELECTED_ROWS", rows }),
         hideColumn: (name) => dispatch({ type: "HIDE_COLUMN", name }),
         showColumn: (name) => dispatch({ type: "SHOW_COLUMN", name }),

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

@@ -17,7 +17,7 @@ export declare function useDataGridControl(config: UseDataGridControlConfig): {
         sort: (columnName: string, direction: string) => void;
         sortClear: () => void;
         search: (search: string) => void;
-        changeTab: (tabName: string) => void;
+        changeTab: (tab: import("../types/schema").Tab) => void;
         setSelectedRows: (rows: any[]) => void;
         hideColumn: (name: string) => void;
         showColumn: (name: string) => void;

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

@@ -5,14 +5,14 @@ const react_1 = require("react");
 const utils_1 = require("../utils");
 const loader_1 = require("./loader");
 function useDataGridFetching(config) {
-    const { state, schema, loader = loader_1.dataGridLoader, gridName } = config;
+    const { state, loader = loader_1.dataGridLoader, 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);
     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);
+        const request = (0, utils_1.createRequest)(stateRequest);
         setIsLoading(true);
         loader(gridName, request, (0, utils_1.encodeFilter)(request))
             .then((response) => {
@@ -27,7 +27,7 @@ function useDataGridFetching(config) {
             setError(e);
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stringStateRequest, schema.sort, schema.dir, gridName]);
+    }, [stringStateRequest, gridName]);
     (0, react_1.useEffect)(() => {
         reload();
     }, [reload]);

package/utils.d.ts

@@ -1,6 +1,5 @@
 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(request: GridRequest, defaultSort: string, defaultDir: DataGridSortDir): Request;
+export declare function createRequest(request: GridRequest): Request;

package/utils.js

@@ -9,8 +9,7 @@ function decodeFilter(filterString) {
             f: filter.f || [],
             perPage: filter.perPage || 10,
             page: filter.page || 0,
-            dir: filter.dir || "asc",
-            sort: filter.sort || "id",
+            s: filter.s,
             tab: (_a = filter.tab) !== null && _a !== void 0 ? _a : null,
             search: (_b = filter.search) !== null && _b !== void 0 ? _b : "",
         };
@@ -24,14 +23,12 @@ function encodeFilter(request) {
     return btoa(unescape(encodeURIComponent(JSON.stringify(request))));
 }
 exports.encodeFilter = encodeFilter;
-function createRequest(request, defaultSort, defaultDir) {
-    var _a, _b;
+function createRequest(request) {
     return {
-        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 !== ""),
+        s: request.s || undefined,
         search: request.search,
         tab: request.tab,
     };