@isthatuzii/create-nano-app/templates/solid-js/src/template-ui/components/layout/DataBrowser.functions.js

Desktop application scaffolding tool for the Nano Framework

export const createDataBrowserFunctions = (
  state,
  setState,
  props
) => {

  // Mock data structure similar to Blender's outliner
  const mockData = [
    {
      id: 'datacore',
      name: 'Datacore',
      type: 'root',
      children: [
        {
          id: 'data_paks',
          name: 'Data.p4k',
          type: 'package',
          children: [
            {
              id: 'localization',
              name: 'Localization',
              type: 'folder',
              children: []
            },
            {
              id: 'action_map',
              name: 'Action Map',
              type: 'folder', 
              children: []
            }
          ]
        },
        {
          id: 'entities',
          name: 'entities',
          type: 'folder',
          children: [
            {
              id: 'legacy_items',
              name: 'legacyitems',
              type: 'folder',
              children: []
            },
            {
              id: 'scitem',
              name: 'scitem',
              type: 'folder',
              children: []
            },
            {
              id: 'spaceships',
              name: 'spaceships',
              type: 'folder',
              children: [
                { id: 'drak_caterpillar', name: 'drak_caterpillar', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_pirate', name: 'drak_caterpillar_pirate', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_pu_di_civ', name: 'drak_caterpillar_pu_di_civ', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_pu_di_pir', name: 'drak_caterpillar_pu_di_pir', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_hijacked', name: 'drak_caterpillar_hijacked', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_s42_civ_taba', name: 'drak_caterpillar_s42_civ_taba', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_falseprositive_la', name: 'drak_caterpillar_falseprositive_la', type: 'EntityClassDefinition' },
                { id: 'drak_caterpillar_shipshowdown', name: 'drak_caterpillar_shipshowdown', type: 'EntityClassDefinition' }
              ]
            }
          ]
        },
        {
          id: 'mission_data',
          name: 'missiondata',
          type: 'folder',
          children: []
        },
        {
          id: 'radar_system', 
          name: 'radarsystem',
          type: 'folder',
          children: []
        },
        {
          id: 'tmp_palettes',
          name: 'tmppalettes',
          type: 'folder',
          children: []
        },
        {
          id: 'ui',
          name: 'ui',
          type: 'folder',
          children: []
        }
      ]
    }
  ];

  const handleItemClick = (item) => {
    setState(prev => ({
      ...prev,
      selectedItem: item.id
    }));

    // Notify parent component if callback provided
    if (props.onItemSelect) {
      props.onItemSelect(item);
    }
  };

  const toggleExpand = (itemId) => {
    setState(prev => {
      const newExpanded = new Set(prev.expandedItems);
      if (newExpanded.has(itemId)) {
        newExpanded.delete(itemId);
      } else {
        newExpanded.add(itemId);
      }
      return {
        ...prev,
        expandedItems: newExpanded
      };
    });
  };

  const handleSearch = (term) => {
    setState(prev => ({
      ...prev,
      searchTerm: term
    }));
  };

  const filterItems = (items, term) => {
    if (!term) return items;

    return items.map(item => {
      const matchesSearch = item.name.toLowerCase().includes(term.toLowerCase());
      const filteredChildren = item.children ? filterItems(item.children, term) : [];
      
      if (matchesSearch || filteredChildren.length > 0) {
        return {
          ...item,
          children: filteredChildren
        };
      }
      return null;
    }).filter(Boolean);
  };

  const getFilteredData = () => {
    return filterItems(mockData, state().searchTerm);
  };

  const initialize = () => {
    console.log("🗂️ DataBrowser initialized");
  };

  return {
    handleItemClick,
    toggleExpand,
    handleSearch,
    getFilteredData,
    initialize
  };
};