feat(MLAB-746): add renderToolbar property + collapse icons

Author: imgeorgius

src/ReactUnipika/ReactUnipika.tsx

@@ -5,7 +5,7 @@ import unipika from '@gravity-ui/unipika/lib/unipika';
 
 import {UnipikaSettings} from '../StructuredYson/types';
 
-import {StructuredYson} from '../StructuredYson/StructuredYson';
+import {StructuredYson, ToolbarProps} from '../StructuredYson/StructuredYson';
 import {cn} from '../utils/classname';
 
 const block = cn('g-ru-react-unipika');
@@ -20,6 +20,7 @@ export interface ReactUnipikaProps {
     className?: string;
     customLayout?: (args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode;
     toolbarStickyTop?: number;
+    renderToolbar?: (props: ToolbarProps) => React.ReactNode;
 }
 
 const defaultUnipikaSettings = {
@@ -41,6 +42,7 @@ export function ReactUnipika({
     className,
     customLayout,
     toolbarStickyTop = 0,
+    renderToolbar,
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -92,6 +94,7 @@ export function ReactUnipika({
                     extraTools={extraTools}
                     customLayout={customLayout}
                     toolbarStickyTop={toolbarStickyTop}
+                    renderToolbar={renderToolbar}
                 />
             ) : (
                 <pre

src/StructuredYson/Cell.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-
 import {Button, Icon} from '@gravity-ui/uikit';
+
 // @ts-ignore
 import unipika from '@gravity-ui/unipika/lib/unipika';
 
-import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import {ArrowUpRightFromSquare, ChevronUp, ChevronRight} from '@gravity-ui/icons';
 
 import {UnipikaSettings} from './types';
 import {BlockType, SearchInfo, UnipikaFlattenTreeItem} from '../utils/flattenUnipika';
@@ -130,7 +130,10 @@ interface KeyProps {
 function Key(props: KeyProps) {
     const {yson} = props;
     const text: React.ReactNode = renderKeyWithFilter(props);
-    return !text ? null : (
+    if (!text) {
+        return null;
+    }
+    return (
         <React.Fragment>
             {text}
             <SlaveText text={yson ? ' = ' : ': '} />
@@ -291,7 +294,7 @@ function ToggleCollapseButton(props: ToggleCollapseProps) {
     return (
         <span title={path} className={block('collapse')}>
             <Button onClick={onToggle} view="flat-secondary" size={'s'}>
-                <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>
+                <Icon className={'unipika'} data={collapsed ? ChevronRight : ChevronUp} />
             </Button>
         </span>
     );

src/StructuredYson/StructuredYson.tsx

@@ -26,12 +26,20 @@ import './StructuredYson.scss';
 
 const block = cn('g-ru-structured-yson');
 
+export interface ToolbarProps {
+    onFilterChange: (filter: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+    isCollapsed: boolean;
+}
+
 interface Props {
     value: UnipikaValue;
     settings: UnipikaSettings;
     extraTools?: React.ReactNode;
     customLayout?: (args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode;
     toolbarStickyTop?: number;
+    renderToolbar?: (props: ToolbarProps) => React.ReactNode;
 }
 
 interface State {
@@ -224,8 +232,21 @@ export class StructuredYson extends React.PureComponent<Props, State> {
     };
 
     renderToolbar(className?: string) {
-        const {matchIndex, matchedRows, filter} = this.state;
-        const {extraTools} = this.props;
+        const {matchIndex, matchedRows, filter, collapsedState} = this.state;
+        const {extraTools, renderToolbar} = this.props;
+
+        // Calculate if there are any collapsed nodes
+        const isCollapsed = Object.keys(collapsedState).length > 0;
+
+        if (renderToolbar) {
+            return renderToolbar({
+                onFilterChange: this.onFilterChange,
+                onExpandAll: this.onExpandAll,
+                onCollapseAll: this.onCollapseAll,
+                isCollapsed,
+            });
+        }
+
         return (
             <StructuredYsonToolbar
                 className={className}