import { Link } from 'react-router-dom'; import CodeHighlight from '../../components/Highlight'; import { useEffect, useState } from 'react'; import AnimateHeight from 'react-animate-height'; import { setPageTitle } from '../../store/themeConfigSlice'; import { useDispatch } from 'react-redux'; import IconCode from '../../components/Icon/IconCode'; import IconCaretDown from '../../components/Icon/IconCaretDown'; import IconFolder from '../../components/Icon/IconFolder'; import IconTxtFile from '../../components/Icon/IconTxtFile'; import IconFolderPlus from '../../components/Icon/IconFolderPlus'; import IconFolderMinus from '../../components/Icon/IconFolderMinus'; const Treeview = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Treeview')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [treeview1, setTreeview1] = useState(['images']); const [pagesSubMenu, setPagesSubMenu] = useState(false); const toggleTreeview1 = (name: any) => { if (treeview1.includes(name)) { setTreeview1((value) => value.filter((d) => d !== name)); } else { setTreeview1([...treeview1, name]); } }; const [treeview2, setTreeview2] = useState(['parent']); const toggleTreeview2 = (name: any) => { if (treeview2.includes(name)) { setTreeview2((value) => value.filter((d) => d !== name)); } else { setTreeview2([...treeview2, name]); } }; return (
  • Elements
  • Treeview
{/* Animated */}
Animated
    • style.css
    • profile-16.jpeg
    • background.png
    • gallery.jpg
      • file name
      • file name
      • file name
    • file name
    • file name
  • index.html
  • components.html
{codeArr.includes('code1') && ( 
{`import { useState } from 'react';
import AnimateHeight from 'react-animate-height';

const [treeview1, setTreeview1] = useState(['images']);
const [pagesSubMenu, setPagesSubMenu] = useState(false);

const toggleTreeview1 = (name: any) => {
    if (treeview1.includes(name)) {
        setTreeview1((value) => value.filter((d) => d !== name));
    } else {
        setTreeview1([...treeview1, name]);
    }
};


    
    
  • 
        
        
            
      
                
    • 
                    ...
                    style.css
                
      • 
            
    
            
    
    • 
    
  • 
        
        
            
      
                
    • 
                    ...
                    profile-16.jpeg
                
      • 
                
    • 
                    ...
                    background.png
                
      • 
                
    • 
                    ...
                    gallery.jpg
                
      • 
            
    
            
    
    • 
    
  • 
        
        
            
      
                
    • 
                    
                    
                        
        
                            
      • 
                                ...
                                file name
                            
        • 
                            
      • 
                                ...
                                file name
                            
        • 
                            
      • 
                                ...
                                file name
                            
        • 
                        
      
                          
                
      • 
                
    • 
                    ...
                    file name
                
      • 
                
    • 
                    ...
                    file name
                
      • 
            
    
            
    
    • 
    
  • 
        ...
        index.html
    
    • 
    
  • 
        ...
        components.html
    
    • 

`}
 )}
{/* Basic */}
Basic
        • style.css
        • script.js
      • index.html
    {codeArr.includes('code2') && ( 
    {`import { useState } from 'react';
import AnimateHeight from 'react-animate-height';

const [pagesSubMenu, setPagesSubMenu] = useState(false);

const [treeview2, setTreeview2] = useState(['parent']);

const toggleTreeview2 = (name: any) => {
    if (treeview2.includes(name)) {
        setTreeview2((value) => value.filter((d) => d !== name));
    } else {
        setTreeview2([...treeview2, name]);
    }
};


      
    
    • 
        
        
            
        
                
      • 
                    
                    
          
                
          • 
                
        • 
                    
                    
                        
            
                            
          • style.css
            • 
                        
          
                              
                
          • 
                
        • 
                    
                    
                        
            
                            
          • script.js
            • 
                        
          
                              
                
          • 
                
        • index.html
          • 
            
        
                
    
        • 

      `}
       )}
      ); }; export default Treeview;