@sap-ux/ui-components
Version:
SAP UI Components Library
44 lines • 1.76 kB
JavaScript
import React from 'react';
import './UIHighlightMenuOption.scss';
/**
* UIHighlightMenuOption component.
*
* @exports
* @class UIHighlightMenuOption
* @extends {React.Component<UIHighlightMenuOptionProps>}
*/
export class UIHighlightMenuOption extends React.Component {
/**
* @returns {JSX.Element}
*/
render() {
let text = this.props.text;
let query = this.props.query;
const parts = [];
if (text && query) {
// There is search query - highlight occureance
text = text.toString();
query = query.toLowerCase();
const simpleText = text.toLowerCase();
const chars = query.length;
let startIndex = 0;
let index = simpleText.indexOf(query);
const fnAddPart = (part) => (part ? parts.push(part) : null);
// Highlight all occureances
while (index !== -1) {
fnAddPart(React.createElement("span", { key: 'text-' + startIndex }, text.substring(startIndex, index)));
fnAddPart(React.createElement("span", { className: "ts-Menu-option--highlighted", key: 'highlight-' + index }, text.substring(index, index + chars)));
startIndex = index + chars;
index = simpleText.indexOf(query, index + chars);
if (index === -1) {
fnAddPart(React.createElement("span", { key: 'text-' + startIndex }, text.substring(startIndex, simpleText.length)));
}
}
}
if (parts.length === 0) {
parts.push(text);
}
return React.createElement("div", { className: "ts-Menu-option" }, parts);
}
}
//# sourceMappingURL=UIHighlightMenuOption.js.map