mig-schema-table 3.0.29 → 3.0.31

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

@@ -9,7 +9,7 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
     const value = columnFilterValue;
     switch (type) {
         case "integer":
-            return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
                         onChange(e.currentTarget.value === ""
                             ? undefined
                             : parseInt(e.currentTarget.value));
@@ -19,7 +19,7 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
             if (value === undefined) {
                 selectValue = "";
             }
-            return (_jsxs("select", Object.assign({ value: selectValue, "data-prop-name": propName, onChange: (e) => {
+            return (_jsxs("select", Object.assign({ 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, columnFilterValue
         // @ts-ignore
         case "string":
             if (propSchema.enum) {
-                return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: (e) => {
+                return (_jsxs("select", Object.assign({ 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) => (_jsx("option", Object.assign({ value: name }, { children: uncamel(name) }), `column-filter-select-${name}`)))] })));
             }
@@ -64,13 +64,13 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
                     }
                     onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
                 };
-                return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { 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, { 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: "p-1" }, { children: _jsx("input", { autoFocus: true, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            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) => {
                         onChange(e.currentTarget.value || undefined);
-                    }, placeholder: `Search ${propName}` }) })));
+                    } }) })));
     }
 };
 export default React.memo(FilterFormComponent);

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -28,7 +28,7 @@ const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, re
             window.removeEventListener("click", onWindowClick, { capture: true });
         };
     }, [onClose, popperElement]);
-    const classNames = ["popover"];
+    const classNames = ["popover", "schema-column-filter-popover"];
     if (attributes.popper) {
         classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
     }

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

@@ -3,6 +3,7 @@ import { oas31 } from "openapi3-ts";
 import { IColumnConfig, IRenderData } from "../../types";
 interface ITdProps<T> {
     checkedIndexes?: number[];
+    disabledCheckedIndexes?: number[];
     columnIndex: number;
     data: T[];
     getRowClassName?: (rowData: T, dataIndex: number) => string;
@@ -17,6 +18,6 @@ interface ITdProps<T> {
     sortedRenderData?: IRenderData[];
     style: React.CSSProperties;
 }
-declare function Td<T>({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
+declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: typeof Td;
 export default _default;

package/dist/SchemaTable/Td/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
-function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
+function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
     const onTdClick = React.useCallback((e) => {
         if (!sortedRenderData || !onRowClick) {
             return;
@@ -55,7 +55,7 @@ function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected
             }
             onCheckedIndexesChange([row._index]);
         };
-        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index) }) })) })));
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index), disabled: disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(row._index) }) })) })));
     }
     if (!propSchema) {
         return null;

package/dist/SchemaTable/index.d.ts

@@ -4,6 +4,7 @@ import { IColumnConfig } from "../types";
 export interface ISchemaTableProps<T> {
     Heading?: any;
     checkedIndexes?: number[];
+    disabledCheckedIndexes?: number[];
     config?: {
         [propName: string]: IColumnConfig<T>;
     };
@@ -29,6 +30,6 @@ export type TColumnFilterValue = string | number | boolean | {
     from?: Date;
     to?: Date;
 };
-declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -8,7 +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";
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [searchQuery, setSearchQuery] = React.useState("");
@@ -113,11 +113,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         let dynamicWidthColumnCount = 0;
         columnNames.forEach((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
-                return SELECT_ALL_COLUMN_WIDTH;
+                fixedWidthColumnsWidth += SELECT_ALL_COLUMN_WIDTH;
+                return;
             }
             const propConfig = config ? config[propName] : undefined;
             if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
-                fixedWidthColumnsWidth += propConfig.width + 8;
+                fixedWidthColumnsWidth += propConfig.width;
             }
             else {
                 dynamicWidthColumnCount += 1;
@@ -127,12 +128,20 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     }, [columnNames, config]);
     const columnWidths = React.useMemo(() => {
         const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
+        let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
         return columnNames.map((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
                 return SELECT_ALL_COLUMN_WIDTH;
             }
             const propConfig = config ? config[propName] : undefined;
-            return (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) || dynamicColumnWidth;
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
+                return propConfig === null || propConfig === void 0 ? void 0 : propConfig.width;
+            }
+            if (roundingDifference) {
+                roundingDifference -= 1;
+                return dynamicColumnWidth + 1;
+            }
+            return dynamicColumnWidth;
         });
     }, [
         columnNames,
@@ -246,13 +255,18 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (!onCheckedIndexesChange || !filteredRenderData) {
             return;
         }
-        onCheckedIndexesChange(filteredRenderData.map((el) => el._index));
-    }, [onCheckedIndexesChange, filteredRenderData]);
+        onCheckedIndexesChange(filteredRenderData
+            .map((el) => el._index)
+            .filter((index) => !(disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(index))));
+    }, [onCheckedIndexesChange, filteredRenderData, disabledCheckedIndexes]);
     const isAllRowsChecked = React.useMemo(() => {
+        const tableData = [...(filteredRenderData || [])].filter((el) => (checkedIndexes ? checkedIndexes.includes(el._index) : true) ||
+            (disabledCheckedIndexes
+                ? !disabledCheckedIndexes.includes(el._index)
+                : true));
         return ((checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) !== 0 &&
-            (filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.length) === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) &&
-            (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.every((checkedIndex) => filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.some((el) => el._index === checkedIndex))));
-    }, [checkedIndexes, filteredRenderData]);
+            tableData.length === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length));
+    }, [checkedIndexes, disabledCheckedIndexes, filteredRenderData]);
     const disableColumnFilter = React.useCallback((propName) => {
         const newColumnFilterMap = Object.assign({}, columnFilterMap);
         delete newColumnFilterMap[propName];
@@ -284,12 +298,13 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     ]);
     const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
         const propName = columnNames[columnIndex];
