@sap-ux/ui-components
Version:
SAP UI Components Library
122 lines • 4.3 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.parseText = void 0;
exports.formatTextGeneric = formatTextGeneric;
exports.formatText = formatText;
exports.UIFormattedText = UIFormattedText;
const react_1 = __importDefault(require("react"));
const PLACEHOLDER_START = '{{{';
const PLACEHOLDER_END = '}}}';
/**
* Method find all matching values.
*
* @param text Text to parse.
* @param values Map with values to search.
* @returns Array containing matched regex expressions.
*/
const matchAllValues = (text, values) => {
const matches = [];
for (const key in values) {
const textWithUrlRegex = `${PLACEHOLDER_START}${key}${PLACEHOLDER_END}`;
const regex = new RegExp(textWithUrlRegex, 'gi');
let match = null;
do {
match = regex.exec(text);
if (match) {
matches.push(match);
}
} while (match);
}
return matches;
};
/**
* Method separates given text between found values and rest unformatted text.
*
* @param text Text to parse.
* @param values Map with values to search.
* @returns Object containing separated `texts` and `formatted` arrays.
*/
const parseText = (text, values) => {
const result = {
texts: [],
bolds: []
};
if (text) {
const matches = matchAllValues(text, values);
matches.sort((match1, match2) => match1.index - match2.index);
let charIndex = 0;
if (matches.length) {
for (let i = 0; i < matches.length; i++) {
const match = matches[i];
if (match.index === undefined) {
continue;
}
const original = match[0];
const resolvedText = values[original.replace(PLACEHOLDER_START, '').replace(PLACEHOLDER_END, '')];
result.texts.push(text.substring(charIndex, match.index));
result.bolds.push(resolvedText);
charIndex = match.index + original.length;
if (i === matches.length - 1) {
result.texts.push(text.substring(charIndex, text.length));
}
}
}
else {
result.texts.push(text);
}
}
return result;
};
exports.parseText = parseText;
/**
* Method formats text with callback method to provide option to use different markup to highligh matching result in text.
*
* @param text Text to parse.
* @param values Map with values to search.
* @param cb Callback method to apply text highlight.
* @returns Array with formatted text parts.
*/
function formatTextGeneric(text, values, cb) {
const parseResult = (0, exports.parseText)(text, values);
const result = [];
for (let i = 0; i < parseResult.texts.length; i++) {
if (!parseResult.texts[i] && !parseResult.bolds[i]) {
continue;
}
result.push(cb(i, parseResult.texts[i], parseResult.bolds[i]));
}
return result;
}
/**
* Method formats string text with replacing matching values with same string without any highlight.
*
* @param text Text to parse.
* @param values Map with values to search.
* @returns Formatted text string.
*/
function formatText(text, values) {
const parseResult = formatTextGeneric(text, values, (index, textPart, match) => {
return match ? textPart + match : textPart;
});
return parseResult.join('');
}
/**
* Component to show formatted text with highlighting matching entries.
* Entries with '{{{key}}}' will be replaced with passed value and wrapped in bold.
*
* @param props Component properties.
* @returns Component to render formatted text.
*/
function UIFormattedText(props) {
const { children, values = {} } = props;
const result = formatTextGeneric(children, values, (index, textPart, match) => {
return (react_1.default.createElement("span", { key: `anchor-${index}` },
textPart,
match && react_1.default.createElement("b", null, match)));
});
return react_1.default.createElement("div", null, result);
}
//# sourceMappingURL=UIFormattedText.js.map