perf(tab-view): shouldUseTab method replaces index with tab.key (#5239)

primefaces · Nov 5, 2023 · 278c145 · 278c145
1 parent 17b82c9
commit 278c145
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
@@ -56,13 +56,13 @@ export const TabView = React.forwardRef((inProps, ref) => {
     const isSelected = (index) => index === activeIndex;
     const getTabProp = (tab, name) => TabPanelBase.getCProp(tab, name);
 
-    const shouldUseTab = (tab, index) => {
-        return tab && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every((_i) => _i !== index);
+    const shouldUseTab = (tab) => {
+        return tab && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every((_i) => _i !== tab.key);
     };
 
     const findVisibleActiveTab = (i) => {
         const tabsInfo = React.Children.map(props.children, (tab, index) => {
-            if (shouldUseTab(tab, index)) {
+            if (shouldUseTab(tab)) {
                 return { tab, index };
             }
         });
@@ -73,15 +73,18 @@ export const TabView = React.forwardRef((inProps, ref) => {
     const onTabHeaderClose = (event, index) => {
         event.preventDefault();
 
+        const { onBeforeTabClose, onTabClose, children } = props;
+        const { key } = children[index];
+
         // give caller a chance to stop the selection
-        if (props.onBeforeTabClose && props.onBeforeTabClose({ originalEvent: event, index }) === false) {
+        if (onBeforeTabClose && onBeforeTabClose({ originalEvent: event, index }) === false) {
             return;
         }
 
-        setHiddenTabsState([...hiddenTabsState, index]);
+        setHiddenTabsState([...hiddenTabsState, key]);
 
-        if (props.onTabClose) {
-            props.onTabClose({ originalEvent: event, index });
+        if (onTabClose) {
+            onTabClose({ originalEvent: event, index });
         }
     };
 
@@ -275,7 +278,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
 
     const createTabHeaders = () => {
         return React.Children.map(props.children, (tab, index) => {
-            if (shouldUseTab(tab, index)) {
+            if (shouldUseTab(tab)) {
                 return createTabHeader(tab, index);
             }
         });
@@ -331,7 +334,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
             ptm('panelcontainer')
         );
         const contents = React.Children.map(props.children, (tab, index) => {
-            if (shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index))) {
+            if (shouldUseTab(tab) && (!props.renderActiveOnly || isSelected(index))) {
                 const selected = isSelected(index);
                 const contentId = idState + '_content_' + index;
                 const ariaLabelledBy = idState + '_header_' + index;

diff --git a/components/lib/tabview/tabview.d.ts b/components/lib/tabview/tabview.d.ts
@@ -265,7 +265,7 @@ export interface TabViewState {
     /**
      * Current state of hidden tab.
      */
-    hiddenTabsState: number[];
+    hiddenTabsState: (number | string)[];
     /**
      * Current state of previous button.
      * @defaultValue true