feat: show container size

src/ReactUnipika/ReactUnipika.tsx

@@ -12,7 +12,7 @@
 
 export interface ReactUnipikaProps {
     settings?: UnipikaSettings;
     value: any;
     inline?: boolean;
     children?: React.ReactNode;
     extraTools?: React.ReactNode;
@@ -22,6 +22,8 @@
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
+    showContainerSize?: boolean;
+    initiallyCollapsed?: boolean;
 }
 
 const defaultUnipikaSettings = {
@@ -45,6 +47,8 @@
     toolbarStickyTop = 0,
     renderToolbar,
     collapseIconType,
+    showContainerSize,
+    initiallyCollapsed,
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -98,6 +102,8 @@
                     toolbarStickyTop={toolbarStickyTop}
                     renderToolbar={renderToolbar}
                     collapseIconType={collapseIconType}
+                    showContainerSize={showContainerSize}
+                    initiallyCollapsed={initiallyCollapsed}
                 />
             ) : (
                 <pre

src/ReactUnipika/__stories__/ReactUnipika.stories.tsx

@@ -37,3 +37,26 @@ export const WithContentAbove: StoryObj<ReactUnipikaProps> = {
         );
     },
 };
+
+export const WithContainerSize: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        showContainerSize: true,
+    },
+};
+
+export const WithContainerSizeCollapsed: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        showContainerSize: true,
+        initiallyCollapsed: true,
+    },
+};
+
+export const WithContainerSizeYson: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        settings: {format: 'yson'},
+        showContainerSize: true,
+    },
+};

src/ReactUnipika/__tests__/ReactUnipika.visual.test.tsx

@@ -75,3 +75,19 @@ test('ReactUnipika: with content above', async ({mount, expectScreenshot, page})
 
     await expectScreenshot({component: page});
 });
+
+test('ReactUnipika: json with container size', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithContainerSize />, {width: 1280});
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: json with container size collapsed initially', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithContainerSizeCollapsed />, {width: 1280});
+
+    await expectScreenshot({component: page});
+});

src/StructuredYson/Cell.tsx

@@ -14,6 +14,8 @@ import {ClickableText} from '../ClickableText/ClickableText';
 
 import {cn} from '../utils/classname';
 
+import i18n from './i18n';
+
 import './Cell.scss';
 
 const block = cn('g-ru-cell');
