ywana-core8 0.1.82 → 0.1.84

package/src/html/tree.js

@@ -1,10 +1,20 @@
-import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { useState, useCallback, useEffect, useMemo, useRef, createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text, TEXTFORMATS } from './text'
 import { TextField } from './textfield'
 import './tree.css'
 
+// Context for tree state
+const TreeContext = createContext({
+    multiSelect: false,
+    selectedItems: [],
+    onMultiSelect: null,
+    searchTerm: '',
+    forceExpandAll: false,
+    forceCollapseAll: false
+})
+
 /**
  * Enhanced Tree component with improved functionality while maintaining 100% compatibility
  */
@@ -22,8 +32,7 @@ export const Tree = (props) => {
         sortDirection = 'asc',
         multiSelect = false,
         onMultiSelect,
-        expandAll = false,
-        collapseAll = false,
+        showExpandIcon = false,
         onExpandAll,
         onCollapseAll,
         disabled = false,
@@ -40,6 +49,9 @@ export const Tree = (props) => {
     const [searchTerm, setSearchTerm] = useState('')
     const [selectedItems, setSelectedItems] = useState([])
     const [expandedNodes, setExpandedNodes] = useState(new Set())
+    const [allExpanded, setAllExpanded] = useState(false)
+    const [forceExpandAll, setForceExpandAll] = useState(false)
+    const [forceCollapseAll, setForceCollapseAll] = useState(false)
     const treeRef = useRef(null)
 
     // Validate props
@@ -52,6 +64,73 @@ export const Tree = (props) => {
         setSearchTerm(value)
     }, [])
 
+    // Apply expansion state to nodes based on current tree state
+    const applyExpansionState = useCallback((nodeElements) => {
+        return React.Children.toArray(nodeElements).map(child => {
+            if (!React.isValidElement(child)) return child
+
+            // If it's a TreeNode, apply the current expansion state
+            if (child.type?.displayName === 'TreeNode' || child.props.hasOwnProperty('open')) {
+                const processedChildren = child.props.children ? applyExpansionState(child.props.children) : child.props.children
+
+                return React.cloneElement(child, {
+                    ...child.props,
+                    open: allExpanded, // Apply current expansion state
+                    children: processedChildren
+                })
+            }
+
+            return child
+        })
+    }, [allExpanded])
+
+    // Filter nodes based on search term and auto-expand matching nodes
+    const filterNodes = useCallback((nodeElements, searchTerm) => {
+        if (!searchTerm.trim()) {
+            // When search is cleared, apply current expansion state
+            return applyExpansionState(nodeElements)
+        }
+
+        return React.Children.toArray(nodeElements).map(child => {
+            if (!React.isValidElement(child)) return child
+
+            // Check if current node matches search
+            const label = child.props.label || ''
+            const matches = searchBy.some(field => {
+                const value = child.props[field] || label
+                return typeof value === 'string' &&
+                       value.toLowerCase().includes(searchTerm.toLowerCase())
+            })
+
+            // Check if any children match (recursive)
+            let hasMatchingChildren = false
+            let filteredChildren = child.props.children
+
+            if (child.props.children) {
+                filteredChildren = filterNodes(child.props.children, searchTerm)
+                hasMatchingChildren = React.Children.count(filteredChildren) > 0
+            }
+
+            // If current node or children match, include it and auto-expand
+            if (matches || hasMatchingChildren) {
+                // Clone the element and force it to be open if it's a TreeNode
+                if (child.type?.displayName === 'TreeNode' || child.props.hasOwnProperty('open')) {
+                    return React.cloneElement(child, {
+                        ...child.props,
+                        open: true, // Auto-expand nodes with matches during search
+                        children: filteredChildren
+                    })
+                }
+                return React.cloneElement(child, {
+                    ...child.props,
+                    children: filteredChildren
+                })
+            }
+
+            return null
+        }).filter(Boolean)
+    }, [searchBy, applyExpansionState])
+
     // Handle multi-selection
     const handleMultiSelect = useCallback((id, selected) => {
         if (!multiSelect) return
@@ -68,16 +147,23 @@ export const Tree = (props) => {
         })
     }, [multiSelect, onMultiSelect])
 
-    // Handle expand/collapse all
-    const handleExpandAll = useCallback(() => {
-        if (onExpandAll) onExpandAll()
-        // Implementation would depend on tree structure
-    }, [onExpandAll])
-
-    const handleCollapseAll = useCallback(() => {
-        if (onCollapseAll) onCollapseAll()
-        // Implementation would depend on tree structure
-    }, [onCollapseAll])
+    // Handle expand/collapse toggle - using context to propagate to all TreeNodes
+    const handleExpandToggle = useCallback(() => {
+        const newState = !allExpanded
+        setAllExpanded(newState)
+
+        if (newState) {
+            if (onExpandAll) onExpandAll()
+            // Trigger expand all via context
+            setForceExpandAll(true)
+            setTimeout(() => setForceExpandAll(false), 100)
+        } else {
+            if (onCollapseAll) onCollapseAll()
+            // Trigger collapse all via context
+            setForceCollapseAll(true)
+            setTimeout(() => setForceCollapseAll(false), 100)
+        }
+    }, [allExpanded, onExpandAll, onCollapseAll])
 
     // Generate CSS classes
     const cssClasses = [
@@ -134,58 +220,61 @@ export const Tree = (props) => {
         )
     }
 
