labo-components/app/components/search/HighlightOverview.jsx

B&G UI components

import React from 'react';
import PropTypes from "prop-types";

import IDUtil from '../../util/IDUtil';
import RegexUtil from '../../util/RegexUtil';

import Resource from '../../model/Resource';

export default class HighlightOverview extends React.Component {

    constructor(props) {
		super(props);
	}

	createMarkup(text) {
		return {__html: text};
    }

    renderHighlightTable = (collectionConfig, searchResult) => {
    	if(!(searchResult.matchesPerField && typeof searchResult.matchesPerField === 'object' && Object.keys(searchResult.matchesPerField).length > 0)) {
    		return null;
    	}

		const rows = Object.keys(searchResult.matchesPerField).map((fieldName, i) => {
        	return searchResult.matchesPerField[fieldName].map((highlight, j) => {
        		return (
        			<tr key={'__tr__' + i + '__' + j}>
						<td><label>{collectionConfig.toPrettyFieldName(fieldName)}</label></td>
						<td><span dangerouslySetInnerHTML={this.createMarkup(
							RegexUtil.highlightText(
								highlight,
								RegexUtil.generateRegexForSearchTerm(searchResult.searchTerm)
							)
						)}></span></td>
					</tr>
				)
        	})
        }).reduce((acc, cur) => acc.concat(cur))

        if(rows.length > 0){
     	   return (<table><tbody>{rows}</tbody></table>);
		}
		return null;
    };

	render() {
		const table = this.renderHighlightTable(this.props.collectionConfig, this.props.searchResult);
		const headerText = this.props.collectionConfig.getMatchingTermsMsg(table ? 1 : 0, false);

	    return (
			<div className={IDUtil.cssClassName('highlight-overview')}>
				<h4>{headerText}</h4>
				{table}
			</div>
        );
	}
}

HighlightOverview.propTypes = {
	searchResult: Resource.getPropTypes(true),
	collectionConfig : PropTypes.object.isRequired //A collection config object (see CollectionConfig.jsx)
};