es-grid-template/lib/table-component/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 _TableBodyCellEdit = _interopRequireDefault(require("./TableBodyCellEdit"));
var _react = _interopRequireDefault(require("react"));
var _useContext = require("../useContext");
var _classnames = _interopRequireDefault(require("classnames"));
const TableBodyRow = ({
  tableId,
  table,
  columnVirtualizer,
  row,
  rowVirtualizer,
  virtualPaddingLeft,
  virtualPaddingRight,
  virtualRow,
  fixedLeftColumns,
  fixedRightColumns,
  commandClick,
  editAble,
  isEditing,
  contextMenuItems,
  onContextMenu,
  ...rest
}) => {
  const {
    prefix,
    recordDoubleClick,
    focusedCell,
    rowClassName,
    rowEditable,
    onRowStyles
  } = _react.default.useContext(_useContext.TableContext);
  const visibleCells = row.getVisibleCells();
  const virtualColumns = columnVirtualizer.getVirtualItems();
  const centerCOlumns = virtualColumns.filter(vc => !(table.getState().columnPinning.left?.includes(visibleCells[vc.index].column.id) || table.getState().columnPinning.right?.includes(visibleCells[vc.index].column.id)));
  const leftTemplate = fixedLeftColumns.length > 0 ? fixedLeftColumns.map(it => row.getVisibleCells().find(c => c.column.id === it.id).column.getSize()) : [];
  const rightTemplate = fixedRightColumns.length > 0 ? fixedRightColumns.map(it => row.getVisibleCells().find(c => c.column.id === it.id).column.getSize()) : [];
  const centerTemplate = centerCOlumns.map(it => it.size);
  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
  const isRowEditable = rowEditable ? rowEditable(row.original) : true;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-index": virtualRow.index //needed for dynamic row height measurement
    ,
    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
    ,
    key: row.id,
    "data-row-key": row.id,
    className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
      [`${prefix}-grid-row-selected`]: row.getIsSelected(),
      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
      [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || Array.isArray(row.originalSubRows)
    }),
    style: {
      // display: 'flex',
      display: 'grid',
      // position: 'absolute',
      transform: `translateY(${virtualRow.start}px)`,
      //this should always be a `style` as it changes on scroll
      // height: isEditing ? '36px' : undefined,
      gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
      height: isEditing ? virtualRow.size : undefined,
      minHeight: isEditing ? undefined : virtualRow.size,
      // backgroundColor: Array.isArray(row.originalSubRows) ? '#f5f5f5' : undefined,
      // fontWeight: Array.isArray(row.originalSubRows) ? '500' : undefined,
      ...rowStyles
    },
    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);
      }
    }
  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
    const cell = row.getVisibleCells().find(c => c.column.id === column.id);
    if (editAble) {
      return /*#__PURE__*/_react.default.createElement(_TableBodyCellEdit.default, (0, _extends2.default)({}, rest, {
        table: table,
        tableId: tableId,
        key: cell.id,
        cell: cell,
        commandClick: commandClick,
        virtualRow: virtualRow,
        isEditing: isEditing,
        isRowEditable: isRowEditable,
        rowVirtualizer: rowVirtualizer,
        columnVirtualizer: columnVirtualizer
      }));
    }
    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({}, rest, {
      table: table,
      tableId: tableId,
      key: cell.id,
      cell: cell,
      commandClick: commandClick,
      virtualRow: virtualRow,
      isEditing: false,
      rowVirtualizer: rowVirtualizer,
      columnVirtualizer: columnVirtualizer
    }));
  }) : null, virtualPaddingLeft ? /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: "flex",
      width: virtualPaddingLeft
    }
  }) : null, virtualColumns.map(vc => {
    const cell = visibleCells[vc.index];
    const isFixed = table.getState().columnPinning.left?.includes(cell.column.id) || table.getState().columnPinning.right?.includes(cell.column.id);
    if (cell && !isFixed) {
      if (editAble) {
        return /*#__PURE__*/_react.default.createElement(_TableBodyCellEdit.default, (0, _extends2.default)({}, rest, {
          table: table,
          key: cell.id,
          tableId: tableId,
          cell: cell,
          commandClick: commandClick,
          isEditing: isEditing,
          isRowEditable: isRowEditable,
          rowVirtualizer: rowVirtualizer,
          columnVirtualizer: columnVirtualizer,
          virtualRow: virtualRow
        }));
      }
      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({}, rest, {
        table: table,
        key: cell.id,
        tableId: tableId,
        cell: cell,
        commandClick: commandClick,
        isEditing: false,
        rowVirtualizer: rowVirtualizer,
        columnVirtualizer: columnVirtualizer,
        virtualRow: virtualRow
      }));
    }
  }), fixedRightColumns.length > 0 ? fixedRightColumns.map(column => {
    if (editAble) {
      return /*#__PURE__*/_react.default.createElement(_TableBodyCellEdit.default, (0, _extends2.default)({}, rest, {
        table: table,
        key: column.id,
        tableId: tableId,
        cell: row.getVisibleCells().find(c => c.column.id === column.id),
        commandClick: commandClick,
        isEditing: isEditing,
        isRowEditable: isRowEditable,
        rowVirtualizer: rowVirtualizer,
        columnVirtualizer: columnVirtualizer,
        virtualRow: virtualRow
      }));
    }
    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({}, rest, {
      table: table,
      key: column.id,
      tableId: tableId,
      cell: row.getVisibleCells().find(c => c.column.id === column.id),
      commandClick: commandClick,
      isEditing: false,
      rowVirtualizer: rowVirtualizer,
      columnVirtualizer: columnVirtualizer,
      virtualRow: virtualRow
    }));
  }) : null, virtualPaddingRight ? /*#__PURE__*/_react.default.createElement("div", {
    className: "",
    style: {
      display: "flex",
      width: virtualPaddingRight
    }
  }) : null);
};
var _default = exports.default = TableBodyRow;