src/components/FixedHeightQuery/FixedHeightQuery.tsx - main - githubmirror/ydb-embedded-ui

src/components/FixedHeightQuery/FixedHeightQuery.tsx
94 строки3 KB
Артём Муфазалов
fix(FixedHeightQuery): highlight only rendered lines, postpone highlight (#3617)
17 мар 2026, 15:11
17 мар 2026, 15:110c487f5
import React from 'react';

import {cn} from '../../utils/cn';
import {YDBSyntaxHighlighter} from '../SyntaxHighlighter/YDBSyntaxHighlighter';

import './FixedHeightQuery.scss';

const b = cn('ydb-fixed-height-query');

const FIXED_PADDING = 0;
const LINE_HEIGHT = 20;

type FixedHeightQueryMode = 'fixed' | 'max';

interface FixedHeightQueryProps {
    value?: string;
    lines?: number;
    hasClipboardButton?: boolean;
    clipboardButtonAlwaysVisible?: boolean;
    mode?: FixedHeightQueryMode;
}

export const FixedHeightQuery = ({
    value = '',
    lines = 4,
    hasClipboardButton,
    clipboardButtonAlwaysVisible,
    mode = 'fixed',
}: FixedHeightQueryProps) => {
    const heightValue = `${lines * LINE_HEIGHT + FIXED_PADDING}px`;

    const valueToDisplay = React.useMemo(() => {
        // Remove empty lines from the beginning (lines with only whitespace are considered empty)
        const trimmedValue = value.replace(/^(\s*\n)+/, '');

        if (!trimmedValue) {
            return '';
        }

        let newLineCount = 0;
        let searchFromIndex = 0;

        while (newLineCount < lines) {
            const nextNewlineIndex = trimmedValue.indexOf('\n', searchFromIndex);
            if (nextNewlineIndex === -1) {
                // Fewer than `lines` newlines; return the whole string
                return trimmedValue;
            }
            newLineCount += 1;
            if (newLineCount === lines) {
                let postfix = '';
                // Add additional empty line at the end if there are more lines
                // to ensure proper truncation marker
                if (trimmedValue.indexOf('\n', searchFromIndex + 1) !== -1) {
                    postfix = '\n ';
                }

                // Return everything up to (but not including) the Nth newline
                return trimmedValue.slice(0, nextNewlineIndex) + postfix;
            }
            searchFromIndex = nextNewlineIndex + 1;
        }
        return trimmedValue;
    }, [value, lines]);

    const heightStyle = mode === 'fixed' ? {height: heightValue} : {maxHeight: heightValue};

    return (
        <div
            className={b()}
            style={
                {
                    ...heightStyle,
                    '--line-clamp': lines,
                } as React.CSSProperties & {'--line-clamp': number}
            }
        >
            <YDBSyntaxHighlighter
                language="yql"
                text={valueToDisplay}
                withClipboardButton={
                    hasClipboardButton
                        ? {
                              alwaysVisible: clipboardButtonAlwaysVisible,
                              copyText: value,
                              withLabel: false,
                              size: 'xs',
                          }
                        : undefined
                }
            />
        </div>
    );
};