ehscan-react-table 0.0.29 → 0.0.31

package/dist/cells/TableCellDueDate.d.ts

@@ -3,6 +3,7 @@ type Props = {
     content: string;
     id: string | number;
     col: string | number;
+    small?: boolean;
     clickRow: (args: {
         id: string | number;
         col: string | number;

package/dist/cells/TableCellDueDate.js

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

package/dist/cells/TableDefCell.d.ts

@@ -3,6 +3,7 @@ type TableDefCellProps = {
     content: ReactNode;
     id: string | number;
     col: string | number;
+    small?: boolean;
     clickRow: (args: {
         id: string | number;
         col: string | number;

package/dist/cells/TableDefCell.js

@@ -1,4 +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 }));
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const TableDefCell = ({ content, id, col, small, clickRow }) => {
+    return (_jsxs("div", { onClick: () => clickRow({ id, col, type: 'default' }), children: [small ? 'Small' : '', " ", content] }));
 };

package/dist/elements/Table.d.ts

@@ -4,11 +4,16 @@ type TableColumn = {
     type?: string;
     search?: boolean;
     width?: number;
+    small?: boolean;
 };
 type SortOrder = {
     tag: string;
     dir: "asc" | "desc";
 };
+type MeasureCol = {
+    col: string;
+    min: number;
+};
 type Props = {
     columns: TableColumn[];
     rows: any[];
@@ -17,6 +22,7 @@ type Props = {
     cellComponents: Record<string, React.ComponentType<{
         row: any;
         col: string;
+        small?: boolean;
     }>>;
     setSelectedIds: React.Dispatch<React.SetStateAction<string[]>>;
     searchTermArraySetter?: (arr: {
@@ -28,6 +34,10 @@ type Props = {
         term: string;
     }[]) => void;
     fallback: () => React.ReactNode;
+    nearBottom: boolean;
+    setNearBottom: (nearBottom: boolean) => void;
+    changeColumns: (args: any) => void;
+    measureCols: MeasureCol[];
 };
 export declare const Table: React.FC<Props>;
 export {};

package/dist/elements/Table.js

@@ -12,16 +12,19 @@ import { useEffect, useState, useRef } from "react";
 import TableCellSelectHeadCol from "./TableCellSelectHeadCol";
 import { debounce } from "./Debounce";
 import styles from './table.module.css';
-export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents, setSelectedIds, searchTermArraySetter, setSearchTermArraySetter, fallback }) => {
+export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents, setSelectedIds, searchTermArraySetter, setSearchTermArraySetter, fallback, nearBottom, setNearBottom, changeColumns, measureCols }) => {
     const [wrapperBottom, setWrapperBottom] = useState(undefined);
     const headerRef = useRef(null);
+    const scrollRef = useRef(null);
     const tableSearchTerms = useRef({});
     const [openCol, setOpenCol] = useState(undefined);
     const [checkAll, setCheckAll] = useState(false);
+    const colRefs = useRef({});
+    const measureColElements = measureCols.map(a => a.col);
     useEffect(() => {
         if (searchTermArraySetter !== undefined)
             return;
-        try { //Reset SearchTerm
+        try {
             tableSearchTerms.current = {};
         }
         catch (error) {
@@ -29,19 +32,46 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
         }
     }, [searchTermArraySetter]);
     useEffect(() => {
-        const calculateHeight = () => {
-            var _a;
-            if ((_a = colRefs === null || colRefs === void 0 ? void 0 : colRefs.current) === null || _a === void 0 ? void 0 : _a['duedate']) {
-                console.log(colRefs.current['duedate'].getBoundingClientRect());
+        const resizeFn = () => {
+            if (colRefs === null || colRefs === void 0 ? void 0 : colRefs.current) {
+                Object.keys(colRefs.current).forEach(key => {
+                    var _a;
+                    const el = colRefs.current[key];
+                    if (!el)
+                        return;
+                    const { width } = el.getBoundingClientRect();
+                    const min = ((_a = measureCols.find(c => c.col === key)) === null || _a === void 0 ? void 0 : _a.min) || 50;
+                    if (width < min) {
+                        changeColumns({ col: key, small: true });
+                        return;
+                    }
+                    changeColumns({ col: key, small: false });
+                });
             }
             if (headerRef.current) {
                 const { bottom } = headerRef.current.getBoundingClientRect();
                 setWrapperBottom(bottom - 20);
             }
         };
-        calculateHeight();
-        window.addEventListener("resize", calculateHeight);
-        return () => window.removeEventListener("resize", calculateHeight);
+        const handleScroll = () => {
+            const el = scrollRef.current;
+            if (!el)
+                return;
+            const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 100;
+            if (reachBottom && !nearBottom)
+                setNearBottom(true);
+        };
+        resizeFn(); //init
+        const scrollEl = scrollRef.current;
+        if (scrollEl)
+            scrollEl.addEventListener("scroll", handleScroll);
+        window.addEventListener("resize", resizeFn);
+        return () => {
+            window.removeEventListener("resize", resizeFn);
+            if (scrollEl) {
+                scrollEl.removeEventListener("scroll", handleScroll);
+            }
+        };
     }, []);
     const checkHead = (entry) => {
         if (entry === undefined)
@@ -62,7 +92,7 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
                 yield filterRows(entry);
             }
             catch (err) {
-                console.error('Autosave failed:', err);
+                console.error('debounce failed:', err);
             }
         });
         doSave();
@@ -99,7 +129,6 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
     const HeadColSort = ({ tag }) => {
         return (_jsx(_Fragment, { children: _jsxs("div", { className: "sort-col", onClick: () => setSortOrder({ tag, dir: sortOrder.dir === 'desc' ? 'asc' : 'desc' }), children: [sortOrder.tag === tag && _jsx(SortButton, {}), openCol === tag && sortOrder.tag !== tag && _jsx(EmptySort, {})] }) }));
     };
-    const colRefs = useRef({});
     const HeadColMainLit = {
         def: (tag) => tag !== null && tag !== void 0 ? tag : "",
         duedate: () => (_jsxs("svg", { width: "40", height: "40", version: "1.1", viewBox: "0 -960 1600 1600", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { className: "table-header-icons", d: "m381.72-908.36c-112.37 0-203.83 90.835-203.83 202.42v157.03h-68.359c-31.606 1.731-56.094 24.21-56.094 51.328 0 27.118 24.487 49.407 56.094 51.484h68.359v577.03h-68.359c-32.304 1.1539-57.891 25.058-57.891 53.906 0 28.964 25.587 52.674 57.891 53.828h68.359v147.27a203.93 202.52 0 0 0 203.83 202.42h224.06l56.719-98.359h-288.28c-53.103 0-96.406-42.893-96.406-95.859v-155.47h58.047c31.723-1.9617 56.328-25.441 56.328-53.828 0-28.502-24.606-51.945-56.328-53.906h-58.047v-577.11h58.047c33.117 0 60.118-22.978 60.234-51.25 1e-4 -28.272-27.001-51.328-60.234-51.328h-57.969v-165.47a96.679 96.009 0 0 1 96.484-95.859v0.15624h977.58a96.795 96.124 0 0 1 96.406 95.781v921.72l100 166.88v-1080.4c-1e-4 -111.59-91.347-202.42-203.83-202.42h-962.81zm251.25 359.61c-30.444 1.5001-54.781 22.239-56.641 48.203a47.294 46.966 0 0 0 15 37.188 64.259 63.814 0 0 0 41.641 17.266h514.06v-0.07813c33.233 0 60.042-22.978 60.391-51.25 0-28.272-27.274-51.328-60.391-51.328h-514.06zm-2.8125 338.28c-29.849 0-53.906 24.057-53.906 53.906s24.057 53.828 53.906 53.828h318.59c29.849 1e-5 53.828-23.979 53.828-53.828s-23.979-53.906-53.828-53.906h-318.59zm0 343.36c-29.849 0-53.906 24.057-53.906 53.906 0 29.849 24.057 53.906 53.906 53.906h139.53c29.849 0 53.828-24.057 53.828-53.906 1e-5 -29.85-23.979-53.906-53.828-53.906h-139.53zm96.016 357.11-56.797 98.359h102.73l59.922-98.359h-105.86z" }), _jsx("path", { className: "table-header-icons-overdue", d: "m1134-177.42c-15.754 0-31.544 7.7956-40.547 23.438l-415.94 720.39c-18.005 31.284 4.5368 70.234 40.547 70.234h831.8c36.01 0 58.552-38.951 40.547-70.234l-415.94-720.39c-9.0026-15.642-24.714-23.438-40.469-23.438zm0 184.53c47.713 0 86.406 44.129 86.406 98.594 0 166.1-38.693 300.7-86.406 300.7-47.714 0-86.484-134.61-86.484-300.7 0-54.465 38.771-98.594 86.484-98.594zm0 451.95a60.542 60.542 0 0 1 60.547 60.547 60.542 60.542 0 0 1-60.547 60.547 60.542 60.542 0 0 1-60.547-60.547 60.542 60.542 0 0 1 60.547-60.547z", fill: "#999" })] })),
@@ -107,10 +136,9 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
     const HeadColMain = ({ col }) => {
         var _a, _b;
         const { tag, search, title, width } = col;
-        const shouldMeasure = ['duedate'].includes(tag);
         const colTitle = title !== undefined ? title : tag;
         const thWidth = width !== undefined ? `${width}px` : "30px";
-        return (_jsx("th", { ref: shouldMeasure ? (el) => { colRefs.current[tag] = el; } : undefined, style: { "--custom-width": thWidth }, children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search
+        return (_jsx("th", { ref: measureColElements.includes(tag) ? (el) => { colRefs.current[tag] = el; } : undefined, style: { "--custom-width": thWidth }, 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", { onClick: () => setOpenCol(tag), children: (_b = (_a = HeadColMainLit[colTitle]) === null || _a === void 0 ? void 0 : _a.call(HeadColMainLit, colTitle)) !== null && _b !== void 0 ? _b : colTitle }) })] }) }));
     };
@@ -138,8 +166,8 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
                         var _a;
                         const type = (_a = col.type) !== null && _a !== void 0 ? _a : "def";
                         const CellComponent = cellComponents[type];
-                        return (_jsx("td", { children: _jsx("div", { className: styles.exttablediv, children: _jsx(CellComponent, { row: row, col: col.tag }) }) }, ci));
+                        return (_jsx("td", { children: _jsx("div", { className: styles.exttablediv, children: _jsx(CellComponent, { row: row, col: col.tag, small: col.small }) }) }, ci));
                     }), _jsx(EndCol, {})] }, `row-${rowIndex}`))) }, 'ext-tbody'));
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${styles.tablewrapper} ${styles['_tbl']}`, style: { height: `calc(100vh - ${wrapperBottom}px)` }, children: [_jsxs("table", { className: styles.exttable, children: [_jsx("thead", { ref: headerRef, children: _jsx("tr", { className: styles.trstickyhead, children: _jsx(HeadCols, {}) }) }), rows && rows.length > 0 && _jsx(TableBody, {})] }), rows && rows.length === 0 && fallback()] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${styles.tablewrapper} ${styles['_tbl']}`, style: { height: `calc(100vh - ${wrapperBottom}px)` }, ref: scrollRef, children: [_jsxs("table", { className: styles.exttable, children: [_jsx("thead", { ref: headerRef, children: _jsx("tr", { className: styles.trstickyhead, children: _jsx(HeadCols, {}) }) }), rows && rows.length > 0 && _jsx(TableBody, {})] }), rows && rows.length === 0 && fallback()] }) }));
 };

