fix: review

Author: Raubzeug

src/components/JsonViewer/JsonViewer.scss

@@ -36,7 +36,7 @@
         position: absolute;
 
         margin-top: -2px;
-        margin-left: -5ex;
+        margin-left: -3ex;
     }
 
     &__match-counter {
@@ -72,7 +72,7 @@
     }
 
     &__filter {
-        max-width: 300px;
+        width: 300px;
     }
 
     &__filtered {

src/components/JsonViewer/JsonViewer.tsx

@@ -3,31 +3,27 @@ import React from 'react';
 import type * as DT100 from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
-import fill_ from 'lodash/fill';
 
 import {CASE_SENSITIVE_JSON_SEARCH} from '../../utils/constants';
 import {useSetting} from '../../utils/hooks';
 
+import {Cell} from './components/Cell';
 import {Filter} from './components/Filter';
 import {FullValueDialog} from './components/FullValueDialog';
-import {MultiHighlightedText} from './components/HighlightedText';
 import {block} from './constants';
 import i18n from './i18n';
 import type {UnipikaSettings, UnipikaValue} from './unipika/StructuredYsonTypes';
 import {flattenUnipika} from './unipika/flattenUnipika';
 import type {
-    BlockType,
     CollapsedState,
     FlattenUnipikaResult,
     SearchInfo,
     UnipikaFlattenTreeItem,
 } from './unipika/flattenUnipika';
-import {defaultUnipikaSettings, unipika} from './unipika/unipika';
-import {getHightLightedClassName} from './utils';
+import {unipika} from './unipika/unipika';
 
 import ArrowDownToLineIcon from '@gravity-ui/icons/svgs/arrow-down-to-line.svg';
 import ArrowUpFromLineIcon from '@gravity-ui/icons/svgs/arrow-up-from-line.svg';
-import ArrowUpRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-up-right-from-square.svg';
 
 import './JsonViewer.scss';
 
@@ -268,12 +264,12 @@ export function JsonViewer({
             <Flex gap={2} wrap="nowrap" className={block('toolbar')}>
                 <Flex gap={1} wrap="nowrap">
                     <ActionTooltip title={i18n('action_expand-all')}>
-                        <Button onClick={onExpandAll}>
+                        <Button onClick={onExpandAll} view="flat-secondary">
                             <Icon data={ArrowDownToLineIcon} />
                         </Button>
                     </ActionTooltip>
                     <ActionTooltip title={i18n('action_collapse-all')}>
-                        <Button onClick={onCollapseAll}>
+                        <Button onClick={onCollapseAll} view="flat-secondary">
                             <Icon data={ArrowUpFromLineIcon} />
                         </Button>
                     </ActionTooltip>
@@ -336,224 +332,6 @@ export function JsonViewer({
     );
 }
 
-const OFFSETS_BY_LEVEL: {[key: number]: React.ReactNode} = {};
-
-function getLevelOffsetSpaces(level: number) {
-    let res = OFFSETS_BY_LEVEL[level];
-    if (!res) {
-        const __html = fill_(Array(level * 4), '&nbsp;').join('');
-        res = OFFSETS_BY_LEVEL[level] = <span dangerouslySetInnerHTML={{__html}} />;
-    }
-    return res;
-}
-
-interface CellProps {
-    matched: SearchInfo;
-    row: UnipikaFlattenTreeItem;
-    settings?: UnipikaSettings;
-    collapsedState?: {readonly [key: string]: boolean};
-    onToggleCollapse: (path: string) => void;
-    filter?: string;
-    index: number;
-    showFullText: (index: number) => void;
-}
-
-function Cell(props: CellProps) {
-    const {
-        row: {level, open, close, key, value, hasDelimiter, path, collapsed, depth},
-        settings,
-        onToggleCollapse,
-        matched,
-        filter,
-        showFullText,
-        index,
-    } = props;
-
-    const handleToggleCollapse = React.useCallback(() => {
-        if (!path) {
-            return;
-        }
-        onToggleCollapse(path);
-    }, [path, onToggleCollapse]);
-
-    const handleShowFullText = React.useCallback(() => {
-        showFullText(index);
-    }, [showFullText, index]);
-
-    return (
-        <div className={block('cell', 'unipika')}>
-            {getLevelOffsetSpaces(level)}
-            {path && (
-                <ToggleCollapseButton
-                    collapsed={collapsed}
-                    path={path}
-                    onToggle={handleToggleCollapse}
-                />
-            )}
-            <Key text={key} settings={settings} matched={matched?.keyMatch} filter={filter} />
-            {open && <OpenClose type={open} settings={settings} />}
-            {depth !== undefined && (
-                <span className={'unipika'}>{i18n('context_items-count', {count: depth})}</span>
-            )}
-            {value !== undefined && (
-                <Value
-                    text={value}
-                    settings={settings}
-                    matched={matched?.valueMatch}
-                    filter={filter}
-                    showFullText={handleShowFullText}
-                />
-            )}
-            {collapsed && depth === undefined && <span className={'unipika'}>...</span>}
-            {close && <OpenClose type={close} settings={settings} close />}
-            {hasDelimiter && <SlaveText text={','} />}
-        </div>
-    );
-}
-
-interface KeyProps {
-    text: UnipikaFlattenTreeItem['key'] | UnipikaFlattenTreeItem['value'];
-    settings?: UnipikaSettings;
-    filter?: string;
-    matched?: Array<number>;
-}
-
-function Key(props: KeyProps) {
-    const text: React.ReactNode = renderKeyWithFilter(props);
-    return text ? (
-        <React.Fragment>
-            {text}
-            <SlaveText text={': '} />
-        </React.Fragment>
-    ) : null;
-}
-
-interface ValueProps extends KeyProps {
-    showFullText?: () => void;
-}
-
-function Value(props: ValueProps) {
-    return (
-        <React.Fragment>
-            {renderValueWithFilter(props, block('value', {type: props.text?.$type}))}
-        </React.Fragment>
-    );
-}
-
 function asModifier(path = '') {
     return path.replace(/[^-\w\d]/g, '_');
 }
-
-function renderValueWithFilter(props: ValueProps, className: string) {
-    if ('string' === props.text?.$type) {
-        return renderStringWithFilter(props, className, 100);
-    }
-    return renderWithFilter(props, block('value'));
-}
-
-function renderStringWithFilter(props: ValueProps, className: string, maxWidth = Infinity) {
-    const {text, settings = defaultUnipikaSettings, matched = [], filter, showFullText} = props;
-    const tmp = unipika.format(text, {...settings, asHTML: false});
-    const visible = tmp.substr(1, Math.min(tmp.length - 2, maxWidth));
-    const truncated = visible.length < tmp.length - 2;
-    let hasHiddenMatch = false;
-    if (truncated) {
-        for (let i = matched.length - 1; i >= 0; --i) {
-            if (visible.length < matched[i] + (filter?.length || 0)) {
-                hasHiddenMatch = true;
-                break;
-            }
-        }
-    }
-    return (
-        <span>
-            <MultiHighlightedText
-                className={getHightLightedClassName(className)}
-                text={visible}
-                starts={matched}
-                length={filter?.length}
-            />
-            {truncated && (
-                <span
-                    className={block('filtered', {
-                        highlighted: hasHiddenMatch,
-                        clickable: true,
-                    })}
-                    onClick={showFullText}
-                >
-                    {'\u2026'}
-                    <Icon data={ArrowUpRightFromSquareIcon} />
-                </span>
-            )}
-        </span>
-    );
-}
-
-function renderKeyWithFilter(props: KeyProps) {
-    if (!props?.text) {
-        return null;
-    }
-    return renderStringWithFilter(props, block('key'));
-}
-
-function renderWithFilter(props: KeyProps, className: string) {
-    const {text, filter, settings, matched} = props;
-    let res: React.ReactNode = null;
-    if (matched && filter) {
-        const tmp = unipika.format(text, {...settings, asHTML: false});
-        res = (
-            <MultiHighlightedText
-                className={getHightLightedClassName(className)}
-                text={tmp}
-                starts={matched}
-                length={filter?.length}
-            />
-        );
-    } else {
-        res = text ? formatValue(text, settings) : undefined;
-    }
-    return res ? res : null;
-}
-
-function SlaveText({text}: {text: string}) {
-    return <span className={''}>{text}</span>;
-}
-
-function OpenClose(props: {
-    type: BlockType;
-    close?: boolean;
-    settings: JsonViewerProps['unipikaSettings'];
-}) {
-    const {type, close} = props;
-    switch (type) {
-        case 'array':
-            return <SlaveText text={close ? ']' : '['} />;
-        case 'object':
-            return <SlaveText text={close ? '}' : '{'} />;
-    }
-}
-
-interface ToggleCollapseProps {
-    collapsed?: boolean;
-    path?: UnipikaFlattenTreeItem['path'];
-    onToggle: () => void;
-}
-
-function ToggleCollapseButton(props: ToggleCollapseProps) {
-    const {collapsed, onToggle, path} = props;
-    return (
-        <span title={path} className={block('collapsed')}>
-            <Button onClick={onToggle} view="flat-secondary" size={'s'}>
-                <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>
-            </Button>
-        </span>
-    );
-}
-
-function formatValue(
-    value: UnipikaFlattenTreeItem['key'] | UnipikaFlattenTreeItem['value'],
-    settings: UnipikaSettings = defaultUnipikaSettings,
-) {
-    const __html = unipika.formatValue(value, {...defaultUnipikaSettings, ...settings}, 0);
-    return <span className={'unipika'} dangerouslySetInnerHTML={{__html}} />;
-}