Fix primefaces#2418: TabPanel add onTabClose event

melloware · Nov 27, 2021 · a57014c · a57014c
1 parent 8461882
commit a57014c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/src/components/tabview/TabView.d.ts b/src/components/tabview/TabView.d.ts
@@ -38,6 +38,11 @@ interface TabViewTabChangeParams {
     index: number;
 }
 
+interface TabViewTabCloseParams {
+    originalEvent: React.SyntheticEvent;
+    index: number;
+}
+
 export interface TabViewProps {
     id?: string;
     activeIndex?: number;
@@ -46,6 +51,7 @@ export interface TabViewProps {
     renderActiveOnly?: boolean;
     scrollable?: boolean;
     onTabChange?(e: TabViewTabChangeParams): void;
+    onTabClose?(e: TabViewTabCloseParams): void;
 }
 
 // tslint:disable-next-line:max-classes-per-file

diff --git a/src/components/tabview/TabView.js b/src/components/tabview/TabView.js
@@ -46,6 +46,7 @@ export class TabView extends Component {
         className: null,
         renderActiveOnly: true,
         onTabChange: null,
+        onTabClose: null,
         scrollable: false
     }
 
@@ -56,6 +57,7 @@ export class TabView extends Component {
         className: PropTypes.string,
         renderActiveOnly: PropTypes.bool,
         onTabChange: PropTypes.func,
+        onTabClose: PropTypes.func,
         scrollable: PropTypes.bool
     };
 
@@ -111,6 +113,10 @@ export class TabView extends Component {
             tabInfo && this.onTabHeaderClick(event, tabInfo.tab, tabInfo.index);
         });
 
+        if (this.props.onTabClose) {
+            this.props.onTabClose({ originalEvent: event, index: index });
+        }
+
         event.preventDefault();
     }
 

diff --git a/src/showcase/tabview/TabViewDoc.js b/src/showcase/tabview/TabViewDoc.js
@@ -1117,6 +1117,13 @@ template: (options) => {
                             </td>
                                         <td>Callback to invoke when an active tab is changed.</td>
                                     </tr>
+                                    <tr>
+                                        <td>onTabClose</td>
+                                        <td>event.originalEvent: Browser event  <br />
+                                event.index: Index of the selected tab
+                            </td>
+                                        <td>Callback to invoke when a tab is closed.</td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>