mig-schema-table 3.0.92 → 3.0.94

package/dist/SchemaTable/ThMenu/FilterMenuComponent/index.js

@@ -11,25 +11,43 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../../inc/constant";
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, ENumberColumnFilterOperation, } from "../../../inc/constant";
 import DatePicker from "react-datepicker";
 import nl from "date-fns/locale/nl";
 import { endOfDay } from "date-fns";
+const numberColumnFilterOperationsLabelMap = {
+    [ENumberColumnFilterOperation.GT]: ">",
+    [ENumberColumnFilterOperation.LT]: "<",
+    [ENumberColumnFilterOperation.EQ]: "=",
+};
 const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, propIsRequired, propName, propSchema, translate, }) => {
     const { type, format, minimum, maximum } = propSchema || {};
     const value = columnFilterValue;
     const isDateTime = format === "date-time";
     switch (type) {
+        case "number":
         case "integer":
-            return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
-                            onChange(e.currentTarget.value === ""
-                                ? undefined
-                                : parseInt(e.currentTarget.value), false);
-                        }, onBlur: (e) => {
-                            onChange(e.currentTarget.value === ""
-                                ? undefined
-                                : parseInt(e.currentTarget.value), true);
-                        }, onKeyDown: onInputKeyDown, placeholder: `Search ${propName}`, min: minimum, max: maximum }) }) })));
+            const numberColumnFilterValue = (value || {});
+            const changeOperationValue = (operation, el, persistState) => {
+                const newValue = Object.assign(Object.assign({}, numberColumnFilterValue), { [operation]: el.value === "" ? undefined : parseInt(el.value) });
+                const hasValue = Object.values(newValue).find((opValue) => isFinite(opValue));
+                onChange(hasValue ? newValue : undefined, persistState);
+            };
+            return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", style: { marginRight: 14 }, checked: !!numberColumnFilterValue.filterEmpty, onChange: () => {
+                                            const { filterEmpty } = numberColumnFilterValue, newNumberColumnFilterValue = __rest(numberColumnFilterValue, ["filterEmpty"]);
+                                            if (!filterEmpty) {
+                                                newNumberColumnFilterValue.filterEmpty = true;
+                                            }
+                                            onChange(Object.keys(newNumberColumnFilterValue).length
+                                                ? newNumberColumnFilterValue
+                                                : undefined, true);
+                                        } }), "Hide empty values"] })), _jsx("hr", {})] }))), Object.keys(ENumberColumnFilterOperation).map((operation) => {
+                        return (_jsxs("li", { children: [_jsx("label", Object.assign({ style: { width: 40, paddingLeft: 16 } }, { children: numberColumnFilterOperationsLabelMap[operation] })), _jsx("input", { className: "form-control", style: { width: 120 }, type: "number", value: numberColumnFilterValue[operation] || "", "data-prop-name": propName, onChange: (e) => {
+                                        changeOperationValue(operation, e.currentTarget, false);
+                                    }, onBlur: (e) => {
+                                        changeOperationValue(operation, e.currentTarget, true);
+                                    }, onKeyDown: onInputKeyDown, min: minimum, max: maximum })] }, operation));
+                    })] })));
         case "boolean":
             let selectValue = value ? "✓" : "✕";
             if (value === undefined) {
@@ -65,7 +83,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
                     to: undefined,
                     filterEmpty: undefined,
                 });
