@app-studio/web 0.8.63 → 0.8.65

package/dist/web.umd.development.js

@@ -7641,89 +7641,147 @@
   Table.Container = TableContainer;
   Table.Template = TableView;
 
-  // Initializes a custom hook for managing tab states with an array of 'Tab' objects passed as properties.
-  var useTabsState = propTabs => {
-    var [isActive, setIsActive] = React.useState(propTabs[0]);
-    var [tabsState, setTabsState] = React.useState(propTabs);
+  /**
+   * Custom hook to manage the state of the active tab.
+   * @param propTabs - The array of tab objects provided as props.
+   * @param initialTabValue - The optional title of the tab to be initially active.
+   * @returns An object containing the current activeTab and a function to update it.
+   */
+  var useTabsState = (propTabs, initialTabValue) => {
+    // Find the initial tab based on initialTabValue, or default to the first tab.
+    // Ensure propTabs is not empty before accessing index 0.
+    var findInitialTab = () => {
+      if (!propTabs || propTabs.length === 0) {
+        return undefined; // No tabs, no initial active tab
+      }
+      if (initialTabValue !== undefined) {
+        var foundTab = propTabs.find(tab => tab.title === initialTabValue);
+        if (foundTab) {
+          return foundTab;
+        }
+        // Warn if initialTabValue is provided but not found
+        console.warn("Tabs: initialTabValue \"" + initialTabValue + "\" not found in tabs. Defaulting to the first tab.");
+      }
+      return propTabs[0]; // Default to the first tab
+    };
+    var [activeTab, setActiveTab] = React.useState(findInitialTab);
+    // Effect to update the active tab if the initialTabValue prop changes
+    // or if the tabs array changes and the current active tab is no longer valid.
+    React.useEffect(() => {
+      var newInitialTab = findInitialTab();
+      // Update only if the calculated initial tab is different from the current active tab
+      // or if the current active tab is no longer in the list (and there are tabs)
+      var currentActiveTabStillValid = activeTab && propTabs.some(t => t.title === activeTab.title);
+      if (newInitialTab && (!currentActiveTabStillValid || initialTabValue !== undefined && (activeTab == null ? void 0 : activeTab.title) !== initialTabValue)) {
+        setActiveTab(newInitialTab);
+      } else if (!newInitialTab && activeTab) {
+        // Handle case where all tabs are removed
+        setActiveTab(undefined);
+      }
+    }, [propTabs, initialTabValue]); // Rerun when tabs or initial title changes
     return {
-      isActive,
-      setIsActive,
-      tabsState,
-      setTabsState
+      activeTab,
+      setActiveTab
     };
   };
 
-  // Defines a functional component 'TabsView' with props of type 'TabsViewProps'.
-  var TabsView = props => {
-    // Destructures 'tabs', 'styles', 'isActive', 'setIsActive', 'tabsState', and 'setTabsState' from the component props.
-    var {
-      tabs,
-      styles,
-      isActive,
-      setIsActive,
-      tabsState,
-      setTabsState
-    } = props;
-    // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
-    var moveSelectedTabToTop = idx => {
-      // Creates a copy of the 'tabs' array from props to be altered.
-      var newTabs = [...tabs];
-      // Removes the tab at the provided index, effectively selecting this tab.
-      var selectedTab = newTabs.splice(idx, 1);
-      // Places the selected tab at the start of the 'newTabs' array.
-      newTabs.unshift(selectedTab[0]);
-      // Updates the state with the reordered tabs.
-      setTabsState(newTabs);
-      // Sets the active tab to the first tab in the 'newTabs' array.
-      setIsActive(newTabs[0]);
-    };
-    // Defines a function 'isContentActive' that checks if the given tab's content is to be displayed.
-    var isContentActive = tab => {
-      // Returns a boolean indicating if the given tab is identical to the first tab in 'tabsState'.
-      return tab.value === tabsState[0].value;
-    };
-    return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
-      width: "100w",
-      height: '100%'
-    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-      marginBottom: 20
-    }, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => (/*#__PURE__*/React__default.createElement(Button, Object.assign({
-      key: tab.title,
-      onClick: () => {
-        moveSelectedTabToTop(idx);
-      },
-      variant: isActive.value === tab.value ? 'filled' : 'ghost',
-      shape: "pillShaped",
-      cursor: "pointer",
-      isAuto: true
-    }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title))))), /*#__PURE__*/React__default.createElement(View, Object.assign({
-      width: '100%',
-      height: "100%"
-    }, styles == null ? void 0 : styles.content), tabsState.map((tab, idx) => isContentActive(tab) && /*#__PURE__*/React__default.createElement(View, {
-      key: idx
-    }, tab.content))));
+  /**
+   * The presentation component for Tabs. Renders the UI based on props.
+   */
+  var TabsView = _ref => {
+    var {
+      tabs = [],
+      // Default to empty array
+      activeTab,
+      handleTabClick,
+      styles = {},
+      // Default to empty object
+      renderTab,
+      renderContent
+    } = _ref;
+    // If there's no active tab (e.g., tabs array is empty), render nothing or a placeholder
+    if (!activeTab) {
+      // Optionally render a placeholder when no tabs are active/available
+      // return <View {...styles.container}><Text>No tabs available.</Text></View>;
+      return null; // Or simply render nothing
+    }
+    return (
+      /*#__PURE__*/
+      // Use Vertical layout for overall structure (tabs header above content)
+      React__default.createElement(Vertical, Object.assign({
+        width: "100%",
+        height: '100%'
+      }, styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, styles.headerTabs), tabs.map(tab => {
+        // Determine if the current tab in the loop is the active one
+        var isActive = tab.title === activeTab.title;
+        // Prepare the onClick handler for this specific tab
+        var onClick = () => handleTabClick(tab);
+        // Use the custom renderTab function if provided
+        if (renderTab) {
+          return renderTab(tab, isActive, onClick);
+        }
+        // Default rendering for a tab button
+        return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+          key: tab.title,
+          onClick: onClick,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }, styles.tab, isActive ? styles.activeTab : {}, {
+          // Example: Set variant based on active state (can be overridden by styles)
+          variant: isActive ? 'filled' : 'ghost',
+          cursor: "pointer" // Ensure pointer cursor
+        }), tab.icon, /*#__PURE__*/React__default.createElement(Text
+        // Apply base title styles and merge activeText styles if this tab is active
+        , Object.assign({}, styles.title, isActive ? styles.activeText : {}), tab.title));
+      })), /*#__PURE__*/React__default.createElement(View, Object.assign({
+        width: '100%',
+        height: "100%"
+      }, styles.content), renderContent ? renderContent(activeTab) :
+      // Otherwise, render the content property from the active tab object
+      activeTab.content))
+    );
   };
 
