refactor(InfoViewer): migrate to ts, adjust types

Author: ariser

src/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -1,5 +1,5 @@
 import type {TEvDescribeSchemeResult, TIndexDescription} from '../../types/api/schema';
-import {InfoViewer, createInfoFormatter} from '../InfoViewer';
+import {InfoViewer, createInfoFormatter, InfoViewerItem} from '../InfoViewer';
 
 const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
     'Type',
@@ -34,7 +34,7 @@ export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
-    const info: Array<{label?: string, value?: unknown}> = [];
+    const info: Array<InfoViewerItem> = [];
 
     let key: keyof TIndexDescription;
     for (key in TableIndex) {

src/components/InfoViewer/InfoViewer.js

@@ -0,0 +1,42 @@
+import type {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+import './InfoViewer.scss';
+
+export interface InfoViewerItem {
+    label: string;
+    value: ReactNode;
+}
+
+interface InfoViewerProps {
+    title?: string;
+    info?: InfoViewerItem[];
+    dots?: boolean;
+    className?: string;
+}
+
+const b = cn('info-viewer');
+
+const InfoViewer = ({title, info, dots = true, className}: InfoViewerProps) => (
+    <div className={b(null, className)}>
+        {title && <div className={b('title')}>{title}</div>}
+        {info && info.length > 0 ? (
+            <div className={b('items')}>
+                {info.map((data, infoIndex) => (
+                    <div className={b('row')} key={data.label + infoIndex}>
+                        <div className={b('label')}>
+                            {data.label}
+                            {dots && <div className={b('dots')} />}
+                        </div>
+
+                        <div className={b('value')}>{data.value}</div>
+                    </div>
+                ))}
+            </div>
+        ) : (
+            <>no {title} data</>
+        )}
+    </div>
+);
+
+export default InfoViewer;

src/components/InfoViewer/InfoViewer.tsx

@@ -2,3 +2,4 @@ import InfoViewer from './InfoViewer';
 
 export {InfoViewer};
 export * from './utils';
+export type {InfoViewerItem} from './InfoViewer';

src/components/InfoViewer/index.ts

@@ -1,9 +1,11 @@
+import type {ReactNode} from "react";
+
 type LabelMap<T> = {
     [label in keyof T]?: string;
 }
 
 type ValueFormatters<T> = {
-    [label in keyof T]?: (value: T[label]) => string | undefined;
+    [label in keyof T]?: (value: T[label]) => ReactNode;
 }
 
 function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
@@ -14,18 +16,18 @@ function formatValue<Shape, Key extends keyof Shape>(
     label: Key,
     value: Shape[Key],
     formatters: ValueFormatters<Shape>,
-    defaultFormatter?: (value: Shape[Key]) => string | undefined,
+    defaultFormatter?: (value: Shape[Key]) => ReactNode,
 ) {
     const formatter = formatters[label] || defaultFormatter;
     const formattedValue = formatter ? formatter(value) : value;
 
-    return String(formattedValue ?? '');
+    return formattedValue;
 }
 
 interface CreateInfoFormatterOptions<Shape> {
     values?: ValueFormatters<Shape>,
     labels?: LabelMap<Shape>,
-    defaultValueFormatter?: (value: Shape[keyof Shape]) => string | undefined,
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => ReactNode,
 }
 
 export function createInfoFormatter<Shape extends Record<string, any>>({