ehscan-react-table 0.0.12 → 0.0.13

package/dist/Components.d.ts

@@ -1,7 +1,8 @@
 export { Table } from './elements/Table';
 export { Pagination } from './elements/Pagination';
-export { TableCellSelect } from './elements/TableCellSelect';
-export { TableDefCell } from './elements/TableDefCell';
+export { TableCellSelect } from './cells/TableCellSelect';
+export { TableDefCell } from './cells/TableDefCell';
+export { TableCellDueDate } from './cells/TableCellDueDate';
 export { useSortOrder } from './elements/SortOrderUtils';
 export { sortRows } from './elements/SortOrderUtils';
 export type { SortOrder } from './elements/SortOrderUtils';

package/dist/Components.js

@@ -1,7 +1,8 @@
 // ehscan-react-table entry
 export { Table } from './elements/Table';
 export { Pagination } from './elements/Pagination';
-export { TableCellSelect } from './elements/TableCellSelect';
-export { TableDefCell } from './elements/TableDefCell';
+export { TableCellSelect } from './cells/TableCellSelect';
+export { TableDefCell } from './cells/TableDefCell';
+export { TableCellDueDate } from './cells/TableCellDueDate';
 export { useSortOrder } from './elements/SortOrderUtils';
 export { sortRows } from './elements/SortOrderUtils';

package/dist/cells/TableCellDueDate.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = {
+    content: string;
+    id: string | number;
+    col: string | number;
+    clickRow: (args: {
+        id: string | number;
+        col: string | number;
+        type: 'default';
+    }) => void;
+};
+export declare const TableCellDueDate: React.FC<Props>;
+export {};

package/dist/cells/TableCellDueDate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { calcDateDiff, formatToDDMMYYYY } from '../tools/dateFunction';
+import styles from './table.module.css';
+export const TableCellDueDate = ({ content, id, col, clickRow }) => {
+    const DateContent = ({ value }) => {
+        const valDate = value;
+        return valDate === '-' || !valDate
+            ? '-'
+            : _jsx("span", { className: `${styles.dateTag} ${calcDateDiff(valDate)}`, children: formatToDDMMYYYY(valDate) });
+    };
+    return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), children: _jsx(DateContent, { value: content }) }));
+};

package/dist/cells/TableCellSelect.d.ts

@@ -0,0 +1,11 @@
+type SelectProps = {
+    rowIndex: number;
+    checked?: boolean;
+};
+type Props = {
+    rowIndex: number;
+    checked?: boolean;
+    selectRow: (args: SelectProps, shift: boolean) => void;
+};
+export declare const TableCellSelect: React.FC<Props>;
+export {};

package/dist/cells/TableCellSelect.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import TableChecklistItem from "../elements/TableChecklistItem";
+export const TableCellSelect = ({ rowIndex, checked, selectRow }) => {
+    const checkClick = (event) => {
+        const shift = event.shiftKey;
+        selectRow({ rowIndex, checked: !checked }, shift);
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { onClick: (e) => { e.stopPropagation(); checkClick(e); }, children: _jsx(TableChecklistItem, { checked: checked !== null && checked !== void 0 ? checked : false }) }) }));
+};

package/dist/cells/TableDefCell.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+type TableDefCellProps = {
+    content: ReactNode;
+    id: string | number;
+    col: string | number;
+    clickRow: (args: {
+        id: string | number;
+        col: string | number;
+        type: 'default';
+    }) => void;
+};
+export declare const TableDefCell: React.FC<TableDefCellProps>;
+export {};

package/dist/cells/TableDefCell.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TableDefCell = ({ content, id, col, clickRow }) => {
+    return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), children: content }));
+};

package/dist/elements/Table.js

