@sap-ux/ui-components/dist/components/UITranslationInput/UIFormattedText.d.ts

SAP UI Components Library

import type { ReactElement } from 'react';
interface MessageTextValues {
    [key: string]: string;
}
export interface UIFormattedTextProps {
    children: string;
    values?: MessageTextValues;
    className?: string;
}
interface ParseResult {
    texts: Array<string>;
    bolds: Array<string>;
}
/**
 * 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.
 */
export declare const parseText: (text: string, values: MessageTextValues) => ParseResult;
/**
 * 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.
 */
export declare function formatTextGeneric<T>(text: string, values: MessageTextValues, cb: (index: number, textPart: string, match?: string) => T): T[];
/**
 * 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.
 */
export declare function formatText(text: string, values: MessageTextValues): string;
/**
 * 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.
 */
export declare function UIFormattedText(props: Readonly<UIFormattedTextProps>): ReactElement;
export {};
//# sourceMappingURL=UIFormattedText.d.ts.map