es-grid-template/lib/group-component/body/TableBodyCellEmpty.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _server = _interopRequireDefault(require("react-dom/server"));
var _utils = require("../hook/utils");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _useContext = require("../useContext");
var _useColumns = require("../hook/useColumns");
const TableBodyCellEmpty = props => {
  const {
    cell,
    table,
    isEditing
  } = props;
  const {
    id,
    prefix,
    focusedCell,
    setFocusedCell,
    setIsSelectionChange,
    isSelectionChange,
    selectionSettings,
    wrapSettings,
    setIsSelecting,
    setIsPasting
  } = _react.default.useContext(_useContext.TableContext);
  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
  const record = cell.row.original;
  const columnMeta = cell.column.columnDef.meta ?? {};
  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;

  // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
    value: cell.getValue(),
    rowData: record
  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
  const allRows = table.getRowModel().flatRows;
  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
  const colIndex = cell.column.getIndex();
  const isPinned = cell.column.getIsPinned();
  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
  return /*#__PURE__*/_react.default.createElement("div", {
    key: cell.id,
    ref: el => {
      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
        el?.focus();
      }
    },
    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
    "data-col-index": colIndex,
    "data-row-index": rowNumber,
    "data-col-key": cell.column.id
    // data-row-key={cell.row.id}
    ,
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent))
    // data-tooltip-delay-show={500}
    ,

    className: (0, _classnames.default)(`${prefix}-grid-cell`, {
      // [`${prefix}-grid-cell-ellipsis`]: true,

      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
      // [`${prefix}-grid-cell-selected`]: isCellSelected,

      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
    }),
    style: {
      ...cellStyles,
      display: 'flex',
      width: cell.column.getSize(),
      minWidth: cell.column.getSize(),
      minHeight: 36,
      ...(0, _utils.getCommonPinningStyles)(cell.column)
    },
    onMouseEnter: e => {
      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
        setIsOpenTooltip(true);
      }
      setIsSelecting?.(false);
      setIsPasting?.(false);
    },
    onKeyDown: e => {
      const flatRows = table.getRowModel().flatRows;
      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
        const nextIndex = cell.row.index + 1;
        // const nextIndex = rowNumber + 1

        const nextId = flatRows[nextIndex].id;
        setFocusedCell?.({
          colId: cell.column.id,
          rowId: nextId
        });
        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
        if (cellFocus) {
          cellFocus.focus();
        }
      }
      if (e.key === 'ArrowUp' && rowNumber > 0) {
        const prevIndex = cell.row.index - 1;
        const nextId = flatRows[prevIndex].id;
        setFocusedCell?.({
          colId: cell.column.id,
          rowId: nextId
        });
        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
        if (cellFocus) {
          cellFocus.focus();
        }
      }
      if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
        (0, _useColumns.toggleRowSelection)({
          e,
          cell,
          setIsSelectionChange,
          isSelectionChange,
          selectionSettings
        });
        cell.row.getToggleSelectedHandler()(e);
      }
    },
    onClick: e => {
      const selection = window.getSelection();
      const text = selection ? selection.toString() : "";
      if (text.length > 0 || enableClick === false) {} else {
        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
          (0, _useColumns.toggleRowSelection)({
            e,
            cell,
            setIsSelectionChange,
            isSelectionChange,
            selectionSettings
          });
          setFocusedCell?.({
            colId: cell.column.id,
            rowId: cell.row.id
          });
        }
      }
    }
  });
};
var _default = exports.default = TableBodyCellEmpty;