Fixed #618 - Render attribute for Tabs

primefaces · Nov 6, 2018 · 8e97e57 · 8e97e57
1 parent 90a874f
commit 8e97e57
Showing 1 changed file with 25 additions and 11 deletions.
diff --git a/src/components/tabview/TabView.js b/src/components/tabview/TabView.js
@@ -36,6 +36,7 @@ export class TabView extends Component {
         activeIndex: 0,
         style: null,
         className: null,
+        renderActiveOnly: true,
         onTabChange: null
     }
 
@@ -44,6 +45,7 @@ export class TabView extends Component {
         activeIndex: PropTypes.number,
         style: PropTypes.object,
         className: PropTypes.string,
+        renderActiveOnly: PropTypes.bool,
         onTabChange: PropTypes.func
     };
 
@@ -116,25 +118,37 @@ export class TabView extends Component {
 
     renderContent() {
         const contents = React.Children.map(this.props.children, (tab, index) => {
-            const selected = this.isSelected(index);
-            const className = classNames(tab.props.contentClassName, 'p-tabview-panel', {'p-hidden': !selected});
-            const id = this.id + '_content_' + index;
-            const ariaLabelledBy = this.id + '_header_' + index;
-
-            return (
-                <div id={id} aria-labelledby={ariaLabelledBy} aria-hidden={!selected} className={className} style={tab.props.contentStyle} role="tabpanel">
-                    {selected && tab.props.children}
-                </div>
-            );
+            if(this.props.renderActiveOnly) {
+                if(this.state.activeIndex === index) {
+                   return this.createContent(tab,index);
+                }
+            }
+            else {
+               return this.createContent(tab,index);
+            }
         })
-        
+
         return (
             <div className="p-tabview-panels">
                 {contents}
             </div>
         );
     }
 
+    createContent(tab, index) {
+        const selected = this.isSelected(index);
+        const className = classNames(tab.props.contentClassName, 'p-tabview-panel', {'p-hidden': !selected});
+        const id = this.id + '_content_' + index;
+        const ariaLabelledBy = this.id + '_header_' + index;
+
+        return (
+            <div id={id} aria-labelledby={ariaLabelledBy} aria-hidden={!selected} className={className}
+                 style={tab.props.contentStyle} role="tabpanel">
+                {selected && tab.props.children}
+            </div>
+        );
+    }
+
     render() {
         const className = classNames('p-tabview p-component p-tabview-top', this.props.className)
         const navigator = this.renderNavigator();