es-grid-template/es/table-component/body/TableBodyCell.js

es-grid-template

import { flexRender } from "@tanstack/react-table";
import Space from "rc-master-ui/es/space";
import Command from "../components/command/Command";
import { getCommonPinningStyles, isNullOrUndefined } from "../hook/utils";
import { nonActionColumn } from "../hook/constant";
import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
import React, { useContext } from "react";
import { TableContext } from "../useContext";
import classNames from "classnames";
const renderCellIndex = props => {
  const {
    parrents,
    cell
  } = props;
  return /*#__PURE__*/React.createElement("span", null, parrents.map(pr => {
    return `${pr.index + 1}.`;
  }), cell.row.index + 1);
};
const renderCommand = args => {
  const {
    cell,
    commandClick
  } = args;
  const col = cell.column.columnDef.meta ?? {};
  const record = cell.row.original;

  // const commandItems = args.cell.column.columnDef?.meta?.commandItems ?? []

  const commands = col.commandItems ? col.commandItems.map(it => {
    return {
      ...it,
      visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
    };
  }) : [];
  return /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
    return /*#__PURE__*/React.createElement(Command, {
      key: item.id,
      item: item,
      record: record,
      onClick: () => {
        commandClick?.({
          id: item.id,
          // rowId: getRowKey(record, index) as any,
          rowId: record.rowId,
          rowData: record,
          index: cell.row.index
          // rows: [...resource]
        });
      }
    });
  }));
};
const renderSelection = args => {
  const {
    row
  } = args.cell;
  const {
    selectionSettings,
    setIsSelectionChange
  } = args;
  return /*#__PURE__*/React.createElement("div", {
    style: {

      // paddingLeft: `${row.depth * 2}rem`,
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
    checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
    // indeterminate={row.getIsSomeSelected() }
    ,
    onChange: e => {
      row.getToggleSelectedHandler()(e);
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original
      });
      // row.toggleSelected()

      // table.setRowSelection({
      //   [row.id]: true
      // })
    }
  })));
};
const TableBodyCell = props => {
  const {
    cell,
    commandClick,
    table
  } = props;
  const {
    prefix,
    setIsSelectionChange,
    selectionSettings
  } = useContext(TableContext);
  const parrents = cell.row.getParentRows();
  const isPinned = cell.column.getIsPinned();
  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
  return /*#__PURE__*/React.createElement("td", {
    key: cell.id,
    className: classNames(`${prefix}-grid-cell`, {
      [`${prefix}-grid-cell-ellipsis`]: true,
      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
    }),
    style: {
      display: 'flex',
      width: cell.column.getSize(),
      ...getCommonPinningStyles(cell.column)
    },
    onClick: event => {
      const element = event.target;
      const container = document.querySelector(".ui-rc-table-row-expand");
      const isInsideContainer = element.closest(".ui-rc-table-row-expand") && container;
      if (!isInsideContainer && selectionSettings?.checkboxOnly !== true || isNullOrUndefined(selectionSettings?.mode)) {
        cell.row.getToggleSelectedHandler()(event);
        setIsSelectionChange({
          isChange: true,
          type: 'rowSelected',
          rowData: cell.row.original
        });
      }
    }
  }, cell.column.id === "#" && renderCellIndex({
    parrents,
    cell
  }), cell.column.id === "command" && renderCommand({
    cell,
    commandClick
  }), cell.column.id === "selection_column" && renderSelection({
    cell,
    table,
    selectionSettings,
    setIsSelectionChange
  }), !nonActionColumn.includes(cell.column.id) && flexRender(cell.column.columnDef.cell, cell.getContext()));
};
export default TableBodyCell;