+  /**
+   * Tabs component allows users to navigate between different sections of content.
+   * It manages the active tab state and renders the corresponding content.
+   */
   var TabsComponent = _ref => {
     var {
       tabs,
-      styles
+      styles,
+      initialTabValue,
+      onTabChange,
+      renderTab,
+      renderContent
     } = _ref;
-    var {
-      isActive,
-      setIsActive,
-      tabsState,
-      setTabsState
-    } = useTabsState(tabs);
+    // Use the custom hook to manage the active tab state
+    var {
+      activeTab,
+      setActiveTab
+    } = useTabsState(tabs, initialTabValue);
+    // Handler function to change the active tab and trigger the callback
+    var handleTabClick = tab => {
+      // Only update state and call callback if the clicked tab is different from the current one
+      if ((activeTab == null ? void 0 : activeTab.title) !== tab.title) {
+        setActiveTab(tab);
+        // Call the onTabChange callback if provided
+        if (onTabChange) {
+          onTabChange(tab);
+        }
+      }
+    };
+    // Render the presentation component with the necessary props
     return /*#__PURE__*/React__default.createElement(TabsView, {
       tabs: tabs,
       styles: styles,
-      isActive: isActive,
-      tabsState: tabsState,
-      setTabsState: setTabsState,
-      setIsActive: setIsActive
+      activeTab: activeTab,
+      handleTabClick: handleTabClick,
+      renderTab: renderTab,
+      renderContent: renderContent
     });
   };
+  // Export the component wrapped in React.memo for performance optimization
   var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 
   // Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.