+    const contextValue = {
+        multiSelect,
+        selectedItems,
+        onMultiSelect: handleMultiSelect,
+        searchTerm,
+        forceExpandAll,
+        forceCollapseAll
+    }
+
     return (
-        <div
-            className={cssClasses}
-            style={style}
-            ref={treeRef}
-            {...ariaAttributes}
-            {...restProps}
-        >
-            {searchable && (
-                <div className="tree__search">
-                    <TextField
-                        id="tree-search"
-                        placeholder={searchPlaceholder}
-                        value={searchTerm}
-                        onChange={handleSearch}
-                        icon="search"
-                        outlined={true}
-                        size="small"
-                    />
-                </div>
-            )}
+        <TreeContext.Provider value={contextValue}>
+            <div
+                className={cssClasses}
+                style={style}
+                ref={treeRef}
+                {...ariaAttributes}
+                {...restProps}
+            >
+                {/* Header with search and expand controls */}
+                {(searchable || showExpandIcon) && (
+                    <div className={`tree__header ${!searchable && showExpandIcon ? 'tree__header--expand-only' : ''}`}>
+                        {searchable && (
+                            <div className="tree__search">
+                                <TextField
+                                    id="tree-search"
+                                    placeholder={searchPlaceholder}
+                                    value={searchTerm}
+                                    onChange={handleSearch}
+                                    icon="search"
+                                    outlined={true}
+                                    size="small"
+                                />
+                            </div>
+                        )}
+
+                        {showExpandIcon && (
+                            <div className="tree__expand-control">
+                                <Icon
+                                    icon={allExpanded ? "unfold_less" : "unfold_more"}
+                                    size="small"
+                                    clickable
+                                    action={handleExpandToggle}
+                                    tooltip={allExpanded ? "Collapse all" : "Expand all"}
+                                />
+                            </div>
+                        )}
+                    </div>
+                )}
 
-            {(expandAll || collapseAll) && (
-                <div className="tree__controls">
-                    {expandAll && (
-                        <button
-                            className="tree__control-button"
-                            onClick={handleExpandAll}
-                            aria-label="Expand all nodes"
-                        >
-                            <Icon icon="unfold_more" size="small" />
-                            <Text size="sm">Expand All</Text>
-                        </button>
-                    )}
-                    {collapseAll && (
-                        <button
-                            className="tree__control-button"
-                            onClick={handleCollapseAll}
-                            aria-label="Collapse all nodes"
-                        >
-                            <Icon icon="unfold_less" size="small" />
-                            <Text size="sm">Collapse All</Text>
-                        </button>
-                    )}
+                <div className="tree__content">
+                    {nodes}
+                    {searchable ? filterNodes(children, searchTerm) : applyExpansionState(children)}
                 </div>
-            )}
-
-            <div className="tree__content">
-                {nodes}
-                {children}
             </div>
-        </div>
+        </TreeContext.Provider>
     )
 }
 
