es-grid-template/lib/ali-table/pipeline/features/columnHover.js

es-grid-template

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.columnHover = columnHover;
var _utils = require("../../utils");
function columnHover(opts = {}) {
  const stateKey = 'columnHover';
  return pipeline => {
    const hoverColor = opts.hoverColor ?? 'var(--hover-bgcolor)';
    const hoverColIndex = opts.hoverColIndex ?? pipeline.getStateAtKey(stateKey) ?? opts.defaultHoverColIndex ?? -1;
    const onChangeHoverColIndex = nextColIndex => {
      pipeline.setStateAtKey(stateKey, nextColIndex);
      opts.onChangeHoverColIndex?.(nextColIndex);
    };
    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)((col, {
      startIndex,
      endIndex
    }) => {
      const range = {
        start: startIndex,
        end: endIndex
      };
      if (!(0, _utils.isLeafNode)(col)) {
        return col;
      }
      const colIndexMatched = range.start <= hoverColIndex && hoverColIndex < range.end;
      const prevGetCellProps = col.getCellProps;
      return {
        ...col,
        getCellProps(value, record, rowIndex) {
          const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
          return (0, _utils.mergeCellProps)(prevCellProps, {
            style: {
              '--bgcolor': colIndexMatched ? hoverColor : undefined
            },
            onMouseEnter() {
              onChangeHoverColIndex(range.start);
            },
            onMouseLeave() {
              onChangeHoverColIndex(-1);
            }
          });
        }
      };
    }));
  };
}