mig-schema-table 4.0.4 → 4.0.6

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

@@ -1,132 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-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":
-            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 !== undefined &&
-                    (minimum !== undefined ? hasValue >= minimum : true)
-                    ? newValue
-                    : undefined, persistState);
-            };
-            return (_jsxs("ol", Object.assign({ className: "mig-schema-table-menu mig-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) => {
-                        const val = numberColumnFilterValue[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: val !== undefined ? val : "", "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) {
-                selectValue = "";
-            }
-            return (_jsx("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
-                            switch (e.currentTarget.value) {
-                                case "✓":
-                                    onChange(true, true);
-                                    break;
-                                case "✕":
-                                    onChange(false, true);
-                                    break;
-                                default:
-                                    onChange(undefined, true);
-                            }
-                        } }, { 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 === null || propSchema === void 0 ? void 0 : propSchema.enum) {
-                return (_jsx("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
-                                onChange(e.currentTarget.value || undefined, true);
-                            } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((value) => {
-                                    return (_jsx("option", Object.assign({ value: value }, { children: translate(value) }), `column-filter-select-${value}`));
-                                })] })) }) })));
-            }
-            if (isDateTime || format === "date") {
-                const dateFormat = isDateTime
-                    ? DEFAULT_DATE_TIME_FORMAT
-                    : DEFAULT_DATE_FORMAT;
-                const dateRangeValue = (columnFilterValue || {
-                    from: undefined,
-                    to: undefined,
-                    filterEmpty: undefined,
-                });
-                return (_jsxs("ol", Object.assign({ className: "mig-schema-table-menu mig-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;
-                                                }
-                                                onChange(Object.keys(newDateRangeValue).length
-                                                    ? newDateRangeValue
-                                                    : undefined, true);
-                                            } }), "Hide empty values"] })), _jsx("hr", {})] }))), _jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsx("label", Object.assign({ style: { width: 120, paddingLeft: 4 } }, { children: "After" })), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: (date) => {
-                                        if (!date && !dateRangeValue.to) {
-                                            onChange(undefined, true);
-                                            return;
-                                        }
-                                        if (dateRangeValue.to && date && date > dateRangeValue.to) {
-                                            return;
-                                        }
-                                        onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }), true);
-                                    }, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: isDateTime, showTimeInput: isDateTime, timeIntervals: 15, shouldCloseOnSelect: !isDateTime })] })), _jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsx("label", Object.assign({ style: { width: 120, paddingLeft: 4 } }, { children: "Before" })), _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, true);
-                                            return;
-                                        }
-                                        const to = date
-                                            ? isDateTime
-                                                ? date
-                                                : endOfDay(date)
-                                            : undefined;
-                                        if (dateRangeValue.from && to && to < dateRangeValue.from) {
-                                            return;
-                                        }
-                                        onChange(Object.assign(Object.assign({}, columnFilterValue), { to }), true);
-                                    }, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeInput: isDateTime, showTimeSelect: isDateTime, timeIntervals: 15, shouldCloseOnSelect: !isDateTime })] }))] })));
-            }
-        // falls through
-        default:
-            return (_jsx("ol", Object.assign({ className: "mig-schema-table-menu mig-schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { 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, false);
-                        }, onKeyDown: onInputKeyDown, onBlur: (e) => {
-                            onChange(e.currentTarget.value || undefined, true);
-                        } }) }) })));
-    }
-};
-export default React.memo(FilterMenuComponent);

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

@@ -1,25 +0,0 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { oas31 } from "openapi3-ts";
-import { TColumnFilterValue } from "../index";
-import { IColumnConfig } from "../../types";
-export interface IThMenuConfig {
-    referenceElement: HTMLElement;
-    propName: string;
-    propConfig?: IColumnConfig<any>;
-    propIsRequired: boolean;
-}
-type TThMenuProps = IThMenuConfig & {
-    isSortable: boolean;
-    isFilterable: boolean;
-    onChange: (newValue: TColumnFilterValue | undefined, persistState?: boolean) => void;
-    onClose: (e: MouseEvent | React.MouseEvent) => void;
-    onInputKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-    propIsRequired: boolean;
-    propSchema: oas31.SchemaObject;
-    setSortAsc: Dispatch<SetStateAction<boolean>>;
-    setSortColumn: Dispatch<SetStateAction<string>>;
-    translate: (key: string, ...args: Array<string | number>) => string;
-    value: TColumnFilterValue;
-};
-declare const _default: React.MemoExoticComponent<({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, translate, value, }: TThMenuProps) => import("react/jsx-runtime").JSX.Element | null>;
-export default _default;

