Fixed #2014 and #2015

primefaces · May 6, 2021 · 4276134 · 4276134
1 parent 84ee189
commit 4276134
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 32 deletions.
diff --git a/src/components/tabmenu/TabMenu.d.ts b/src/components/tabmenu/TabMenu.d.ts
@@ -4,12 +4,13 @@ import { MenuItem } from '../menuitem/MenuItem';
 interface TabMenuTabChangeParams {
     originalEvent: React.SyntheticEvent;
     value: MenuItem;
+    index: number;
 }
 
 export interface TabMenuProps {
     id?: string;
     model?: MenuItem[];
-    activeItem?: MenuItem;
+    activeIndex?: number;
     style?: object;
     className?: string;
     onTabChange?(e: TabMenuTabChangeParams): void;

diff --git a/src/components/tabmenu/TabMenu.js b/src/components/tabmenu/TabMenu.js
@@ -10,7 +10,7 @@ export class TabMenu extends Component {
     static defaultProps = {
         id: null,
         model: null,
-        activeItem: null,
+        activeIndex: 0,
         style: null,
         className: null,
         onTabChange: null
@@ -19,7 +19,7 @@ export class TabMenu extends Component {
     static propTypes = {
         id: PropTypes.string,
         model: PropTypes.array,
-        activeItem: PropTypes.any,
+        activeIndex: PropTypes.number,
         style: PropTypes.any,
         className: PropTypes.string,
         onTabChange: PropTypes.func
@@ -30,12 +30,12 @@ export class TabMenu extends Component {
 
         if (!this.props.onTabChange) {
             this.state = {
-                activeItem: props.activeItem
+                activeIndex: props.activeIndex
             };
         }
     }
 
-    itemClick(event, item) {
+    itemClick(event, item, index) {
         if (item.disabled) {
             event.preventDefault();
             return;
@@ -55,31 +55,23 @@ export class TabMenu extends Component {
         if (this.props.onTabChange) {
             this.props.onTabChange({
                 originalEvent: event,
-                value: item
+                value: item,
+                index
             });
         }
         else {
             this.setState({
-                activeItem: item
+                activeIndex: index
             });
         }
     }
 
-    getActiveItem() {
-        return this.props.onTabChange ? this.props.activeItem : this.state.activeItem;
-    }
-
     getActiveIndex() {
-        const activeItem = this.getActiveItem();
-        if (this.props.model) {
-            for (let i = 0; i < this.props.model.length; i++) {
-                if (activeItem === this.props.model[i]) {
-                    return i;
-                }
-            }
-        }
+        return this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;
+    }
 
-        return null;
+    isSelected(index) {
+        return (index === (this.getActiveIndex() || 0));
     }
 
     updateInkBar() {
@@ -99,8 +91,7 @@ export class TabMenu extends Component {
     }
 
     renderMenuItem(item, index) {
-        const activeItem = this.getActiveItem();
-        const active = activeItem ? activeItem === item : index === 0;
+        const active = this.isSelected(index);
         const className = classNames('p-tabmenuitem', {
             'p-highlight': active,
             'p-disabled': item.disabled
@@ -109,7 +100,7 @@ export class TabMenu extends Component {
         const icon = item.icon && <span className={iconClassName}></span>;
         const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
         let content = (
-            <a href={item.url||'#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.itemClick(event, item)} role="presentation">
+            <a href={item.url||'#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.itemClick(event, item, index)} role="presentation">
                 {icon}
                 {label}
                 <Ripple />
@@ -124,7 +115,8 @@ export class TabMenu extends Component {
                 iconClassName,
                 element: content,
                 props: this.props,
-                active
+                active,
+                index
             };
 
             content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);

diff --git a/src/showcase/tabmenu/TabMenuDoc.js b/src/showcase/tabmenu/TabMenuDoc.js
@@ -130,16 +130,16 @@ const items = [
 </CodeHighlight>
 
                         <h5>Controlled Component</h5>
-                        <p>In controlled mode, <i>activeItem</i> and <i>onTabChange</i> properties must be defined along with the model.</p>
+                        <p>In controlled mode, <i>activeIndex</i> and <i>onTabChange</i> properties must be defined along with the model.</p>
 
 <CodeHighlight>
 {`
-<TabMenu model={items} activeItem={activeItem} onTabChange={(e) => setActiveItem(e.value)}/>
+<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.value)}/>
 `}
 </CodeHighlight>
 
                         <h5>Uncontrolled</h5>
-                        <p>In uncontrolled mode, only <i>model</i> is required. Initial active item can be provided using the activeItem property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
+                        <p>In uncontrolled mode, only <i>model</i> is required. Initial active item can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
                             need to update the active item, prefer to use the component as controlled.</p>
 
 <CodeHighlight>
@@ -173,10 +173,10 @@ const items = [
                                         <td>An array of menuitems.</td>
                                     </tr>
                                     <tr>
-                                        <td>activeItem</td>
-                                        <td>MenuItem</td>
-                                        <td>null</td>
-                                        <td>Defines the default active menuitem</td>
+                                        <td>activeIndex</td>
+                                        <td>number</td>
+                                        <td>0</td>
+                                        <td>Active index of menuitem</td>
                                     </tr>
                                     <tr>
                                         <td>style</td>
@@ -208,7 +208,8 @@ const items = [
                                     <tr>
                                         <td>onTabChange</td>
                                         <td>event.originalEvent: Browser event <br />
-                                            event.value: Selected menuitem </td>
+                                            event.value: Selected menuitem <br />
+                                            event.index: Index of the selected tab </td>
                                         <td>Callback to invoke when active tab changes.</td>
                                     </tr>
                                 </tbody>