-        return (_jsx(Td, { checkedIndexes: checkedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
+        return (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
     }, [
         checkedIndexes,
         columnNames,
         config,
         data,
+        disabledCheckedIndexes,
         getRowClassName,
         getRowSelected,
         onCheckedIndexesChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.29",
+  "version": "3.0.31",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -24,7 +24,7 @@
     "react-window": "^1.8.9"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
+    "build": "rm -rf dist; tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
     "prepublishOnly": "npm run build",
     "start": "react-scripts start",
     "test": "react-scripts test"

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

@@ -1,21 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-import { IColumnConfig } from "../../types";
-import { oas31 } from "openapi3-ts";
-import "react-datepicker/dist/react-datepicker.css";
-import { tColumnSearchValue } from "../index";
-interface IColumnFilterRowProps {
-    columnNames: string[];
-    getWidth: (index: number) => number;
-    config?: {
-        [propName: string]: IColumnConfig<any>;
-    };
-    columnSearchHandler: (propName: string, value: tColumnSearchValue) => void;
-    value: {
-        [propName: string]: tColumnSearchValue;
-    };
-    schema: oas31.SchemaObject;
-    columnFilterDropdown?: string;
-    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
-}
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -1,111 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import { SELECT_ALL_COLUMN_NAME } from "../constants";
-import DatePicker from "react-datepicker";
-import nl from "date-fns/locale/nl";
-import "react-datepicker/dist/react-datepicker.css";
-import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
-import { getUnixTimeStamp } from "../../inc/date";
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }) {
-    const { properties = {} } = schema;
-    const getSelectComponent = React.useCallback((propSchema, propName, value, inputChangeHandler) => {
-        const enumItems = propSchema.type === "boolean" ? ["✓", "✕"] : propSchema.enum;
-        return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: inputChangeHandler }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), enumItems.map((name) => (_jsx("option", Object.assign({ value: name }, { children: name }), `column-filter-select-${name}`)))] })));
-    }, []);
-    const field = React.useCallback((propSchema, propName, propValue) => {
-        const { type, format, minimum, maximum } = propSchema;
-        const inputChangeHandler = (event) => {
-            columnSearchHandler(propName, event.target.value);
-        };
-        const strValue = (propValue || "");
-        switch (type) {
-            case "string":
-                if (propSchema.enum) {
-                    return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
-                }
-                if (format === "date-time" || format === "date") {
-                    const dateFormat = format === "date"
-                        ? DEFAULT_DATE_FORMAT
-                        : DEFAULT_DATE_TIME_FORMAT;
-                    const dateRangeValue = propValue;
-                    const startDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from)
-                        ? new Date(dateRangeValue.from)
-                        : null;
-                    const endDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
-                        ? new Date(dateRangeValue.to)
-                        : null;
-                    const startDateChangeHandler = (date) => {
-                        if (endDate && date && date > endDate) {
-                            return;
-                        }
-                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { from: `${date || ""}`, to: `${date && endDate ? dateRangeValue.to : ""}` }));
-                    };
-                    const endDateChangeHandler = (date) => {
-                        if (startDate &&
-                            date &&
-                            getUnixTimeStamp(`${date}`) < getUnixTimeStamp(`${startDate}`)) {
-                            return;
-                        }
-                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { to: `${date || ""}` }));
-                    };
-                    return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: startDate, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, startDate: startDate, endDate: endDate, 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: endDate, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })) })));
-                }
-                return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }) })));
-            case "integer":
-                return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
-            case "boolean":
-                return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
-            default:
-                return _jsx(_Fragment, {});
-        }
-    }, [columnSearchHandler, getSelectComponent]);
-    const removeDropdown = React.useCallback((e) => {
-        if (!columnFilterDropdown) {
-            return;
-        }
-        let columnFilterEl = null;
-        let parentNode = e.target;
-        while (parentNode && parentNode.nodeName !== "HTML") {
-            if (typeof parentNode.className === "string" &&
-                parentNode.className.includes("schema-table__column-filter")) {
-                columnFilterEl = parentNode;
-                break;
-            }
-            parentNode = parentNode.parentNode;
-        }
-        if (!columnFilterEl) {
-            setColumnFilterDropdown && setColumnFilterDropdown(undefined);
-        }
-    }, [columnFilterDropdown, setColumnFilterDropdown]);
-    React.useEffect(() => {
-        if (!columnFilterDropdown) {
-            return;
-        }
-        window.addEventListener("click", removeDropdown, { capture: true });
-        return () => {
-            window.removeEventListener("click", removeDropdown, { capture: true });
-        };
-    }, [columnFilterDropdown, removeDropdown]);
-    const SchemaColumnFilter = React.useCallback((index) => {
-        const propName = columnNames[index];
-        const propSchema = properties[propName];
-        const propConfig = config ? config[propName] : undefined;
-        const propValue = value === null || value === void 0 ? void 0 : value[propName];
-        if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
-            return _jsx("div", { className: "schema-table__th" });
-        }
-        return (_jsx("ul", Object.assign({ id: "test", className: `dropdown-menu dropdown-menu-lg-end ${columnFilterDropdown && columnFilterDropdown === propName
-                ? "show"
-                : ""}`, style: {
-                position: "fixed",
-                marginTop: -10,
-                minHeight: 100,
-            } }, { children: _jsx("div", Object.assign({ id: "filter-dropdown-item", style: { margin: 10 } }, { children: field(propSchema, propName, propValue) })) })));
-    }, [columnFilterDropdown, columnNames, config, field, properties, value]);
-    return (_jsx("div", Object.assign({ className: "schema-table__th-row", style: { display: "flex", flex: "row" } }, { children: columnNames.map((columnName, index) => {
-            return (_jsx("div", Object.assign({ className: "schema-table__column-filter", style: {
-                    width: getWidth(index),
-                    paddingBottom: 7,
-                } }, { children: SchemaColumnFilter(index) }), `filter-${index}`));
-        }) })));
-}

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

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";

