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

Desktop application scaffolding tool for the Nano Framework

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

  const setSelectedItem = (item) => {
    setState(prev => ({
      ...prev,
      selectedItem: item,
      editingProperty: null // Stop editing when selection changes
    }));
  };

  const toggleSection = (sectionId) => {
    setState(prev => {
      const newExpanded = new Set(prev.expandedSections);
      if (newExpanded.has(sectionId)) {
        newExpanded.delete(sectionId);
      } else {
        newExpanded.add(sectionId);
      }
      return {
        ...prev,
        expandedSections: newExpanded
      };
    });
  };

  const startEditing = (propertyName) => {
    setState(prev => ({
      ...prev,
      editingProperty: propertyName
    }));
  };

  const stopEditing = () => {
    setState(prev => ({
      ...prev,
      editingProperty: null
    }));
  };

  const updateProperty = (propertyName, value) => {
    // Here you would typically update the actual data
    console.log(`Updating ${propertyName} to ${value}`);
    
    if (props.onPropertyChange) {
      props.onPropertyChange(propertyName, value);
    }
  };

  const initialize = () => {
    console.log("⚙️ PropertiesPanel initialized");
    
    // Listen for item selections from other components
    if (props.selectedItem) {
      setSelectedItem(props.selectedItem);
    }
  };

  // Expose function to parent for external item selection
  const handleItemSelection = (item) => {
    setSelectedItem(item);
  };

  return {
    setSelectedItem,
    toggleSection,
    startEditing,
    stopEditing,
    updateProperty,
    handleItemSelection,
    initialize
  };
};