es-grid-template
Version:
es-grid-template
43 lines • 1.44 kB
JavaScript
import { isLeafNode, makeRecursiveMapper, mergeCellProps } from "../../utils";
export 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(makeRecursiveMapper((col, {
startIndex,
endIndex
}) => {
const range = {
start: startIndex,
end: endIndex
};
if (!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 mergeCellProps(prevCellProps, {
style: {
'--bgcolor': colIndexMatched ? hoverColor : undefined
},
onMouseEnter() {
onChangeHoverColIndex(range.start);
},
onMouseLeave() {
onChangeHoverColIndex(-1);
}
});
}
};
}));
};
}