mig-schema-table 3.0.33 → 3.0.35

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

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

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { uncamel } from "../../../inc/string";
+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, columnFilterValue, }) => {
+const FilterFormComponent = ({ onChange, propSchema, propName, propConfig, columnFilterValue, }) => {
     const { type, format, minimum, maximum } = propSchema;
     const value = columnFilterValue;
     switch (type) {
@@ -36,7 +36,12 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
             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}`)))] })));
+                    } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => {
+                            const rowName = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
+                                ? name
+                                : t(name, propConfig.translation);
+                            return (_jsx("option", Object.assign({ value: rowName }, { children: rowName }), `column-filter-select-${rowName}`));
+                        })] })));
             }
             if (format === "date-time" || format === "date") {
                 const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;

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

@@ -1,9 +1,11 @@
 import React from "react";
 import { oas31 } from "openapi3-ts";
 import { TColumnFilterValue } from "../index";
+import { IColumnConfig } from "../../types";
 export interface ISchemaColumnFilterPopoverConfig {
     referenceElement: HTMLElement;
     propName: string;
+    propConfig?: IColumnConfig<any>;
 }
 type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
     onChange: (newValue?: TColumnFilterValue) => void;
@@ -11,5 +13,5 @@ type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
     value: TColumnFilterValue;
     onClose: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, 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, }) => {
+const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, referenceElement, value, propConfig, }) => {
     const [popperElement, setPopperElement] = React.useState(null);
     const [arrowElement, setArrowElement] = React.useState(null);
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -32,6 +32,6 @@ const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, re
     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 }) }))] })));
+    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, propConfig: propConfig }) }))] })));
 };
 export default React.memo(SchemaColumnFilterPopover);

package/dist/SchemaTable/Th/index.js

@@ -44,9 +44,16 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
             return {
                 referenceElement,
                 propName,
+                propConfig,
             };
         });
-    }, [columnFilterStatus, disableColumnFilter, propName, setPopoverConfig]);
+    }, [
+        columnFilterStatus,
+        disableColumnFilter,
+        propConfig,
+        propName,
+        setPopoverConfig,
+    ]);
     if (propName === SELECT_ALL_COLUMN_NAME) {
         return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
                     width: "100%",

package/dist/SchemaTable/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { VariableSizeGrid, VariableSizeList } from "react-window";
 import { localeFormat } from "../inc/date";
-import { uncamel } from "../inc/string";
+import { t, uncamel } from "../inc/string";
 import Th, { EColumnFilterStatus } from "./Th";
 import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
 import Td from "./Td";
@@ -66,7 +66,10 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                 prev[propName] = "?";
                 return prev;
             }
-            const rawValue = object[propName];
+            const val = object[propName];
+            const rawValue = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
+                ? val
+                : t(val, propConfig.translation);
             switch (schema.type) {
                 case "array":
                     prev[propName] =
@@ -229,22 +232,31 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
             });
         }
         return filteredRenderData.sort((a, b) => {
+            var _a;
+            const isDate = sortSchema && ((_a = sortSchema.format) === null || _a === void 0 ? void 0 : _a.startsWith("date"));
             const sortByValue = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortByValue) === undefined
                 ? !sortSchema ||
+                    isDate ||
                     sortSchema.type === "boolean" ||
                     sortSchema.type === "integer" ||
-                    sortSchema.format === "date" ||
-                    sortSchema.format === "date-time" ||
                     (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)
                 : propConfig.sortByValue;
-            const x = sortByValue && data[a._index]
+            let x = sortByValue && data[a._index]
                 ? // @ts-ignore
                     data[a._index][sortColumn]
                 : a[sortColumn].toLowerCase();
-            const y = sortByValue && data[b._index]
+            let y = sortByValue && data[b._index]
                 ? // @ts-ignore
                     data[b._index][sortColumn]
                 : b[sortColumn].toLowerCase();
+            if (sortByValue && isDate) {
+                if (x && typeof x === "string") {
+                    x = new Date(x);
+                }
+                if (y && typeof y === "string") {
+                    y = new Date(y);
+                }
+            }
             if (x === y) {
                 return 0;
             }
@@ -339,6 +351,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         }
         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, 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}`), _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}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
+    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, 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}`), _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}`), 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] })));
 }
 export default React.memo(SchemaTable);

package/dist/inc/string.d.ts

@@ -1 +1,4 @@
 export declare function uncamel(camel: string): string;
+export declare function t(key: string, db: {
+    [keyName: string]: string;
+}): string;

package/dist/inc/string.js

@@ -15,3 +15,6 @@ export function uncamel(camel) {
         return ` ${nextIsUppercase ? letter : letter.toLowerCase()}`;
     }));
 }
+export function t(key, db) {
+    return db[key] || uncamel(key);
+}

package/dist/types.d.ts

@@ -14,6 +14,9 @@ export interface IColumnConfig<T> {
     order?: number;
     isFilterable?: boolean;
     dateFormat?: string;
+    translation?: {
+        [keyName: string]: string;
+    };
 }
 export interface IRenderData {
     _index: number;

package/package.json

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