@simplysm/solid 13.0.76 → 13.0.77

package/src/components/data/sheet/DataSheet.tsx

@@ -11,13 +11,10 @@ import { createResizeObserver } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import {
-  IconArrowsSort,
   IconChevronDown,
   IconChevronRight,
   IconGripVertical,
   IconSettings,
-  IconSortAscending,
-  IconSortDescending,
 } from "@tabler/icons-solidjs";
 import "@simplysm/core-browser";
 import type {
@@ -26,10 +23,10 @@ import type {
   DataSheetConfig,
   DataSheetConfigColumnInfo,
   DataSheetProps,
-} from "./types";
+  FlatItem,
+} from "./DataSheet.types";
 import { DataSheetColumn, createColumnSlotsAccessor } from "./DataSheetColumn";
-import { DataSheetConfigDialog } from "./DataSheetConfigDialog";
-import { buildHeaderTable, normalizeHeader } from "./sheetUtils";
+import { buildHeaderTable, normalizeHeader } from "./DataSheet.utils";
 import { startPointerDrag } from "../../../helpers/startPointerDrag";
 import { Icon } from "../../display/Icon";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
@@ -78,14 +75,10 @@ import { useDataSheetExpansion } from "./hooks/useDataSheetExpansion";
 import { useDataSheetSelection } from "./hooks/useDataSheetSelection";
 import { useDataSheetReorder } from "./hooks/useDataSheetReorder";
 import { useDataSheetFixedColumns } from "./hooks/useDataSheetFixedColumns";
+import { useDataSheetHeaderCell } from "./hooks/useDataSheetHeaderCell";
 
-interface DataSheetComponent {
-  <T>(props: DataSheetProps<T>): JSX.Element;
-  Column: typeof DataSheetColumn;
-  ConfigDialog: typeof DataSheetConfigDialog;
-}
 
