feat(StructuredYson): add configurable collapse indicators

Author: imgeorgius

src/ReactUnipika/ReactUnipika.tsx

@@ -30,6 +30,7 @@ const defaultUnipikaSettings = {
     escapeWhitespace: true,
     showDecoded: true,
     binaryAsHex: true,
+    useIconsForCollapse: false,
 };
 
 export function ReactUnipika({

src/StructuredYson/Cell.tsx

@@ -90,6 +90,7 @@ export function Cell(props: CellProps) {
                     collapsed={collapsed}
                     path={path}
                     onToggle={handleToggleCollapse}
+                    settings={settings}
                 />
             )}
             <Key
@@ -287,14 +288,21 @@ interface ToggleCollapseProps {
     collapsed?: boolean;
     path?: UnipikaFlattenTreeItem['path'];
     onToggle: () => void;
+    settings?: UnipikaSettings;
 }
 
 function ToggleCollapseButton(props: ToggleCollapseProps) {
-    const {collapsed, onToggle, path} = props;
+    const {collapsed, onToggle, path, settings = {}} = props;
+    const useIcons = settings.useIconsForCollapse;
+
     return (
         <span title={path} className={block('collapse')}>
             <Button onClick={onToggle} view="flat-secondary" size={'s'}>
-                <Icon className={'unipika'} data={collapsed ? ChevronRight : ChevronUp} />
+                {useIcons ? (
+                    <Icon className={'unipika'} data={collapsed ? ChevronRight : ChevronUp} />
+                ) : (
+                    <span className={'unipika'}>{collapsed ? '[+]' : '[-]'}</span>
+                )}
             </Button>
         </span>
     );

src/StructuredYson/types.ts

@@ -14,6 +14,7 @@ export type UnipikaSettings = {
     maxStringSize?: number;
     omitStructNull?: boolean;
     treatValAsData?: boolean;
+    useIconsForCollapse?: boolean;
 
     validateSrcUrl?: (taggedTypeUrl: string) => boolean;
     normalizeUrl?: (url?: string) => string;