mig-schema-table 3.0.60 → 3.0.62

package/dist/SchemaTable/SchemaColumnFilterPopover/FilterFormComponent/index.d.ts

@@ -9,7 +9,7 @@ export interface IFilterFormComponentProps {
     propConfig?: IColumnConfig<any>;
     propIsRequired: boolean;
     propName: string;
-    propSchema: oas31.SchemaObject;
+    propSchema?: oas31.SchemaObject;
 }
 declare const _default: React.MemoExoticComponent<({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/SchemaTable/SchemaColumnFilterPopover/FilterFormComponent/index.js

@@ -6,7 +6,7 @@ import DatePicker from "react-datepicker";
 import nl from "date-fns/locale/nl";
 import { endOfDay } from "date-fns";
 const FilterFormComponent = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }) => {
-    const { type, format, minimum, maximum } = propSchema;
+    const { type, format, minimum, maximum } = propSchema || {};
     const value = columnFilterValue;
     switch (type) {
         case "integer":
@@ -34,7 +34,7 @@ const FilterFormComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
                 } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), ["✓", "✕"].map((optionValue) => (_jsx("option", Object.assign({ value: optionValue }, { children: optionValue }), `column-filter-select-${optionValue}`)))] })));
         // @ts-ignore
         case "string":
-            if (propSchema.enum) {
+            if (propSchema === null || propSchema === void 0 ? void 0 : propSchema.enum) {
                 return (_jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
                         onChange(e.currentTarget.value || undefined);
                     } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => {

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) {
@@ -219,6 +221,11 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                 if (!result || columnFilterValue === undefined) {
                     return;
                 }
+                const propConfig = config ? config[propName] : undefined;
+                if (sourceData && (propConfig === null || propConfig === void 0 ? void 0 : propConfig.filter)) {
+                    result = propConfig.filter(sourceData[item._index], item._index);
+                    return;
+                }
                 const propSchema = properties[propName];
                 // @ts-ignore
                 const rawValue = sourceData[item._index][propName];
@@ -263,8 +270,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         searchQuery,
         columnNames,
         columnFilterMap,
-        properties,
+        config,
         sourceData,
+        properties,
     ]);
     // Sort the filtered data
     const sortedRenderData = React.useMemo(() => {
@@ -365,7 +373,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
             ? { type: "boolean" }
             : properties[propName]);
         const propConfig = config ? config[propName] : undefined;
-        let columnFilterStatus = isColumnFilterable && propSchema && (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) !== false
+        let columnFilterStatus = isColumnFilterable &&
+            (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterForm)) &&
+            (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) !== false
             ? EColumnFilterStatus.AVAILABLE
             : EColumnFilterStatus.UNAVAILABLE;
         if (columnFilterMap[propName] !== undefined) {
@@ -414,8 +424,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 +455,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 +489,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/dist/types.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { IFilterFormComponentProps } from "./SchemaTable/SchemaColumnFilterPopover/FilterFormComponent";
 export interface IColumnConfig<T> {
+    FilterForm?: (props: IFilterFormComponentProps) => React.ReactElement | null;
     align?: "start" | "center" | "end";
     dateFormat?: string;
     defaultSortDesc?: boolean;
-    FilterForm?: (props: IFilterFormComponentProps) => React.ReactElement | null;
+    filter?: (rowData: T, dataIndex: number) => boolean;
     hidden?: boolean;
     hoverTitle?: string;
     isFilterable?: boolean;

package/package.json

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