package/dist/SchemaTable/ThMenu/index.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import FilterMenuComponent from "./FilterMenuComponent";
-import { usePopper } from "react-popper";
-const ThMenu = ({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, translate, value, }) => {
-    const [menu, setMenu] = React.useState(null);
-    const [subMenu, setSubMenu] = React.useState(null);
-    const [subMenuReferenceElement, setSubMenuReferenceElement] = React.useState(null);
-    const menuPopper = usePopper(referenceElement, menu, {
-        placement: "bottom-end",
-    });
-    const subMenuPopper = usePopper(subMenuReferenceElement, subMenu, {
-        placement: "right-start",
-    });
-    React.useEffect(() => {
-        const onWindowClick = (e) => {
-            if (!menu) {
-                return;
-            }
-            let parent = e.target;
-            while (parent && menu) {
-                if (parent === menu || parent === subMenu) {
-                    return;
-                }
-                parent =
-                    parent.parentNode === window.document ? null : parent.parentNode;
-            }
-            onClose(e);
-        };
-        window.addEventListener("click", onWindowClick, { capture: true });
-        return () => {
-            window.removeEventListener("click", onWindowClick, { capture: true });
-        };
-    }, [onClose, menu, subMenu]);
-    const FilterMenu = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterMenu) || FilterMenuComponent;
-    const onSortAscendingClick = React.useCallback((e) => {
-        setSortColumn(propName);
-        setSortAsc(true);
-        onClose(e);
-    }, [onClose, propName, setSortAsc, setSortColumn]);
-    const onSortDescendingClick = React.useCallback((e) => {
-        setSortColumn(propName);
-        setSortAsc(false);
-        onClose(e);
-    }, [onClose, propName, setSortAsc, setSortColumn]);
-    const onFilterCheckboxChange = React.useCallback(() => {
-        onChange(undefined, true);
-    }, [onChange]);
-    if (!isSortable && !isFilterable) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "mig-schema-table__th-menu", ref: setMenu, style: menuPopper.styles.popper }, menuPopper.attributes.popper, { children: _jsxs("ol", Object.assign({ className: "mig-schema-table-menu" }, { children: [isSortable ? (_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] }))) : null, isSortable ? (_jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th-menu__icon" }, { children: "\u2191" })), " Sort descending"] }))) : null, isFilterable ? (_jsxs("li", Object.assign({ style: { padding: 8 }, onMouseOver: (e) => {
-                                setSubMenuReferenceElement(e.currentTarget);
-                            } }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th-menu__icon" }, { children: _jsx("input", { type: "checkbox", id: "mig-schema-table__th-menu__filters", checked: value !== undefined, disabled: value === undefined, onChange: onFilterCheckboxChange }) })), _jsx("label", Object.assign({ htmlFor: "mig-schema-table__th-menu__filters" }, { children: "Filters" })), _jsx("div", { className: "mig-schema-table__th-menu__sub-menu-indicator" })] }))) : null] })) })), subMenuReferenceElement ? (_jsx("div", Object.assign({ className: "mig-schema-table__th-menu__sub-menu", ref: setSubMenu, style: subMenuPopper.styles.popper }, subMenuPopper.attributes.popper, { children: _jsx(FilterMenu, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema, translate: translate }) }))) : null] }));
-};
-export default React.memo(ThMenu);

package/dist/SchemaTable/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
-export declare const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/SchemaTable/constants.js

@@ -1,2 +0,0 @@
-export const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
-export const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/SchemaTable/index.d.ts

@@ -1,67 +0,0 @@
-import React from "react";
-import { oas31 } from "openapi3-ts";
-import { VariableSizeGrid } from "react-window";
-import { IColumnConfig, IRenderData } from "../types";
-import { ENumberColumnFilterOperation } from "../inc/constant";
-export interface IGetDataProps {
-    searchQuery: string;
-    columnFilterMap: {
-        [propName: string]: TColumnFilterValue;
-    };
-    sortColumn?: string;
-    sortAsc: boolean;
-}
-interface IColumnFilterMap {
-    [propName: string]: TColumnFilterValue;
-}
-export interface ISchemaTableProps<T> {
-    Heading?: any;
-    checkedIndexes?: number[];
-    config?: {
-        [propName: string]: IColumnConfig<T>;
-    };
-    customElement?: React.ReactNode;
-    data: T[] | ((getDataProps: IGetDataProps) => Promise<T[]>);
-    defaultColumnFilters?: IColumnFilterMap;
-    defaultSortAsc?: boolean;
-    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;
-    isExportable?: boolean;
-    isResizable?: boolean;
-    isSearchable?: boolean;
-    isSortable?: boolean;
-    maxHeight?: number;
-    onCheckedIndexesChange?: (dataIndex: number[]) => void;
-    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
-    onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
-    onSearchEnter?: (searchQuery: string) => void;
-    rowHeight?: number;
-    schema: oas31.SchemaObject;
-    searchPlaceholder?: string;
-    settingsStorageKey?: string;
-    style?: React.CSSProperties;
-    translate?: (key: string, ...args: Array<string | number>) => string;
-    useFilterStateHash?: boolean;
-    width: number;
-    tableRef?: React.RefObject<VariableSizeGrid>;
-}
-export interface IDateColumnFilterValue {
-    from?: Date;
-    to?: Date;
-    filterEmpty?: true;
-}
-export interface INumberColumnFilterValue {
-    [ENumberColumnFilterOperation.GT]: number;
-    [ENumberColumnFilterOperation.LT]: number;
-    [ENumberColumnFilterOperation.EQ]: number;
-    filterEmpty?: true;
-}
-export type TColumnFilterValue = string | boolean | number | IDateColumnFilterValue | INumberColumnFilterValue;
-declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isResizable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, settingsStorageKey, style, translate, useFilterStateHash, width, tableRef, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof SchemaTable;
-export default _default;