mig-schema-table 3.0.54 → 3.0.56

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

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

@@ -4,7 +4,7 @@ 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 = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propName, propSchema, }) => {
+const FilterFormComponent = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }) => {
     const { type, format, minimum, maximum } = propSchema;
     const value = columnFilterValue;
     switch (type) {
@@ -48,28 +48,31 @@ const FilterFormComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
                 const dateRangeValue = (columnFilterValue || {
                     from: undefined,
                     to: undefined,
+                    filterEmpty: undefined,
                 });
-                const startDateChangeHandler = (date) => {
-                    if (!date && !dateRangeValue.to) {
-                        onChange(undefined);
-                        return;
-                    }
-                    if (dateRangeValue.to && date && date > dateRangeValue.to) {
-                        return;
-                    }
-                    onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }));
-                };
-                const endDateChangeHandler = (date) => {
-                    if (!date && !dateRangeValue.from) {
-                        onChange(undefined);
-                        return;
-                    }
-                    if (dateRangeValue.from && date && date < dateRangeValue.from) {
-                        return;
-                    }
-                    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, { 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" })] }))] })));
+                return (_jsxs("div", { children: [propIsRequired ? null : (_jsxs("div", { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", className: "m-0 me-1", checked: !!dateRangeValue.filterEmpty, onChange: () => {
+                                                onChange(Object.assign(Object.assign({}, dateRangeValue), { filterEmpty: !dateRangeValue.filterEmpty }));
+                                            } }), "Hide empty values"] })), _jsx("hr", {})] })), _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: (date) => {
+                                                if (!date && !dateRangeValue.to) {
+                                                    onChange(undefined);
+                                                    return;
+                                                }
+                                                if (dateRangeValue.to && date && date > dateRangeValue.to) {
+                                                    return;
+                                                }
+                                                onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }));
+                                            }, 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: (date) => {
+                                                if (!date && !dateRangeValue.from) {
+                                                    onChange(undefined);
+                                                    return;
+                                                }
+                                                if (dateRangeValue.from &&
+                                                    date &&
+                                                    date < dateRangeValue.from) {
+                                                    return;
+                                                }
+                                                onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
+                                            }, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] }))] }));
             }
         // falls through
         default:

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

@@ -6,13 +6,15 @@ export interface ISchemaColumnFilterPopoverConfig {
     referenceElement: HTMLElement;
     propName: string;
     propConfig?: IColumnConfig<any>;
+    propIsRequired: boolean;
 }
 type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
     onChange: (newValue?: TColumnFilterValue) => void;
     onInputKeyDown: (e: React.KeyboardEvent) => void;
+    propIsRequired: boolean;
     propSchema: oas31.SchemaObject;
     value: TColumnFilterValue;
     onClose: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ onChange, onClose, onInputKeyDown, propName, propSchema, referenceElement, value, propConfig, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, onInputKeyDown, propIsRequired, 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, onInputKeyDown, propName, propSchema, referenceElement, value, propConfig, }) => {
+const SchemaColumnFilterPopover = ({ onChange, onClose, onInputKeyDown, propIsRequired, 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, onInputKeyDown, propName
         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, onInputKeyDown: onInputKeyDown, 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, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propConfig: propConfig, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema }) }))] })));
 };
 export default React.memo(SchemaColumnFilterPopover);

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

@@ -15,6 +15,7 @@ interface IThProps {
     numberOfSelectedRows?: number;
     onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     propConfig?: IColumnConfig<any>;
+    propIsRequired: boolean;
     propName: string;
     schema?: oas31.SchemaObject;
     setPopoverConfig?: Dispatch<SetStateAction<ISchemaColumnFilterPopoverConfig | undefined>>;
@@ -23,5 +24,5 @@ interface IThProps {
     sortAsc?: boolean;
     style: CSSProperties;
 }
-declare const _default: ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ columnFilterStatus, disableColumnFilter, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -9,7 +9,7 @@ export var EColumnFilterStatus;
     EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
     EColumnFilterStatus["ACTIVE"] = "ACTIVE";
 })(EColumnFilterStatus || (EColumnFilterStatus = {}));
-const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
+const Th = ({ columnFilterStatus, disableColumnFilter, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
     const thDivProps = {
         style,
         className: `schema-table__th schema-table__th--column-filter-status-${columnFilterStatus} ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
@@ -43,15 +43,17 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
                 return undefined;
             }
             return {
-                referenceElement,
-                propName,
                 propConfig,
+                propIsRequired,
+                propName,
+                referenceElement,
             };
         });
     }, [
         columnFilterStatus,
         disableColumnFilter,
         propConfig,
+        propIsRequired,
         propName,
         setPopoverConfig,
     ]);

package/dist/SchemaTable/index.d.ts

@@ -40,10 +40,12 @@ export interface ISchemaTableProps<T> {
     style?: React.CSSProperties;
     width: number;
 }
-export type TColumnFilterValue = string | number | boolean | {
+export interface IDateColumnFilterValue {
     from?: Date;
     to?: Date;
-};
+    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 const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -43,7 +43,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         sortColumn,
         sourceData,
     ]);
-    const { properties = {} } = schema;
+    const { properties = {}, required = [] } = schema;
     const columnNames = React.useMemo(() => {
         const columns = Object.keys(properties);
         if (onCheckedIndexesChange) {
@@ -208,7 +208,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                 const propSchema = properties[propName];
                 // @ts-ignore
                 const rawValue = sourceData[item._index][propName];
-                switch (propSchema.type) {
+                switch (propSchema === null || propSchema === void 0 ? void 0 : propSchema.type) {
                     case "boolean":
                     case "integer":
                         result = rawValue === columnFilterValue;
@@ -218,11 +218,16 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                         if (typeof columnFilterValue === "object" &&
                             (propSchema.format === "date" ||
                                 propSchema.format === "date-time")) {
-                            const { from, to } = columnFilterValue;
-                            const rawDate = rawValue ? new Date(rawValue) : undefined;
-                            if ((from && (!rawDate || rawDate < from)) ||
-                                (to && (!rawDate || rawDate > to))) {
-                                result = false;
+                            const { from, to, filterEmpty } = columnFilterValue;
+                            if (!rawValue) {
+                                result = !filterEmpty;
+                            }
+                            else {
+                                const rawDate = rawValue ? new Date(rawValue) : undefined;
+                                if ((from && (!rawDate || rawDate < from)) ||
+                                    (to && (!rawDate || rawDate > to))) {
+                                    result = false;
+                                }
                             }
                             return;
                         }
@@ -358,7 +363,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: onSetSortAsc, setSortColumn: onSetSortColumn, 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, propIsRequired: required.includes(propName), 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,
@@ -372,6 +377,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         onSetSortAsc,
         onSetSortColumn,
         properties,
+        required,
         sortAsc,
         sortColumn,
     ]);
@@ -455,6 +461,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, onInputKeyDown: onInputKeyDown, 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, propIsRequired: popoverConfig.propIsRequired, 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.54",
+  "version": "3.0.56",
   "main": "dist/index.js",
   "files": [
     "dist/"