mig-schema-table 3.0.35 → 3.0.37

package/dist/SchemaTable/Td/index.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
+import { localeFormatInTimeZone, timeZone } from "../../inc/date";
+import { DEFAULT_DATE_TIME_FORMAT } from "../../inc/constant";
+import { t } from "../../inc/string";
 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) {
@@ -18,6 +21,18 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
         if (!row) {
             return undefined;
         }
+        let title = propName === SELECT_ALL_COLUMN_NAME ? null : row[propName];
+        if (propSchema.format &&
+            propSchema.format.startsWith("date") &&
+            (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
+            // @ts-ignore
+            const dateString = data[row._index][propName];
+            const date = dateString ? new Date(dateString) : undefined;
+            const alternativeTimeZone = timeZone === "Europe/Amsterdam" ? "Asia/Jakarta" : "Europe/Amsterdam";
+            if (date) {
+                title = `${localeFormatInTimeZone(date, alternativeTimeZone, DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
+            }
+        }
         return {
             "data-row-index": rowIndex,
             "data-column-index": columnIndex,
@@ -27,7 +42,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
             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: propName === SELECT_ALL_COLUMN_NAME ? null : row[propName],
+            title,
         };
     }, [
         columnIndex,
@@ -35,8 +50,9 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
         getRowClassName,
         getRowSelected,
         onTdClick,
-        propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
+        propConfig,
         propName,
+        propSchema,
         row,
         rowHeight,
         rowIndex,

package/dist/SchemaTable/Th/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { uncamel } from "../../inc/string";
+import { t, uncamel } from "../../inc/string";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
+import { timeZone } from "../../inc/date";
 export var EColumnFilterStatus;
 (function (EColumnFilterStatus) {
     EColumnFilterStatus["UNAVAILABLE"] = "UNAVAILABLE";
@@ -54,6 +55,17 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
         propName,
         setPopoverConfig,
     ]);
+    const labelBody = React.useMemo(() => {
+        if ((propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) !== undefined) {
+            return propConfig.title;
+        }
+        if (schema.format &&
+            schema.format.startsWith("date") &&
+            (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
+            return `${uncamel(propName)} (${t(timeZone)})`;
+        }
+        return uncamel(propName);
+    }, [propConfig, propName, schema.format]);
     if (propName === SELECT_ALL_COLUMN_NAME) {
         return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
                     width: "100%",
@@ -76,10 +88,6 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
                 thDivProps.className += ` text-${propConfig.align}`;
             }
     }
-    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(propName)
-                        : 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(propName)
-                    : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_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" }, fill: "currentColor" }, { children: _jsx("polygon", { 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: [labelBody, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: labelBody }))), columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_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" }, fill: "currentColor" }, { children: _jsx("polygon", { 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

@@ -8,6 +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";
+const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 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);
@@ -250,11 +251,13 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                     data[b._index][sortColumn]
                 : b[sortColumn].toLowerCase();
             if (sortByValue && isDate) {
-                if (x && typeof x === "string") {
-                    x = new Date(x);
+                x = new Date(x);
+                if (isNaN(x)) {
+                    x = startOfTheWorldDate;
                 }
-                if (y && typeof y === "string") {
-                    y = new Date(y);
+                y = new Date(y);
+                if (isNaN(y)) {
+                    y = startOfTheWorldDate;
                 }
             }
             if (x === y) {
@@ -293,7 +296,10 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         if (columnFilterMap[propName] !== undefined) {
             columnFilterStatus = EColumnFilterStatus.ACTIVE;
         }
-        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: properties[propName], setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+        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: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
@@ -310,7 +316,10 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
     ]);
     const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
         const propName = columnNames[columnIndex];
-        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 }));
+        const propSchema = (propName === SELECT_ALL_COLUMN_NAME
+            ? { type: "boolean" }
+            : properties[propName]);
+        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: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
     }, [
         checkedIndexes,
         columnNames,

package/dist/inc/date.d.ts

@@ -1 +1,3 @@
 export declare const localeFormat: (date: Date | number, dateFormat: string) => string;
+export declare const localeFormatInTimeZone: (date: Date | number, timezone: string, dateFormat: string) => string;
+export declare const timeZone: string;

package/dist/inc/date.js

@@ -1,3 +1,7 @@
 import { format } from "date-fns";
+import { formatInTimeZone } from "date-fns-tz";
 import nl from "date-fns/locale/nl";
 export const localeFormat = (date, dateFormat) => format(date, dateFormat, { locale: nl });
+export const localeFormatInTimeZone = (date, timezone, dateFormat) => formatInTimeZone(date, timezone, dateFormat, { locale: nl });
+// E.g. Europe/Amsterdam or Asia/Jakarta
+export const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/dist/inc/string.d.ts

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

package/dist/inc/string.js

@@ -15,6 +15,9 @@ export function uncamel(camel) {
         return ` ${nextIsUppercase ? letter : letter.toLowerCase()}`;
     }));
 }
-export function t(key, db) {
+export function t(key, db = {
+    "Europe/Amsterdam": "AMS",
+    "Asia/Jakarta": "JKT",
+}) {
     return db[key] || uncamel(key);
 }

package/dist/types.d.ts

@@ -1,22 +1,23 @@
 import React from "react";
 export interface IColumnConfig<T> {
     align?: "start" | "center" | "end";
+    dateFormat?: string;
     defaultSortDesc?: boolean;
     hidden?: boolean;
     hoverTitle?: string;
+    isFilterable?: boolean;
+    order?: number;
     renderCell?: (rowData: T, dataIndex: number, rowIndex: number) => React.ReactElement | null;
     renderData?: (rowData: T, dataIndex: number) => string;
+    showTimezones?: false;
     sort?: (a: T, b: T, sortAsc: boolean) => number;
     sortByValue?: boolean;
     sortable?: boolean;
     title?: string | React.ReactElement;
-    width?: number;
-    order?: number;
-    isFilterable?: boolean;
-    dateFormat?: string;
     translation?: {
         [keyName: string]: string;
     };
+    width?: number;
 }
 export interface IRenderData {
     _index: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.35",
+  "version": "3.0.37",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -14,6 +14,7 @@
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.2.4",
     "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.21",
     "openapi3-ts": "^4.1.2",
     "react": "^18.2.0",