feat(StructuredYson/Cell): add configurable collapse indicators

Author: imgeorgius

src/ReactUnipika/ReactUnipika.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 // @ts-expect-error
 import unipika from '@gravity-ui/unipika/lib/unipika';
 
-import {UnipikaSettings} from '../StructuredYson/types';
+import {CollapseIconType, UnipikaSettings} from '../StructuredYson/types';
 
 import {StructuredYson, ToolbarProps} from '../StructuredYson/StructuredYson';
 import {cn} from '../utils/classname';
@@ -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 CollapseIconType.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,7 @@ import reduce_ from 'lodash/reduce';
 // @ts-ignore
 import unipika from '@gravity-ui/unipika/lib/unipika';
 
-import {UnipikaSettings, UnipikaValue} from '../StructuredYson/types';
+import {CollapseIconType, UnipikaSettings, UnipikaValue} from '../StructuredYson/types';
 import {
     CollapsedState,
     FlattenUnipikaResult,
@@ -40,6 +40,7 @@ interface Props {
     customLayout?: (args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode;
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
+    collapseIconType?: CollapseIconType;
 }
 
 interface State {
@@ -156,6 +157,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
             settings,
             filter,
         } = this.state;
+        const {collapseIconType} = this.props;
 
         return (
             <Table
@@ -167,6 +169,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,11 @@ export type UnipikaSettings = {
     normalizeUrl?: (url?: string) => string;
 };
 
+export enum CollapseIconType {
+    Chevron = 'chevron',
+    Text = 'text',
+}
+
 interface BaseUnipikaValue {
     $attributes?: UnipikaMap['$value'];
 }