-                return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", className: "m-0 me-1", checked: !!dateRangeValue.filterEmpty, onChange: () => {
+                return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", checked: !!dateRangeValue.filterEmpty, onChange: () => {
                                                 const { filterEmpty } = dateRangeValue, newDateRangeValue = __rest(dateRangeValue, ["filterEmpty"]);
                                                 if (!filterEmpty) {
                                                     newDateRangeValue.filterEmpty = true;

package/dist/SchemaTable/index.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { oas31 } from "openapi3-ts";
 import { IColumnConfig, IRenderData } from "../types";
+import { ENumberColumnFilterOperation } from "../inc/constant";
 export interface IGetDataProps {
     searchQuery: string;
     columnFilterMap: {
@@ -25,6 +26,7 @@ export interface ISchemaTableProps<T> {
     defaultSortColumn?: keyof T;
     disabledCheckedIndexes?: number[];
     enableAutoFocus?: boolean;
+    enableRowCounter?: boolean;
     getRowClassName?: (rowData: T, dataIndex: number, filteredSortedData: IRenderData[]) => string;
     getRowSelected?: (rowData: T, dataIndex: number) => boolean;
     isColumnFilterable?: boolean;
@@ -49,7 +51,13 @@ export interface IDateColumnFilterValue {
     to?: Date;
     filterEmpty?: true;
 }
-export type TColumnFilterValue = string | number | boolean | IDateColumnFilterValue;
-declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface INumberColumnFilterValue {
+    [ENumberColumnFilterOperation.GT]: number;
+    [ENumberColumnFilterOperation.LT]: number;
+    [ENumberColumnFilterOperation.EQ]: number;
+    filterEmpty?: true;
+}
+export type TColumnFilterValue = string | boolean | IDateColumnFilterValue | INumberColumnFilterValue;
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -16,7 +16,7 @@ import { localeFormat } from "../inc/date";
 import { defaultTranslate } from "../inc/string";
 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 { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, ENumberColumnFilterOperation, } from "../inc/constant";
 import { parseLocationHash, serializeLocationHash } from "../inc/data";
 import Th, { EColumnFilterStatus } from "./Th";
 import ThMenu from "./ThMenu";
@@ -46,7 +46,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
     return !!(isTableSortable &&
         (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
 }
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, style, translate = defaultTranslate, useFilterStateHash, width, }) {
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus = true, enableRowCounter = true, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, style, translate = defaultTranslate, useFilterStateHash, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [thMenuConfig, setThMenuConfig] = React.useState();
@@ -255,8 +255,38 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 const rawValue = sourceData[item._index][propName];
                 switch (propSchema === null || propSchema === void 0 ? void 0 : propSchema.type) {
                     case "boolean":
+                    case "number":
                     case "integer":
-                        result = rawValue === columnFilterValue;
+                        if (typeof columnFilterValue === "object") {
+                            if (columnFilterValue.filterEmpty && rawValue === undefined) {
+                                result = false;
+                            }
+                            for (const operation of Object.keys(ENumberColumnFilterOperation)) {
+                                const operationFilterValue = columnFilterValue[operation];
+                                if (result && isFinite(operationFilterValue)) {
+                                    switch (operation) {
+                                        case ENumberColumnFilterOperation.EQ:
+                                            if (rawValue !== operationFilterValue) {
+                                                result = false;
+                                            }
+                                            break;
+                                        case ENumberColumnFilterOperation.GT:
+                                            if (rawValue <= operationFilterValue) {
+                                                result = false;
+                                            }
+                                            break;
+                                        case ENumberColumnFilterOperation.LT:
+                                            if (rawValue >= operationFilterValue) {
+                                                result = false;
+                                            }
+                                            break;
+                                    }
+                                }
+                            }
+                        }
+                        else {
+                            result = rawValue === columnFilterValue;
+                        }
                         break;
                     // @ts-ignore
                     case "string":
@@ -532,12 +562,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         thMenuConfig,
         useFilterStateHash,
     ]);
-    const searchInputAutoFocus = React.useMemo(() => {
-        if (enableAutoFocus === undefined) {
-            return true;
-        }
-        return enableAutoFocus;
-    }, [enableAutoFocus]);
     const onClearFiltersButtonClick = React.useCallback(() => {
         if (useFilterStateHash) {
             window.location.hash = "";
@@ -569,7 +593,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             type: "text/csv;charset=utf-8",
         }), "export.csv");
     }, [sortedRenderData]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
                     width: rowWidth,
                     height: Math.max(50, tableBodyHeight),
                     border: "1px solid #BBB",

package/dist/inc/constant.d.ts

@@ -1,2 +1,7 @@
 export declare const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
 export declare const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";
+export declare enum ENumberColumnFilterOperation {
+    "GT" = "GT",
+    "LT" = "LT",
+    "EQ" = "EQ"
+}

package/dist/inc/constant.js

@@ -1,2 +1,8 @@
 export const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
 export const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";
+export var ENumberColumnFilterOperation;
+(function (ENumberColumnFilterOperation) {
+    ENumberColumnFilterOperation["GT"] = "GT";
+    ENumberColumnFilterOperation["LT"] = "LT";
+    ENumberColumnFilterOperation["EQ"] = "EQ";
+})(ENumberColumnFilterOperation || (ENumberColumnFilterOperation = {}));

package/dist/inc/string.js

@@ -20,6 +20,7 @@ const db = {
     "Europe/Berlin": "AMS",
     "Asia/Jakarta": "JKT",
     "Asia/Bangkok": "JKT",
+    showingFilteredCountOfTotalCount: "Showing {0} of {1}",
 };
 export function defaultTranslate(key, ...args) {
     let string = db[key] || uncamel(key);

package/dist/index.css

@@ -44,6 +44,9 @@
   padding-bottom: 1rem;
   align-items: center;
 }
+.schema-table__row_counter {
+  font-size: 0.835rem;
+}
 
 .schema-table__th {
   background-color: #fcfcfc;

package/dist/types.d.ts

@@ -18,9 +18,6 @@ export interface IColumnConfig<T> {
     sortByValue?: boolean;
     sortable?: boolean;
     title?: string | React.ReactElement;
-    translation?: {
-        [keyName: string]: string;
-    };
     width?: number;
 }
 export interface IRenderData {

package/package.json

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