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

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _TableBodyCell = _interopRequireDefault(require("./TableBodyCell"));
var _reactTable = require("@tanstack/react-table");
var _react = _interopRequireDefault(require("react"));
var _useContext = require("../useContext");
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../hook/utils");
var _utils2 = require("../../table-component/hook/utils");
var _hooks = require("../../grid-component/hooks");
var _reactNumericComponent = require("react-numeric-component");
var _TableBodyCellRowGroup = _interopRequireDefault(require("./TableBodyCellRowGroup"));
const TableBodyRow = ({
  tableId,
  table,
  row,
  virtualRow,
  commandClick,
  contextMenuItems,
  onContextMenu,
  rowheight,
  editAble,
  isEditing,
  isRowEditable,
  ...rest
}) => {
  const {
    prefix,
    recordDoubleClick,
    focusedCell,
    rowClassName,
    onRowStyles,
    groupSetting,
    format
  } = _react.default.useContext(_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.default.createElement("tr", (0, _extends2.default)({
    key: row.id,
    "data-row-key": row.id
  }, rest, {
    // data-known-size={37}

    className: (0, _classnames.default)(`${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 ? (0, _reactTable.flexRender)(cellGroup.column.columnDef.header, headerContext) : '';
      const cellContent = cellGroup ? (0, _reactTable.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.default.createElement(_react.default.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
        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 = (0, _utils.getFormat)(colFormat, format);
      const thousandSeparator = cellFormat?.thousandSeparator;
      const decimalSeparator = cellFormat?.decimalSeparator;
      const dec = cellFormat?.decimalScale;
      const numericFormatProps = {
        thousandSeparator: (0, _utils2.checkThousandSeparator)(thousandSeparator, decimalSeparator),
        decimalSeparator: (0, _utils2.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 = (0, _hooks.sumByField)(childrenData, cell.column.id);
      const sumValueFormat = (0, _reactNumericComponent.numericFormatter)(sumValue.toString(), numericFormatProps);
      return /*#__PURE__*/_react.default.createElement(_TableBodyCellRowGroup.default, (0, _extends2.default)({
        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.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
      table: table,
      tableId: tableId,
      key: cell.id,
      cell: cell,
      commandClick: commandClick,
      virtualRow: virtualRow,
      isEditing: false,
      colSpan: onCellColSpan ?? 1,
      rowSpan: onCellRowSpan ?? 1
    }, otherCellAttributes));
  }));
};
var _default = exports.default = TableBodyRow;