refactor columnToAntd function

Author: iamfaran

client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx

@@ -288,6 +288,195 @@ export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
   cellColorFn: CellColorViewType;
 };
 
+/**
+ * Helper: build a mapping of column -> sort order
+ */
+function computeSortMap(sort: SortValue[]): Map<string | undefined, SortOrder> {
+  return new Map(sort.map((s) => [s.column, s.desc ? "descend" : "ascend"]));
+}
+
+/**
+ * Helper: sort columns by fixed position and dynamic config order
+ */
+function orderColumns(
+  columns: Array<RawColumnType>,
+  dynamicColumn: boolean,
+  dynamicColumnConfig: string[],
+): Array<RawColumnType> {
+  const dynamicPositions: Record<string, number> = {};
+  if (dynamicColumn && dynamicColumnConfig.length > 0) {
+    dynamicColumnConfig.forEach((name, idx) => {
+      dynamicPositions[name] = idx;
+    });
+  }
+  return _.sortBy(columns, (c) => {
+    if (c.fixed === "left") return -1;
+    if (c.fixed === "right") return Number.MAX_SAFE_INTEGER;
+    if (dynamicColumn && dynamicColumnConfig.length > 0) {
+      const key = c.isCustom ? c.title : c.dataIndex;
+      const pos = dynamicPositions[key];
+      if (typeof pos === "number") return pos;
+    }
+    return 0;
+  });
+}
+
+/**
+ * Helper: should include a column based on hide and dynamic config gating
+ */
+function shouldIncludeColumn(
+  column: RawColumnType,
+  enableColumnSetting: boolean,
+  dynamicColumn: boolean,
+  dynamicColumnConfig: string[],
+): boolean {
+  if (
+    columnHide({
+      hide: column.hide,
+      tempHide: column.tempHide,
+      enableColumnSetting,
+    })
+  ) {
+    return false;
+  }
+  if (
+    dynamicColumn &&
+    dynamicColumnConfig.length > 0 &&
+    !dynamicColumnConfig.includes(column.isCustom ? column.title : column.dataIndex)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Helper: aggregate data for a specific column
+ */
+function extractAggrForColumn(
+  dataIndex: string,
+  columnsAggrData: ColumnsAggrData,
+) {
+  const aggr = columnsAggrData[dataIndex] as any;
+  const candidateTags: string[] = Array.isArray(aggr?.uniqueTags) ? aggr.uniqueTags : [];
+  const candidateStatus: { text: string; status: StatusType }[] = Array.isArray(aggr?.uniqueStatus)
+    ? aggr.uniqueStatus
+    : [];
+  const uniqueValues: any[] = Array.isArray(aggr?.uniqueValues) ? aggr.uniqueValues : [];
+  return { candidateTags, candidateStatus, uniqueValues };
+}
+
+/**
+ * Helper: build filter props for antd Table column
+ */
+function buildFilterProps(
+  dataIndex: string,
+  filterable: boolean,
+  candidateTags: any[],
+  uniqueValues: any[],
+) {
+  if (!filterable) return {};
+  const candidates = (Array.isArray(candidateTags) && candidateTags.length > 0
+    ? candidateTags
+    : Array.isArray(uniqueValues) && uniqueValues.length > 0
+      ? uniqueValues
+      : [])
+    .slice(0, 100);
+  return {
+    filters: candidates.map((v) => ({ text: String(v), value: v })),
+    onFilter: (value: any, record: any) => String(record[dataIndex] ?? "") === String(value ?? ""),
+  } as const;
+}
+
+/**
+ * Helper: build sorter props
+ */
+function buildSorterProps(
+  column: RawColumnType,
+  sortOrder: SortOrder | undefined,
+  multiplePriority: number,
+) {
+  if (!column.sortable) return {};
+  const sorter = {
+    multiple: multiplePriority,
+    compare:
+      column.columnType === 'date' || column.columnType === 'dateTime'
+        ? (a: any, b: any) => {
+            return dayjs(a[column.dataIndex] as string).unix() - dayjs(b[column.dataIndex] as string).unix();
+          }
+        : undefined,
+  } as const;
+  return {
+    sorter,
+    sortOrder,
+    showSorterTooltip: false,
+  } as const;
+}
+
+/**
+ * Helper: build static style props
+ */
+function buildStyleProps(column: RawColumnType) {
+  const style = {
+    background: column.background,
+    margin: column.margin,
+    text: column.text,
+    border: column.border,
+    radius: column.radius,
+    textSize: column.textSize,
+    textWeight: column.textWeight,
+    fontStyle: column.fontStyle,
+    fontFamily: column.fontFamily,
+    borderWidth: column.borderWidth,
+  } as TableColumnStyleType;
+  const linkStyle = {
+    text: column.linkColor,
+    hoverText: column.linkHoverColor,
+    activeText: column.linkActiveColor,
+  } as TableColumnLinkStyleType;
+  return { style, linkStyle };
+}
+
+/**
+ * Helper: build render function with minimal closure
+ */
+function buildRenderFn(
+  column: RawColumnType,
+  size: string,
+  candidateTags: string[],
+  candidateStatus: { text: string; status: StatusType }[],
+  onTableEvent: (eventName: any) => void,
+  initialColumns: { label: string; value: string }[],
+) {
+  return (value: any, record: RecordType, index: number) => {
+    const row = _.omit(record, OB_ROW_ORI_INDEX);
+    return column
+      .render(
+        {
+          currentCell: value,
+          currentRow: row,
+          currentIndex: index,
+          currentOriginalIndex: tryToNumber(record[OB_ROW_ORI_INDEX]),
+          initialColumns,
+        },
+        String(record[OB_ROW_ORI_INDEX])
+      )
+      .getView()
+      .view({
+        tableSize: size,
+        candidateTags,
+        candidateStatus,
+        textOverflow: column.textOverflow,
+        cellTooltip: column.cellTooltip({
+          currentCell: value,
+          currentRow: row,
+          currentIndex: index,
+        }),
+        onTableEvent,
+        cellIndex: `${column.dataIndex}-${index}`,
+      });
+  };
+}
+
 /**
  * convert column in raw format into antd format
  */
@@ -303,134 +492,51 @@ export function columnsToAntdFormat(
 ): Array<CustomColumnType<RecordType>> {
   const customColumns = columns.filter(col => col.isCustom).map(col => col.dataIndex);
   const initialColumns = getInitialColumns(columnsAggrData, customColumns);
-  const sortMap: Map<string | undefined, SortOrder> = new Map(
-    sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
-  );
-  const sortedColumns = _.sortBy(columns, (c) => {
-    if (c.fixed === "left") {
-      return -1;
-    } else if (c.fixed === "right") {
-      return Number.MAX_SAFE_INTEGER;
-    } else if (dynamicColumnConfig.length > 0) {
-      // sort by dynamic config array
-      const index = dynamicColumnConfig.indexOf(c.isCustom ? c.title : c.dataIndex);
-      if (index >= 0) {
-        return index;
-      }
-    }
-    return 0;
-  });
-  return sortedColumns.flatMap((column, mIndex) => {
-    if (
-      columnHide({
-        hide: column.hide,
-        tempHide: column.tempHide,
-        enableColumnSetting: enableColumnSetting,
-      })
-    ) {
-      return [];
-    }
-    if (
-      dynamicColumn &&
-      dynamicColumnConfig.length > 0 &&
-      !dynamicColumnConfig.includes(column.isCustom ? column.title : column.dataIndex)
-    ) {
-      return [];
+  const sortMap = computeSortMap(sort);
+  const sortedColumns = orderColumns(columns, dynamicColumn, dynamicColumnConfig);
+
+  const result: Array<CustomColumnType<RecordType>> = [];
+
+  sortedColumns.forEach((column, mIndex) => {
+    if (!shouldIncludeColumn(column, enableColumnSetting, dynamicColumn, dynamicColumnConfig)) {
+      return;
     }
-    const tags = ((columnsAggrData[column.dataIndex] ?? {}).uniqueTags ?? []) as string[];
-    const status = ((columnsAggrData[column.dataIndex] ?? {}).uniqueStatus ?? []) as {
-      text: string;
-      status: StatusType;
-    }[];
-    const uniqueValues = (columnsAggrData[column.dataIndex] as any)?.uniqueValues as any[] ?? [];
-    const title = renderTitle({ title: column.title, tooltip: column.titleTooltip });
 
-    const filterProps = column.filterable
-      ? {
-          filters: (Array.isArray(tags) && tags.length > 0
-            ? tags
-            : Array.isArray(uniqueValues) && uniqueValues.length > 0
-              ? uniqueValues
-              : [])
-            .slice(0, 100)
-            .map((v) => ({ text: String(v), value: v })),
-
-          onFilter: (value: any, record: any) => String(record[column.dataIndex] ?? "") === String(value ?? ""),
-        }
-      : {};
+    const { candidateTags, candidateStatus, uniqueValues } = extractAggrForColumn(column.dataIndex, columnsAggrData);
+    const title = renderTitle({ title: column.title, tooltip: column.titleTooltip });
+    const filterProps = buildFilterProps(column.dataIndex, column.filterable, candidateTags, uniqueValues);
+    const { style, linkStyle } = buildStyleProps(column);
+    const multiplePriority = (sortedColumns.length - mIndex) + 1;
+    const sorterProps = buildSorterProps(column, sortMap.get(column.dataIndex), multiplePriority);
 
-    return {
-      key: `${column.dataIndex}-${mIndex}`,
+    const antdColumn: CustomColumnType<RecordType> = {
+      key: `${column.dataIndex}`,
       title: column.showTitle ? title : '',
       titleText: column.title,
       dataIndex: column.dataIndex,
       align: column.align,
       width: column.autoWidth === "auto" ? 0 : column.width,
       fixed: column.fixed === "close" ? false : column.fixed,
-      style: {
-        background: column.background,
-        margin: column.margin,
-        text: column.text,
-        border: column.border,
-        radius: column.radius,
-        textSize: column.textSize,
-        textWeight: column.textWeight,
-        fontStyle:column.fontStyle,
-        fontFamily: column.fontFamily,
-        borderWidth: column.borderWidth,
-      },
-      linkStyle: {
-        text: column.linkColor,
-        hoverText: column.linkHoverColor,
-        activeText: column.linkActiveColor,
-      },
+      style,
+      linkStyle,
       cellColorFn: column.cellColor,
       onWidthResize: column.onWidthResize,
-      render: (value: any, record: RecordType, index: number) => {
-        const row = _.omit(record, OB_ROW_ORI_INDEX);
-        return column
-          .render(
-            {
-              currentCell: value,
-              currentRow: row,
-              currentIndex: index,
-              currentOriginalIndex: tryToNumber(record[OB_ROW_ORI_INDEX]),
-              initialColumns,
-            },
-            String(record[OB_ROW_ORI_INDEX])
-          )
-          .getView()
-          .view({
-            tableSize: size,
-            candidateTags: tags,
-            candidateStatus: status,
-            textOverflow: column.textOverflow,
-            cellTooltip: column.cellTooltip({
-              currentCell: value,
-              currentRow: row,
-              currentIndex: index,
-            }),
-            onTableEvent,
-            cellIndex: `${column.dataIndex}-${index}`,
-          });
-      },
-      ...(column.sortable
-        ? {
-            sorter: {
-              multiple: (sortedColumns.length - mIndex) + 1,
-              compare: column.columnType === 'date' || column.columnType === 'dateTime'
-                ? (a: any, b: any) => {
-                  return dayjs(a[column.dataIndex] as string).unix() - dayjs(b[column.dataIndex] as string).unix();
-                }
-              : undefined
-            },
-            sortOrder: sortMap.get(column.dataIndex),
-            showSorterTooltip: false,
-          }
-        : {}),
-      ...filterProps,
+      render: buildRenderFn(
+        column,
+        size,
+        candidateTags,
+        candidateStatus,
+        onTableEvent,
+        initialColumns,
+      ),
+      ...(sorterProps as any),
+      ...(filterProps as any),
     } as any;
+
+    result.push(antdColumn);
   });
+
+  return result;
 }
 
 function getSortValue(sortResult: SorterResult<RecordType>) {