mig-schema-table 3.0.60 → 3.0.61

package/dist/SchemaTable/index.d.ts

@@ -15,7 +15,6 @@ interface IColumnFilterMap {
 export interface ISchemaTableProps<T> {
     Heading?: any;
     checkedIndexes?: number[];
-    disabledCheckedIndexes?: number[];
     config?: {
         [propName: string]: IColumnConfig<T>;
     };
@@ -24,13 +23,14 @@ export interface ISchemaTableProps<T> {
     defaultColumnFilters?: IColumnFilterMap;
     defaultSortAsc?: boolean;
     defaultSortColumn?: keyof T;
+    disabledCheckedIndexes?: number[];
+    enableAutoFocus?: boolean;
     getRowClassName?: (rowData: T, dataIndex: number, filteredSortedData: IRenderData[]) => string;
     getRowSelected?: (rowData: T, dataIndex: number) => boolean;
-    maxHeight?: number;
-    isSearchable?: boolean;
-    enableAutoFocus?: boolean;
     isColumnFilterable?: boolean;
+    isSearchable?: boolean;
     isSortable?: boolean;
+    maxHeight?: number;
     onCheckedIndexesChange?: (dataIndex: number[]) => void;
     onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
     onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
@@ -38,6 +38,7 @@ export interface ISchemaTableProps<T> {
     schema: oas31.SchemaObject;
     searchPlaceholder?: string;
     style?: React.CSSProperties;
+    useFilterStateHash?: boolean;
     width: number;
 }
 export interface IDateColumnFilterValue {
@@ -46,6 +47,6 @@ export interface IDateColumnFilterValue {
     filterEmpty?: boolean;
 }
 export type TColumnFilterValue = string | number | boolean | IDateColumnFilterValue;
-declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight, schema, searchPlaceholder, style, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -8,6 +8,7 @@ import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
 import Td from "./Td";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
 import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
+import { parseLocationHash, serializeLocationHash } from "../inc/data";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 function getSortByValue(propSchema, propConfig) {
     var _a;
@@ -23,14 +24,15 @@ function getSortByValue(propSchema, propConfig) {
         propSchema.type === "integer" ||
         !!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell));
 }
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }) {
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight = 36, schema, searchPlaceholder, style, useFilterStateHash, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
-    const [searchQuery, setSearchQuery] = React.useState("");
-    const [columnFilterMap, setColumnFilterMap] = React.useState(defaultColumnFilters);
     const [popoverConfig, setPopoverConfig] = React.useState();
     const isDataFunction = data instanceof Function;
     const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
+    const [locationHash, setLocationHash] = React.useState(parseLocationHash(window.location.hash));
+    const [searchQuery, setSearchQuery] = React.useState(locationHash.searchQuery || "");
+    const [columnFilterMap, setColumnFilterMap] = React.useState(locationHash.columnFilterMap || defaultColumnFilters);
     const [isDirty, setIsDirty] = React.useState(false);
     React.useEffect(() => {
         if (isDataFunction) {
@@ -414,8 +416,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         if (isDataFunction) {
             setIsDirty(true);
         }
+        if (useFilterStateHash) {
+            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { searchQuery: e.currentTarget.value }));
+            return;
+        }
         setSearchQuery(e.currentTarget.value);
-    }, [isDataFunction]);
+    }, [isDataFunction, locationHash, useFilterStateHash]);
     const refreshData = React.useCallback(() => {
         setIsDirty(false);
         setSourceData(undefined);
@@ -441,6 +447,29 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
     const onPopoverClose = React.useCallback(() => {
         setPopoverConfig(undefined);
     }, []);
+    React.useEffect(() => {
+        if (!useFilterStateHash) {
+            return;
+        }
+        const onHashChange = () => {
+            setLocationHash(parseLocationHash(window.location.hash));
+        };
+        window.addEventListener("hashchange", onHashChange);
+        return () => {
+            window.removeEventListener("hashchange", onHashChange);
+        };
+    }, [useFilterStateHash]);
+    React.useEffect(() => {
+        if (!useFilterStateHash) {
+            return;
+        }
+        if (locationHash.columnFilterMap) {
+            setColumnFilterMap(locationHash.columnFilterMap);
+        }
+        if (locationHash.searchQuery !== undefined) {
+            setSearchQuery(locationHash.searchQuery);
+        }
+    }, [locationHash, useFilterStateHash]);
     const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue) => {
         if (!popoverConfig) {
             return;
@@ -452,8 +481,19 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
             disableColumnFilter(popoverConfig.propName);
             return;
         }
+        if (useFilterStateHash) {
+            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue }) }));
+            return;
+        }
         setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
-    }, [disableColumnFilter, isDataFunction, popoverConfig]);
+    }, [
+        columnFilterMap,
+        disableColumnFilter,
+        isDataFunction,
+        locationHash,
+        popoverConfig,
+        useFilterStateHash,
+    ]);
     const searchInputAutoFocus = React.useMemo(() => {
         if (enableAutoFocus === undefined) {
             return true;

package/dist/inc/data.d.ts

@@ -0,0 +1,2 @@
+export declare const parseLocationHash: <T extends {}>(search: string) => T;
+export declare const serializeLocationHash: (params: {}) => string;

package/dist/inc/data.js

@@ -0,0 +1,24 @@
+export const parseLocationHash = (search) => {
+    if (!search.length) {
+        return {};
+    }
+    const result = {};
+    search
+        .substring(1)
+        .split("&")
+        .forEach((pair) => {
+        if (!pair) {
+            return;
+        }
+        const splitPair = pair.split("=");
+        if (splitPair.length !== 2) {
+            return;
+        }
+        // @ts-ignore
+        result[decodeURIComponent(splitPair[0])] = JSON.parse(decodeURIComponent(splitPair[1]));
+    });
+    return result;
+};
+export const serializeLocationHash = (params) => `${Object.entries(params)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(value))}`)
+    .join("&")}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.60",
+  "version": "3.0.61",
   "main": "dist/index.js",
   "files": [
     "dist/"