Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TreeView component #96

Draft
wants to merge 3 commits into
base: update_theme_behavior
Choose a base branch
from

Conversation

kdroidFilter
Copy link

Introduce a reusable TreeView component for hierarchical data display with expandable and collapsible nodes. Implemented the corresponding TreeViewScreen in the gallery for demonstration purposes. Includes a tree builder DSL for easy tree structure creation and ensures visual consistency with Fluent design.

Capture d’écran du 2024-12-10 21-43-48

Introduce a reusable TreeView component for hierarchical data display with expandable and collapsible nodes. Implemented the corresponding TreeViewScreen in the gallery for demonstration purposes. Includes a tree builder DSL for easy tree structure creation and ensures visual consistency with Fluent design.
@kdroidFilter kdroidFilter changed the title Add TreeView component and navigation screen Add TreeView component Dec 10, 2024
Introduced an optional `onClick` callback to `TreeElement` (both nodes and leaves) to handle custom click actions. Updated the tree builder DSL and composables to utilize this functionality, enabling more interactive tree components.
Modified the Tree component and TreeBuilder to include the expanded state as a parameter in the onClick callbacks. This allows nodes to differentiate actions based on their expanded or collapsed state, improving interactivity in the TreeView. Updated sample usage in TreeViewScreen to reflect these changes.
@kdroidFilter
Copy link
Author

@Konyaco @Sanlorng
This project is really too cool! 👍 I hope to be able to contribute a little bit, especially I would like to take care of the whole implementation of the rtl

@@ -0,0 +1,299 @@
package com.konyaco.fluent.component

import androidx.compose.animation.*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Import wildcard

import androidx.compose.foundation.clickable
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Import wildcard

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Import wildcard

object TreeNodeDefaults {
@Stable
@Composable
fun defaultNodeColors(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default color token should reference figma file, see https://www.figma.com/community/file/1440832812269040007/windows-ui-kit

}

@Composable
fun <T> TreeNodeColorScheme.schemeFor(state: VisualState): TreeNodeColor {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this function was exist in the VisualScheme.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this components should be move to .collection package.

val tree = remember {
buildTree {
node(data = "Root", onClick = { isExpanded ->
println("Root clicked, expanded: $isExpanded")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using Section(output = { Text(outputContent)} ) to show sample click event.

@Sanlorng
Copy link
Collaborator

Thank you for your contribution, but unfortunately, your PR cannot be merged at this time. Here are some reasons why:

  1. The branch you need to merge from should be forked from dev or master, and the PR should also be directed to the corresponding base branch. We apologize for not having noted this in the README yet.
  2. The design parameters for the controls should refer to the Windows UI Figma file.
  3. Using Column to build a list is not suitable for the TreeView scenario. It should be designed using LazyLayout or LazyColumn.
  4. The code related to interactions (e.g., if (visualState == VisualState.Hovered) color.backgroundColor else Color.Transparent and VisualScheme.schemeFor) is already included in the Fluent library, so you don’t need to write it again. detail
  5. The package imports at the top of the source code should not contain *, please specify the exact packages instead.

I hope these suggestions help. Thank you for your understanding and cooperation! 😊

If you have any questions or need further assistance, please feel free to let me know.

@kdroidFilter
Copy link
Author

Thank you very much for taking the time to detail all my mistakes! :) I admit that I was not aware that there was a figma 😅, I was just inspired by https://bdlukaa.github.io/fluent_ui/#/navigation/tree_view
I will try to fix this!

@kdroidFilter kdroidFilter marked this pull request as draft December 11, 2024 13:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants