style(accordion-web): change how renderContent initialized

Author: Illia Obukhau

packages/pluggableWidgets/accordion-web/src/Accordion.editorPreview.tsx

@@ -32,7 +32,8 @@ export function preview(props: AccordionPreviewProps): ReactElement {
                           renderer: ({}: { caption: string; children: ReactElement }) => (
                               <div>Add groups in order to place widgets here.</div>
                           )
-                      }
+                      },
+                      loadContent: "always"
                   } as GroupsPreviewType
               ];
 
@@ -50,6 +51,7 @@ export function preview(props: AccordionPreviewProps): ReactElement {
                 <div />
             </group.content.renderer>
         ),
+        loadContent: group.loadContent,
         visible: group.visible as unknown as boolean,
         dynamicClassName: group.dynamicClass.slice(1, -1) // expression result is surrounded by single quotes
     }));

packages/pluggableWidgets/accordion-web/src/components/AccordionGroup.tsx

@@ -1,6 +1,7 @@
 import { createElement, KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import "../ui/accordion-main.scss";
+import { LoadContentEnum } from "typings/AccordionProps";
 
 /* eslint-disable no-unused-vars */
 export const enum Target {
@@ -27,7 +28,7 @@ export interface AccordionGroupProps {
     animateContent?: boolean;
     generateHeaderIcon?: (collapsed: boolean) => ReactElement;
     showHeaderIcon?: "right" | "left" | "no";
-    loadContent?: "always" | "whenExpanded";
+    loadContent: LoadContentEnum;
 }
 
 export function AccordionGroup(props: AccordionGroupProps): ReactElement | null {
@@ -47,10 +48,9 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
     const rootRef = useRef<HTMLDivElement>(null);
     const contentWrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
-    const lazyRender = loadContent === "whenExpanded";
-    const renderContent = useRef(false);
+    const renderContent = useRef(loadContent === "always");
 
-    renderContent.current ||= !lazyRender || !renderCollapsed;
+    renderContent.current ||= !renderCollapsed;
 
     const completeTransitioning = useCallback((): void => {
         if (contentWrapperRef.current && rootRef.current && animatingContent.current) {
@@ -191,7 +191,7 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
                 aria-labelledby={`${props.id}HeaderButton`}
             >
                 <div ref={contentRef} className={"widget-accordion-group-content"}>
-                    {renderContent.current ? props.content : null}
+                    {renderContent.current && props.content}
                 </div>
             </div>
         </section>

packages/pluggableWidgets/accordion-web/src/components/__tests__/Accordion.spec.tsx

@@ -12,8 +12,20 @@ describe("Accordion", () => {
             style: { height: "500px" },
             tabIndex: 1,
             groups: [
-                { header: "header", content: <span>content</span>, initiallyCollapsed: true, visible: true },
-                { header: "header2", content: <span>content2</span>, initiallyCollapsed: true, visible: false }
+                {
+                    header: "header",
+                    content: <span>content</span>,
+                    initiallyCollapsed: true,
+                    visible: true,
+                    loadContent: "always"
+                },
+                {
+                    header: "header2",
+                    content: <span>content2</span>,
+                    initiallyCollapsed: true,
+                    visible: false,
+                    loadContent: "always"
+                }
             ],
             collapsible,
             singleExpandedGroup,
@@ -84,7 +96,7 @@ describe("Accordion", () => {
         it("gives the first accordion group button focus on Home key down", () => {
             const groups = [
                 ...defaultProps.groups,
-                { header: "header3", content: <span>content3</span>, visible: true }
+                { header: "header3", content: <span>content3</span>, visible: true, loadContent: "always" as const }
             ];
             groups[1].visible = true;
 
@@ -109,7 +121,7 @@ describe("Accordion", () => {
         it("gives the last accordion group button focus on End key down", () => {
             const groups = [
                 ...defaultProps.groups,
-                { header: "header3", content: <span>content3</span>, visible: true }
+                { header: "header3", content: <span>content3</span>, visible: true, loadContent: "always" as const }
             ];
             groups[1].visible = true;
 
@@ -134,7 +146,7 @@ describe("Accordion", () => {
         it("remains focus on the last accordion group button on arrow down key down", () => {
             const groups = [
                 ...defaultProps.groups,
-                { header: "header3", content: <span>content3</span>, visible: true }
+                { header: "header3", content: <span>content3</span>, visible: true, loadContent: "always" as const }
             ];
             groups[1].visible = true;
 
@@ -253,7 +265,13 @@ describe("Accordion", () => {
 
         it("inits with group initially collapsed settings", () => {
             const groups = [...defaultProps.groups].map(group => ({ ...group, initiallyCollapsed: false }));
-            groups.push({ header: "header3", content: <span>content3</span>, initiallyCollapsed: true, visible: true });
+            groups.push({
+                header: "header3",
+                content: <span>content3</span>,
+                initiallyCollapsed: true,
+                visible: true,
+                loadContent: "always" as const
+            });
 
             const accordion = shallow(<Accordion {...defaultProps} groups={groups} />);
             expect(accordion).toMatchSnapshot();

packages/pluggableWidgets/accordion-web/src/components/__tests__/AccordionGroup.spec.tsx

@@ -16,7 +16,8 @@ describe("AccordionGroup", () => {
             collapsible: false,
             animateContent: false, // testing animations with Enzyme doesn't work
             generateHeaderIcon: jest.fn(),
-            showHeaderIcon: "right"
+            showHeaderIcon: "right",
+            loadContent: "always"
         };
     });