All files / blong-browser/src/components/Text Text.tsx

100% Statements 32/32
100% Branches 2/2
100% Functions 1/1
100% Lines 32/32

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 331x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 128x 128x  
/**
 * Text — i18n text component.
 *
 * Translates a string by looking it up in the app-store translation dictionary.
 * Two usage patterns:
 *   <Text id="key" />             — explicit key
 *   <Text>{someStringVar}</Text>  — raw text used as both key and fallback
 *
 * Non-string children are rendered as-is without translation.
 */
import React from 'react';
import {useText} from '../../hooks/useText.js';
 
interface ITextProps {
    /** Explicit translation key. */
    id?: string;
    /** Raw text used as both the translation key and the English fallback. */
    children?: React.ReactNode;
    params?: Record<string, string | number>;
    prefix?: string;
    as?: keyof React.JSX.IntrinsicElements;
    className?: string;
}
 
export function Text({id, children, params, prefix, as: Tag = 'span', className}: ITextProps) {
    const raw = typeof children === 'string' ? children : (id ?? '');
    const key = prefix ? `${prefix}.${raw}` : raw;
    const text = useText(key, params);
    // Pass through non-string children unchanged (already JSX)
    if (typeof children !== 'string' && id == null) return <>{children ?? null}</>;
    return <Tag className={className}>{text}</Tag>;
}