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

src/components/ShortyString/ShortyString.tsx

67 строк2 KB

Valerii Sidorenko

feat!: update to uikit 6 (#789)

10 апр 2024, 16:48

10 апр 2024, 16:481a3154d

import React from 'react';

import {Link} from '@gravity-ui/uikit';

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

import i18n from './i18n';

import './ShortyString.scss';

const block = cn('kv-shorty-string');

type Props = {
    value?: string;
    limit?: number;
    /** in strict mode the text always trims at the limit, otherwise it is allowed to overflow a little */
    strict?: boolean;
    displayLength?: boolean;
    render?: (value: string) => React.ReactNode;
    onToggle?: () => void;
    expandLabel?: string;
    collapseLabel?: string;
};

export default function ShortyString({
    value = '',
    limit = 200,
    strict = false,
    displayLength = true,
    render = (v: string) => v,
    onToggle,
    expandLabel = i18n('default_expand_label'),
    collapseLabel = i18n('default_collapse_label'),
}: Props) {
    const [expanded, setExpanded] = React.useState(false);

    const toggleLabelAction = expanded ? collapseLabel : expandLabel;
    const toggleLabelSymbolsCount =
        displayLength && !expanded ? i18n('chars_count', {count: value.length}) : '';
    const toggleLabel = toggleLabelAction + toggleLabelSymbolsCount;

    // showing toogle button with a label that is longer than the hidden part is pointless,
    // hence compare to limit + length in the not-strict mode
    const hasToggle = value.length > limit + (strict ? 0 : toggleLabel.length);

    const text = expanded || !hasToggle ? value : value.slice(0, limit - 4) + '\u00a0...';

    return (
        <div className={block()}>
            {render(text)}
            {hasToggle ? (
                <Link
                    className={block('toggle')}
                    href="#"
                    onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        setExpanded((v) => !v);
                        onToggle?.();
                    }}
                >
                    {toggleLabel}
                </Link>
            ) : null}
        </div>
    );
}