mig-schema-table 3.0.41 → 3.0.43

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

@@ -3,11 +3,12 @@ import { oas31 } from "openapi3-ts";
 import { TColumnFilterValue } from "../../index";
 import { IColumnConfig } from "../../../types";
 export interface IFilterFormComponentProps {
-    onChange: (newValue?: TColumnFilterValue) => void;
-    propSchema: oas31.SchemaObject;
-    propName: string;
     columnFilterValue: TColumnFilterValue;
+    onChange: (newValue?: TColumnFilterValue) => void;
+    onInputKeyDown: (e: React.KeyboardEvent) => void;
     propConfig?: IColumnConfig<any>;
+    propName: string;
+    propSchema: oas31.SchemaObject;
 }
-declare const _default: React.MemoExoticComponent<({ onChange, propSchema, propName, propConfig, columnFilterValue, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columnFilterValue, onChange, onInputKeyDown, propConfig, propName, propSchema, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -4,22 +4,22 @@ import { t } from "../../../inc/string";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../../inc/constant";
 import DatePicker from "react-datepicker";
 import nl from "date-fns/locale/nl";
-const FilterFormComponent = ({ onChange, propSchema, propName, propConfig, columnFilterValue, }) => {
+const FilterFormComponent = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propName, propSchema, }) => {
     const { type, format, minimum, maximum } = propSchema;
     const value = columnFilterValue;
     switch (type) {
         case "integer":
-            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("div", Object.assign({ className: "input-group" }, { 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));
-                    }, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
+                    }, onKeyDown: onInputKeyDown, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
         case "boolean":
             let selectValue = value ? "✓" : "✕";
             if (value === undefined) {
                 selectValue = "";
             }
-            return (_jsxs("select", Object.assign({ className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
+            return (_jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
                     switch (e.currentTarget.value) {
                         case "✓":
                             onChange(true);
@@ -34,7 +34,7 @@ const FilterFormComponent = ({ onChange, propSchema, propName, propConfig, colum
         // @ts-ignore
         case "string":
             if (propSchema.enum) {
-                return (_jsxs("select", Object.assign({ className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
+                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) => {
                             const rowName = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
@@ -69,13 +69,13 @@ const FilterFormComponent = ({ onChange, propSchema, propName, propConfig, colum
                     }
                     onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
                 };
-                return (_jsxs("div", Object.assign({ className: "input-group d-flex" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })));
+                return (_jsxs("div", Object.assign({ className: "input-group d-flex" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { autoFocus: true, dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })));
             }
         // falls through
         default:
-            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, autoFocus: true, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { autoFocus: true, type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
                         onChange(e.currentTarget.value || undefined);
-                    } }) })));
+                    }, onKeyDown: onInputKeyDown }) })));
     }
 };
 export default React.memo(FilterFormComponent);

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

@@ -9,9 +9,10 @@ export interface ISchemaColumnFilterPopoverConfig {
 }
 type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
     onChange: (newValue?: TColumnFilterValue) => void;
+    onInputKeyDown: (e: React.KeyboardEvent) => void;
     propSchema: oas31.SchemaObject;
     value: TColumnFilterValue;
     onClose: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, propConfig, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, onInputKeyDown, propName, propSchema, referenceElement, value, propConfig, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import FilterFormComponent from "./FilterFormComponent";
 import { usePopper } from "react-popper";
-const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, referenceElement, value, propConfig, }) => {
+const SchemaColumnFilterPopover = ({ onChange, onClose, onInputKeyDown, propName, propSchema, referenceElement, value, propConfig, }) => {
     const [popperElement, setPopperElement] = React.useState(null);
     const [arrowElement, setArrowElement] = React.useState(null);
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -33,6 +33,6 @@ const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, re
         classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
     }
     const FilterForm = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterForm) || FilterFormComponent;
-    return (_jsxs("div", Object.assign({ className: classNames.join(" "), role: "tooltip", ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [_jsx("div", { className: "popover-arrow", ref: setArrowElement, style: styles.arrow }), _jsx("div", Object.assign({ className: "popover-body" }, { children: _jsx(FilterForm, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value, propConfig: propConfig }) }))] })));
+    return (_jsxs("div", Object.assign({ className: classNames.join(" "), role: "tooltip", ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [_jsx("div", { className: "popover-arrow", ref: setArrowElement, style: styles.arrow }), _jsx("div", Object.assign({ className: "popover-body" }, { children: _jsx(FilterForm, { onChange: onChange, onInputKeyDown: onInputKeyDown, propSchema: propSchema, propName: propName, columnFilterValue: value, propConfig: propConfig }) }))] })));
 };
 export default React.memo(SchemaColumnFilterPopover);

package/dist/SchemaTable/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { oas31 } from "openapi3-ts";
 import { IColumnConfig } from "../types";
-interface IGetDataProps {
+export interface IGetDataProps {
     searchQuery: string;
     columnFilterMap: {
         [propName: string]: TColumnFilterValue;

package/dist/SchemaTable/index.js

@@ -314,6 +314,18 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         delete newColumnFilterMap[propName];
         setColumnFilterMap(newColumnFilterMap);
     }, [columnFilterMap]);
+    const onSetSortColumn = React.useCallback((x) => {
+        if (data instanceof Function) {
+            setIsDirty(true);
+        }
+        setSortColumn(x);
+    }, [data]);
+    const onSetSortAsc = React.useCallback((x) => {
+        if (data instanceof Function) {
+            setIsDirty(true);
+        }
+        setSortAsc(x);
+    }, [data]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
         const propConfig = config ? config[propName] : undefined;
@@ -326,7 +338,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         const schema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
             : properties[propName]);
-        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propName: propName, schema: schema, setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propName: propName, schema: schema, setPopoverConfig: setPopoverConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
@@ -337,6 +349,8 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         isColumnFilterable,
         isSortable,
         onSelectAllIndexesHandler,
+        onSetSortAsc,
+        onSetSortColumn,
         properties,
         sortAsc,
         sortColumn,
@@ -371,9 +385,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         setIsDirty(false);
         setSourceData(undefined);
     }, []);
-    const onSearchKeyDown = React.useCallback((e) => {
-        if (e.key === "Enter" && isDirty) {
-            refreshData();
+    const onInputKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            setPopoverConfig(undefined);
+            if (isDirty) {
+                refreshData();
+            }
         }
     }, [isDirty, refreshData]);
     const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
@@ -393,13 +410,16 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         if (!popoverConfig) {
             return;
         }
+        if (data instanceof Function) {
+            setIsDirty(true);
+        }
         if (newColumnFilterValue === undefined) {
             disableColumnFilter(popoverConfig.propName);
             return;
         }
         setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
-    }, [disableColumnFilter, popoverConfig]);
-    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", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onSearchKeyDown, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `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: {
+    }, [data, disableColumnFilter, popoverConfig]);
+    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", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: true })) : null })), customElement] })), _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: SchemaTableTh }), `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",
@@ -408,6 +428,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                     backgroundColor: "#CCC",
                     alignItems: "center",
                     justifyContent: "center",
-                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
+                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, onInputKeyDown: onInputKeyDown, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
 }
 export default React.memo(SchemaTable);

package/package.json

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