trotl-table 1.0.6 → 1.0.7

package/dist/index.cjs.js

@@ -1,8 +1,10 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
-require('react-dnd');
-require('react-dnd-html5-backend');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -8437,7 +8439,7 @@ function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueO
  * Table component with fixed headers and virtualized rows for improved performance with large data sets.
  * This component expects explicit width, height, and padding parameters.
  */
-var Table = /*#__PURE__*/function (_React$PureComponent) {
+var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
   function Table(props) {
     var _this;
     _classCallCheck(this, Table);
@@ -8953,7 +8955,7 @@ var Table = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React__namespace.PureComponent);
-_defineProperty(Table, "defaultProps", {
+_defineProperty(Table$1, "defaultProps", {
   disableHeader: false,
   estimatedRowSize: 30,
   headerHeight: 0,
@@ -8976,7 +8978,7 @@ _defineProperty(Table, "defaultProps", {
   scrollToIndex: -1,
   style: {}
 });
-Table.propTypes = process.env.NODE_ENV !== "production" ? {
+Table$1.propTypes = process.env.NODE_ENV !== "production" ? {
   /** This is just set on the grid top element. */
   'aria-label': PropTypes.string,
   /** This is just set on the grid top element. */
@@ -9539,4 +9541,552 @@ _defineProperty(WindowScroller, "defaultProps", {
   serverHeight: 0,
   serverWidth: 0
 });
+
+const Modal = ({
+  isOpen,
+  title = 'Confirm',
+  children,
+  onConfirm,
+  onCancel,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  showCancel = false,
+  showConfirm = false,
+  closeOnEscape = true,
+  closeOnOutsideClick = true
+}) => {
+  React.useEffect(() => {
+    const handleKey = e => {
+      if (e.key === 'Escape' && closeOnEscape) {
+        onCancel?.();
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [closeOnEscape, onCancel]);
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "modal-overlay",
+    onClick: closeOnOutsideClick ? onCancel : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-box",
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "modal-title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "modal-actions"
+  }, showCancel && /*#__PURE__*/React.createElement("button", {
+    className: "basic-button cancel",
+    onClick: onCancel
+  }, cancelLabel), showConfirm && /*#__PURE__*/React.createElement("button", {
+    className: "basic-button confirm",
+    onClick: onConfirm
+  }, confirmLabel))));
+};
+
+const ITEM_TYPE = "ROW";
+
+// Normalize data into grouped format
+const normalizeData = (groups, rows) => {
+  if (Array.isArray(groups) && groups.length > 0) {
+    return groups.map(g => ({
+      groupId: g.groupId ?? null,
+      groupName: g.groupName ?? "",
+      rows: Array.isArray(g.rows) ? g.rows : []
+    }));
+  }
+  if (Array.isArray(rows)) {
+    return [{
+      groupId: null,
+      groupName: null,
+      rows
+    }];
+  }
+  return [];
+};
+
+// Drag-and-drop row wrapper with auto-scroll support
+const DraggableRow = ({
+  index,
+  moveRow,
+  children,
+  item,
+  enableDrag,
+  listRef
+}) => {
+  const ref = React.useRef(null);
+  const [, drop] = reactDnd.useDrop({
+    accept: ITEM_TYPE,
+    hover(draggedItem, monitor) {
+      if (!ref.current || !enableDrag) return;
+      ref.current.getBoundingClientRect();
+      const clientOffset = monitor.getClientOffset();
+
+      // Auto-scroll logic
+      if (listRef?.current && clientOffset) {
+        const top = listRef.current.getBoundingClientRect().top;
+        const bottom = listRef.current.getBoundingClientRect().bottom;
+        const scrollSpeed = 15;
+        if (clientOffset.y < top + 40) {
+          listRef.current.scrollBy({
+            top: -scrollSpeed,
+            behavior: "smooth"
+          });
+        } else if (clientOffset.y > bottom - 40) {
+          listRef.current.scrollBy({
+            top: scrollSpeed,
+            behavior: "smooth"
+          });
+        }
+      }
+      if (draggedItem.index === index) return;
+      moveRow(draggedItem.index, index);
+      draggedItem.index = index;
+    }
+  });
+  const [{
+    isDragging
+  }, drag] = reactDnd.useDrag({
+    type: ITEM_TYPE,
+    item: {
+      index
+    },
+    canDrag: enableDrag,
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    })
+  });
+  drag(drop(ref));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      opacity: isDragging ? 0.5 : 1,
+      cursor: enableDrag ? "move" : "default"
+    }
+  }, children);
+};
+function Table({
+  tableId = "default",
+  columns = [],
+  data = [],
+  isGrouped = false,
+  groupKey = "groupId",
+  extraSearchTerm = "",
+  rowHeight = 34,
+  groupHeaderHeight = 36,
+  showKey = false,
+  selectedRowsCallback = () => {},
+  refreshTrigger = () => {},
+  editCallback = () => {},
+  viewCallback = () => {},
+  deleteCallback = null,
+  buttons = ["view", "edit", "delete"],
+  enableDragRow = false // new prop
+}) {
+  // Local selection & sorting state (removed TableContext dependency)
+  const [selectedRows, setSelectedRows] = React.useState([]);
+  const [sorting, setSorting] = React.useState(null);
+  const toggleRowSelection = React.useCallback(rowId => {
+    setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
+  }, []);
+  const clearSelection = React.useCallback(() => setSelectedRows([]), []);
+  const setSort = column => {
+    setSorting(prev => {
+      if (!prev || prev.column !== column) return {
+        column,
+        direction: "asc"
+      };
+      if (prev.direction === "asc") return {
+        column,
+        direction: "desc"
+      };
+      return null;
+    });
+  };
+  console.log(extraSearchTerm);
+  const [localData, setLocalData] = React.useState(data);
+  React.useEffect(() => setLocalData(data), [data]);
+  const listRef = React.useRef(null);
+  const normalizedGroups = React.useMemo(() => {
+    return normalizeData(isGrouped ? localData : [], isGrouped ? [] : localData);
+  }, [localData, isGrouped]);
+  const filterRows = React.useCallback(rows => {
+    if (!extraSearchTerm) return rows;
+    const query = extraSearchTerm.toLowerCase();
+    return rows.filter(row => columns.some(col => {
+      const val = row[col.accessor];
+      if (val == null) return false;
+      return String(val).toLowerCase().includes(query);
+    }));
+  }, [extraSearchTerm, columns]);
+
+  // Natural-ish comparator: handles nulls, numbers, strings, ISO dates
+  const compare = (x, y, dir = "asc") => {
+    const nullCmp = () => {
+      if (x == null && y == null) return 0;
+      if (x == null) return 1; // nulls last
+      if (y == null) return -1;
+      return null;
+    };
+    const n = nullCmp();
+    if (n !== null) return n;
+
+    // Try numeric first
+    const nx = typeof x === "number" ? x : Number.isFinite(Number(x)) ? Number(x) : null;
+    const ny = typeof y === "number" ? y : Number.isFinite(Number(y)) ? Number(y) : null;
+    if (nx !== null && ny !== null) {
+      return dir === "asc" ? nx - ny : ny - nx;
+    }
+
+    // Try date (ISO or parseable strings)
+    const dx = typeof x === "string" ? Date.parse(x) : NaN;
+    const dy = typeof y === "string" ? Date.parse(y) : NaN;
+    if (!Number.isNaN(dx) && !Number.isNaN(dy)) {
+      return dir === "asc" ? dx - dy : dy - dx;
+    }
+
+    // Fallback string compare
+    const sx = String(x).toLowerCase();
+    const sy = String(y).toLowerCase();
+    if (sx < sy) return dir === "asc" ? -1 : 1;
+    if (sx > sy) return dir === "asc" ? 1 : -1;
+    return 0;
+  };
+  const sortedGroupedData = React.useMemo(() => {
+    const sortKey = sorting?.column;
+    const direction = sorting?.direction || "asc";
+    const sortRows = rows => {
+      const arr = [...rows];
+      if (!sortKey) return filterRows(arr); // fallback to drag order
+      arr.sort((a, b) => compare(a?.[sortKey], b?.[sortKey], direction));
+      return filterRows(arr);
+    };
+    return normalizedGroups.map(g => ({
+      ...g,
+      rows: sortRows(g.rows || [])
+    }));
+  }, [normalizedGroups, sorting, filterRows]);
+  const [expandedGroups, setExpandedGroups] = React.useState({});
+  const toggleGroup = gid => {
+    setExpandedGroups(prev => ({
+      ...prev,
+      [gid]: !Boolean(prev[gid])
+    }));
+  };
+  React.useEffect(() => {
+    // Pre-populate expansion state for all groups
+    setExpandedGroups(prev => {
+      const next = {
+        ...prev
+      };
+      for (const g of normalizedGroups) {
+        const gid = g[groupKey] ?? g.groupId ?? g.groupName;
+        if (!(gid in next)) next[gid] = true; // default expanded
+      }
+      return next;
+    });
+  }, [normalizedGroups, groupKey]);
+  const groupRowsById = React.useMemo(() => {
+    const map = {};
+    for (const g of sortedGroupedData) {
+      const gid = g[groupKey] ?? g.groupId ?? g.groupName;
+      map[gid] = g.rows || [];
+    }
+    return map;
+  }, [sortedGroupedData, groupKey]);
+  const [tableDataFlat, setTableDataFlat] = React.useState([]);
+  const flattened = React.useMemo(() => {
+    const items = [];
+    // Use the sortedGroupedData here so the flattened list reflects current sorting and filtering
+    for (const g of sortedGroupedData) {
+      const gid = g[groupKey] ?? g.groupId ?? g.groupName;
+      const expanded = expandedGroups[gid] ?? true;
+      if (isGrouped) {
+        items.push({
+          type: "group",
+          groupId: gid,
+          groupName: g.groupName,
+          rowCount: (g.rows || []).length,
+          expanded
+        });
+      }
+      if (!isGrouped || expanded) {
+        for (const row of g.rows) {
+          items.push({
+            type: "row",
+            groupId: gid,
+            row
+          });
+        }
+      }
+    }
+    return items;
+  }, [sortedGroupedData, expandedGroups, isGrouped, groupKey]);
+  React.useEffect(() => {
+    setTableDataFlat(flattened);
+  }, [flattened]);
+
+  // useEffect(() => setTableDataFlat(flattened), [flattened]);
+  React.useEffect(() => selectedRowsCallback(selectedRows), [selectedRows, selectedRowsCallback]);
+
+  // DELETE
+  const [showConfirm, setShowConfirm] = React.useState(false);
+  const [pendingDelete, setPendingDelete] = React.useState(null);
+  const confirmDelete = async () => {
+    if (!pendingDelete) return;
+    if (deleteCallback) {
+      const res = await deleteCallback(pendingDelete);
+      if (!res?.success) return;
+    }
+    setLocalData(prev => {
+      if (isGrouped) {
+        return prev.map(g => ({
+          ...g,
+          rows: (g.rows || []).filter(r => r.id !== pendingDelete.id)
+        }));
+      } else {
+        return (prev || []).filter(r => r.id !== pendingDelete.id);
+      }
+    });
+    refreshTrigger?.();
+    setShowConfirm(false);
+    setPendingDelete(null);
+  };
+
+  // RENDER CELL
+  const highlight = React.useCallback(text => {
+    if (!extraSearchTerm || typeof text !== "string") return text;
+    const lower = text.toLowerCase();
+    const query = extraSearchTerm.toLowerCase();
+    const idx = lower.indexOf(query);
+    if (idx === -1) return text;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, text.slice(0, idx), /*#__PURE__*/React.createElement("span", {
+      className: "highlight"
+    }, text.slice(idx, idx + query.length)), text.slice(idx + query.length));
+  }, [extraSearchTerm]);
+  const renderCell = React.useCallback((v, accessor) => {
+    if (accessor === "deadlineISO") {
+      return v ? new Date(v).toLocaleString("sl-SI", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      }) : "-";
+    }
+    // existing highlight logic for other fields
+    return highlight(String(v));
+  }, [highlight]);
+  const showView = buttons.includes("view");
+  const showEdit = buttons.includes("edit");
+  const showDelete = buttons.includes("delete");
+  const showActions = showView || showEdit || showDelete;
+
+  // MOVE ROW
+  const moveRow = React.useCallback((fromIndex, toIndex) => {
+    const from = tableDataFlat[fromIndex];
+    const to = tableDataFlat[toIndex];
+    if (!from || !to || from.type !== "row" || to.type !== "row") return;
+
+    // Only reorder within the same group to keep grouping consistent
+    if (isGrouped && from.groupId !== to.groupId) return;
+    setLocalData(prev => {
+      if (isGrouped) {
+        // Reorder within the target group
+        const gid = from.groupId;
+        return prev.map(group => {
+          const groupId = group[groupKey] ?? group.groupId ?? group.groupName;
+          if (groupId !== gid) return group;
+          const rows = [...group.rows];
+          const fromPos = rows.findIndex(r => r.id === from.row.id);
+          const toPos = rows.findIndex(r => r.id === to.row.id);
+          if (fromPos === -1 || toPos === -1) return group;
+          const [moved] = rows.splice(fromPos, 1);
+          rows.splice(toPos, 0, moved);
+          return {
+            ...group,
+            rows
+          };
+        });
+      } else {
+        // Ungrouped: reorder the flat list
+        const arr = Array.isArray(prev) ? [...prev] : [];
+        const fromPos = arr.findIndex(r => r.id === from.row.id);
+        const toPos = arr.findIndex(r => r.id === to.row.id);
+        if (fromPos === -1 || toPos === -1) return prev;
+        const [moved] = arr.splice(fromPos, 1);
+        arr.splice(toPos, 0, moved);
+        return arr;
+      }
+    });
+  }, [tableDataFlat, isGrouped, groupKey]);
+
+  // ROW RENDERER
+  const rowRenderer = React.useCallback(({
+    index,
+    key,
+    style
+  }) => {
+    const item = tableDataFlat[index];
+    if (!item) return null;
+    if (item.type === "group") {
+      const gid = item.groupId;
+      const rows = groupRowsById[gid] || [];
+      const allSelected = rows.length > 0 && rows.every(r => selectedRows.includes(r.id));
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        style: style,
+        className: "table-row group-row",
+        onClick: () => toggleGroup(gid)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "table-cell checkbox-cell"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        checked: allSelected,
+        onChange: e => {
+          e.stopPropagation();
+          const ids = rows.map(r => r.id);
+          ids.forEach(id => toggleRowSelection(tableId, id));
+        },
+        onClick: e => e.stopPropagation()
+      })), showKey && /*#__PURE__*/React.createElement("div", {
+        className: "table-cell key-cell"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "table-cell group-header"
+      }, item.expanded ? "▾" : "▸", " ", item.groupName, " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
+        key: i,
+        className: "table-cell"
+      })), showActions && /*#__PURE__*/React.createElement("div", {
+        className: "table-cell action-cell"
+      }));
+    }
+    const row = item.row;
+    const visualIndex = tableDataFlat.slice(0, index).filter(i => i.type === "row").length + 1;
+    const content = /*#__PURE__*/React.createElement("div", {
+      key: key,
+      style: style,
+      className: "table-row"
+    }, showDelete && /*#__PURE__*/React.createElement("div", {
+      className: "table-cell checkbox-cell"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      checked: selectedRows.includes(row.id),
+      onChange: () => toggleRowSelection(row.id)
+    })), showKey && /*#__PURE__*/React.createElement("div", {
+      className: "table-cell key-cell"
+    }, visualIndex), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "table-cell"
+    }, renderCell(row[col.accessor], col.accessor))), showActions && /*#__PURE__*/React.createElement("div", {
+      className: "table-cell action-cell"
+    }, showView && /*#__PURE__*/React.createElement("button", {
+      className: "action-btn-table",
+      style: {
+        background: "#646cffaa"
+      },
+      onClick: () => viewCallback(row)
+    }, "View"), showEdit && /*#__PURE__*/React.createElement("button", {
+      className: "action-btn-table",
+      style: {
+        background: "#4caf50"
+      },
+      onClick: () => editCallback(row)
+    }, "Edit"), showDelete && /*#__PURE__*/React.createElement("button", {
+      className: "action-btn-table",
+      style: {
+        background: "#f44336"
+      },
+      onClick: e => {
+        e.stopPropagation();
+        setPendingDelete(row);
+        setShowConfirm(true);
+      }
+    }, "Delete")));
+    if (enableDragRow && item.type === "row") {
+      return /*#__PURE__*/React.createElement(DraggableRow, {
+        key: key,
+        index: index,
+        moveRow: moveRow,
+        item: item,
+        enableDrag: true,
+        listRef: listRef
+      }, content);
+    }
+    return content;
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow, moveRow]);
+  const rowHeightGetter = ({
+    index
+  }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
+  return /*#__PURE__*/React.createElement(reactDnd.DndProvider, {
+    backend: reactDndHtml5Backend.HTML5Backend
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-header",
+    style: {
+      position: "sticky",
+      top: 0,
+      zIndex: 10,
+      background: "#fff"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-row header-row"
+  }, showDelete && /*#__PURE__*/React.createElement("div", {
+    className: "table-cell checkbox-cell"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: tableDataFlat.filter(i => i.type === "row").length > 0 && selectedRows.length === tableDataFlat.filter(i => i.type === "row").length,
+    onChange: e => {
+      if (e.target.checked) {
+        clearSelection();
+        tableDataFlat.filter(i => i.type === "row").forEach(i => toggleRowSelection(i.row.id));
+      } else {
+        clearSelection();
+      }
+    }
+  })), showKey && /*#__PURE__*/React.createElement("div", {
+    className: "table-cell key-cell"
+  }, "#"), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    className: "table-cell",
+    onClick: () => setSort(col.accessor),
+    style: {
+      cursor: "pointer"
+    }
+  }, col.header, sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React.createElement("div", {
+    className: "table-cell action-cell"
+  }, "Action"))), /*#__PURE__*/React.createElement("div", {
+    className: "main-table",
+    ref: listRef
+  }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "table-empty"
+  }, "No items") : /*#__PURE__*/React.createElement(AutoSizer, null, ({
+    height,
+    width
+  }) => /*#__PURE__*/React.createElement(List, {
+    width: width,
+    height: height,
+    rowCount: tableDataFlat.length,
+    rowHeight: rowHeightGetter,
+    rowRenderer: rowRenderer,
+    overscanRowCount: 8
+  }))), /*#__PURE__*/React.createElement(Modal, {
+    isOpen: showConfirm,
+    title: "Confirm delete",
+    onConfirm: confirmDelete,
+    onCancel: () => setShowConfirm(false),
+    confirmLabel: "Yes, delete",
+    cancelLabel: "Cancel",
+    showCancel: true,
+    showConfirm: true
+  }, /*#__PURE__*/React.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?"))));
+}
+
+// src/index.js
+ // if you want named import
+
+exports.Table = Table;
+exports.default = Table;
 //# sourceMappingURL=index.cjs.js.map