es-grid-template
Version:
es-grid-template
75 lines • 2.43 kB
JavaScript
import { isLeafNode, makeRecursiveMapper, mergeCellProps } from "../../utils";
const EMPTY_RANGE = {
start: -1,
end: -1
};
export function columnRangeHover(opts = {}) {
const stateKey = 'columnHover';
return function columnRangeHoverStep(pipeline) {
const hoverRange = opts.hoverRange ?? pipeline.getStateAtKey(stateKey) ?? opts.defaultHoverRange ?? EMPTY_RANGE;
const hoverColor = opts.hoverColor ?? 'var(--hover-bgcolor)';
const headerHoverColor = opts.headerHoverColor ?? 'var(--header-hover-bgcolor)';
const onChangeHoverRange = nextColIndexRange => {
pipeline.setStateAtKey(stateKey, nextColIndexRange);
opts.onChangeHoverRange?.(nextColIndexRange);
};
return pipeline.mapColumns(makeRecursiveMapper((col, {
startIndex,
endIndex
}) => {
const colRange = {
start: startIndex,
end: endIndex
};
const match = colRange.end > hoverRange.start && hoverRange.end > colRange.start;
if (!isLeafNode(col)) {
if (headerHoverColor == null) {
return col;
}
return {
...col,
headerCellProps: mergeCellProps(col.headerCellProps ?? {}, {
onMouseEnter() {
onChangeHoverRange(colRange);
},
onMouseLeave() {
onChangeHoverRange(EMPTY_RANGE);
},
style: {
'--header-bgcolor': match ? headerHoverColor : undefined
}
})
};
}
const prevGetCellProps = col.getCellProps;
return {
...col,
headerCellProps: mergeCellProps(col.headerCellProps ?? {}, {
onMouseEnter() {
onChangeHoverRange(colRange);
},
onMouseLeave() {
onChangeHoverRange(EMPTY_RANGE);
},
style: {
'--header-bgcolor': match ? headerHoverColor : undefined
}
}),
getCellProps(value, record, rowIndex) {
const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
return mergeCellProps(prevCellProps ?? {}, {
onMouseEnter() {
onChangeHoverRange(colRange);
},
onMouseLeave() {
onChangeHoverRange(EMPTY_RANGE);
},
style: {
'--bgcolor': match ? hoverColor : undefined
}
});
}
};
}));
};
}