-const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
+const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
   const [local] = splitProps(props, [
     "items",
     "storageKey",
@@ -107,7 +100,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
     "selection",
     "onSelectionChange",
     "autoSelect",
-    "itemSelectable",
+    "isItemSelectable",
     "cellClass",
     "cellStyle",
     "onItemsReorder",
@@ -123,14 +116,14 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
   const columnDefs = createMemo(
     () =>
       rawColumns().map(
-        (col): DataSheetColumnDef<T> => ({
+        (col): DataSheetColumnDef<TItem> => ({
           key: col.key,
           header: normalizeHeader(col.header),
           headerContent: col.headerContent,
           headerStyle: col.headerStyle,
           summary: col.summary,
           tooltip: col.tooltip,
-          cell: col.children as (ctx: DataSheetCellContext<T>) => JSX.Element,
+          cell: col.children as (ctx: DataSheetCellContext<TItem>) => JSX.Element,
           class: col.class,
           fixed: col.fixed ?? false,
           hidden: col.hidden ?? false,
@@ -228,7 +221,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
     toggleSort,
     sortIndex: sortIndex,
     sortedItems,
-  } = useDataSheetSorting<T>({
+  } = useDataSheetSorting<TItem>({
     sorts: () => local.sorts,
     onSortsChange: () => local.onSortsChange,
     items: () => local.items,
@@ -240,7 +233,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
   }
 
   // #region Paging
-  const { currentPage, setCurrentPage, pageCount, pagedItems } = useDataSheetPaging<T>({
+  const { currentPage, setCurrentPage, pageCount, pagedItems } = useDataSheetPaging<TItem>({
     page: () => local.page,
     onPageChange: () => local.onPageChange,
     pageSize: () => local.pageSize,
@@ -250,7 +243,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
   });
 
   const originalIndexMap = createMemo(() => {
-    const map = new Map<T, number>();
+    const map = new Map<TItem, number>();
     (local.items ?? []).forEach((item, i) => map.set(item, i));
     return map;
   });
@@ -268,7 +261,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
     getFixedStyle,
     isLastFixed,
     registerColumnRef,
-  } = useDataSheetFixedColumns<T>(
+  } = useDataSheetFixedColumns<TItem>(
     {
       get itemChildren() { return local.itemChildren; },
       get selectionMode() { return local.selectionMode; },
@@ -364,7 +357,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
 
   // #region Expanding
   const { expandedItems, flatItems, toggleExpand, isAllExpanded, toggleExpandAll } =
-    useDataSheetExpansion<T>(
+    useDataSheetExpansion<TItem>(
       {
         get expandedItems() { return local.expandedItems; },
         get onExpandedItemsChange() { return local.onExpandedItemsChange; },
@@ -387,18 +380,18 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
     rangeSelect,
     lastClickedRow,
     setLastClickedRow,
-  } = useDataSheetSelection<T>(
+  } = useDataSheetSelection<TItem>(
     {
       get selectionMode() { return local.selectionMode; },
       get selection() { return local.selection; },
       get onSelectionChange() { return local.onSelectionChange; },
-      get itemSelectable() { return local.itemSelectable; },
+      get isItemSelectable() { return local.isItemSelectable; },
     },
     displayItems,
   );
 
   // #region AutoSelect
-  function selectItem(item: T): void {
+  function selectItem(item: TItem): void {
     if (getItemSelectable(item) !== true) return;
     if (local.selectionMode === "single") {
       setSelection([item]);
@@ -410,7 +403,7 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
   }
 
   // #region Reorder
-  const { dragState, onReorderPointerDown } = useDataSheetReorder<T>(
+  const { dragState, onReorderPointerDown } = useDataSheetReorder<TItem>(
     {
       get onItemsReorder() { return local.onItemsReorder; },
       get itemChildren() { return local.itemChildren; },
@@ -471,6 +464,205 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
   // suppress unused variable warning — dragState is used for side effects (DOM mutation in hook)
   void dragState;
 
+  // #region Sub-render functions
+
+  const { renderHeaderCell } = useDataSheetHeaderCell({
+    effectiveColumns,
+    headerRowTops,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+    toggleSort,
+    getSortDef,
+    sortIndex,
+    onResizerPointerdown,
+    onResizerDoubleClick,
+    thClass,
+    fixedClass,
+    sortableThClass,
+    fixedLastClass,
+    thContentClass,
+    resizerClass,
+    sortIconClass,
+  });
+
+  function renderExpandCell(flatItem: FlatItem<TItem>): JSX.Element {
+    return (
+      <td
+        class={twMerge(
+          featureTdClass,
+          fixedClass,
+          "z-[2]",
+          isExpandColLastFixed() ? fixedLastClass : undefined,
+        )}
+        style={{ left: "0" }}
+      >
+        <div class={featureCellBodyWrapperClass}>
+          <For each={Array.from({ length: flatItem.depth })}>
+            {() => (
+              <div class={expandIndentGuideClass}>
+                <div class={expandIndentGuideLineClass} />
+              </div>
+            )}
+          </For>
+          <Show when={flatItem.hasChildren}>
+            <button
+              type="button"
+              class={expandToggleClass}
+              onClick={() => toggleExpand(flatItem.item)}
+            >
+              <Icon
+                icon={IconChevronDown}
+                size="1em"
+                class={clsx(
+                  "transition-transform",
+                  expandedItems().includes(flatItem.item) ? "rotate-0" : "-rotate-90",
+                )}
+              />
+            </button>
+          </Show>
+        </div>
+      </td>
+    );
+  }
+
+  function renderSelectCell(flatItem: FlatItem<TItem>): JSX.Element {
+    const selectable = () => getItemSelectable(flatItem.item);
+    const isSelected = () => selection().includes(flatItem.item);
+    const rowIndex = () => flatItem.row;
+
+    return (
+      <td
+        class={twMerge(
+          featureTdClass,
+          fixedClass,
+          "z-[2]",
+          isSelectColLastFixed() ? fixedLastClass : undefined,
+        )}
+        style={{
+          left: selectColLeft(),
+        }}
+      >
+        <Show
+          when={local.selectionMode === "multiple"}
+          fallback={
+            /* single mode */
+            <Show when={selectable() === true}>
+              <div
+                class={featureCellBodyClickableClass}
+                onClick={() => toggleSelect(flatItem.item)}
+              >
+                <div
+                  class={twMerge(
+                    selectSingleClass,
+                    isSelected()
+                      ? selectSingleSelectedClass
+                      : selectSingleUnselectedClass,
+                  )}
+                >
+                  <Icon icon={IconChevronRight} size="1em" />
+                </div>
+              </div>
+            </Show>
+          }
+        >
+          {/* multi mode */}
+          <div
+            class={featureCellBodyClickableClass}
+            onClick={(e) => {
+              if (e.shiftKey) {
+                rangeSelect(rowIndex());
+              } else {
+                toggleSelect(flatItem.item);
+              }
+              setLastClickedRow(rowIndex());
+            }}
+            title={
+              typeof selectable() === "string"
+                ? (selectable() as string)
+                : undefined
+            }
+          >
+            <Checkbox
+              value={isSelected()}
+              disabled={selectable() !== true}
+              inset
+              class={twMerge(
+                "pointer-events-none",
+                lastClickedRow() === rowIndex()
+                  ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700"
+                  : undefined,
+              )}
+            />
+          </div>
+        </Show>
+      </td>
+    );
+  }
+
+  function renderReorderCell(flatItem: FlatItem<TItem>): JSX.Element {
+    return (
+      <td
+        class={twMerge(
+          featureTdClass,
+          fixedClass,
+          "z-[2]",
+          isReorderColLastFixed() ? fixedLastClass : undefined,
+        )}
+        style={{
+          left: reorderColLeft(),
+        }}
+      >
+        <div
+          class={reorderCellWrapperClass}
+          onPointerDown={(e) => onReorderPointerDown(e, flatItem.item)}
+        >
+          <div class={reorderHandleClass}>
+            <Icon icon={IconGripVertical} size="1em" />
+          </div>
+        </div>
+      </td>
+    );
+  }
+
+  function renderSummaryRow(): JSX.Element {
+    return (
+      <Show when={hasSummary()}>
+        <tr>
+          {/* Expand feature column summary cell already covered by rowspan, skip */}
+          <For each={effectiveColumns()}>
+            {(col, colIndex) => {
+              const summaryStyle = (): string | undefined => {
+                const parts: string[] = [];
+                parts.push(`top: ${summaryRowTop()}px`);
+                const left = getFixedStyle(colIndex());
+                if (left != null) parts.push(left);
+                return parts.join("; ");
+              };
+
+              return (
+                <th
+                  class={twMerge(
+                    thClass,
+                    summaryThClass,
+                    fixedClass,
+                    col.fixed ? "z-[5]" : "z-[3]",
+                    isLastFixed(colIndex()) ? fixedLastClass : undefined,
+                  )}
+                  style={summaryStyle()}
+                >
+                  <div class={thContentClass}>{col.summary?.()}</div>
+                </th>
+              );
+            }}
+          </For>
+        </tr>
+      </Show>
+    );
+  }
+
+  // #endregion
+
   return (
     <ColumnsProvider>
       {local.children}
@@ -627,186 +819,14 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
                   <For each={row}>
                     {(cell, cellColIndex) => (
                       <Show when={cell}>
-                        {(c) => {
-                          const isSortable = () =>
-                            c().isLastRow &&
-                            c().colIndex != null &&
-                            effectiveColumns()[c().colIndex!].sortable;
-                          const colKey = () =>
-                            c().colIndex != null
-                              ? effectiveColumns()[c().colIndex!].key
-                              : undefined;
-
-                          // Group header fixed status: all columns in colspan range are fixed
-                          const isGroupFixed = (): boolean => {
-                            if (c().isLastRow) return false;
-                            const start = cellColIndex();
-                            const span = c().colspan;
-                            const cols = effectiveColumns();
-                            for (let i = start; i < start + span && i < cols.length; i++) {
-                              if (!cols[i].fixed) return false;
-                            }
-                            return true;
-                          };
-
-                          // Cell fixed column status (based on colIndex if last row, group-based otherwise)
-                          const isCellFixed = () =>
-                            (c().isLastRow &&
-                              c().colIndex != null &&
-                              effectiveColumns()[c().colIndex!].fixed) ||
-                            isGroupFixed();
-
-                          // Cell's last fixed status
-                          const isCellLastFixed = () => {
-                            if (c().isLastRow && c().colIndex != null)
-                              return isLastFixed(c().colIndex!);
-                            if (isGroupFixed()) {
-                              const lastCol = cellColIndex() + c().colspan - 1;
-                              return isLastFixed(lastCol);
-                            }
-                            return false;
-                          };
-
-                          // Fixed cell left + top inline style
-                          const cellStyle = (): string | undefined => {
-                            const parts: string[] = [];
-                            // top: apply to all th (fix header to top)
-                            const top = headerRowTops()[rowIndex()];
-                            parts.push(`top: ${top}px`);
-                            // left: apply only to fixed columns
-                            if (c().isLastRow && c().colIndex != null) {
-                              const left = getFixedStyle(c().colIndex!);
-                              if (left != null) parts.push(left);
-                              // max-width: apply if explicit width exists (allow column to shrink below content)
-                              const col = effectiveColumns()[c().colIndex!];
-                              if (col.width != null) parts.push(`max-width: ${col.width.replace(/;/g, "")}`);
-                            } else if (isGroupFixed()) {
-                              const left = getFixedStyle(cellColIndex());
-                              if (left != null) parts.push(left);
-                            }
-                            return parts.length > 0 ? parts.join("; ") : undefined;
-                          };
-
-                          return (
-                            <th
-                              class={twMerge(
-                                thClass,
-                                fixedClass,
-                                isSortable() ? sortableThClass : undefined,
-                                isCellFixed() ? "z-[5]" : "z-[3]",
-                                isCellLastFixed() ? fixedLastClass : undefined,
-                              )}
-                              colspan={c().colspan > 1 ? c().colspan : undefined}
-                              rowspan={c().rowspan > 1 ? c().rowspan : undefined}
-                              style={cellStyle()}
-                              title={
-                                c().isLastRow && c().colIndex != null
-                                  ? (effectiveColumns()[c().colIndex!].tooltip ?? c().text)
-                                  : c().text
-                              }
-                              ref={(el: HTMLElement) => {
-                                if (
-                                  c().isLastRow &&
-                                  c().colIndex != null &&
-                                  effectiveColumns()[c().colIndex!].fixed
-                                ) {
-                                  registerColumnRef(c().colIndex!, el);
-                                }
-                              }}
-                              onClick={(e) => {
-                                if (!isSortable()) return;
-                                const key = colKey();
-                                if (key == null) return;
-                                toggleSort(key, e.shiftKey || e.ctrlKey);
-                              }}
-                            >
-                              <div class={clsx("flex items-center gap-2", thContentClass)}>
-                                <div class="flex-1">{c().headerContent?.() ?? c().text}</div>
-                                <Show when={isSortable() && colKey()}>
-                                  {(key) => {
-                                    const sortDef = () => getSortDef(key());
-                                    const sortIdx = () => sortIndex(key());
-                                    return (
-                                      <div class={sortIconClass}>
-                                        <Show when={sortDef()?.desc === false}>
-                                          <Icon icon={IconSortAscending} />
-                                        </Show>
-                                        <Show when={sortDef()?.desc === true}>
-                                          <Icon icon={IconSortDescending} />
-                                        </Show>
-                                        <Show when={sortDef() == null}>
-                                          <Icon
-                                            icon={IconArrowsSort}
-                                            class="opacity-30"
-                                          />
-                                        </Show>
-                                        <Show when={sortIdx()}>
-                                          {(idx) => <sub>{idx()}</sub>}
-                                        </Show>
-                                      </div>
-                                    );
-                                  }}
-                                </Show>
-                              </div>
-                              <Show
-                                when={
-                                  c().isLastRow &&
-                                  c().colIndex != null &&
-                                  effectiveColumns()[c().colIndex!].resizable
-                                }
-                              >
-                                <div
-                                  class={resizerClass}
-                                  onClick={(e) => e.stopPropagation()}
-                                  onPointerDown={(e) =>
-                                    onResizerPointerdown(e, effectiveColumns()[c().colIndex!].key)
-                                  }
-                                  onDblClick={(e) => {
-                                    e.stopPropagation();
-                                    onResizerDoubleClick(effectiveColumns()[c().colIndex!].key);
-                                  }}
-                                />
-                              </Show>
-                            </th>
-                          );
-                        }}
+                        {(c) => renderHeaderCell(c(), cellColIndex(), rowIndex())}
                       </Show>
                     )}
                   </For>
                 </tr>
               )}
             </For>
-            <Show when={hasSummary()}>
-              <tr>
-                {/* Expand feature column summary cell already covered by rowspan, skip */}
-                <For each={effectiveColumns()}>
-                  {(col, colIndex) => {
-                    const summaryStyle = (): string | undefined => {
-                      const parts: string[] = [];
-                      parts.push(`top: ${summaryRowTop()}px`);
-                      const left = getFixedStyle(colIndex());
-                      if (left != null) parts.push(left);
-                      return parts.join("; ");
-                    };
-
-                    return (
-                      <th
-                        class={twMerge(
-                          thClass,
-                          summaryThClass,
-                          fixedClass,
-                          col.fixed ? "z-[5]" : "z-[3]",
-                          isLastFixed(colIndex()) ? fixedLastClass : undefined,
-                        )}
-                        style={summaryStyle()}
-                      >
-                        <div class={thContentClass}>{col.summary?.()}</div>
-                      </th>
-                    );
-                  }}
-                </For>
-              </tr>
-            </Show>
+            {renderSummaryRow()}
           </thead>
           <tbody>
             <For each={displayItems()}>
@@ -814,148 +834,20 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
                 <tr
                   data-selected={selection().includes(flat.item) ? "" : undefined}
                   onClick={() => {
-                    if (local.autoSelect === "click") {
+                    if (local.autoSelect) {
                       selectItem(flat.item);
                     }
                   }}
-                  class={clsx(trRowClass, local.autoSelect === "click" && "cursor-pointer")}
+                  class={clsx(trRowClass, local.autoSelect && "cursor-pointer")}
                 >
-                  {/* Expand feature column body cell */}
                   <Show when={hasExpandFeature()}>
-                    <td
-                      class={twMerge(
-                        featureTdClass,
-                        fixedClass,
-                        "z-[2]",
-                        isExpandColLastFixed() ? fixedLastClass : undefined,
-                      )}
-                      style={{ left: "0" }}
-                    >
-                      <div class={featureCellBodyWrapperClass}>
-                        <For each={Array.from({ length: flat.depth })}>
-                          {() => (
-                            <div class={expandIndentGuideClass}>
-                              <div class={expandIndentGuideLineClass} />
-                            </div>
-                          )}
-                        </For>
-                        <Show when={flat.hasChildren}>
-                          <button
-                            type="button"
-                            class={expandToggleClass}
-                            onClick={() => toggleExpand(flat.item)}
-                          >
-                            <Icon
-                              icon={IconChevronDown}
-                              size="1em"
-                              class={clsx(
-                                "transition-transform",
-                                expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90",
-                              )}
-                            />
-                          </button>
-                        </Show>
-                      </div>
-                    </td>
+                    {renderExpandCell(flat)}
                   </Show>
-                  {/* Select feature column body cell */}
                   <Show when={hasSelectFeature()}>
-                    {(() => {
-                      const selectable = () => getItemSelectable(flat.item);
-                      const isSelected = () => selection().includes(flat.item);
-                      const rowIndex = () => flat.row;
-
-                      return (
-                        <td
-                          class={twMerge(
-                            featureTdClass,
-                            fixedClass,
-                            "z-[2]",
-                            isSelectColLastFixed() ? fixedLastClass : undefined,
-                          )}
-                          style={{
-                            left: selectColLeft(),
-                          }}
-                        >
-                          <Show
-                            when={local.selectionMode === "multiple"}
-                            fallback={
-                              /* single mode */
-                              <Show when={selectable() === true}>
-                                <div
-                                  class={featureCellBodyClickableClass}
-                                  onClick={() => toggleSelect(flat.item)}
-                                >
-                                  <div
-                                    class={twMerge(
-                                      selectSingleClass,
-                                      isSelected()
-                                        ? selectSingleSelectedClass
-                                        : selectSingleUnselectedClass,
-                                    )}
-                                  >
-                                    <Icon icon={IconChevronRight} size="1em" />
-                                  </div>
-                                </div>
-                              </Show>
-                            }
-                          >
-                            {/* multi mode */}
-                            <div
-                              class={featureCellBodyClickableClass}
-                              onClick={(e) => {
-                                if (e.shiftKey) {
-                                  rangeSelect(rowIndex());
-                                } else {
-                                  toggleSelect(flat.item);
-                                }
-                                setLastClickedRow(rowIndex());
-                              }}
-                              title={
-                                typeof selectable() === "string"
-                                  ? (selectable() as string)
-                                  : undefined
-                              }
-                            >
-                              <Checkbox
-                                value={isSelected()}
-                                disabled={selectable() !== true}
-                                inset
-                                class={twMerge(
-                                  "pointer-events-none",
-                                  lastClickedRow() === rowIndex()
-                                    ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700"
-                                    : undefined,
-                                )}
-                              />
-                            </div>
-                          </Show>
-                        </td>
-                      );
-                    })()}
+                    {renderSelectCell(flat)}
                   </Show>
-                  {/* Drag reorder feature column body cell */}
                   <Show when={hasReorderFeature()}>
-                    <td
-                      class={twMerge(
-                        featureTdClass,
-                        fixedClass,
-                        "z-[2]",
-                        isReorderColLastFixed() ? fixedLastClass : undefined,
-                      )}
-                      style={{
-                        left: reorderColLeft(),
-                      }}
-                    >
-                      <div
-                        class={reorderCellWrapperClass}
-                        onPointerDown={(e) => onReorderPointerDown(e, flat.item)}
-                      >
-                        <div class={reorderHandleClass}>
-                          <Icon icon={IconGripVertical} size="1em" />
-                        </div>
-                      </div>
-                    </td>
+                    {renderReorderCell(flat)}
                   </Show>
                   <For each={effectiveColumns()}>
                     {(col, colIndex) => (
@@ -1002,7 +894,5 @@ const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
 //#region Export
 export const DataSheet = Object.assign(DataSheetInner, {
   Column: DataSheetColumn,
-  ConfigDialog: DataSheetConfigDialog,
-}) as unknown as DataSheetComponent;
-export { DataSheetConfigDialog };
+});
 //#endregion