package/dist/SchemaTable/index.test.js

@@ -1,18 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import SchemaTable from "./index";
-it("renders an empty table", () => __awaiter(void 0, void 0, void 0, function* () {
-    render(_jsx(SchemaTable, { data: [], schema: {}, width: 1 }));
-    const table = yield screen.findByRole("table");
-    expect(table).toBeInTheDocument();
-}));

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

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

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

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { uncamel } 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, columnFilterValue, }) => {
-    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) => {
-                        onChange(e.currentTarget.value === ""
-                            ? undefined
-                            : parseInt(e.currentTarget.value));
-                    }, 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) => {
-                    switch (e.currentTarget.value) {
-                        case "✓":
-                            onChange(true);
-                            break;
-                        case "✕":
-                            onChange(false);
-                            break;
-                        default:
-                            onChange(undefined);
-                    }
-                } }, { 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) {
-                return (_jsxs("select", Object.assign({ 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) => (_jsx("option", Object.assign({ value: name }, { children: uncamel(name) }), `column-filter-select-${name}`)))] })));
-            }
-            if (format === "date-time" || format === "date") {
-                const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;
-                const dateRangeValue = (columnFilterValue || {
-                    from: undefined,
-                    to: 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, { 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) => {
-                        onChange(e.currentTarget.value || undefined);
-                    } }) })));
-    }
-};
-export default React.memo(FilterFormComponent);

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