@@ -100,7 +100,7 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
     };
     const HeadColMain = ({ col }) => {
         const { tag, search, title } = col;
-        const colTitle = title || tag;
+        const colTitle = title !== undefined ? title : tag;
         return (_jsx("th", { children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { children: colTitle }) })] }) }));
     };
     const HeadCols = () => {

package/dist/elements/table.module.css

@@ -274,10 +274,9 @@ input.headsearch:focus {
 .deftabletr > td, .trstickyhead > th {
     padding: 0;
     text-align: left;
-    color: #374151;
     box-sizing: border-box;
     font-size: 80%;
-    padding: 5px;
+    padding: 5px 5px 5px 0;
     width: var(--custom-width) !important;
     min-width: 30px;
 }
@@ -491,4 +490,62 @@ RIPPLE
 		transform: scale(4);
 		opacity: 0;
 	}
+}
+
+.dateTag {
+	position: relative;
+	color: var(--ext-table-date-tag-clr, black);
+	padding: 3px 6px;
+	border-radius: 12px;
+	font-size: 0.65rem;
+	font-weight: 600;
+	display: inline-block;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: -webkit-fill-available;
+	z-index: 0;
+}
+.dateTag::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background-color: var(--ext-table-date-tag-bck-clr, darkgrey);
+	opacity: 0.7;
+	/* dim background */
+	border-radius: 12px;
+	z-index: -1;
+}
+
+.dateTagUnknown {
+	--ext-table-date-tag-bck-clr: darkgray;
+}
+.upcomingDueDate {
+	--ext-table-date-tag-clr: white;
+	--ext-table-date-tag-bck-clr: lightslategray;
+}
+/* Due Today */
+.dueToday {
+	--ext-table-date-tag-clr: white;
+	--ext-table-date-tag-bck-clr: lightslategray;
+}
+/* Overdue (1–3 days late) */
+.overdueDueDate {
+	--ext-table-date-tag-clr: white;
+	--ext-table-date-tag-bck-clr: lightcoral;
+}
+/* Long Overdue (4–14 days late) */
+.longOverdue {
+	--ext-table-date-tag-clr: white;
+	--ext-table-date-tag-bck-clr: firebrick;
+}
+/* Critically Overdue (25+ days late) */
+.criticallyOverdue {
+	--ext-table-date-tag-clr: white;
+	--ext-table-date-tag-bck-clr: #8B00FF;
+}
+/* Future (Beyond 7 days) */
+.futureDueDate {
+	--ext-table-date-tag-clr: white;
+	--ext-table-date-tag-bck-clr: #008000;
 }

package/dist/tools/dateFunction.d.ts

@@ -0,0 +1,2 @@
+export declare const calcDateDiff: (date: string) => string;
+export declare const formatToDDMMYYYY: (input: string, short?: boolean) => string | undefined;

package/dist/tools/dateFunction.js

@@ -0,0 +1,47 @@
+export const calcDateDiff = (date) => {
+    const targetDate = new Date(date);
+    const currentDate = new Date();
+    targetDate.setHours(0, 0, 0, 0);
+    currentDate.setHours(0, 0, 0, 0);
+    const msInDay = 24 * 60 * 60 * 1000;
+    const daysDiff = Math.floor((targetDate.getTime() - currentDate.getTime()) / msInDay);
+    const daysLate = Math.abs(daysDiff);
+    let dueDateType;
+    switch (true) {
+        case daysDiff === 0:
+            dueDateType = 'dueToday';
+            break;
+        case daysDiff > 0 && daysDiff <= 7:
+            dueDateType = 'upcomingDueDate';
+            break;
+        case daysDiff > 7:
+            dueDateType = 'futureDueDate';
+            break;
+        case daysDiff < 0 && daysLate <= 3:
+            dueDateType = 'overdueDueDate';
+            break;
+        case daysDiff < 0 && daysLate <= 25:
+            dueDateType = 'longOverdue';
+            break;
+        case daysDiff < 0 && daysLate > 25:
+            dueDateType = 'criticallyOverdue';
+            break;
+        default:
+            dueDateType = 'dateTagUnknown';
+            break;
+    }
+    return dueDateType;
+};
+export const formatToDDMMYYYY = (input, short = false) => {
+    const date = new Date(input);
+    if (isNaN(date.getTime()))
+        return undefined;
+    const day = String(date.getUTCDate()).padStart(2, '0');
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const year = date.getUTCFullYear();
+    const currentYear = new Date().getUTCFullYear();
+    if (short && year === currentYear) {
+        return `${day}.${month}.`; // omit year if short and current year
+    }
+    return `${day}.${month}.${year}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-table",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",