@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
42 lines • 1.76 kB
JavaScript
import * as React from 'react';
// Could be used to add ellipse: https://semicolon.dev/tutorial/css/text-overflow-ellipsis-doesnt-work
// Need to test though.
const ellipseStyle = {
minWidth: '0px',
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
};
/**
* Copied from ECStorage
* Super cool solution based on: https://stackoverflow.com/a/43235785
* @param text
* @param highlight
*/
export function getHighlightedText(text, highlight) {
// <div dangerouslySetInnerHTML={{ __html: this.state.showPanelItem.WikiField }} />
// Split on highlight term and include term into parts, ignore case
if (!highlight || highlight.indexOf('*') > -1) {
return text;
}
else if (!text) {
// added for https://github.com/mikezimm/Compliance/issues/118
console.log('FPS-getHighlightedText text does not exist for highlight:', highlight);
return '';
}
else {
// Found that ID is a number and if it's passed in, it will crash
const nan = isNaN(text) ? true : false;
let thisText = `${text}`;
if (typeof text !== 'string' && nan === true) {
console.log(`getHighlightedText: this is not a string or number.. converting to string now. `, text);
thisText = JSON.stringify(text);
}
const parts = thisText.split(new RegExp(`(${highlight})`, 'gi'));
return React.createElement("span", null,
" ",
parts.map((part, i) => React.createElement("span", { key: i, style: part.toLowerCase() === highlight.toLowerCase() ? { fontWeight: 'bold', backgroundColor: 'yellow' } : {} }, part)),
" ");
}
}
//# sourceMappingURL=HighlightedText.js.map