fix: treenode showing infinite load spinner and change hasChildren to expression

Author: gjulivan

packages/pluggableWidgets/tree-node-web/src/TreeNode.editorPreview.tsx

@@ -1,5 +1,5 @@
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { mapPreviewIconToWebIcon } from "@mendix/widget-plugin-platform/preview/map-icon";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { GUID } from "mendix";
 import { ReactElement } from "react";
 import { TreeNodePreviewProps } from "../typings/TreeNodeProps";
@@ -32,10 +32,10 @@ export function preview(props: TreeNodePreviewProps): ReactElement | null {
                         <props.children.renderer caption="Place other tree nodes here.">
                             <div />
                         </props.children.renderer>
-                    )
+                    ),
+                    isUserDefinedLeafNode: !props.hasChildren
                 }
             ]}
-            isUserDefinedLeafNode={!props.hasChildren}
             startExpanded
             showCustomIcon={Boolean(props.expandedIcon) || Boolean(props.collapsedIcon)}
             iconPlacement={props.showIcon}

packages/pluggableWidgets/tree-node-web/src/TreeNode.tsx

@@ -8,7 +8,8 @@ function mapDataSourceItemToTreeNodeItem(item: ObjectItem, props: TreeNodeContai
         id: item.id,
         headerContent:
             props.headerType === "text" ? props.headerCaption?.get(item).value : props.headerContent?.get(item),
-        bodyContent: props.children?.get(item)
+        bodyContent: props.children?.get(item),
+        isUserDefinedLeafNode: props.hasChildren?.get(item).value === false
     };
 }
 
@@ -36,7 +37,6 @@ export function TreeNode(props: TreeNodeContainerProps): ReactElement {
             class={props.class}
             style={props.style}
             items={treeNodeItems}
-            isUserDefinedLeafNode={!props.hasChildren}
             startExpanded={props.startExpanded}
             showCustomIcon={Boolean(props.expandedIcon) || Boolean(props.collapsedIcon)}
             iconPlacement={props.showIcon}

packages/pluggableWidgets/tree-node-web/src/TreeNode.xml

@@ -40,9 +40,10 @@
                     <caption>Header caption</caption>
                     <description />
                 </property>
-                <property key="hasChildren" type="boolean" defaultValue="true">
+                <property key="hasChildren" type="expression" dataSource="datasource">
                     <caption>Has children</caption>
                     <description>Indicate whether the node has children or is an end node. When set to yes, a composable region becomes available to define the child nodes.</description>
+                    <returnType type="Boolean" />
                 </property>
                 <property key="startExpanded" type="boolean" defaultValue="false">
                     <caption>Start expanded</caption>

packages/pluggableWidgets/tree-node-web/src/components/TreeNode.tsx

@@ -13,13 +13,13 @@ import { TreeNodeBranchContext, useInformParentContextOfChildNodes } from "./Tre
 export interface TreeNodeItem extends ObjectItem {
     headerContent: ReactNode;
     bodyContent: ReactNode;
+    isUserDefinedLeafNode: boolean;
 }
 
 export interface TreeNodeProps extends Pick<TreeNodeContainerProps, "tabIndex"> {
     class: string;
     style?: CSSProperties;
     items: TreeNodeItem[] | null;
-    isUserDefinedLeafNode: TreeNodeBranchProps["isUserDefinedLeafNode"];
     startExpanded: TreeNodeBranchProps["startExpanded"];
     showCustomIcon: boolean;
     iconPlacement: TreeNodeBranchProps["iconPlacement"];
@@ -34,7 +34,6 @@ export function TreeNode({
     class: className,
     items,
     style,
-    isUserDefinedLeafNode,
     showCustomIcon,
     startExpanded,
     iconPlacement,
@@ -79,22 +78,25 @@ export function TreeNode({
             data-focusindex={tabIndex || 0}
             role={level === 0 ? "tree" : "group"}
         >
-            {items.map(({ id, headerContent, bodyContent }) => (
-                <TreeNodeBranch
-                    key={id}
-                    id={id}
-                    headerContent={headerContent}
-                    isUserDefinedLeafNode={isUserDefinedLeafNode}
-                    startExpanded={startExpanded}
-                    iconPlacement={iconPlacement}
-                    renderHeaderIcon={renderHeaderIconCallback}
-                    changeFocus={changeTreeNodeBranchHeaderFocus}
-                    animateTreeNodeContent={animateTreeNodeContent}
-                    openNodeOn={openNodeOn}
-                >
-                    {bodyContent}
-                </TreeNodeBranch>
-            ))}
+            {items.map(item => {
+                const { id, headerContent, bodyContent, isUserDefinedLeafNode } = item;
+                return (
+                    <TreeNodeBranch
+                        key={id}
+                        id={id}
+                        headerContent={headerContent}
+                        isUserDefinedLeafNode={isUserDefinedLeafNode}
+                        startExpanded={startExpanded}
+                        iconPlacement={iconPlacement}
+                        renderHeaderIcon={renderHeaderIconCallback}
+                        changeFocus={changeTreeNodeBranchHeaderFocus}
+                        animateTreeNodeContent={animateTreeNodeContent}
+                        openNodeOn={openNodeOn}
+                    >
+                        {bodyContent}
+                    </TreeNodeBranch>
+                );
+            })}
         </ul>
     );
 }

packages/pluggableWidgets/tree-node-web/src/components/hooks/lazyLoading.ts

@@ -10,7 +10,7 @@ export const useTreeNodeLazyLoading = (
     hasNestedTreeNode: () => boolean;
 } => {
     const hasNestedTreeNode = useCallback(
-        () => treeNodeBranchBody.current?.lastElementChild?.className.includes("widget-tree-node") ?? true,
+        () => treeNodeBranchBody.current?.lastElementChild?.className.includes("widget-tree-node") ?? false,
         []
     );
 

packages/pluggableWidgets/tree-node-web/typings/TreeNodeProps.d.ts

@@ -23,7 +23,7 @@ export interface TreeNodeContainerProps {
     openNodeOn: OpenNodeOnEnum;
     headerContent?: ListWidgetValue;
     headerCaption?: ListExpressionValue<string>;
-    hasChildren: boolean;
+    hasChildren: ListExpressionValue<boolean>;
     startExpanded: boolean;
     children?: ListWidgetValue;
     animate: boolean;
@@ -50,7 +50,7 @@ export interface TreeNodePreviewProps {
     openNodeOn: OpenNodeOnEnum;
     headerContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     headerCaption: string;
-    hasChildren: boolean;
+    hasChildren: string;
     startExpanded: boolean;
     children: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     animate: boolean;