package/dist/elements/table.module.css

@@ -1,43 +1,3 @@
-/* --------------------------
-General Settings
--------------------------- */
-html,
-body,
-input,
-textarea {
-    height: 100%;
-    font-family: Arial, sans-serif;
-    font-family: Inter, sans-serif;
-    font-style: 400;
-    font-optical-sizing: auto;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizelegibility;
-    letter-spacing: 0.072px;
-    overflow: hidden;
-    color: #222;
-}
-
-html,
-body {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-}
-
-html,
-body {
-    touch-action: none;
-    overscroll-behavior: none;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    user-select: none;
-}
-
 /* --------------------------
 TableView
 -------------------------- */
@@ -208,7 +168,6 @@ svg.removesearchsvg{
     --input-padding: 1px 5px 3px 0;
 }
 
-
 .focused {
     border: var(--ext-search-wrapper-focused-border, 1px dashed white);
     color: white;
@@ -501,11 +460,17 @@ RIPPLE
 	}
 }
 
+.dueDateColWrapper{
+    display: flex;
+    width: 100%;
+    text-align: center;
+}
+
 .dateTag {
 	position: relative;
 	color: var(--ext-table-date-tag-clr, black);
 	padding: 3px 6px;
-	border-radius: 4px;
+	border-radius: var(--ext-table-date-br, 4px);
 	font-size: 0.65rem;
 	font-weight: 600;
 	display: inline-block;
@@ -514,7 +479,10 @@ RIPPLE
 	white-space: nowrap;
 	width: fit-content;
 	z-index: 0;
+    min-height: var(--ext-table-min-wh, 15px);
+    min-width: var(--ext-table-min-wh, 15px);
 }
+
 .dateTag::before {
 	content: "";
 	position: absolute;
@@ -522,10 +490,15 @@ RIPPLE
 	background-color: var(--ext-table-date-tag-bck-clr, darkgrey);
 	opacity: 0.7;
 	/* dim background */
-	border-radius: 4px;
+	border-radius: var(--ext-table-date-br, 4px);
 	z-index: -1;
 }
 
+.dateTagSmall{
+    --ext-table-date-br: 50px;
+    --ext-table-min-wh: 20px;
+}
+
 .dateTagUnknown {
 	--ext-table-date-tag-bck-clr: darkgray;
 }

package/package.json

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