feat(StructuredYson/Cell): add configurable collapse indicators

Author: imgeorgius

src/ReactUnipika/ReactUnipika.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 // @ts-expect-error
 import unipika from '@gravity-ui/unipika/lib/unipika';
 
-import {UnipikaSettings} from '../StructuredYson/types';
+import {CollapseIconType, ToolbarProps, UnipikaSettings} from '../StructuredYson/types';
 
-import {StructuredYson, ToolbarProps} from '../StructuredYson/StructuredYson';
+import {StructuredYson} from '../StructuredYson/StructuredYson';
 import {cn} from '../utils/classname';
 
 const block = cn('g-ru-react-unipika');
@@ -21,6 +21,7 @@ export interface ReactUnipikaProps {
     customLayout?: (args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode;
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
+    collapseIconType?: CollapseIconType;
 }
 
 const defaultUnipikaSettings = {
@@ -43,6 +44,7 @@ export function ReactUnipika({
     customLayout,
     toolbarStickyTop = 0,
     renderToolbar,
+    collapseIconType,
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -95,6 +97,7 @@ export function ReactUnipika({
                     customLayout={customLayout}
                     toolbarStickyTop={toolbarStickyTop}
                     renderToolbar={renderToolbar}
+                    collapseIconType={collapseIconType}
                 />
             ) : (
                 <pre

src/StructuredYson/Cell.tsx

@@ -4,9 +4,9 @@ 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 {CollapseIconType, UnipikaSettings} from './types';
 import {BlockType, SearchInfo, UnipikaFlattenTreeItem} from '../utils/flattenUnipika';
 
 import {MultiHighlightedText, MultiHighlightedTextProps} from '../HighlightedText/HighlightedText';
@@ -28,6 +28,7 @@ export interface CellProps {
     filter?: string;
     index: number;
     showFullText: (index: number) => void;
+    collapseIconType?: CollapseIconType;
 }
 
 export const JSON_VALUE_KEY = {
@@ -69,6 +70,7 @@ export function Cell(props: CellProps) {
         filter,
         showFullText,
         index,
+        collapseIconType,
     } = props;
 
     const handleToggleCollapse = React.useCallback(() => {
@@ -90,6 +92,7 @@ export function Cell(props: CellProps) {
                     collapsed={collapsed}
                     path={path}
                     onToggle={handleToggleCollapse}
+                    collapseIconType={collapseIconType}
                 />
             )}
             <Key
@@ -287,14 +290,27 @@ interface ToggleCollapseProps {
     collapsed?: boolean;
     path?: UnipikaFlattenTreeItem['path'];
     onToggle: () => void;
+    collapseIconType?: CollapseIconType;
 }
 
 function ToggleCollapseButton(props: ToggleCollapseProps) {
-    const {collapsed, onToggle, path} = props;
+    const {collapsed, onToggle, path, collapseIconType} = props;
+
+    // Function to render the appropriate collapse indicator based on type
+    const renderCollapseIndicator = () => {
+        switch (collapseIconType) {
+            case 'chevron':
+                return <Icon className={'unipika'} data={collapsed ? ChevronRight : ChevronUp} />;
+            // Future icon types can be added here as new cases
+            default:
+                return <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>;
+        }
+    };
+
     return (
         <span title={path} className={block('collapse')}>
             <Button onClick={onToggle} view="flat-secondary" size={'s'}>
-                <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>
+                {renderCollapseIndicator()}
             </Button>
         </span>
     );

src/StructuredYson/StructuredYson.tsx

@@ -6,7 +6,12 @@ import reduce_ from 'lodash/reduce';
 // @ts-ignore
 import unipika from '@gravity-ui/unipika/lib/unipika';
 
-import {UnipikaSettings, UnipikaValue} from '../StructuredYson/types';
+import {
+    CollapseIconType,
+    ToolbarProps,
+    UnipikaSettings,
+    UnipikaValue,
+} from '../StructuredYson/types';
 import {
     CollapsedState,
     FlattenUnipikaResult,
@@ -26,20 +31,14 @@ 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;
+    collapseIconType?: CollapseIconType;
 }
 
 interface State {
@@ -156,6 +155,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
             settings,
             filter,
         } = this.state;
+        const {collapseIconType} = this.props;
 
         return (
             <Table
@@ -167,6 +167,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
                 onToggleCollapse={this.onTogglePathCollapse}
                 onShowFullText={this.onShowFullText}
                 scrollToRef={this.tableRef}
+                collapseIconType={collapseIconType}
             />
         );
     }

src/StructuredYson/Table.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Table as GravityTable, useTable, useWindowRowVirtualizer} from '@gravity-ui/table';
 import type {ColumnDef, Row} from '@gravity-ui/table/tanstack';
 import {UnipikaFlattenTreeItem, SearchInfo} from '../utils/flattenUnipika';
-import {UnipikaSettings} from '../StructuredYson/types';
+import {CollapseIconType, UnipikaSettings} from '../StructuredYson/types';
 import {asModifier, Cell} from './Cell';
 import {cn} from '../utils/classname';
 
@@ -19,6 +19,7 @@ export interface TableProps {
     onToggleCollapse: (path: string) => void;
     onShowFullText: (index: number) => void;
     scrollToRef: React.RefObject<null | {scrollToIndex(index: number): void}>;
+    collapseIconType?: CollapseIconType;
 }
 
 export const Table: React.FC<TableProps> = ({
@@ -30,6 +31,7 @@ export const Table: React.FC<TableProps> = ({
     onToggleCollapse,
     onShowFullText,
     scrollToRef,
+    collapseIconType,
 }) => {
     const renderCell: ColumnDef<UnipikaFlattenTreeItem>['cell'] = ({row}) => {
         const {original, index} = row;
@@ -43,6 +45,7 @@ export const Table: React.FC<TableProps> = ({
                 filter={filter}
                 showFullText={onShowFullText}
                 index={index}
+                collapseIconType={collapseIconType}
             />
         );
     };

src/StructuredYson/types.ts

@@ -19,6 +19,15 @@ export type UnipikaSettings = {
     normalizeUrl?: (url?: string) => string;
 };
 
+export type CollapseIconType = 'chevron';
+
+export interface ToolbarProps {
+    onFilterChange: (filter: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+    isCollapsed: boolean;
+}
+
 interface BaseUnipikaValue {
     $attributes?: UnipikaMap['$value'];
 }