@uxf/data-grid 11.3.0 → 11.6.0

package/_generator/index.js

@@ -14,90 +14,23 @@ function writeFile(filename, value) {
     writeFileSync(filename, value);
 }
 
-function generateSchemaFile(gridName, schemaRelativeImport) {
+function generateSchemaFile(gridName, schema, schemaRelativeImport) {
     return `import { Schema } from "@uxf/data-grid";
 import json from "${schemaRelativeImport}";
 
-export const dataGridSchema_${camelize(gridName)}: Schema<any> = json as any;`;
+type DataGrid_${camelize(gridName)} = {
+    columns: {
+        ${schema.columns.map((column) => `"${column.name}": "${column.type}",`).join("\n        ")}
+    },
+    filters: {
+        ${schema.filters.map((filter) => `"${filter.name}": "${filter.type}",`).join("\n        ")}
+    }
 }
 
-function generateUseDataGridControl(gridName) {
-    return `import { useDataGridControl, UseDataGridControlConfig } from "@uxf/data-grid/use-data-grid-control";
-import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
-
-export function useDataGridControl_${camelize(gridName)}(config: Omit<UseDataGridControlConfig, "schema">) {
-    return useDataGridControl({
-        schema,
-        ...config,
-    });
-}
-`;
-}
-
-function generateUseDataGridFetching(gridName, isLoaderRequired) {
-    return `import { Loader } from "@uxf/data-grid/types/core";
-import { useDataGridFetching, UseDataGridFetchingConfig } from "@uxf/data-grid/use-data-grid-fetching";
-import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
-    
-export function useDataGridFetching_${camelize(gridName)}(
-    config: Omit<UseDataGridFetchingConfig, "gridName" | "loader" | "schema"> & { loader${
-        isLoaderRequired ? "" : "?"
-    }: Loader },
-) {
-    return useDataGridFetching({ gridName: "${gridName}", schema, ...config });
-}
-`;
-}
-
-function generateDataGridFile(gridName, isLoaderRequired) {
-    return `import { Nullish } from "@uxf/core/types";
-import { DataGrid, DataGridProps, DataGridUserConfig, Loader, Request } from "@uxf/data-grid";
-import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
-import { useDataGridFetching } from "@uxf/data-grid/use-data-grid-fetching";
-import React from "react";
-import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
-
-type Props = Omit<
-    DataGridProps<any, any>,
-    "gridName" | "schema" | "state" | "actions" | "data" | "isLoading" | "onReload"
-> & {
-    loader${isLoaderRequired ? "" : "?"}: Loader;
-    initialUserConfig?: DataGridUserConfig | Nullish;
-    initialState?: Request | string | Nullish;
-};
-
-export function DataGrid_${camelize(gridName)}(props: Props) {
-    const { state, actions } = useDataGridControl({
-        schema,
-        initialState: props.initialState,
-        initialUserConfig: props.initialUserConfig,
-    });
-    
-    const { data, error, onReload, isLoading } = useDataGridFetching({
-        gridName: "${gridName}",
-        schema,
-        state,
-        loader: props.loader,
-    });
-
-    return (
-        <DataGrid<any>
-            state={state}
-            actions={actions}
-            data={data}
-            isLoading={isLoading}
-            error={error}
-            onReload={onReload}
-            {...props}
-            gridName="admin-club"
-            schema={schema}
-        />
-    );
-}
-`;
+export const dataGridSchema_${camelize(gridName)}: Schema<DataGrid_${camelize(gridName)}> = json as any;`;
 }
 
-function generate(jsonSchema, filename, outputDirectory, isLoaderRequired) {
+function generate(schema, filename, outputDirectory) {
     const gridName = parse(filename).name;
     const generatedPath = join(process.cwd(), outputDirectory, gridName);
 
@@ -105,16 +38,12 @@ function generate(jsonSchema, filename, outputDirectory, isLoaderRequired) {
 
     writeFile(
         generatedSchemaFilename,
-        generateSchemaFile(gridName, relative(dirname(generatedSchemaFilename), filename)),
+        generateSchemaFile(gridName, schema, 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));
 }
 
 module.exports = (schemaDirectory, outputDirectory, requiredLoader) => {
     globSync(schemaDirectory + "/*.json")
         .map((path) => process.cwd() + "/" + path)
-        .forEach((filename) => generate(readFileSync(filename), filename, outputDirectory, requiredLoader));
+        .forEach((filename) => generate(JSON.parse(readFileSync(filename)), filename, outputDirectory, requiredLoader));
 };

package/_store/reducer.d.ts

@@ -1,8 +1,8 @@
 import { Nullish } from "@uxf/core/types";
 import { Reducer } from "react";
 import { Request } from "../types/api";
-import { Schema } from "../types/schema";
+import { BaseGridType, Schema } from "../types/schema";
 import { DataGridState, DataGridUserConfig } from "../types/state";
-export declare const getInitialState: (schema: Schema<any>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig | Nullish) => DataGridState;
-export declare const reducer: Reducer<DataGridState, any>;
-export declare const debugReducer: Reducer<DataGridState, any>;
+export declare function getInitialState<GridType extends BaseGridType>(schema: Schema<GridType>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig<GridType> | Nullish): DataGridState<GridType>;
+export declare const reducer: Reducer<DataGridState<any>, any>;
+export declare const debugReducer: Reducer<DataGridState<any>, any>;

package/_store/reducer.js

@@ -3,27 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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, _q, _r;
+function getInitialState(schema, init, initialUserConfig) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     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;
+    const initialTabName = (_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 initialTabSort = initialTabName !== null ? (_g = (_f = schema.tabs) === null || _f === void 0 ? void 0 : _f.find((t) => t.name === initialTabName)) === null || _g === void 0 ? void 0 : _g.s : null;
     return {
         request: {
             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,
+            s: (_k = (_j = initialState.s) !== null && _j !== void 0 ? _j : initialTabSort) !== 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,
+            tab: initialTabName,
             search: (_p = initialState.search) !== null && _p !== void 0 ? _p : "",
         },
-        userConfig: {
-            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,
-        },
+        userConfig: initialUserConfig !== null && initialUserConfig !== void 0 ? initialUserConfig : {},
         tabRequests: {},
     };
-};
+}
 exports.getInitialState = getInitialState;
 // eslint-disable-next-line complexity
 const reducer = (state, action) => {

package/_story-utils/loader.js

@@ -13,12 +13,8 @@ const loader = async (_, request) => {
         if (!s) {
             return 1;
         }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const first = a[sort];
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const second = b[sort];
+        const first = a[s.name];
+        const second = b[s.name];
         if (typeof first === "number") {
             return s.dir === "asc" ? first - second : second - first;
         }

package/_story-utils/schema.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.schema = void 0;
-const types_1 = require("../types");
 exports.schema = {
     columns: [
-        { name: "id", type: "number", label: "Id", sort: true },
+        { name: "id", type: "number", label: "Id", sort: true, config: { width: 50 } },
         { name: "text", type: "string", label: "Text", sort: true },
         { name: "bool", type: "boolean", label: "Boolean" },
         { name: "mail", type: "email", label: "E-mail" },
@@ -58,17 +57,10 @@ exports.schema = {
         {
             name: "only-odd-ids",
             label: "Only odd ids blablabla",
-            s: {
-                name: "id",
-                dir: types_1.DataGridSortDir.Desc,
-            },
+            s: { name: "id", dir: "desc" },
         },
-        // { name: "only-odd-ids", label: "Only odd ids" },
     ],
-    s: {
-        name: "id",
-        dir: types_1.DataGridSortDir.Asc,
-    },
+    s: { name: "id", dir: "asc" },
     perPage: 10,
     fullText: true,
 };

package/data-grid.stories.js

@@ -38,6 +38,14 @@ function Default() {
     const [noBorder, setNoBorder] = (0, react_1.useState)(false);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
+        initialUserConfig: {
+            columns: {
+                id: { width: 100 },
+                text: { minWidth: 300 },
+                mail: { minWidth: 300 },
+                tel: { minWidth: 300 },
+            },
+        },
     });
     const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.3.0",
+  "version": "11.6.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.3.0",
+    "@uxf/ui": "11.6.0",
     "dayjs": "1.11.10",
     "fast-glob": "^3.3.2",
     "qs": "6.11.2",

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -1,4 +1,4 @@
 import { Column } from "react-data-grid";
 import { DataGridState } from "../../types";
 import { TableProps } from "../types";
-export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState): Column<any>[];
+export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState<any>): Column<any>[];

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

@@ -29,16 +29,17 @@ const react_1 = __importStar(require("react"));
 const react_data_grid_1 = require("react-data-grid");
 function useReactDataGridColumns(props, state) {
     const { onReload, schema, isRowSelectable, bodyCells, actionCell } = props;
-    const columnsConfig = state.userConfig.columns;
+    const userConfigColumns = state.userConfig.columns;
     return (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const columns = [];
         if (isRowSelectable) {
             columns.push(react_data_grid_1.SelectColumn);
         }
         for (const schemaColumn of schema.columns) {
+            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 ((_a = columnsConfig === null || columnsConfig === void 0 ? void 0 : columnsConfig[schemaColumn.name]) === null || _a === void 0 ? void 0 : _a.isHidden) {
+            if (isHidden) {
                 continue;
             }
             columns.push({
@@ -47,9 +48,8 @@ function useReactDataGridColumns(props, state) {
                 headerCellClass: (0, cx_1.cx)("uxf-data-grid__cell", "uxf-data-grid__cell--header", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
                 resizable: true,
                 sortable: schemaColumn.sort,
-                width: (_d = (_c = (_b = state.userConfig.columns) === null || _b === void 0 ? void 0 : _b[schemaColumn.name]) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : schemaColumn.width,
-                minWidth: (_g = (_f = (_e = state.userConfig.columns) === null || _e === void 0 ? void 0 : _e[schemaColumn.name]) === null || _f === void 0 ? void 0 : _f.minWidth) !== null && _g !== void 0 ? _g : schemaColumn.minWidth,
-                maxWidth: schemaColumn.maxWidth,
+                width: (_f = (_e = (_d = state.userConfig.columns) === null || _d === void 0 ? void 0 : _d[schemaColumn.name]) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : (_g = schemaColumn.config) === null || _g === void 0 ? void 0 : _g.width,
+                minWidth: (_k = (_j = (_h = state.userConfig.columns) === null || _h === void 0 ? void 0 : _h[schemaColumn.name]) === null || _j === void 0 ? void 0 : _j.minWidth) !== null && _k !== void 0 ? _k : (_l = schemaColumn.config) === null || _l === void 0 ? void 0 : _l.minWidth,
                 cellClass: (0, cx_1.cx)("uxf-data-grid__cell", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
                 renderCell: (p) => {
                     var _a;
@@ -79,6 +79,6 @@ function useReactDataGridColumns(props, state) {
             });
         }
         return columns;
-    }, [columnsConfig, actionCell, schema.columns, bodyCells, isRowSelectable, onReload, state.userConfig.columns]);
+    }, [userConfigColumns, actionCell, schema.columns, bodyCells, isRowSelectable, onReload, state.userConfig.columns]);
 }
 exports.useReactDataGridColumns = useReactDataGridColumns;

package/types/core.d.ts

@@ -1,7 +1,6 @@
 import { Request, Response, ResultItem } from "./api";
 import { BaseGridType } from "./schema";
 export type KeyExtractor = (row: ResultItem) => number;
-export type ChangeHiddenColumnsHandler = (hiddenColumns: string[]) => void;
 export type CsvDownloadHandler = (request: Request) => void;
 export type Loader = (gridName: string | undefined, request: Request, encodedRequest: string) => Promise<Response>;
 export type CallbackRef = {

package/types/schema.d.ts

@@ -1,11 +1,12 @@
 import { ReactElement } from "react";
+/** @deprecated use 'asc' or 'desc' */
 export declare enum DataGridSortDir {
     Asc = "asc",
     Desc = "desc"
 }
 export interface DataGridSort {
     name: string;
-    dir: DataGridSortDir;
+    dir: "asc" | "desc";
 }
 export interface Tab {
     name: string;
@@ -22,12 +23,12 @@ export type Column<Name, Type> = {
     label: string | ReactElement;
     type: Type;
     sort?: boolean;
-    hint?: string;
-    print?: boolean;
-    width?: number | string;
+    config?: ColumnConfig;
+};
+export type ColumnConfig = {
+    isHidden?: boolean;
+    width?: number;
     minWidth?: number;
-    maxWidth?: number;
-    frozen?: boolean;
 };
 export type Columns<C extends BaseGridType["columns"]> = {
     [K in keyof C]: Column<K, C[K]>;
@@ -46,6 +47,7 @@ export type Filters<F extends BaseGridType["filters"]> = {
     [K in keyof F]: Filter<K, F[K]>;
 }[keyof F];
 export interface Schema<GritType extends BaseGridType> {
+    name?: string;
     columns: Columns<GritType["columns"]>[];
     filters: Filters<GritType["filters"]>[];
     tabs?: Tab[];

package/types/schema.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridSortDir = void 0;
+/** @deprecated use 'asc' or 'desc' */
 var DataGridSortDir;
 (function (DataGridSortDir) {
     DataGridSortDir["Asc"] = "asc";

package/types/state.d.ts

@@ -1,5 +1,5 @@
 import { RequestFilter } from "./api";
-import { DataGridSort } from "./schema";
+import { BaseGridType, DataGridSort } from "./schema";
 export type GridRequest = {
     f: RequestFilter[];
     s: DataGridSort | null;
@@ -13,14 +13,14 @@ interface ColumnConfig {
     width?: number;
     minWidth?: number;
 }
-export interface DataGridUserConfig {
-    columns?: Record<string, ColumnConfig>;
+export interface DataGridUserConfig<GridType extends BaseGridType> {
+    columns?: Partial<Record<keyof GridType["columns"], ColumnConfig>>;
     perPage?: number;
 }
-export interface DataGridState {
+export interface DataGridState<GridType extends BaseGridType> {
     request: GridRequest;
     selectedRows?: any[];
-    userConfig: DataGridUserConfig;
+    userConfig: DataGridUserConfig<GridType>;
     tabRequests: {
         [tab: string]: GridRequest;
     };

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

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