@@ -222,11 +311,36 @@ export const TreeNode = (props) => {
     const [isDragging, setIsDragging] = useState(false)
     const nodeRef = useRef(null)
 
+    // Get tree context for forced expand/collapse
+    const treeContext = useContext(TreeContext)
+    const { forceExpandAll, forceCollapseAll } = treeContext
+
     // Sync with open prop
     useEffect(() => {
         setIsOpen(open)
     }, [open])
 
+    // Handle forced expand/collapse from tree context
+    useEffect(() => {
+        if (forceExpandAll && expandable) {
+            setIsOpen(true)
+            // Also update the DOM element
+            if (nodeRef.current) {
+                nodeRef.current.open = true
+            }
+        }
+    }, [forceExpandAll, expandable])
+
+    useEffect(() => {
+        if (forceCollapseAll && expandable) {
+            setIsOpen(false)
+            // Also update the DOM element
+            if (nodeRef.current) {
+                nodeRef.current.open = false
+            }
+        }
+    }, [forceCollapseAll, expandable])
+
     // Handle selection (maintaining original behavior)
     const handleSelect = useCallback((event) => {
         if (disabled) return
@@ -235,13 +349,13 @@ export const TreeNode = (props) => {
         if (onSelect) onSelect(id)
     }, [disabled, onSelect, id])
 
-    // Handle toggle
+    // Handle toggle - sync with details element
     const handleToggle = useCallback((event) => {
         if (disabled || !expandable) return
 
-        event.preventDefault()
-        event.stopPropagation()
-        setIsOpen(prev => !prev)
+        // Sync our state with the details element
+        const detailsElement = event.currentTarget
+        setIsOpen(detailsElement.open)
     }, [disabled, expandable])
 
     // Handle keyboard interaction
@@ -334,16 +448,24 @@ export const TreeNode = (props) => {
             onDragEnd={handleDragEnd}
             onDrop={handleDrop}
             onDragOver={handleDragOver}
+            onToggle={handleToggle}
             {...restProps}
         >
             <summary
                 className="tree-item"
                 onClick={(event) => {
-                    // Si se hace click en el área general del nodo (no en el label), toggle
-                    if (event.target === event.currentTarget ||
-                        event.target.closest('.tree-node__toggle')) {
-                        handleToggle(event)
+                    // Si se hace click en el toggle, permitir el comportamiento natural
+                    if (event.target.closest('.tree-node__toggle')) {
+                        // No hacer nada, dejar que el details maneje el toggle
+                        return
                     }
+
+                    // Si hay onSelect y se hace click fuera del toggle, seleccionar
+                    if (onSelect) {
+                        event.preventDefault() // Prevenir el toggle del details
+                        handleSelect(event)
+                    }
+                    // Si no hay onSelect, permitir el comportamiento natural del details
                 }}
                 onKeyDown={handleKeyDown}
                 {...ariaAttributes}
@@ -351,13 +473,7 @@ export const TreeNode = (props) => {
             >
                 {/* Expand/collapse indicator */}
                 {hasChildren && expandable && (
-                    <div
-                        className="tree-node__toggle"
-                        onClick={(event) => {
-                            event.stopPropagation()
-                            handleToggle(event)
-                        }}
-                    >
+                    <div className="tree-node__toggle">
                         <Icon
                             icon={isOpen ? 'expand_less' : 'expand_more'}
                             size="small"
@@ -385,13 +501,7 @@ export const TreeNode = (props) => {
                 )}
 
                 {/* Label with badge */}
-                <div
-                    className={`label ${clickable}`}
-                    onClick={(event) => {
-                        event.stopPropagation()
-                        handleSelect(event)
-                    }}
-                >
+                <div className={`label ${clickable}`}>
                     <span className="tree-node__label-text">
                         {labelTxt}
                     </span>
@@ -450,6 +560,13 @@ export const TreeItem = (props) => {
     const [isDragging, setIsDragging] = useState(false)
     const itemRef = useRef(null)
 
+    // Get tree context
+    const treeContext = useContext(TreeContext)
+    const { multiSelect, selectedItems, onMultiSelect: handleTreeMultiSelect } = treeContext
+
+    // Check if this item is selected in multi-select mode
+    const isMultiSelected = multiSelect && selectedItems.includes(id)
+
     // Handle selection (maintaining original behavior)
     const handleSelect = useCallback((event) => {
         if (disabled) return
@@ -458,13 +575,21 @@ export const TreeItem = (props) => {
         if (onSelect) onSelect(id)
     }, [disabled, onSelect, id])
 
-    // Handle checkbox (maintaining original behavior)
+    // Handle checkbox (maintaining original behavior + multi-select)
     const handleCheck = useCallback((event) => {
         if (disabled) return
 
         event.stopPropagation()
-        if (onCheck) onCheck(id, event.target.checked)
-    }, [disabled, onCheck, id])
+        const isChecked = event.target.checked
+
+        // Handle original onCheck callback
+        if (onCheck) onCheck(id, isChecked)
+
+        // Handle multi-select if enabled
+        if (multiSelect && handleTreeMultiSelect) {
+            handleTreeMultiSelect(id, isChecked)
+        }
+    }, [disabled, onCheck, id, multiSelect, handleTreeMultiSelect])
 
     // Handle keyboard interaction
     const handleKeyDown = useCallback((event) => {
@@ -552,12 +677,12 @@ export const TreeItem = (props) => {
             {...ariaAttributes}
             {...restProps}
         >
-            {/* Checkbox (maintaining original structure) */}
-            {onCheck && (
+            {/* Checkbox (maintaining original structure + multi-select) */}
+            {(onCheck || multiSelect) && (
                 <div className="tree-item__checkbox">
                     <input
                         type="checkbox"
-                        checked={checked}
+                        checked={multiSelect ? isMultiSelected : checked}
                         onChange={handleCheck}
                         disabled={disabled}
                         aria-label={`Select ${typeof label === 'string' ? label : 'item'}`}
@@ -618,10 +743,8 @@ Tree.propTypes = {
     multiSelect: PropTypes.bool,
     /** Multi-selection callback */
     onMultiSelect: PropTypes.func,
-    /** Show expand all button */
-    expandAll: PropTypes.bool,
-    /** Show collapse all button */
-    collapseAll: PropTypes.bool,
+    /** Show expand/collapse icon */
+    showExpandIcon: PropTypes.bool,
     /** Expand all callback */
     onExpandAll: PropTypes.func,
     /** Collapse all callback */