diff --git a/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx b/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx index dbead4a551..7abe2940a0 100644 --- a/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx +++ b/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx @@ -1,6 +1,6 @@ /* eslint-disable testing-library/render-result-naming-convention */ import * as React from 'react'; -import { Key, ReactNode } from 'react'; +import { Key } from 'react'; import OlStyle from 'ol/style/Style'; import OlStyleFill from 'ol/style/Fill'; @@ -102,11 +102,6 @@ interface OwnProps { * A CSS class which should be added to the table. */ className?: string; - /** - * A CSS class to add to each table row or a function that - * is evaluated for each record. - */ - rowClassName?: string | ((record: any) => string); /** * The map the features should be rendered on. If not given, the features * will be rendered in the table only. @@ -253,18 +248,6 @@ export class AgFeatureGrid extends React.Component layerCand === this._layer }) || []) as OlFeature[]; - if (!grid || !grid.api) { - return; - } - - // @ts-ignore - const rowRenderer = grid.api.rowRenderer; + grid.api?.forEachNode((n) => { + n.setHighlighted(null); + }); features.forEach(feature => { const key = this.props.keyFunction(feature); - let rc: any; - rowRenderer.forEachRowComp((idx: number, rowComp: any) => { - if (rowComp.getRowNode().data.key === key) { - rc = rowComp; - } - }); - - if (rc) { - const el = rc.getBodyRowElement(); - - if (el) { - el.classList.remove(this._rowHoverClassName); - } - } if (selectedRowKeys.includes(key)) { feature.setStyle(selectStyle); } else { @@ -470,23 +440,14 @@ export class AgFeatureGrid extends React.Component { - const key = this.props.keyFunction(feature); - let rc: any; - rowRenderer.forEachRowComp((idx: number, rowComp: any) => { - if (rowComp.getRowNode().data.key === key) { - rc = rowComp; + highlightFeatures.forEach(feat => { + const key = this.props.keyFunction(feat); + grid.api?.forEachNode((n) => { + if (n.data.key === key) { + n.setHighlighted(1); + feat.setStyle(highlightStyle); } }); - - if (rc) { - const el = rc.getBodyRowElement(); - - if (el) { - el.classList.add(this._rowHoverClassName); - } - } - feature.setStyle(highlightStyle); }); }; @@ -933,7 +894,6 @@ export class AgFeatureGrid extends React.Component { - const determinedRowClass = rowClassName((node as { data: string }).data); - return `${this._rowClassName} ${determinedRowClass}`; - }; - } else { - const finalRowClassName = rowClassName - ? `${rowClassName} ${this._rowClassName}` - : this._rowClassName; - rowClassNameFn = (node: ReactNode) => { - const rowClassSuffix = _kebabCase((node as { data: { key: string } }).data.key); - return `${finalRowClassName} ${this._rowKeyClassNamePrefix}${rowClassSuffix}`; - }; - } - return (
this._ref = ref} - getRowClass={rowClassNameFn} modules={[ ClientSideRowModelModule ]}