@@ -1,15 +0,0 @@
-import React from "react";
-import { oas31 } from "openapi3-ts";
-import { TColumnFilterValue } from "../index";
-export interface ISchemaColumnFilterPopoverConfig {
-    referenceElement: HTMLElement;
-    propName: string;
-}
-type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
-    onChange: (newValue?: TColumnFilterValue) => void;
-    propSchema: oas31.SchemaObject;
-    value: TColumnFilterValue;
-    onClose: () => void;
-};
-declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

@@ -1,37 +0,0 @@
-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, }) => {
-    const [popperElement, setPopperElement] = React.useState(null);
-    const [arrowElement, setArrowElement] = React.useState(null);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
-        modifiers: [{ name: "arrow", options: { element: arrowElement } }],
-    });
-    React.useEffect(() => {
-        const onWindowClick = (e) => {
-            if (!popperElement) {
-                return;
-            }
-            let parent = e.target;
-            while (parent && popperElement) {
-                if (parent === popperElement) {
-                    return;
-                }
-                parent =
-                    parent.parentNode === window.document ? null : parent.parentNode;
-            }
-            onClose();
-        };
-        window.addEventListener("click", onWindowClick, { capture: true });
-        return () => {
-            window.removeEventListener("click", onWindowClick, { capture: true });
-        };
-    }, [onClose, popperElement]);
-    const classNames = ["popover", "schema-column-filter-popover"];
-    if (attributes.popper) {
-        classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
-    }
-    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(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) }))] })));
-};
-export default React.memo(SchemaColumnFilterPopover);

package/dist/component/SchemaTable/Td/index.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-import { oas31 } from "openapi3-ts";
-import { IColumnConfig, IRenderData } from "../../types";
-interface ITdProps<T> {
-    checkedIndexes?: number[];
-    columnIndex: number;
-    data: T[];
-    getRowClassName?: (rowData: T, dataIndex: number) => string;
-    getRowSelected?: (rowData: T) => boolean;
-    rowHeight: number;
-    rowIndex: number;
-    onCheckedIndexesChange?: (dataIndex: number[]) => void;
-    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
-    propConfig?: IColumnConfig<any>;
-    propName: string;
-    propSchema: oas31.SchemaObject;
-    sortedRenderData?: IRenderData[];
-    style: React.CSSProperties;
-}
-declare function Td<T>({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
-declare const _default: typeof Td;
-export default _default;

package/dist/component/SchemaTable/Td/index.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { SELECT_ALL_COLUMN_NAME } from "../constants";
-function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
-    const onTdClick = React.useCallback((e) => {
-        if (!sortedRenderData || !onRowClick) {
-            return;
-        }
-        const { rowIndex } = e.currentTarget.dataset;
-        if (!rowIndex) {
-            return;
-        }
-        const row = sortedRenderData[parseInt(rowIndex, 10)];
-        onRowClick(data[row._index], row._index, e);
-    }, [data, onRowClick, sortedRenderData]);
-    const row = sortedRenderData ? sortedRenderData[rowIndex] : undefined;
-    const tdDivProps = React.useMemo(() => {
-        if (!row) {
-            return undefined;
-        }
-        return {
-            "data-row-index": rowIndex,
-            "data-column-index": columnIndex,
-            key: propName,
-            style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
-            onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
-            className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${getRowSelected && getRowSelected(data[row._index])
-                ? " schema-table__td--selected"
-                : ""} ${getRowClassName ? getRowClassName(data[row._index], row._index) : ""}`,
-            title: row[propName],
-        };
-    }, [
-        columnIndex,
-        data,
-        getRowClassName,
-        getRowSelected,
-        onTdClick,
-        propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
-        propName,
-        row,
-        rowHeight,
-        rowIndex,
-        style,
-    ]);
-    if (!row || !tdDivProps) {
-        return null;
-    }
-    if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) {
-        return (_jsx("div", Object.assign({}, tdDivProps, { children: propConfig.renderCell(data[row._index], row._index, rowIndex) })));
-    }
-    if (propName === SELECT_ALL_COLUMN_NAME) {
-        const onChecked = () => {
-            if (!onCheckedIndexesChange) {
-                return;
-            }
-            onCheckedIndexesChange([row._index]);
-        };
-        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index) }) })) })));
-    }
-    if (!propSchema) {
-        return null;
-    }
-    switch (propSchema.type) {
-        case "boolean":
-            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
-            break;
-        case "number":
-        case "integer":
-            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
-            break;
-        default:
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
-                tdDivProps.className += ` text-${propConfig.align}`;
-            }
-    }
-    return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
-}
-export default React.memo(Td);