All files / src/form/gantt GanttRowListTable.tsx

0% Statements 0/37
0% Branches 0/8
0% Functions 0/13
0% Lines 0/34

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98                                                                                                                                                                                                   
import React, { Dispatch, memo, ReactNode, SetStateAction, useMemo } from "react";
import { FormInstance, Table } from "antd";
import { GanttDisplayProps } from "@props/RecordProps";
import { DOMAIN_KEY, GanttRow, ROW_LIST_CHILDREN_KEY, } from "./GanttComponentTypes";
import "./GanttComponent.css";
import { ExpandableConfig } from "rc-table/lib/interface";
import { getDisplayRenderFunction } from "@kernel/DisplayComponentsMapping";
import { ColumnsType } from "antd/lib/table";
 
 
export interface RowListTableProps {
  rows: GanttRow[];
  setRows: Dispatch<SetStateAction<GanttRow[]>>;
  rowListDisplayColumns: Array<GanttDisplayProps>;
  refreshData: () => void;
  zIndex: number;
}
 
const markHidden = (currentRow: GanttRow, hidden: boolean, map: Map<GanttRow, GanttRow[]>): void => {
  currentRow.hide = hidden;
  map.get(currentRow)?.forEach((child) => markHidden(child, hidden, map));
};
 
export const GanttRowListTable: React.FC<RowListTableProps> = memo((props: RowListTableProps) => {
  const {
    rows, setRows, rowListDisplayColumns, zIndex,
  } = props;
 
  const domainKeyRecord = useMemo(() => {
    const record: Record<string, GanttRow> = {};
    rows.forEach((row) => {
      record[row.rawData.getDomainKey()] = row;
    });
    return record;
  }, [rows]);
 
  const rowTreeMap = useMemo(() => {
    const map = new Map<GanttRow, GanttRow[]>();
    rows.forEach((row) => {
      const parentRowKey = row.rawData.getParentRowKey();
      if (parentRowKey) {
        const parentRow = domainKeyRecord[parentRowKey[DOMAIN_KEY]];
        if (parentRow) {
          const children = map.get(parentRow) || [];
          children.push(row);
          map.set(parentRow, children);
        }
      }
    });
    return map;
  }, [domainKeyRecord, rows]);
  const expandable = useMemo((): ExpandableConfig<GanttRow> => ({
    defaultExpandAllRows: true,
    onExpand: (expanded: boolean, record: GanttRow) => {
      setRows((rows) => {
        markHidden(domainKeyRecord[record.rawData.getDomainKey()], !expanded, rowTreeMap);
        return [...rows];
      });
    },
    childrenColumnName: ROW_LIST_CHILDREN_KEY,
  }), [domainKeyRecord, rowTreeMap, setRows]);
  const columns: ColumnsType<GanttRow> = useMemo(() => rowListDisplayColumns.map((displayColumn) => {
    const { key } = displayColumn;
    return {
      key,
      dataIndex: displayColumn.key,
      title: displayColumn.title,
      ellipsis: true,
      render: (value: unknown, record: GanttRow): ReactNode => {
        const columnFieldMeta = record.rawData.getFieldMetas()[key];
        const val = record.rawData[key];
        if (columnFieldMeta) {
          return getDisplayRenderFunction({
            column: columnFieldMeta,
            enumValues: {},
            objectValues: {},
            domainName: record.rawData.getDomainName(),
            page: "LIST",
            zIndex,
            form: {} as FormInstance,
          })(val, record.rawData);
        } else {
          return val;
        }
      },
    };
  }), [rowListDisplayColumns, zIndex]);
  return <Table
    columns={columns}
    dataSource={rows}
    rowClassName="RowList"
    pagination={false}
    size={"small"}
    expandable={expandable}
  />;
});