es-grid-template/lib/table-component/body/TableBodyCellEdit.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 _EditableCell = _interopRequireDefault(require("./EditableCell"));
var _hooks = require("../../grid-component/hooks");
var _useColumns = require("../hook/useColumns");
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,
    selectionSettings,
    setIsSelectionChange,
    isSelectionChange,
    setIsExpandClick
  } = args;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('ui-rc_cell-content', {}),
    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 => {
      setIsExpandClick(true);
      e.stopPropagation();
      e.preventDefault();
      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: row.getIsSelected() || row.getIsAllSubRowsSelected(),
    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
    // indeterminate={row.getIsSomeSelected() }
    // onChange={(e) => {

    //   row.getToggleSelectedHandler()(e)

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

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

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

    //   } else {

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

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

    //     abc.push(row)

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

    // }}
    ,

    onChange: e => {
      (0, _useColumns.toggleRowSelection)({
        e,
        cell,
        setIsSelectionChange,
        isSelectionChange,
        selectionSettings
      });
    },
    disabled: !row.getCanSelect()
  })));
};
const TableBodyCellEdit = props => {
  const {
    cell,
    commandClick,
    // tableId,
    table,
    isEditing,
    isRowEditable,
    columnVirtualizer,
    rowVirtualizer
    // virtualRow
  } = props;
  const {
    id,
    rowKey,
    editingKey,
    prefix,
    focusedCell,
    rangeState,
    setFocusedCell,
    setEditingKey,
    setRangeState,
    setRangePasteState,
    endCell,
    setEndCell,
    isSelecting,
    isPasting,
    setEndPasteCell,
    endPasteCell,
    setIsPasting,
    setIsSelecting,
    setStartCell,
    setStartPasteCell,
    startCell,
    startPasteCell,
    originData,
    dataSource,
    triggerPaste,
    handleDeleteContent,
    reset,
    setValue,
    getValues,
    handleCellChange,
    handleCellChangeAndAddRow,
    dataErrors,
    expanded,
    setExpanded,
    expandable,
    isDataTree,
    handleCellClick,
    isSelectionChange,
    setIsSelectionChange,
    selectionSettings,
    pagination,
    handleAddMulti,
    setIsExpandClick
  } = _react.default.useContext(_useContext.TableContext);
  const expandIconColumnIndex = expandable?.expandIconColumnIndex;
  const record = cell.row.original;
  const columnMeta = cell.column.columnDef.meta ?? {};
  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
  const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
  const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
  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 canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;

  // const allRows = table.getRowModel().rows;
  const allRows = table.getRowModel().flatRows;

  // const rowNumber = virtualRow.index
  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 selectRowIds = _react.default.useMemo(() => {
    return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
  }, [endCell, startCell, table]);
  const isCellSelected = _react.default.useMemo(() => {
    if (!startCell || !endCell) return false;

    // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
    const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
  }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
  const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
  const {
    rowRange,
    colRange,
    rowIds,
    colIds,
    startColIndex,
    startRowIndex,
    endColIndex,
    endRowIndex
  } = rangeState ?? {};
  const pasteRangeState = (0, _utils.getSelectedCellMatrix)(table, startPasteCell, endPasteCell);
  const isInRange = colRange && rowRange && rowRange.includes(cell.row.id) && colRange.includes(cell.column.id);
  const isInRangePaste = pasteRangeState.rowRange && pasteRangeState.rowRange.includes(cell.row.id) && pasteRangeState.colRange.includes(cell.column.id);

  // const isInRangePaste = rowRange && rowRange.includes(cell.row.id) && colRange.includes(cell.column.id);

  const rowIdx = rowIds ? rowIds.indexOf(cell.row.id) : -1;
  const colIdx = colIds ? colIds.indexOf(cell.column.id) : -1;
  const rowIdxPaste = pasteRangeState.rowIds.indexOf(cell.row.id);
  const colIdxPaste = pasteRangeState.colIds.indexOf(cell.column.id);
  const isTop = rowIdx === startRowIndex;
  const isBottom = rowIdx === endRowIndex;
  const isLeft = colIdx === startColIndex;
  const isRight = colIdx === endColIndex;
  const isTopPaste = rowIdxPaste === pasteRangeState.startRowIndex;
  const isBottomPaste = rowIdxPaste === pasteRangeState.endRowIndex;
  const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
  const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
  const parrents = cell.row.getParentRows();
  const triggerDragPaste = (pasteState, ctrlKey) => {
    const tmpCols = table.getVisibleLeafColumns();
    const rowPasteIds = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
    const colPasteds = (0, _utils.getColIdsBetween)(table, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
    const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
    const colSelectIds = (0, _utils.getColIdsBetween)(table, startCell?.colId ?? '', endCell?.colId ?? '');
    const dataSelected = [];
    rowSelectIds.forEach(rowId => {
      const row = allRows.find(r => r.id === rowId);
      if (!row) return;
      const rowData = [];
      colSelectIds.forEach(colId => {
        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
        const value = cellll?.getValue();
        rowData.push(value !== undefined ? value : '');
      });
      dataSelected.push(rowData);
    });
    const copyRows = (0, _utils.flattenData)('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
    let newRange;
    if ((startRowIndex ?? 0) < (pasteRangeState.startRowIndex ?? 0)) {
      // kéo xuóng
      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, startCell, endPasteCell));
      newRange = ctrlKey ? (0, _utils.addRowsDownWithCtrl)(dataSelected, rowPasteIds.length) : (0, _utils.addRowsDown)(dataSelected, rowPasteIds.length);
    } else {
      // kéo lên
      setStartCell?.(endCell);
      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, endCell, endPasteCell));
      newRange = ctrlKey ? (0, _utils.addRowsUpWithCtrl)(dataSelected, rowPasteIds.length) : (0, _utils.addRowsUp)(dataSelected, rowPasteIds.length);
    }

    // Cập nhật data mới
    const newData = (0, _utils.flattenArray)([...dataSource]);
    const pastedRows = [];
    newRange.addedRows.forEach((rowValues, rowIndex1) => {
      const targetRow = pasteState.startRowIndex + rowIndex1;

      // Nếu vượt quá số dòng hiện có, thêm dòng mới
      if (targetRow >= newData.length) {
        newData.push({
          id: undefined,
          rowId: (0, _utils.newGuid)()
        });
      }
      rowValues.forEach((cellValue, colIndex1) => {
        const targetCol = startColIndex + colIndex1;
        if (targetCol >= tmpCols.length) {
          // Không vượt quá số cột
          return;
        }
        const columnKey = tmpCols[targetCol].id;
        const disable = !(0, _utils.isEditable)(tmpCols[targetCol].columnDef.meta, record);
        if (!disable) {
          newData[targetRow] = {
            ...newData[targetRow],
            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
          };
        }
      });

      // Lưu dòng được paste
      pastedRows.push(newData[targetRow]);
    });
    const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), newData);
    const rs = (0, _utils.unFlattenData)(rsFilterData);
    triggerPaste?.(pastedRows, colPasteds, rs, copyRows);

    // // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))

    setEndCell?.(endPasteCell);
    setEndPasteCell?.(undefined);
    setStartPasteCell?.(undefined);
    setRangePasteState?.(undefined);
  };
  const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
    const tmpCols = table.getVisibleLeafColumns();
    const rowPasteIds = (0, _utils.getRowIdsBetween)(table, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
    const colPasteds = (0, _utils.getColIdsBetween)(table, cellStart?.colId ?? '', cellEnd?.colId ?? '');
    const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
    const colSelectIds = (0, _utils.getColIdsBetween)(table, startCell?.colId ?? '', endCell?.colId ?? '');
    const dataSelected = [];
    rowSelectIds.forEach(rowId => {
      const row = allRows.find(r => r.id === rowId);
      if (!row) return;
      const rowData = [];
      colSelectIds.forEach(colId => {
        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
        const value = cellll?.getValue();
        rowData.push(value !== undefined ? value : '');
      });
      dataSelected.push(rowData);
    });
    const copyRows = (0, _utils.flattenData)('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));

    // kéo xuóng
    // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))
    const newRange = ctrlKey ? (0, _utils.addRowsDownWithCtrl)(dataSelected, rowPasteIds.length) : (0, _utils.addRowsDown)(dataSelected, rowPasteIds.length);

    // Cập nhật data mới
    const newData = (0, _utils.flattenArray)([...dataSource]);
    const pastedRows = [];
    newRange.addedRows.forEach((rowValues, rowIndex1) => {
      const targetRow = pasteState.startRowIndex + rowIndex1;

      // Nếu vượt quá số dòng hiện có, thêm dòng mới
      // if (targetRow >= newData.length) {

      //   newData.push({ id: undefined, rowId: newGuid() })
      // }

      rowValues.forEach((cellValue, colIndex1) => {
        const targetCol = startColIndex + colIndex1;
        if (targetCol >= tmpCols.length) {
          // Không vượt quá số cột
          return;
        }
        const columnKey = tmpCols[targetCol].id;
        newData[targetRow] = {
          ...newData[targetRow],
          [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
        };
      });

      // Lưu dòng được paste
      pastedRows.push(newData[targetRow]);
    });
    const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), newData);
    const rs = (0, _utils.unFlattenData)(rsFilterData);
    triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
  };
  function handleMouseEnter(e, rowId, colId) {
    if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
      setIsOpenTooltip(true);
    }
    if (isSelecting) {
      setEndCell?.({
        rowId,
        colId
      });
    }
    if (isPasting) {
      const absRowIndex = table.getRowModel().flatRows.findIndex(it => it.id === cell.row.id);
      if ((startRowIndex ?? 0) > absRowIndex) {
        // kéo lên

        const startRowPaste = allRows.find(it => it.index === (startRowIndex ?? 0) - 1);
        setStartPasteCell?.({
          colId: startCell?.colId ?? '',
          rowId: startRowPaste?.id ?? ''
        });
        setEndPasteCell?.({
          colId: endCell?.colId ?? '',
          rowId
        });
        setRangePasteState?.((0, _utils.getSelectedCellMatrix)(table, {
          colId: startCell?.colId ?? '',
          rowId: startRowPaste?.id ?? ''
        }, {
          colId: endCell?.colId ?? '',
          rowId
        }));
      }
      if ((startRowIndex ?? 0) < absRowIndex) {
        // kéo xuống

        const findIndex = allRows.findIndex(it => it.id === endCell?.rowId);
        const startRowPaste = allRows[findIndex + 1];
        setStartPasteCell?.({
          colId: startCell?.colId ?? '',
          rowId: startRowPaste?.id ?? ''
        });
        setEndPasteCell?.({
          colId: endCell?.colId ?? '',
          rowId
        });
        setRangePasteState?.((0, _utils.getSelectedCellMatrix)(table, {
          colId: startCell?.colId ?? '',
          rowId: startRowPaste?.id ?? ''
        }, {
          colId: endCell?.colId ?? '',
          rowId
        }));
      }
    }
  }
  const handlePointDoubleClick = e => {
    e.preventDefault();
    e.stopPropagation();
    const rowEnd = table.getRowModel().flatRows[table.getRowModel().flatRows.length - 1];
    const cellEnd = {
      rowId: rowEnd.id,
      colId: cell.column.id
    };
    const currentRowId = allRows.findIndex(it => it.id === cell.row.id);
    const pasteStartRow = allRows[currentRowId + 1];
    const cellStart = {
      rowId: pasteStartRow.id,
      colId: endCell?.colId ?? ''
    };
    const selectState = (0, _utils.getSelectedCellMatrix)(table, startCell, cellEnd);
    const selectPasteState = (0, _utils.getSelectedCellMatrix)(table, cellStart, cellEnd);
    setRangeState?.(selectState);
    setEndCell?.(cellEnd);
    triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
  };
  function handleMouseUp(e) {
    setIsSelecting?.(false);
    setIsPasting?.(false);
    const selectState = (0, _utils.getSelectedCellMatrix)(table, startCell, endCell);
    const selectPasteState = (0, _utils.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, _utils.isObjEqual)(rangeState, selectState)) {
        setRangeState?.(selectState);
      }
    }

    // setRangePasteState(selectPasteState)
  }
  const handleEdit = (e, isKeyDown) => {
    setEditingKey?.(record[rowKey]);
    // setTooltipContent('')

    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
    reset?.();

    // const formattedRecord = { ...record };

    if (!(0, _utils.isObjEmpty)(record)) {
      Object.entries(record).forEach(([name, value]) => {
        setValue?.(name, value);
      });
    }
    if (isKeyDown) {
      if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
        setValue(columnMeta.field, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
      }
    }
    if (editType === 'select') {

      // setSearchValue(e.key)
      // setOpen(true)
    }
    if (focusedCell?.rowId) {
      setTimeout(() => {
        // const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`) as HTMLInputElement
        // const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowNumber}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`) as any
        const textarea = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${focusedCell.rowId}"].cell-editing[data-col-key="${focusedCell.colId}"] textarea`);
        // const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`)

        if (textarea) {
          textarea.focus();
          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
        }
        // if (input) {
        //   input.focus()
        // }

        // if (select) {
        //   // @ts-ignore
        //   select.searchValue = e.key
        //   // @ts-ignore
        //   select.focus()
        // }
      }, 10);
    }
  };
  function handleKeyDown(e, rowId, colId) {
    if (e.key === 'Tab') {
      e.preventDefault();
      const allCols = table.getVisibleLeafColumns();
      const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
      const nextCol = allCols[currentColIndex + 1];
      if (nextCol) {
        setFocusedCell?.({
          rowId,
          colId: nextCol.id
        });
        setStartCell?.({
          rowId,
          colId: nextCol.id
        });
        setEndCell?.({
          rowId,
          colId: nextCol.id
        });
        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
          rowId,
          colId: nextCol.id
        }, {
          rowId,
          colId: nextCol.id
        }));
        columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
          align: 'center'
        });
      } else {
        // Nếu là cột cuối cùng, có thể nhảy xuống dòng tiếp theo

        const currentRowIndex = allRows.findIndex(r => r.id === rowId);
        const nextRow = allRows[currentRowIndex + 1];
        const nextRowCol = allCols[2];
        if (nextRow) {
          setFocusedCell?.({
            rowId: nextRow.id,
            colId: nextRowCol.id
          }); // sang dòng, cột đầu

          setStartCell?.({
            rowId: nextRow.id,
            colId: nextRowCol.id
          });
          setEndCell?.({
            rowId: nextRow.id,
            colId: nextRowCol.id
          });
          setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
            rowId: nextRow.id,
            colId: nextRowCol.id
          }, {
            rowId: nextRow.id,
            colId: nextRowCol.id
          }));
          columnVirtualizer.scrollToIndex(nextRowCol.getIndex());
          rowVirtualizer.scrollToIndex(nextRow.index, {
            align: 'auto'
          });
        }
      }
      return;
    }
    if (e.key === 'ArrowRight') {
      e.preventDefault();
      e.stopPropagation();
      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
      const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
      const nextCol = allCols[currentColIndex + 1];
      if (nextCol) {
        setFocusedCell?.({
          rowId,
          colId: nextCol.id
        });
        setStartCell?.({
          rowId,
          colId: nextCol.id
        });
        setEndCell?.({
          rowId,
          colId: nextCol.id
        });
        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
          rowId,
          colId: nextCol.id
        }, {
          rowId,
          colId: nextCol.id
        }));
        columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
          align: 'center'
        });
      }
      return;
    }
    if (e.key === 'ArrowLeft') {
      e.preventDefault();
      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));

      // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
      const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
      const nextCol = allCols[currentColIndex - 1];
      if (nextCol) {
        setFocusedCell?.({
          rowId,
          colId: nextCol.id
        });
        setStartCell?.({
          rowId,
          colId: nextCol.id
        });
        setEndCell?.({
          rowId,
          colId: nextCol.id
        });
        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
          rowId,
          colId: nextCol.id
        }, {
          rowId,
          colId: nextCol.id
        }));
        columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
          align: 'center'
        });
      }
      return;
    }
    if (e.key === 'ArrowDown') {
      // e.preventDefault()
      // e.stopPropagation()

      const nextRow = table.getRowModel().rows[rowNumber + 1];
      if (nextRow) {
        const nextRowId = nextRow.id;
        setFocusedCell?.({
          rowId: nextRowId,
          colId
        });
        setStartCell?.({
          rowId: nextRowId,
          colId
        });
        setEndCell?.({
          rowId: nextRowId,
          colId
        });
        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
          rowId: nextRowId,
          colId
        }, {
          rowId: nextRowId,
          colId
        }));

        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })

        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
        if (cellFocus) {
          cellFocus.focus();
        }
      }
      return;
    }
    if (e.key === 'ArrowUp') {
      // e.preventDefault()
      // e.stopPropagation()

      const nextRow = table.getRowModel().rows[rowNumber - 1];
      if (nextRow) {
        const nextRowId = nextRow.id;
        setFocusedCell?.({
          rowId: nextRowId,
          colId
        });
        setStartCell?.({
          rowId: nextRowId,
          colId
        });
        setEndCell?.({
          rowId: nextRowId,
          colId
        });
        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
          rowId: nextRowId,
          colId
        }, {
          rowId: nextRowId,
          colId
        }));
        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
        if (cellFocus) {
          cellFocus.focus();
        }
      }
      return;
    }
    if (e.key === 'Delete') {
      handleDeleteContent?.();
      return;
    }
    if (e.key === 'Enter') {
      e.preventDefault();
      e.stopPropagation();
      handleEdit(e, true);
      return;
    }
    if (e.key.length === 1 && !e.ctrlKey) {
      e.preventDefault();
      e.stopPropagation();
      handleEdit(e, true);
      // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
    }
  }
  function handleMouseDown(rowId, colId) {
    setIsSelecting?.(true);
    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
      setStartCell?.({
        rowId,
        colId
      });
      setEndCell?.({
        rowId,
        colId
      });
      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
        rowId,
        colId
      }, {
        rowId,
        colId
      }));
    }
    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
      setFocusedCell?.({
        rowId: cell.row.id,
        colId: cell.column.id
      });
    }
  }
  const handleMouseDownIndex = rowId => {
    setIsSelecting?.(true);
    const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
    const firstCOlSpin = (0, _utils.findFirst)(allColumns);
    const startCol = allColumns[0].id;
    const endCol = allColumns[allColumns.length - 1].id;
    setStartCell?.({
      rowId,
      colId: startCol
    });
    setEndCell?.({
      rowId,
      colId: endCol
    });
    if (firstCOlSpin) {
      setFocusedCell?.({
        rowId: cell.row.id,
        colId: firstCOlSpin.id
      });
    } else {
      const firstCOlVisible = allColumns[0];
      setFocusedCell?.({
        rowId: cell.row.id,
        colId: firstCOlVisible.id
      });
    }
    setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
      rowId,
      colId: startCol
    }, {
      rowId,
      colId: endCol
    }));
  };
  const handleMouseEnterIndex = rowId => {
    if (isSelecting) {
      const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));

      // const firstCOl = findFirst(allColumns)

      // const startCol = allColumns[0].id
      const endCol = allColumns[allColumns.length - 1].id;

      // setStartCell?.({ rowId, colId: startCol });
      setEndCell?.({
        rowId,
        colId: endCol
      });
    }
  };
  const handleMouseUpIndex = () => {
    setIsSelecting?.(false);
    // setIsPasting?.(false);

    const selectState = (0, _utils.getSelectedCellMatrix)(table, startCell, endCell);
    if (!(0, _utils.isObjEqual)(rangeState, selectState)) {
      setRangeState?.(selectState);
    }
  };
  if (cell.column.id === "#") {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: cell.id,
      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-index editable`, {
        [`${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',
        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
        [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id)
      }),
      style: {
        display: 'flex',
        height: '36px',
        userSelect: 'none',
        width: cell.column.getSize(),
        // flexBasis: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        // flex: 1,
        // maxWidth: cell.column.getSize(),
        ...(0, _utils.getCommonPinningStyles)(cell.column)
      },
      onMouseDown: () => {
        if (record[rowKey] === editingKey) {
          setFocusedCell?.({
            rowId: cell.row.id,
            colId: cell.column.id
          });
        } else {
          handleMouseDownIndex(cell.row.id);
          if (editingKey) {
            setTimeout(() => {
              setEditingKey?.('');
              reset?.();
            });
          }

          // reset?.()
        }
      },
      onMouseEnter: () => {
        handleMouseEnterIndex(cell.row.id);
      },
      onMouseUp: handleMouseUpIndex
      // onMouseUp={() => {

      //   handleMouseUpIndex()

      // }}
    }, 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();
        e.preventDefault();
        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 editable`, {
        [`${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: {
        display: 'flex',
        height: '36px',
        width: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        // flex: 1,
        // maxWidth: 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 editable`, {
        [`${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: {
        display: 'flex',
        height: '36px',
        width: cell.column.getSize(),
        minWidth: cell.column.getSize(),
        // flex: 1,
        // maxWidth: cell.column.getSize(),
        ...(0, _utils.getCommonPinningStyles)(cell.column)
      }
    }, cell.column.id === "selection_column" && renderSelection({
      cell,
      table,
      selectionSettings,
      setIsSelectionChange,
      expanded,
      isDataTree,
      setExpanded,
      expandIconColumnIndex,
      isSelectionChange,
      setIsExpandClick
    }));
  }
  const handleChange = () => {
    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
    const formState = getValues();
    const itemState = getValues(cell.column.id);
    const prevState = record[cell.column.id];
    const newState = itemState;
    if (newState !== prevState) {
      handleCellChange?.({
        key: cell.row.id,
        field: cell.column.id,
        record: formState,
        prevState,
        newState,
        option: newState,
        indexCol: cell.column.getIndex(),
        indexRow: currentRowIndex,
        type: 'blur'
      });
    } else {}
  };
  const handleChangeAndCreateRow = () => {
    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
    const formState = getValues();
    const itemState = getValues(cell.column.id);
    const prevState = record[cell.column.id];
    const newState = itemState;
    if (newState !== prevState) {
      // vừa cell change + add new row
      handleCellChangeAndAddRow?.({
        key: cell.row.id,
        field: cell.column.id,
        record: formState,
        prevState,
        newState,
        option: newState,
        indexCol: cell.column.getIndex(),
        indexRow: currentRowIndex,
        type: 'blur'
      });
    } else {
      // chỉ add new row

      const newRowId = (0, _utils.newGuid)();
      handleAddMulti?.({}, 1, newRowId);
      setFocusedCell?.({
        rowId: newRowId,
        colId: cell.column.id
      });
      setStartCell?.({
        rowId: newRowId,
        colId: cell.column.id
      });
      setEndCell?.({
        rowId: newRowId,
        colId: cell.column.id
      });
      setTimeout(() => {
        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
          rowId: newRowId,
          colId: cell.column.id
        }, {
          rowId: newRowId,
          colId: cell.column.id
        }));
      });
      setTimeout(() => {
        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
        if (cellFocus) {
          cellFocus.scrollIntoView({
            behavior: "smooth",
            block: "start"
          });
          cellFocus.focus();
        }
      }, 100);
    }
  };
  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-delay-show": 500,
    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
    className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable editable `, {
      [`${prefix}-grid-cell-ellipsis`]: true,
      'cell-editing': isEditing,
      // disable: !isEditable(cell.column.columnDef.meta as any, record),
      disable: !canEdit,
      isValid: !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id,
      [`${prefix}-grid-cell-selected`]: isCellSelected,
      'cell-border-bottom': !isEditing && isInRange && isBottom,
      'cell-border-right': !isEditing && isInRange && isRight,
      'cell-border-top': !isEditing && isInRange && isTop,
      'cell-border-left': !isEditing && isInRange && isLeft,
      'cell-paste-border-bottom': isInRangePaste && isBottomPaste && (pasteRangeState.endRowIndex ?? 0) > (endRowIndex ?? 0),
      'cell-paste-border-right': isInRangePaste && isRightPaste,
      'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteRangeState.endRowIndex ?? 0) < (endRowIndex ?? 0),
      'cell-paste-border-left': isInRangePaste && isLeftPaste,
      [`${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: {
      display: 'flex',
      width: cell.column.getSize(),
      minWidth: cell.column.getSize(),
      // flex: 1,
      // maxWidth: cell.column.getSize(),
      height: '36px',
      ...(0, _utils.getCommonPinningStyles)(cell.column),
      cursor: isPasting ? 'crosshair' : undefined
    },
    onMouseDown: () => {
      if (record[rowKey] === editingKey) {
        setFocusedCell?.({
          rowId: cell.row.id,
          colId: cell.column.id
        });
        if (canEdit) {
          handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
        }
      } else {
        handleMouseDown(cell.row.id, cell.column.id);
        if (editingKey) {
          setTimeout(() => {
            setEditingKey?.('');
            reset?.();
          });
        }
      }
    },
    onMouseEnter: e => handleMouseEnter(e, cell.row.id, cell.column.id),
    onMouseUp: e => handleMouseUp(e),
    onKeyDown: e => {
      if (!isEditing) {
        handleKeyDown(e, cell.row.id, cell.column.id);
      } else {
        if (e.shiftKey && e.key === 'Enter') {
          e.preventDefault();
          e.stopPropagation();
        } else {
          if (e.key === 'Enter') {
            e.preventDefault();
            e.stopPropagation();
            const currentRowIndex = allRows.findIndex(r => r.id === cell.row.id);
            const nextRow = allRows[currentRowIndex + 1];
            if (nextRow) {
              setFocusedCell?.({
                rowId: nextRow.id,
                colId: cell.column.id
              });
              setStartCell?.({
                rowId: nextRow.id,
                colId: cell.column.id
              });
              setEndCell?.({
                rowId: nextRow.id,
                colId: cell.column.id
              });
              setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
                rowId: nextRow.id,
                colId: cell.column.id
              }, {
                rowId: nextRow.id,
                colId: cell.column.id
              }));
              rowVirtualizer.scrollToIndex(nextRow.index, {
                align: 'center'
              });
              handleChange();
            } else {
              handleChangeAndCreateRow();
            }
            setEditingKey?.('');
            reset?.();
          }
        }
      }
    },
    onDoubleClick: e => {
      if (!canEdit) {
        e.stopPropagation();
        e.preventDefault();
        return;
      }
      if (!(record[rowKey] === editingKey && canEdit)) {
        handleEdit(e);
      }
    }
  }, isEditing && canEdit ? /*#__PURE__*/_react.default.createElement(_EditableCell.default, {
    cellEditing: {},
    column: cell.column.columnDef.meta,
    dataIndex: cell.column.id,
    editType: (0, _utils.getEditType)(cell.column.columnDef.meta, record),
    indexCol: cell.column.getIndex(),
    indexRow: cell.row.index,
    record: record
    // rowKey={rowKey}
  }) : /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('ui-rc_cell-content', {
      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect'].includes((0, _utils.getEditType)(columnMeta, record))
    })
  }, 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();
      e.preventDefault();
      setIsExpandClick(true);
      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()), (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/_react.default.createElement("span", {
    className: 'caret-down',
    onClick: e => {
      handleEdit(e);
      // setEditingKey?.(cell.row.id)
    }
  })), !isSelecting && !isEditing && rowRange &&
  // rowNumber === rangeState?.endRowIndex &&
  cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
    className: 'dragging-point',
    onMouseDown: e => {
      e.preventDefault();
      e.stopPropagation();
      if (e.button === 0) {
        setIsPasting?.(true);
      }
    },
    onDoubleClick: handlePointDoubleClick
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: 'dot-point'
  })), !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id && /*#__PURE__*/_react.default.createElement("span", {
    className: "isValid"
  }));
};
var _default = exports.default = TableBodyCellEdit;