feat: add initially collapsed and tests

Author: Raubzeug

src/ReactUnipika/ReactUnipika.tsx

@@ -23,6 +23,7 @@ export interface ReactUnipikaProps {
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
     showContainerSize?: boolean;
+    initiallyCollapsed?: boolean;
 }
 
 const defaultUnipikaSettings = {
@@ -47,6 +48,7 @@ export function ReactUnipika({
     renderToolbar,
     collapseIconType,
     showContainerSize,
+    initiallyCollapsed,
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -101,6 +103,7 @@ export function ReactUnipika({
                     renderToolbar={renderToolbar}
                     collapseIconType={collapseIconType}
                     showContainerSize={showContainerSize}
+                    initiallyCollapsed={initiallyCollapsed}
                 />
             ) : (
                 <pre

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-json-with-container-size-collapsed-initially-dark-chromium-1-chromium-linux.png

@@ -45,6 +45,14 @@ export const WithContainerSize: StoryObj<ReactUnipikaProps> = {
     },
 };
 
+export const WithContainerSizeCollapsed: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        showContainerSize: true,
+        initiallyCollapsed: true,
+    },
+};
+
 export const WithContainerSizeYson: StoryObj<ReactUnipikaProps> = {
     args: {
         value: data,

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-json-with-container-size-collapsed-initially-dark-webkit-1-webkit-linux.png

@@ -81,3 +81,13 @@ test('ReactUnipika: json with container size', async ({mount, expectScreenshot,
 
     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/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-json-with-container-size-collapsed-initially-light-chromium-1-chromium-linux.png

@@ -40,6 +40,7 @@ interface Props {
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
     showContainerSize?: boolean;
+    initiallyCollapsed?: boolean;
 }
 
 interface State {
@@ -100,21 +101,30 @@ export class StructuredYson extends React.PureComponent<Props, State> {
         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};
@@ -181,17 +191,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
 
     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});
     };
 
@@ -326,4 +326,18 @@ export class StructuredYson extends React.PureComponent<Props, State> {
             </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;
+            },
+            {},
+        );
+    }
 }