es-grid-template/es/table-virtuoso/body/TableBodyRow.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import TableBodyCell from "./TableBodyCell";
import { flexRender } from "@tanstack/react-table";
import React from "react";
import { TableContext } from "../useContext";
import classNames from "classnames";
import { getFormat } from "../hook/utils";
import { checkDecimalSeparator, checkThousandSeparator } from "../../table-component/hook/utils";
import { sumByField } from "../../grid-component/hooks";
import { numericFormatter } from "react-numeric-component";
import TableBodyCellRowGroup from "./TableBodyCellRowGroup";
const TableBodyRow = ({
  tableId,
  table,
  row,
  virtualRow,
  commandClick,
  contextMenuItems,
  onContextMenu,
  rowheight,
  editAble,
  isEditing,
  isRowEditable,
  ...rest
}) => {
  const {
    prefix,
    recordDoubleClick,
    focusedCell,
    rowClassName,
    onRowStyles,
    groupSetting,
    format
  } = React.useContext(TableContext);
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
  const visibleCells = row.getVisibleCells();
  const allCells = row.getAllCells();
  return /*#__PURE__*/React.createElement("tr", _extends({
    key: row.id,
    "data-row-key": row.id
  }, rest, {
    // data-known-size={37}

    className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
      [`${prefix}-grid-row-selected`]: row.getIsSelected(),
      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId,
      [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0
    }),
    style: {
      ...rowStyles,
      height: rowheight
    },
    onDoubleClick: e => {
      recordDoubleClick?.({
        e,
        rowData: row.original,
        rowIndex: row.index
      });
    },
    onContextMenu: e => {
      if (contextMenuItems && contextMenuItems.length) {
        const cell = e.target.closest('[data-col-key]');
        const colKey = cell?.getAttribute('data-col-key');
        onContextMenu?.({
          rowData: row.original,
          field: colKey
        })(e);
        onContextMenu?.(row.original)(e);
      }
    }
  }), visibleCells.map(cell => {
    const originCol = cell.column.columnDef.meta ?? {};
    const {
      onCell
    } = originCol ?? {};
    const cellAttributes = onCell?.(cell.row.original, cell.row.index) ?? {};
    const {
      colSpan: onCellColSpan,
      rowSpan: onCellRowSpan,
      ...otherCellAttributes
    } = cellAttributes;
    const nonGroupColumns = visibleCells.filter(col => col.column.id !== 'selection_column' && col.column.id !== '#');
    const firstNonGroupColumn = nonGroupColumns[0];

    // const colSpan  = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
    const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
    if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
      return null;
    }

    // if (groupAble && column.field === firstNonGroupColumn?.field && row.subRows) {
    if (cell.column.id === firstNonGroupColumn.column.id && row.subRows && row.subRows.length > 0) {
      const {
        field
      } = row.original ?? {};
      const cellGroup = allCells.find(it => it.column.id === field);
      const headerContext = cellGroup && groupSetting?.showHeaderColumn !== false ? {
        table,
        column: cellGroup.column,
        header: {
          id: cellGroup.column.id,
          column: cellGroup.column,
          depth: 0,
          index: 0,
          subHeaders: []
        }
      } : undefined;
      const cellValue = cellGroup ? cellGroup.getValue() : '';
      const headertext = headerContext && cellGroup ? flexRender(cellGroup.column.columnDef.header, headerContext) : '';
      const cellContent = cellGroup ? flexRender(cellGroup.column.columnDef.cell, cellGroup.getContext()) : '';
      const groupValue = typeof groupSetting?.groupTemplate === 'function' ? groupSetting?.groupTemplate({
        column: cellGroup?.column.columnDef.meta,
        rowData: row.original,
        value: cellValue
      }) : /*#__PURE__*/React.createElement(React.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
        table: table,
        tableId: tableId,
        key: cell.id,
        cell: cell,
        commandClick: commandClick,
        virtualRow: virtualRow,
        isEditing: false,
        colSpan: colSpanGroup ?? 1,
        rowSpan: 1
      }, otherCellAttributes, {
        groupValue: groupValue
      }));
    }
    if (row.subRows.length > 0 && originCol.sumGroup === true && originCol.type === 'number') {
      const colFormat = typeof originCol.format === 'function' ? originCol.format({}) : originCol.format;
      const cellFormat = getFormat(colFormat, format);
      const thousandSeparator = cellFormat?.thousandSeparator;
      const decimalSeparator = cellFormat?.decimalSeparator;
      const dec = cellFormat?.decimalScale;
      const numericFormatProps = {
        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
        allowNegative: cellFormat?.allowNegative ?? true,
        prefix: cellFormat?.prefix,
        suffix: cellFormat?.suffix,
        decimalScale: dec,
        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
      };
      const childrenData = row.subRows.map(it => it.original);
      const sumValue = sumByField(childrenData, cell.column.id);
      const sumValueFormat = numericFormatter(sumValue.toString(), numericFormatProps);
      return /*#__PURE__*/React.createElement(TableBodyCellRowGroup, _extends({
        table: table,
        tableId: tableId,
        key: cell.id,
        cell: cell,
        commandClick: commandClick,
        virtualRow: virtualRow,
        isEditing: false,
        colSpan: onCellColSpan ?? 1,
        rowSpan: onCellRowSpan ?? 1,
        sumValue: sumValueFormat
      }, otherCellAttributes));
    }
    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
      table: table,
      tableId: tableId,
      key: cell.id,
      cell: cell,
      commandClick: commandClick,
      virtualRow: virtualRow,
      isEditing: false,
      colSpan: onCellColSpan ?? 1,
      rowSpan: onCellRowSpan ?? 1
    }, otherCellAttributes));
  }));
};
export default TableBodyRow;