@@ -29,6 +31,7 @@ export interface CellProps {
     index: number;
     showFullText: (index: number) => void;
     collapseIconType?: CollapseIconType;
+    showContainerSize?: boolean;
 }
 
 export const JSON_VALUE_KEY = {
@@ -62,7 +65,18 @@ function getLevelOffsetSpaces(level: number) {
 
 export function Cell(props: CellProps) {
     const {
-        row: {level, open, close, key, value, hasDelimiter, path, collapsed, isAfterAttributes},
+        row: {
+            level,
+            open,
+            close,
+            key,
+            value,
+            hasDelimiter,
+            path,
+            collapsed,
+            isAfterAttributes,
+            size,
+        },
         settings,
         yson,
         onToggleCollapse,
@@ -104,6 +118,9 @@ export function Cell(props: CellProps) {
                 isAfterAttributes={isAfterAttributes}
             />
             {open && <OpenClose type={open} yson={yson} settings={settings} />}
+            {props.showContainerSize && size !== undefined && (
+                <span className={'unipika'}>{i18n('context_items-count', {count: size})}</span>
+            )}
             {value !== undefined && (
                 <Value
                     text={value}
@@ -114,7 +131,7 @@ export function Cell(props: CellProps) {
                     showFullText={handleShowFullText}
                 />
             )}
-            {collapsed && <span className={'unipika'}>...</span>}
+            {collapsed && size === undefined && <span className={'unipika'}>...</span>}
             {close && <OpenClose type={close} yson={yson} settings={settings} close />}
             {hasDelimiter && <SlaveText text={yson ? ';' : ','} />}
         </div>

src/StructuredYson/StructuredYson.tsx

@@ -39,6 +39,8 @@
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
+    showContainerSize?: boolean;
+    initiallyCollapsed?: boolean;
 }
 
 interface State {
@@ -99,22 +101,31 @@
         return isEmpty_(res) ? null : res;
     }
 
-    state: State = {
-        value: {} as any, // valid value will be provided from getDerivedStateFromProps call
-        flattenResult: {data: [], searchIndex: {}},
-        settings: {},
-        yson: true,
-        collapsedState: {},
-
-        filter: '',
-        matchIndex: -1,
-        matchedRows: [],
-    };
+    state: State = this.getInitialState();
 
     tableRef: TableProps['scrollToRef'] = React.createRef();
     searchRef = React.createRef<HTMLInputElement>();
 
+    getInitialState(): State {
+        const {initiallyCollapsed, value, settings} = this.props;
+        const collapsedState = initiallyCollapsed
+            ? this.getFullyCollapsedState(value, settings.format !== 'yson')
+            : {};
+
+        return {
+            value: {} as any, // valid value will be provided from getDerivedStateFromProps call
+            flattenResult: {data: [], searchIndex: {}},
+            settings: {},
+            yson: true,
+            collapsedState,
+
+            filter: '',
+            matchIndex: -1,
+            matchedRows: [],
+        };
+    }
+
     onTogglePathCollapse = (path: string) => {
         const {collapsedState: oldState} = this.state;
         const collapsedState = {...oldState};
         if (collapsedState[path]) {
@@ -155,7 +166,7 @@
             settings,
             filter,
         } = this.state;
-        const {collapseIconType} = this.props;
+        const {collapseIconType, showContainerSize} = this.props;
 
         return (
             <Table
@@ -168,6 +179,7 @@
                 onShowFullText={this.onShowFullText}
                 scrollToRef={this.tableRef}
                 collapseIconType={collapseIconType}
+                showContainerSize={showContainerSize}
             />
         );
     }
@@ -179,17 +191,7 @@
 
     onCollapseAll = () => {
         const {value, yson} = this.state;
-        const {data} = flattenUnipika(value, {isJson: !yson});
-        const collapsedState = reduce_(
-            data,
-            (acc, {path}) => {
-                if (path) {
-                    acc[path] = true;
-                }
-                return acc;
-            },
-            {} as CollapsedState,
-        );
+        const collapsedState = this.getFullyCollapsedState(value, !yson);
         this.updateState({collapsedState});
     };
 
@@ -324,4 +326,18 @@
             </React.Fragment>
         );
     }
+
+    getFullyCollapsedState(value: UnipikaValue, isJson: boolean): CollapsedState {
+        const {data} = flattenUnipika(value, {isJson});
+        return reduce_<UnipikaFlattenTreeItem, CollapsedState>(
+            data,
+            (acc, {path}) => {
+                if (path) {
+                    acc[path] = true;
+                }
+                return acc;
+            },
+            {},
+        );
+    }
 }

src/StructuredYson/Table.tsx

@@ -20,6 +20,7 @@ export interface TableProps {
     onShowFullText: (index: number) => void;
     scrollToRef: React.RefObject<null | {scrollToIndex(index: number): void}>;
     collapseIconType?: CollapseIconType;
+    showContainerSize?: boolean;
 }
 
 export const Table: React.FC<TableProps> = ({
@@ -32,6 +33,7 @@ export const Table: React.FC<TableProps> = ({
     onShowFullText,
     scrollToRef,
     collapseIconType,
+    showContainerSize,
 }) => {
     const renderCell: ColumnDef<UnipikaFlattenTreeItem>['cell'] = ({row}) => {
         const {original, index} = row;
@@ -46,6 +48,7 @@ export const Table: React.FC<TableProps> = ({
                 showFullText={onShowFullText}
                 index={index}
                 collapseIconType={collapseIconType}
+                showContainerSize={showContainerSize}
             />
         );
     };

src/StructuredYson/i18n/en.json

@@ -0,0 +1,14 @@
+{
+  "action_collapse-all": "Collapse all",
+  "action_expand-all": "Expand all",
+  "action_next": "Next",
+  "action_back": "Back",
+  "description_search": "Search...",
+  "description_matched-rows": "Matched rows",
+  "context_items-count": [
+    " {{count}} item ",
+    " {{count}} items ",
+    " {{count}} items ",
+    " {{count}} items "
+  ]
+}

src/StructuredYson/i18n/index.ts

@@ -0,0 +1,8 @@
+import {makeKeyset} from '../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'structured-yson';
+
+export default makeKeyset(COMPONENT, {ru, en});

src/StructuredYson/i18n/ru.json

@@ -0,0 +1,14 @@
+{
+  "action_collapse-all": "Свернуть все",
+  "action_expand-all": "Развернуть все",
+  "action_next": "Далее",
+  "action_back": "Назад",
+  "description_search": "Поиск...",
+  "description_matched-rows": "Совпадающие строки",
+  "context_items-count": [
+    " {{count}} элемент ",
+    " {{count}} элемента ",
+    " {{count}} элементов ",
+    " {{count}} элементов "
+  ]
+}