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

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactTable = require("@tanstack/react-table");
var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
var _Command = _interopRequireDefault(require("../components/command/Command"));
var _server = _interopRequireDefault(require("react-dom/server"));
var _utils = require("../hook/utils");
var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _useContext = require("../useContext");
var _useColumns = require("../hook/useColumns");
var _utils2 = require("../../table-component/hook/utils");
var _hooks = require("../../grid-component/hooks");
var _reactNumericComponent = require("react-numeric-component");
// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";

const renderCellIndex = props => {
  const {
    parrents,
    cell,
    pagination
  } = props;
  if (parrents && parrents.length > 0) {
    return /*#__PURE__*/_react.default.createElement("span", {
      className: "ui-rc_cell-content"
    }, parrents.map(pr => {
      return `${pr.index + 1}.`;
    }), cell.row.index + 1);
  }
  if (pagination && pagination.onChange) {
    return /*#__PURE__*/_react.default.createElement("span", {
      className: "ui-rc_cell-content"
    }, cell.row.index + (pagination ? ((pagination.currentPage ?? 1) - 1) * (pagination?.pageSize ?? 0) : 0) + 1);
  }
  return /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc_cell-content"
  }, cell.row.index + 1);
};
const renderCommand = args => {
  const {
    cell,
    commandClick,
    id,
    data
  } = 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.default.createElement("div", {
    className: "ui-rc_cell-content"
  }, /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
    return /*#__PURE__*/_react.default.createElement(_Command.default, {
      id: id,
      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: [...data]
        });
      }
    });
  })));
};
const renderSelection = args => {
  const {
    row
  } = args.cell;
  const {
    cell,
    expandIconColumnIndex,
    isDataTree,
    expanded,
    setExpanded
  } = args;
  const {
    selectionSettings,
    setIsSelectionChange,
    isSelectionChange
  } = args;
  const checked = selectionSettings?.checkStrictly ? row.getIsSelected() : row.getIsSelected() || row.getIsAllSubRowsSelected();
  const indeterminate = selectionSettings?.type === 'single' || selectionSettings?.checkStrictly ? false : row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' || row.getIsSomeSelected();
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {}
  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
    className: "ui-rc-table-row-expand-trigger",
    style: {
      paddingLeft: `${cell.row.depth * 25}px`
    }
  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
    // onClick: row.getToggleExpandedHandler(),
    onClick: e => {
      e.stopPropagation();
      const keys = Object.keys(expanded);
      // @ts-ignore
      const tmp = {
        ...expanded
      };
      if (keys.includes(cell.row.id)) {
        delete tmp[cell.row.id];
        setExpanded(tmp);
      } else {
        setExpanded(old => ({
          ...old,
          [cell.row.id]: true
        }));
      }
    },
    style: {
      cursor: "pointer"
    },
    className: "ui-rc-table-row-expand"
  }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
  }) : /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
  })) : /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    checked: checked,
    indeterminate: indeterminate,
    onChange: e => {
      (0, _useColumns.toggleRowSelection)({
        e,
        cell,
        setIsSelectionChange,
        isSelectionChange,
        selectionSettings
      });
    },
    disabled: !row.getCanSelect()
  })));
};
const TableBodyCell = props => {
  const {
    cell,
    commandClick,
    // tableId,
    table,
    isEditing,
    row,
    colSpan
    // rowSpan
  } = props;
  const {
    id,
    prefix,
    focusedCell,
    setFocusedCell,
    // endCell,
    // startCell,
    originData,
    expanded,
    setExpanded,
    expandable,
    isDataTree,
    setIsSelectionChange,
    isSelectionChange,
    selectionSettings,
    wrapSettings,
    pagination,
    setIsSelecting,
    setIsPasting,
    setEndCell,
    setStartCell,
    setRangeState,
    setEditingKey,
    format,
    rangeState,
    startCell,
    endCell,
    endPasteCell,
    // startPasteCell,
    isPasting
    // dataSource
  } = _react.default.useContext(_useContext.TableContext);
  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
  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 originCol = cell.column.columnDef.meta ?? {};

  // 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;
  const parrents = cell.row.getParentRows();
  if (cell.column.id === "#") {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: cell.id,
      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
        [`${prefix}-grid-cell-ellipsis`]: true,
        [`${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'
      }),
      style: {
        ...cellStyles,
        display: 'flex',
        userSelect: 'none',
        width: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        ...(0, _utils.getCommonPinningStyles)(cell.column)
      },
      onClick: e => {
        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
          (0, _useColumns.toggleRowSelection)({
            e,
            cell,
            setIsSelectionChange,
            isSelectionChange,
            selectionSettings
          });
        }
      }
    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
      className: "ui-rc-table-row-expand-trigger",
      style: {
        paddingLeft: `${cell.row.depth * 25}px`
      }
    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
      // onClick: row.getToggleExpandedHandler(),
      onClick: e => {
        e.stopPropagation();
        const keys = Object.keys(expanded);
        // @ts-ignore
        const tmp = {
          ...expanded
        };
        if (keys.includes(cell.row.id)) {
          delete tmp[cell.row.id];
          setExpanded(tmp);
        } else {
          setExpanded(old => ({
            ...old,
            [cell.row.id]: true
          }));
        }
      },
      style: {
        cursor: "pointer"
      },
      className: "ui-rc-table-row-expand"
    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
    }) : /*#__PURE__*/_react.default.createElement("span", {
      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
    })) : /*#__PURE__*/_react.default.createElement("span", {
      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
    }))), renderCellIndex({
      parrents,
      cell,
      pagination
    }));
  }
  if (cell.column.id === "command") {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: cell.id,
      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
        [`${prefix}-grid-cell-ellipsis`]: true,
        [`${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'
      }),
      style: {
        ...cellStyles,
        display: 'flex',
        width: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        ...(0, _utils.getCommonPinningStyles)(cell.column)
      }
    }, renderCommand({
      cell,
      commandClick,
      id,
      data: originData
    }));
  }
  if (cell.column.id === "selection_column") {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: cell.id,
      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-selection`, {
        [`${prefix}-grid-cell-ellipsis`]: true,
        [`${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'
      }),
      style: {
        ...cellStyles,
        display: 'flex',
        minHeight: 36,
        width: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        ...(0, _utils.getCommonPinningStyles)(cell.column)
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)('ui-rc_cell-content', {})
    }, cell.column.id === "selection_column" && renderSelection({
      cell,
      table,
      selectionSettings,
      setIsSelectionChange,
      expanded,
      isDataTree,
      setExpanded,
      expandIconColumnIndex,
      isSelectionChange
    })));
  }
  if (row.subRows.length > 0 && originCol.sumGroup === true && originCol.type === 'number') {
    const colFormat = typeof originCol.format === 'function' ? originCol.format({}) : originCol.format;
    const cellFormat = (0, _utils2.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 childrenData = record?.children ?? [];
    const sumValue = (0, _hooks.sumByField)(childrenData, cell.column.id);
    const sumValueFormat = (0, _reactNumericComponent.numericFormatter)(sumValue.toString(), numericFormatProps);
    return /*#__PURE__*/_react.default.createElement("div", {
      key: cell.id,
      className: (0, _classnames.default)(`${prefix}-grid-cell`, {
        [`${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-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',
        userSelect: 'none',
        width: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        ...(0, _utils.getCommonPinningStyles)(cell.column)
      },
      onClick: e => {
        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
          (0, _useColumns.toggleRowSelection)({
            e,
            cell,
            setIsSelectionChange,
            isSelectionChange,
            selectionSettings
          });
        }
      }
    }, sumValueFormat);
  }
  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,
      gridColumn: `span ${colSpan} / span ${colSpan}`,
      ...(0, _utils.getCommonPinningStyles)(cell.column)
    },
    onMouseDown: () => {
      // setEditingKey?.('')
      // setEndCell?.(undefined)
      // setStartCell?.(undefined)
      // setFocusedCell?.(undefined)
      // setRangeState?.(undefined)
    },
    onMouseEnter: e => {
      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
        setIsOpenTooltip(true);
      }
      setIsSelecting?.(false);
      setIsPasting?.(false);
      const selectState = (0, _utils.getSelectedCellMatrix)(table, startCell, endCell);
      // const selectPasteState = getSelectedCellMatrix(table, startPasteCell, endPasteCell)

      if (endPasteCell && endCell?.rowId !== endPasteCell?.rowId && isPasting) {
        // triggerDragPaste(selectPasteState, e.ctrlKey)
      } else {
        // if ( endCell?.rowId !== rowId || endCell?.colId !== colId) {
        //   setRangeState?.(selectState)
        // }

        if (!(0, _utils2.isObjEqual)(rangeState, selectState)) {
          setRangeState?.(selectState);
        }
      }
    },
    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 rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
        const cellFocus = rowQr?.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 rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
        const cellFocus = rowQr?.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);

        // if (cell.row.getIsSelected()) { // nếu đã chọn

        //   const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)

        //   setIsSelectionChange({
        //     isChange: true,
        //     type: 'rowSelected',
        //     rowData: cell.row.original,
        //     rowsData: aaa ?? []
        //   })

        // } else {

        //   const { rowsData } = isSelectionChange ?? {}

        //   const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []

        //   abc.push(cell.row)

        //   setIsSelectionChange({
        //     isChange: true,
        //     type: 'rowSelected',
        //     rowData: cell.row.original,
        //     rowsData: abc
        //   })
        // }
      }
    }

    // onKeyUp={() => {

    // }}
    ,

    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
          });
          setEditingKey?.('');
          setEndCell?.(undefined);
          setStartCell?.(undefined);
          // setFocusedCell?.(undefined)
          setRangeState?.(undefined);
        }
      }
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('ui-rc_cell-content', {})
  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
    className: "ui-rc-table-row-expand-trigger",
    style: {
      paddingLeft: `${cell.row.depth * 25}px`
    }
  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
    // onClick: row.getToggleExpandedHandler(),
    onClick: e => {
      e.stopPropagation();
      const keys = Object.keys(expanded);
      // @ts-ignore
      const tmp = {
        ...expanded
      };
      if (keys.includes(cell.row.id)) {
        delete tmp[cell.row.id];
        setExpanded(tmp);
      } else {
        setExpanded(old => ({
          ...old,
          [cell.row.id]: true
        }));
      }
    },
    style: {
      cursor: "pointer"
    },
    className: "ui-rc-table-row-expand"
  }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
  }) : /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
  })) : /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
  }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
};
var _default = exports.default = TableBodyCell;