Using dynamic styling to render Tree deeper than 10 levels.

[jikim-msft]

Description

Inline Styling Official Doc

FluidFramework is using Fluent v9/tree to visualize data structures in its developer tools.

Current Design

• Pass in children props & custom header component to the TreeItem component
• children props is then wrapped by the TreeItem component
• header is wrapped by the TreeItemLayout component.

Current Code

@fluentui/react-components: 9.19.1

For more detail: Visit Here

// TreeView.tsx
export function TreeView(props: TreeViewProps): React.ReactElement {
	const { containerKey, label, node } = props;
	const metadata = JSON.stringify(node.metadata);

        // Constructs list of React.Element (i.e., React.JSX.Element[])
	const childNodes = Object.entries(node.children).map(([key, fluidObject]) => (
		<TreeDataView key={key} containerKey={containerKey} label={key} node={fluidObject} />
	)); 

        // Constructs React.ReactElement component
	const header = (
		<TreeHeader label={label} nodeTypeMetadata={node.typeMetadata} metadata={metadata} />
	);

	return <TreeItem header={header}>{childNodes}</TreeItem>;
}

// TreeItem.tsx
/**
 * Input to {@link TreeItem}
 */
export type TreeItemProps = React.PropsWithChildren<{
	/**
	 * Header label created by {@link TreeHeader}.
	 */
	header: React.ReactElement | string;

	// TODO: startOpen
}>;

/**
 * Constructs a tree element from the provided header and child contents.
 *
 * Intended to be used inside an outer {@link @fluentui/react-components/unstable#Tree} context.
 */
export function TreeItem(props: TreeItemProps): React.ReactElement {
	const { children, header } = props;

	const isLeaf = React.Children.count(children) === 0;

	return (
		<FluentTreeItem leaf={isLeaf} data-testid="tree-button">
			<FluentTreeItemLayout>{header}</FluentTreeItemLayout>

			<FluentTree>{children}</FluentTree>
		</FluentTreeItem>
	);
}

Objective

• Apply inline styling tree item level to create a dynamic tree item levels.

Changed Code

@fluentui/react-components: 9.47.3

• TreeView.tsx stays the same.

// TreeItem.tsx
/*!
 * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
 * Licensed under the MIT License.
 */

import {
	Tree as FluentTree,
	TreeItem as FluentTreeItem,
	TreeItemLayout as FluentTreeItemLayout,
	treeItemLevelToken,
	useSubtreeContext_unstable,
} from "@fluentui/react-components";
import React from "react";

/**
 * Input to {@link TreeItem}
 */
export type TreeItemProps = React.PropsWithChildren<{
	/**
	 * Header label created by {@link TreeHeader}.
	 */
	header: React.ReactElement | string;

	// TODO: startOpen
}>;

/**
 * Constructs a tree element from the provided header and child contents.
 *
 * Intended to be used inside an outer {@link @fluentui/react-components/unstable#Tree} context.
 */
export function TreeItem(props: TreeItemProps): React.ReactElement {
	const { children, header } = props;
	const { level } = useSubtreeContext_unstable();

	return (
		<FluentTreeItem
			value={level}
			itemType="branch"
			style={{ [treeItemLevelToken]: level }}
			data-testid="tree-button"
		>
			<FluentTreeItemLayout>{header}</FluentTreeItemLayout>

			<FluentTree>{children}</FluentTree>
		</FluentTreeItem>
	);
}

• At first, I thought applying the inline styling with different levels will override the static styling. However, failed at runtime level.

// TreeItem.tsx
export function TreeItem(props: TreeItemProps): React.ReactElement {
	const { children, header } = props;
	const { level } = useSubtreeContext_unstable();
	const open = useTreeItemContext_unstable((ctx) => ctx.open || level === 1);

	return (
		<FluentTreeItem value={level} itemType="branch" style={{ [treeItemLevelToken]: level }}>
			<FluentTreeItemLayout>{header}</FluentTreeItemLayout>

			{open && (
				<FluentTree>
					<TreeItemheader={header}> {children} </TreeItem>
				</FluentTree>
			)}
		</FluentTreeItem>
	);
}

• Therefore, I tried emulating the logic as much as possible from the official documentation, but the above approach also returned a runtime error.

Error

TL;DR

How can I correctly apply the dynamic styling (in order to support nested styling for 10+ tree items), when I am passing separate children and header props to the TreeItem component?

[khmakoto]

The error shown seems to be happening on an event and does not seem to be related to inline styles. Is there a way you could share a codepen, codesandbox or stackblitz with a minimal repro for us to better understand what's happening here?