@canvas-components/list-table 0.3.3 → 0.3.4

package/dist/index.cjs

@@ -666,6 +666,40 @@ function cloneColumns(columns) {
     children: column.children ? cloneColumns(column.children) : void 0
   }));
 }
+function preserveRuntimeColumnWidths(params) {
+  const runtimeByKey = collectColumnsByKey(params.runtimeColumns);
+  const initialByKey = collectColumnsByKey(params.initialColumns);
+  let changed = false;
+  const visit = (columns) => {
+    columns.forEach((column) => {
+      const key = resolveColumnKey(column);
+      const runtimeColumn = runtimeByKey.get(key);
+      const initialColumn = initialByKey.get(key);
+      if (runtimeColumn && initialColumn && column.width === initialColumn.width && runtimeColumn.width !== initialColumn.width) {
+        column.width = runtimeColumn.width;
+        changed = true;
+      }
+      if (column.children?.length) {
+        visit(column.children);
+      }
+    });
+  };
+  visit(params.nextColumns);
+  return changed;
+}
+function collectColumnsByKey(columns) {
+  const result = /* @__PURE__ */ new Map();
+  const visit = (items) => {
+    items.forEach((column) => {
+      result.set(resolveColumnKey(column), column);
+      if (column.children?.length) {
+        visit(column.children);
+      }
+    });
+  };
+  visit(columns);
+  return result;
+}
 function applyInitialColumnVisibility(columns) {
   columns.forEach((column) => {
     if (column.hidden === void 0 && column.initialHide) {
@@ -1784,11 +1818,20 @@ function clampPageNumber(page, totalPages) {
 }
 var maximumTreeDepthCache = /* @__PURE__ */ new WeakMap();
 var sourceRowIndexCache = /* @__PURE__ */ new WeakMap();
+var selectedRowKeySetCache = /* @__PURE__ */ new WeakMap();
 var headerSelectionStateCache = /* @__PURE__ */ new WeakMap();
 var ROW_SELECTION_COLUMN_KEY = "__row_selection__";
 var ROW_SELECTOR_COLUMN_KEY = "__row_selector__";
 var EXPAND_COLUMN_KEY = "__row_expand__";
 var DEFAULT_ROW_SELECTOR_WIDTH = DEFAULT_SCROLLBAR_THICKNESS;
+function getSelectedRowKeySet(selectedRowKeys) {
+  let cached = selectedRowKeySetCache.get(selectedRowKeys);
+  if (!cached) {
+    cached = new Set(selectedRowKeys);
+    selectedRowKeySetCache.set(selectedRowKeys, cached);
+  }
+  return cached;
+}
 function getInitialSelectedRowKeys(options) {
   const rowSelection = options.rowSelection;
   if (!rowSelection) {
@@ -1851,6 +1894,7 @@ function createRowSelectionColumn(params) {
   const { options, selectedRowKeys } = params;
   const rowSelection = options.rowSelection;
   const type = rowSelection?.type === "radio" ? "radio" : "checkbox";
+  const selectedRowKeySet = getSelectedRowKeySet(selectedRowKeys);
   const selectionColumn = {
     key: ROW_SELECTION_COLUMN_KEY,
     dataIndex: ROW_SELECTION_COLUMN_KEY,
@@ -1867,7 +1911,7 @@ function createRowSelectionColumn(params) {
       const rowKey = getRowKey(options, record, rowIndex);
       return {
         type,
-        checked: selectedRowKeys.includes(rowKey),
+        checked: selectedRowKeySet.has(rowKey),
         disabled: isRowSelectionDisabled(rowSelection, record)
       };
     },
@@ -1986,40 +2030,39 @@ function getResolvedColumns(options, selectedRowKeys) {
   return rowSelectorColumn ? [rowSelectorColumn, ...resolvedColumns] : resolvedColumns;
 }
 function getSelectedRows(options, selectedRowKeys) {
+  const selectedRowKeySet = getSelectedRowKeySet(selectedRowKeys);
   return options.dataSource.filter(
-    (record, index) => selectedRowKeys.includes(getRowKey(options, record, index))
+    (record, index) => selectedRowKeySet.has(getRowKey(options, record, index))
   );
 }
-function getVisibleSelectableRows(params) {
-  const { rowSelection, displayData } = params;
-  return displayData.filter((record) => !isRowSelectionDisabled(rowSelection, record));
-}
 function getHeaderSelectionState(params) {
-  const { options, selectedRowKeys, displayData } = params;
-  const cached = headerSelectionStateCache.get(displayData);
+  const { options, selectedRowKeys } = params;
+  const selectableData = options.dataSource;
+  const cached = headerSelectionStateCache.get(selectableData);
   if (cached && cached.options === options && cached.selectedRowKeys === selectedRowKeys) {
     return cached.state;
   }
   const rowSelection = options.rowSelection;
-  const visibleRows = getVisibleSelectableRows({
-    rowSelection,
-    displayData
-  });
-  const selectedKeySet = new Set(selectedRowKeys);
-  let selectedVisibleCount = 0;
-  visibleRows.forEach((record, index) => {
+  const selectedKeySet = getSelectedRowKeySet(selectedRowKeys);
+  let selectableCount = 0;
+  let selectedCount = 0;
+  selectableData.forEach((record, index) => {
+    if (isRowSelectionDisabled(rowSelection, record)) {
+      return;
+    }
+    selectableCount += 1;
     if (selectedKeySet.has(getRowKey(options, record, index))) {
-      selectedVisibleCount += 1;
+      selectedCount += 1;
     }
   });
   const type = rowSelection?.type === "radio" ? "radio" : "checkbox";
   const state = {
     type,
-    checked: visibleRows.length > 0 && selectedVisibleCount === visibleRows.length,
-    indeterminate: selectedVisibleCount > 0 && selectedVisibleCount < visibleRows.length,
-    disabled: visibleRows.length === 0
+    checked: selectableCount > 0 && selectedCount === selectableCount,
+    indeterminate: selectedCount > 0 && selectedCount < selectableCount,
+    disabled: selectableCount === 0
   };
-  headerSelectionStateCache.set(displayData, {
+  headerSelectionStateCache.set(selectableData, {
     options,
     selectedRowKeys,
     state
@@ -2042,24 +2085,31 @@ function resolveToggledRowSelectionKeys(params) {
   };
 }
 function resolveToggleAllVisibleRowKeys(params) {
-  const { options, selectedRowKeys, displayData } = params;
+  const { options, selectedRowKeys } = params;
   const rowSelection = options.rowSelection;
   if (!rowSelection || rowSelection.type === "radio") {
     return null;
   }
-  const visibleRows = getVisibleSelectableRows({
-    rowSelection,
-    displayData
-  });
-  const visibleKeys = visibleRows.map(
-    (record, index) => getRowKey(options, record, index)
-  );
-  const headerState = getHeaderSelectionState({
-    options,
-    selectedRowKeys,
-    displayData
+  const selectedKeySet = getSelectedRowKeySet(selectedRowKeys);
+  const selectableKeys = [];
+  let allSelected = true;
+  options.dataSource.forEach((record, index) => {
+    if (isRowSelectionDisabled(rowSelection, record)) {
+      return;
+    }
+    const key = getRowKey(options, record, index);
+    selectableKeys.push(key);
+    if (!selectedKeySet.has(key)) {
+      allSelected = false;
+    }
   });
-  return headerState.checked ? selectedRowKeys.filter((key) => !visibleKeys.includes(key)) : Array.from(/* @__PURE__ */ new Set([...selectedRowKeys, ...visibleKeys]));
+  if (allSelected && selectableKeys.length > 0) {
+    const selectableKeySet = new Set(selectableKeys);
+    return selectedRowKeys.filter((key) => !selectableKeySet.has(key));
+  }
+  const nextKeySet = new Set(selectedRowKeys);
+  selectableKeys.forEach((key) => nextKeySet.add(key));
+  return Array.from(nextKeySet);
 }
 
 // src/engine/store/state.ts
@@ -13592,7 +13642,7 @@ async function getBaseDisplayRowsAsync(params) {
 }
 function getDisplayRows(params) {
   const rows = getBaseDisplayRows(params);
-  if (!params.options.pagination || params.options.query?.mode === "remote") {
+  if (!params.options.pagination || isRemotePaginationResult(params.options)) {
     return rows;
   }
   return sliceDisplayRowsByPagination({
@@ -13602,7 +13652,7 @@ function getDisplayRows(params) {
   });
 }
 function sliceDisplayRowsFromBaseRows(params) {
-  if (!params.options.pagination || params.options.query?.mode === "remote") {
+  if (!params.options.pagination || isRemotePaginationResult(params.options)) {
     return params.rows;
   }
   return sliceDisplayRowsByPagination({
@@ -13611,6 +13661,13 @@ function sliceDisplayRowsFromBaseRows(params) {
     state: params.query.pagination
   });
 }
+function isRemotePaginationResult(options) {
+  if (options.query?.mode === "remote") {
+    return true;
+  }
+  const total = options.pagination && options.pagination.total;
+  return typeof total === "number" && Number.isFinite(total) && total > options.dataSource.length;
+}
 function emitListTableQueryChange(params) {
   const {
     options,
@@ -15138,6 +15195,7 @@ var TEXT_SELECTION_DRAG_THRESHOLD = 5;
 var TEXT_SELECTION_AUTO_SCROLL_EDGE_SIZE = 36;
 var TEXT_SELECTION_AUTO_SCROLL_MAX_VERTICAL_SPEED = 1200;
 var TEXT_SELECTION_AUTO_SCROLL_MAX_HORIZONTAL_SPEED = 900;
+var EDITABLE_CELL_ROW_SELECTION_DELAY = 300;
 var ListTableEventController = class {
   constructor(host) {
     __publicField(this, "searchKeyword", "");
@@ -15159,6 +15217,7 @@ var ListTableEventController = class {
     __publicField(this, "cellSelectionAutoScrollVelocity", { x: 0, y: 0 });
     __publicField(this, "cellSelectionAutoScrollTargetVelocity", { x: 0, y: 0 });
     __publicField(this, "continuousScrollTimer", null);
+    __publicField(this, "pendingEditableCellRowSelectionTimer", null);
     __publicField(this, "outsideClickDocument", null);
     __publicField(this, "outsideClickStarted", null);
     __publicField(this, "host");
@@ -15560,6 +15619,7 @@ var ListTableEventController = class {
       );
     });
     __publicField(this, "handleDoubleClick", (event) => {
+      this.cancelPendingEditableCellRowSelection();
       if (!this.host.canvasElement) {
         return;
       }
@@ -16089,7 +16149,24 @@ var ListTableEventController = class {
       if ((result.area === "body" || result.area === "body-content") && typeof result.rowIndex === "number" && this.host.options.rowSelection?.selectRowByClick && result.columnKey && !isSystemColumnKey(result.columnKey)) {
         const record = this.host.getDisplayData()[result.rowIndex];
         if (record !== void 0) {
-          this.host.toggleRowSelection(record, result.rowIndex);
+          const column = this.host.leafColumns.find(
+            (item) => item.key === result.columnKey
+          );
+          const value = column?.dataIndex != null ? utils.getValueByDataIndex(record, column.dataIndex) : void 0;
+          const canOpenEditorByDoubleClick = shouldOpenCellEditorOnClick(
+            column,
+            2,
+            {
+              value,
+              record,
+              rowIndex: result.rowIndex
+            }
+          );
+          if (canOpenEditorByDoubleClick && event.detail === 1) {
+            this.scheduleEditableCellRowSelection(record, result.rowIndex);
+          } else if (!canOpenEditorByDoubleClick || event.detail !== 2) {
+            this.host.toggleRowSelection(record, result.rowIndex);
+          }
         }
       }
       if (result.area === "body" && typeof result.rowIndex === "number" && this.host.options.expandable?.expandRowByClick && result.columnKey && !isSystemColumnKey(result.columnKey) && this.host.toggleRowExpand(result.rowIndex)) {
@@ -16563,6 +16640,7 @@ var ListTableEventController = class {
     this.host.render();
   }
   destroy() {
+    this.cancelPendingEditableCellRowSelection();
     this.stopContinuousScroll();
     this.stopTextSelectionAutoScroll();
     this.stopCellSelectionAutoScroll();
@@ -16627,6 +16705,20 @@ var ListTableEventController = class {
     event.preventDefault();
     this.host.editingController.open(rowIndex, columnKey, event.key);
   }
+  scheduleEditableCellRowSelection(record, rowIndex) {
+    this.cancelPendingEditableCellRowSelection();
+    this.pendingEditableCellRowSelectionTimer = globalThis.setTimeout(() => {
+      this.pendingEditableCellRowSelectionTimer = null;
+      this.host.toggleRowSelection(record, rowIndex);
+    }, EDITABLE_CELL_ROW_SELECTION_DELAY);
+  }
+  cancelPendingEditableCellRowSelection() {
+    if (this.pendingEditableCellRowSelectionTimer == null) {
+      return;
+    }
+    globalThis.clearTimeout(this.pendingEditableCellRowSelectionTimer);
+    this.pendingEditableCellRowSelectionTimer = null;
+  }
   async autoFitColumnWidths(columnKey) {
     const ctx = this.host.canvasElement?.getContext("2d");
     if (!ctx) {
@@ -18365,6 +18457,47 @@ function persistListTableColumnConfig(params) {
     )
   );
 }
+async function resetListTableStoredColumnConfig(params) {
+  const { storageKey, columns } = params;
+  if (!storageKey) {
+    return;
+  }
+  const initialColumnTree = columns.map(cloneColumnTree);
+  ensureColumnKeysInPlace(initialColumnTree);
+  const stored = await getColumnConfig(storageKey);
+  if (!stored) {
+    return;
+  }
+  const initialColumns = buildStoredColumnConfig(
+    initialColumnTree,
+    { key: null, order: null },
+    {}
+  ).columns;
+  const nextColumns = {};
+  Object.entries(initialColumns).forEach(([key, initial]) => {
+    const next = {
+      ...stored.columns[key] ?? initial,
+      width: initial.width,
+      hidden: initial.hidden
+    };
+    if (initial.fixed) {
+      next.fixed = initial.fixed;
+    } else {
+      delete next.fixed;
+    }
+    nextColumns[key] = next;
+  });
+  await saveColumnConfig(storageKey, {
+    ...stored,
+    columns: nextColumns
+  });
+}
+function cloneColumnTree(column) {
+  return {
+    ...column,
+    children: column.children?.map(cloneColumnTree)
+  };
+}
 async function loadListTableStoredConfig(params) {
   const { storageKey, columns } = params;
   if (!storageKey) {
@@ -23963,9 +24096,7 @@ function drawListTableHeader(params) {
       columnKey: ROW_SELECTION_COLUMN_KEY,
       ...getHeaderSelectionState({
         options,
-        selectedRowKeys,
-        displayData
-      })
+        selectedRowKeys})
     } : null,
     inlineContentInset,
     collapsedColumnMarkers,
@@ -27025,6 +27156,19 @@ var ListTableCore = class {
    */
   updateOptions(options) {
     this.animationController.stopCarouselScroll();
+    const host = this.asAssemblyHost();
+    const incomingColumnsAreRuntimeColumns = options.columns === this.options.columns;
+    const nextInitialColumns = incomingColumnsAreRuntimeColumns ? cloneColumns(host.initialColumns) : cloneColumns(options.columns);
+    const nextInitialStretchColumns = incomingColumnsAreRuntimeColumns ? host.initialStretchColumns : options.stretchColumns;
+    const shouldPreserveRuntimeWidths = this.options.stretchColumns === false && options.stretchColumns === host.initialStretchColumns;
+    if (shouldPreserveRuntimeWidths) {
+      preserveRuntimeColumnWidths({
+        nextColumns: options.columns,
+        runtimeColumns: this.options.columns,
+        initialColumns: host.initialColumns
+      });
+      options.stretchColumns = false;
+    }
     applyInitialColumnVisibility(options.columns);
     ensureColumnKeysInPlace(options.columns);
     if (options.expandable?.expandedRowKeys !== void 0 && !areSameRowKeySet(
@@ -27040,10 +27184,9 @@ var ListTableCore = class {
     this.queryController.reset();
     this.summaryController.reset();
     this.options = options;
-    const host = this.asAssemblyHost();
     host.syncGroupingFromOptions();
-    host.initialColumns = cloneColumns(options.columns);
-    host.initialStretchColumns = options.stretchColumns;
+    host.initialColumns = nextInitialColumns;
+    host.initialStretchColumns = nextInitialStretchColumns;
     this.store.dispatch(
       replaceStateAction(
         resolveListTableStateOnOptionsUpdate(options, this.store.getSnapshot())
@@ -27247,5 +27390,6 @@ var ListTable = class {
 };
 
 exports.ListTable = ListTable;
+exports.resetListTableStoredColumnConfig = resetListTableStoredColumnConfig;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map