mig-schema-table 3.0.18 → 3.0.20

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -48,7 +48,7 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
                         }
                         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, timeInputLabel: "Time:", showTimeInput: format === "date-time", 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, timeInputLabel: "Time:", showTimeInput: format === "date-time", shouldCloseOnSelect: format === "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":

package/dist/SchemaTable/Td/index.js

@@ -68,9 +68,9 @@ function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected
         case "integer":
             tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
             break;
-        case "string":
-            if (propSchema.format === "date" || propSchema.format === "date-time") {
-                tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
+        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] }));

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

@@ -2,20 +2,20 @@ import { oas31 } from "openapi3-ts";
 import React, { CSSProperties, Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
 interface IThProps {
-    config?: IColumnConfig<any>;
+    columnFilterDropdown?: string;
+    isAllChecked?: boolean;
+    isColumnSearchable?: boolean;
     isSortable: boolean;
     name: string;
+    numberOfSelectedRows?: number;
+    onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    propConfig?: IColumnConfig<any>;
     schema: oas31.SchemaObject;
+    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
     setSortAsc: Dispatch<SetStateAction<boolean>>;
     setSortColumn: Dispatch<SetStateAction<string>>;
     sortAsc?: boolean;
     style: CSSProperties;
-    onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    isAllChecked?: boolean;
-    numberOfSelectedRows?: number;
-    columnFilterDropdown?: string;
-    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
-    isColumnSearchable?: boolean;
 }
-declare const _default: ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, columnFilterDropdown, setColumnFilterDropdown, isColumnSearchable, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable, name, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, schema, setColumnFilterDropdown, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { uncamel } from "../../inc/string";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
-const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, columnFilterDropdown, setColumnFilterDropdown, isColumnSearchable, }) => {
+const Th = ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable, name, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, schema, setColumnFilterDropdown, setSortAsc, setSortColumn, sortAsc, style, }) => {
     const thDivProps = {
         style,
         className: `schema-table__th ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
@@ -10,11 +10,11 @@ const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortA
     const onSortButtonClick = React.useCallback(() => {
         if (sortAsc === undefined) {
             setSortColumn(name);
-            setSortAsc(!(config === null || config === void 0 ? void 0 : config.defaultSortDesc));
+            setSortAsc(!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc));
             return;
         }
         setSortAsc((sortAsc) => !sortAsc);
-    }, [config === null || config === void 0 ? void 0 : config.defaultSortDesc, name, setSortAsc, setSortColumn, sortAsc]);
+    }, [propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc, name, setSortAsc, setSortColumn, sortAsc]);
     const onFilterButtonClick = React.useCallback(() => {
         if (!setColumnFilterDropdown) {
             return;
@@ -36,17 +36,17 @@ const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortA
     }
     switch (schema.type) {
         case "boolean":
-            thDivProps.className += ` text-${(config === null || config === void 0 ? void 0 : config.align) || "center"} justify-content-${(config === null || config === void 0 ? void 0 : config.align) || "center"}`;
+            thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
             break;
         case "integer":
         case "number":
-            thDivProps.className += ` text-${(config === null || config === void 0 ? void 0 : config.align) || "end"} justify-content-${(config === null || config === void 0 ? void 0 : config.align) || "end"}`;
+            thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
             break;
-        case "string":
-            if (schema.format && ["date", "date-time"].indexOf(schema.format) >= 0) {
-                thDivProps.className += ` text-${(config === null || config === void 0 ? void 0 : config.align) || "end"} justify-content-${(config === null || config === void 0 ? void 0 : config.align) || "end"}`;
+        default:
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
+                thDivProps.className += ` text-${propConfig.align}`;
             }
     }
-    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (config === null || config === void 0 ? void 0 : config.sortable) === false, onClick: onSortButtonClick }, { children: [(config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title }))), (config === null || config === void 0 ? void 0 : config.isFilterable) && isColumnSearchable ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" } }, { children: _jsx("polygon", { "data-bs-toggle": "dropdown", fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
+    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortable) === false, onClick: onSortButtonClick }, { children: [(propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined ? uncamel(name) : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined ? uncamel(name) : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) && isColumnSearchable ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" } }, { children: _jsx("polygon", { "data-bs-toggle": "dropdown", fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
 };
 export default React.memo(Th);

package/dist/SchemaTable/index.js

@@ -256,7 +256,7 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     }, [checkedIndexes, filteredRenderData]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
-        return (_jsx(Th, { config: config ? config[propName] : undefined, isSortable: !!isSortable, name: propName, schema: properties[propName], setSortColumn: setSortColumn, setSortAsc: setSortAsc, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, onSelectAllIndexesHandler: onSelectAllIndexesHandler, isAllChecked: isAllRowsChecked, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, columnFilterDropdown: columnFilterDropdown, setColumnFilterDropdown: setColumnFilterDropdown, isColumnSearchable: isColumnSearchable }));
+        return (_jsx(Th, { columnFilterDropdown: columnFilterDropdown, isAllChecked: isAllRowsChecked, isColumnSearchable: isColumnSearchable, isSortable: !!isSortable, name: propName, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: config ? config[propName] : undefined, schema: properties[propName], setColumnFilterDropdown: setColumnFilterDropdown, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
         columnNames,
         config,
@@ -272,7 +272,7 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
     ]);
     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, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style, onRowClick: onRowClick }));
+        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 }));
     }, [
         checkedIndexes,
         columnNames,

package/dist/inc/constant.d.ts

@@ -1,2 +1,2 @@
-export declare const DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
-export declare const DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
+export declare const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
+export declare const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";

package/dist/inc/constant.js

@@ -1,2 +1,2 @@
-export const DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
-export const DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
+export const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
+export const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";

package/dist/index.css

@@ -24,6 +24,9 @@
   margin-top: 10px;
   margin-left: 30px;
 }
+.schema-table__column-filter .react-datepicker {
+  display: flex;
+}
 .schema-table__th {
   background-color: #eee;
   align-items: center;

package/package.json

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