primereact 6.5.0 → 7.0.0-rc.1

package/tabview/tabview.cjs.js

@@ -25,6 +25,14 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -71,17 +79,11 @@ function _typeof(obj) {
   return _typeof(obj);
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -154,7 +156,9 @@ var TabView = /*#__PURE__*/function (_Component2) {
 
     _this = _super2.call(this, props);
     var state = {
-      id: props.id
+      id: props.id,
+      backwardIsDisabled: true,
+      forwardIsDisabled: false
     };
 
     if (!_this.props.onTabChange) {
@@ -164,6 +168,9 @@ var TabView = /*#__PURE__*/function (_Component2) {
     }
 
     _this.state = state;
+    _this.navBackward = _this.navBackward.bind(_assertThisInitialized(_this));
+    _this.navForward = _this.navForward.bind(_assertThisInitialized(_this));
+    _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -193,6 +200,7 @@ var TabView = /*#__PURE__*/function (_Component2) {
         }
       }
 
+      this.updateScrollBar(index);
       event.preventDefault();
     }
   }, {
@@ -203,6 +211,60 @@ var TabView = /*#__PURE__*/function (_Component2) {
       this.inkbar.style.width = core.DomHandler.getWidth(tabHeader) + 'px';
       this.inkbar.style.left = core.DomHandler.getOffset(tabHeader).left - core.DomHandler.getOffset(this.nav).left + 'px';
     }
+  }, {
+    key: "updateScrollBar",
+    value: function updateScrollBar(index) {
+      var tabHeader = this["tab_".concat(index)];
+      tabHeader.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, {
+    key: "updateButtonState",
+    value: function updateButtonState() {
+      var content = this.content;
+      var scrollLeft = content.scrollLeft,
+          scrollWidth = content.scrollWidth;
+      var width = core.DomHandler.getWidth(content);
+      this.setState({
+        backwardIsDisabled: scrollLeft === 0
+      });
+      this.setState({
+        forwardIsDisabled: scrollLeft === scrollWidth - width
+      });
+    }
+  }, {
+    key: "onScroll",
+    value: function onScroll(event) {
+      this.props.scrollable && this.updateButtonState();
+      event.preventDefault();
+    }
+  }, {
+    key: "getVisibleButtonWidths",
+    value: function getVisibleButtonWidths() {
+      var prevBtn = this.prevBtn;
+      var nextBtn = this.nextBtn;
+      return [prevBtn, nextBtn].reduce(function (acc, el) {
+        return el ? acc + core.DomHandler.getWidth(el) : acc;
+      }, 0);
+    }
+  }, {
+    key: "navBackward",
+    value: function navBackward() {
+      var content = this.content;
+      var width = core.DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft - width;
+      content.scrollLeft = pos <= 0 ? 0 : pos;
+    }
+  }, {
+    key: "navForward",
+    value: function navForward() {
+      var content = this.content;
+      var width = core.DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft + width;
+      var lastPos = content.scrollWidth - width;
+      content.scrollLeft = pos >= lastPos ? lastPos : pos;
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -216,8 +278,12 @@ var TabView = /*#__PURE__*/function (_Component2) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps) {
       this.updateInkBar();
+
+      if (prevProps.activeIndex !== this.props.activeIndex) {
+        this.updateScrollBar(this.props.activeIndex);
+      }
     }
   }, {
     key: "renderTabHeader",
@@ -302,7 +368,15 @@ var TabView = /*#__PURE__*/function (_Component2) {
       var _this4 = this;
 
       var headers = this.renderTabHeaders();
-      return /*#__PURE__*/React__default['default'].createElement("ul", {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        ref: function ref(el) {
+          return _this4.content = el;
+        },
+        id: this.props.id,
+        className: "p-tabview-nav-content",
+        style: this.props.style,
+        onScroll: this.onScroll
+      }, /*#__PURE__*/React__default['default'].createElement("ul", {
         ref: function ref(el) {
           return _this4.nav = el;
         },
@@ -313,7 +387,7 @@ var TabView = /*#__PURE__*/function (_Component2) {
           return _this4.inkbar = el;
         },
         className: "p-tabview-ink-bar"
-      }));
+      })));
     }
   }, {
     key: "renderContent",
@@ -347,17 +421,59 @@ var TabView = /*#__PURE__*/function (_Component2) {
         role: "tabpanel"
       }, !this.props.renderActiveOnly ? tab.props.children : selected && tab.props.children);
     }
+  }, {
+    key: "renderPrevButton",
+    value: function renderPrevButton() {
+      var _this6 = this;
+
+      if (this.props.scrollable && !this.state.backwardIsDisabled) {
+        return /*#__PURE__*/React__default['default'].createElement("button", {
+          ref: function ref(el) {
+            return _this6.prevBtn = el;
+          },
+          className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
+          onClick: this.navBackward,
+          type: "button"
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "pi pi-chevron-left"
+        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+      }
+
+      return null;
+    }
+  }, {
+    key: "renderNextButton",
+    value: function renderNextButton() {
+      var _this7 = this;
+
+      if (this.props.scrollable && !this.state.forwardIsDisabled) {
+        return /*#__PURE__*/React__default['default'].createElement("button", {
+          ref: function ref(el) {
+            return _this7.nextBtn = el;
+          },
+          className: "p-tabview-nav-next p-tabview-nav-btn p-link",
+          onClick: this.navForward,
+          type: "button"
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "pi pi-chevron-right"
+        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var className = core.classNames('p-tabview p-component', this.props.className);
+      var className = core.classNames('p-tabview p-component', this.props.className, {
+        'p-tabview-scrollable': this.props.scrollable
+      });
       var navigator = this.renderNavigator();
       var content = this.renderContent();
+      var prevButton = this.renderPrevButton();
+      var nextButton = this.renderNextButton();
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        id: this.props.id,
-        className: className,
-        style: this.props.style
-      }, navigator, content);
+        className: className
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "p-tabview-nav-container"
+      }, prevButton, navigator, nextButton), content);
     }
   }]);
 
@@ -370,7 +486,8 @@ _defineProperty(TabView, "defaultProps", {
   style: null,
   className: null,
   renderActiveOnly: true,
-  onTabChange: null
+  onTabChange: null,
+  scrollable: false
 });
 
 exports.TabPanel = TabPanel;

package/tabview/tabview.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/core");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&o(e,t)}function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return!t||"object"!==s(t)&&"function"!=typeof t?c(e):t}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){f(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e){var t=v();return function(){var n,r=p(e);if(t){var a=p(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}function v(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var y=function(t){l(r,e.Component);var n=b(r);function r(){return i(this,r),n.apply(this,arguments)}return r}();f(y,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,disabled:!1,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var m=function(n){l(p,e.Component);var o,s,c,u=b(p);function p(e){var t;i(this,p),t=u.call(this,e);var n={id:e.id};return t.props.onTabChange||(n=h(h({},n),{},{activeIndex:e.activeIndex})),t.state=n,t}return o=p,(s=[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"onTabHeaderClick",value:function(e,t,n){t.props.disabled||(this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:n}):this.setState({activeIndex:n})),e.preventDefault()}},{key:"updateInkBar",value:function(){var e=this.getActiveIndex(),n=this["tab_".concat(e)];this.inkbar.style.width=t.DomHandler.getWidth(n)+"px",this.inkbar.style.left=t.DomHandler.getOffset(n).left-t.DomHandler.getOffset(this.nav).left+"px"}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:t.UniqueComponentId()}),this.updateInkBar()}},{key:"componentDidUpdate",value:function(){this.updateInkBar()}},{key:"renderTabHeader",value:function(e,n){var a=this,i=this.isSelected(n),o=t.classNames("p-unselectable-text",{"p-tabview-selected p-highlight":i,"p-disabled":e.props.disabled},e.props.headerClassName),l=this.state.id+"_header_"+n,s=this.state.id+"_content_"+n,c=e.props.disabled?null:0,u=e.props.leftIcon&&r.default.createElement("i",{className:e.props.leftIcon}),p=r.default.createElement("span",{className:"p-tabview-title"},e.props.header),f=e.props.rightIcon&&r.default.createElement("i",{className:e.props.rightIcon}),d=r.default.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(t){return a.onTabHeaderClick(t,e,n)},id:l,"aria-controls":s,"aria-selected":i,tabIndex:c},u,p,f,r.default.createElement(t.Ripple,null));return e.props.headerTemplate&&(d=t.ObjectUtils.getJSXElement(e.props.headerTemplate,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(t){return a.onTabHeaderClick(t,e,n)},leftIconElement:u,titleElement:p,rightIconElement:f,element:d,props:this.props,index:n,selected:i,ariaControls:s})),r.default.createElement("li",{ref:function(e){return a["tab_".concat(n)]=e},className:o,style:e.props.headerStyle,role:"presentation"},d)}},{key:"renderTabHeaders",value:function(){var e=this;return r.default.Children.map(this.props.children,(function(t,n){return e.renderTabHeader(t,n)}))}},{key:"renderNavigator",value:function(){var e=this,t=this.renderTabHeaders();return r.default.createElement("ul",{ref:function(t){return e.nav=t},className:"p-tabview-nav",role:"tablist"},t,r.default.createElement("li",{ref:function(t){return e.inkbar=t},className:"p-tabview-ink-bar"}))}},{key:"renderContent",value:function(){var e=this,t=r.default.Children.map(this.props.children,(function(t,n){if(!e.props.renderActiveOnly||e.isSelected(n))return e.createContent(t,n)}));return r.default.createElement("div",{className:"p-tabview-panels"},t)}},{key:"createContent",value:function(e,n){var a=this.isSelected(n),i=t.classNames(e.props.contentClassName,"p-tabview-panel",{"p-hidden":!a});return r.default.createElement("div",{id:this.state.id+"_content_"+n,"aria-labelledby":this.state.id+"_header_"+n,"aria-hidden":!a,className:i,style:e.props.contentStyle,role:"tabpanel"},this.props.renderActiveOnly?a&&e.props.children:e.props.children)}},{key:"render",value:function(){var e=t.classNames("p-tabview p-component",this.props.className),n=this.renderNavigator(),a=this.renderContent();return r.default.createElement("div",{id:this.props.id,className:e,style:this.props.style},n,a)}}])&&a(o.prototype,s),c&&a(o,c),p}();f(m,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null}),exports.TabPanel=y,exports.TabView=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/core");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&o(e,t)}function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return l(e)}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e){var t=b();return function(){var n,r=p(e);if(t){var a=p(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}function b(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var y=function(t){s(r,e.Component);var n=v(r);function r(){return i(this,r),n.apply(this,arguments)}return r}();d(y,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,disabled:!1,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var m=function(n){s(d,e.Component);var o,c,u,p=v(d);function d(e){var t;i(this,d),t=p.call(this,e);var n={id:e.id,backwardIsDisabled:!0,forwardIsDisabled:!1};return t.props.onTabChange||(n=h(h({},n),{},{activeIndex:e.activeIndex})),t.state=n,t.navBackward=t.navBackward.bind(l(t)),t.navForward=t.navForward.bind(l(t)),t.onScroll=t.onScroll.bind(l(t)),t}return o=d,(c=[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"onTabHeaderClick",value:function(e,t,n){t.props.disabled||(this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:n}):this.setState({activeIndex:n})),this.updateScrollBar(n),e.preventDefault()}},{key:"updateInkBar",value:function(){var e=this.getActiveIndex(),n=this["tab_".concat(e)];this.inkbar.style.width=t.DomHandler.getWidth(n)+"px",this.inkbar.style.left=t.DomHandler.getOffset(n).left-t.DomHandler.getOffset(this.nav).left+"px"}},{key:"updateScrollBar",value:function(e){this["tab_".concat(e)].scrollIntoView({block:"nearest"})}},{key:"updateButtonState",value:function(){var e=this.content,n=e.scrollLeft,r=e.scrollWidth,a=t.DomHandler.getWidth(e);this.setState({backwardIsDisabled:0===n}),this.setState({forwardIsDisabled:n===r-a})}},{key:"onScroll",value:function(e){this.props.scrollable&&this.updateButtonState(),e.preventDefault()}},{key:"getVisibleButtonWidths",value:function(){return[this.prevBtn,this.nextBtn].reduce((function(e,n){return n?e+t.DomHandler.getWidth(n):e}),0)}},{key:"navBackward",value:function(){var e=this.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft-n;e.scrollLeft=r<=0?0:r}},{key:"navForward",value:function(){var e=this.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft+n,a=e.scrollWidth-n;e.scrollLeft=r>=a?a:r}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:t.UniqueComponentId()}),this.updateInkBar()}},{key:"componentDidUpdate",value:function(e){this.updateInkBar(),e.activeIndex!==this.props.activeIndex&&this.updateScrollBar(this.props.activeIndex)}},{key:"renderTabHeader",value:function(e,n){var a=this,l=this.isSelected(n),i=t.classNames("p-unselectable-text",{"p-tabview-selected p-highlight":l,"p-disabled":e.props.disabled},e.props.headerClassName),o=this.state.id+"_header_"+n,s=this.state.id+"_content_"+n,c=e.props.disabled?null:0,u=e.props.leftIcon&&r.default.createElement("i",{className:e.props.leftIcon}),p=r.default.createElement("span",{className:"p-tabview-title"},e.props.header),d=e.props.rightIcon&&r.default.createElement("i",{className:e.props.rightIcon}),f=r.default.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(t){return a.onTabHeaderClick(t,e,n)},id:o,"aria-controls":s,"aria-selected":l,tabIndex:c},u,p,d,r.default.createElement(t.Ripple,null));return e.props.headerTemplate&&(f=t.ObjectUtils.getJSXElement(e.props.headerTemplate,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(t){return a.onTabHeaderClick(t,e,n)},leftIconElement:u,titleElement:p,rightIconElement:d,element:f,props:this.props,index:n,selected:l,ariaControls:s})),r.default.createElement("li",{ref:function(e){return a["tab_".concat(n)]=e},className:i,style:e.props.headerStyle,role:"presentation"},f)}},{key:"renderTabHeaders",value:function(){var e=this;return r.default.Children.map(this.props.children,(function(t,n){return e.renderTabHeader(t,n)}))}},{key:"renderNavigator",value:function(){var e=this,t=this.renderTabHeaders();return r.default.createElement("div",{ref:function(t){return e.content=t},id:this.props.id,className:"p-tabview-nav-content",style:this.props.style,onScroll:this.onScroll},r.default.createElement("ul",{ref:function(t){return e.nav=t},className:"p-tabview-nav",role:"tablist"},t,r.default.createElement("li",{ref:function(t){return e.inkbar=t},className:"p-tabview-ink-bar"})))}},{key:"renderContent",value:function(){var e=this,t=r.default.Children.map(this.props.children,(function(t,n){if(!e.props.renderActiveOnly||e.isSelected(n))return e.createContent(t,n)}));return r.default.createElement("div",{className:"p-tabview-panels"},t)}},{key:"createContent",value:function(e,n){var a=this.isSelected(n),l=t.classNames(e.props.contentClassName,"p-tabview-panel",{"p-hidden":!a});return r.default.createElement("div",{id:this.state.id+"_content_"+n,"aria-labelledby":this.state.id+"_header_"+n,"aria-hidden":!a,className:l,style:e.props.contentStyle,role:"tabpanel"},this.props.renderActiveOnly?a&&e.props.children:e.props.children)}},{key:"renderPrevButton",value:function(){var e=this;return this.props.scrollable&&!this.state.backwardIsDisabled?r.default.createElement("button",{ref:function(t){return e.prevBtn=t},className:"p-tabview-nav-prev p-tabview-nav-btn p-link",onClick:this.navBackward,type:"button"},r.default.createElement("span",{className:"pi pi-chevron-left"}),r.default.createElement(t.Ripple,null)):null}},{key:"renderNextButton",value:function(){var e=this;if(this.props.scrollable&&!this.state.forwardIsDisabled)return r.default.createElement("button",{ref:function(t){return e.nextBtn=t},className:"p-tabview-nav-next p-tabview-nav-btn p-link",onClick:this.navForward,type:"button"},r.default.createElement("span",{className:"pi pi-chevron-right"}),r.default.createElement(t.Ripple,null))}},{key:"render",value:function(){var e=t.classNames("p-tabview p-component",this.props.className,{"p-tabview-scrollable":this.props.scrollable}),n=this.renderNavigator(),a=this.renderContent(),l=this.renderPrevButton(),i=this.renderNextButton();return r.default.createElement("div",{className:e},r.default.createElement("div",{className:"p-tabview-nav-container"},l,n,i),a)}}])&&a(o.prototype,c),u&&a(o,u),d}();d(m,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null,scrollable:!1}),exports.TabPanel=y,exports.TabView=m;

package/tabview/tabview.d.ts

@@ -41,6 +41,7 @@ export interface TabViewProps {
     style?: object;
     className?: string;
     renderActiveOnly?: boolean;
+    scrollable?: boolean;
     onTabChange?(e: TabViewTabChangeParams): void;
 }
 

package/tabview/tabview.esm.js

@@ -17,6 +17,14 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -63,17 +71,11 @@ function _typeof(obj) {
   return _typeof(obj);
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -146,7 +148,9 @@ var TabView = /*#__PURE__*/function (_Component2) {
 
     _this = _super2.call(this, props);
     var state = {
-      id: props.id
+      id: props.id,
+      backwardIsDisabled: true,
+      forwardIsDisabled: false
     };
 
     if (!_this.props.onTabChange) {
@@ -156,6 +160,9 @@ var TabView = /*#__PURE__*/function (_Component2) {
     }
 
     _this.state = state;
+    _this.navBackward = _this.navBackward.bind(_assertThisInitialized(_this));
+    _this.navForward = _this.navForward.bind(_assertThisInitialized(_this));
+    _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -185,6 +192,7 @@ var TabView = /*#__PURE__*/function (_Component2) {
         }
       }
 
+      this.updateScrollBar(index);
       event.preventDefault();
     }
   }, {
@@ -195,6 +203,60 @@ var TabView = /*#__PURE__*/function (_Component2) {
       this.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
       this.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.nav).left + 'px';
     }
+  }, {
+    key: "updateScrollBar",
+    value: function updateScrollBar(index) {
+      var tabHeader = this["tab_".concat(index)];
+      tabHeader.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, {
+    key: "updateButtonState",
+    value: function updateButtonState() {
+      var content = this.content;
+      var scrollLeft = content.scrollLeft,
+          scrollWidth = content.scrollWidth;
+      var width = DomHandler.getWidth(content);
+      this.setState({
+        backwardIsDisabled: scrollLeft === 0
+      });
+      this.setState({
+        forwardIsDisabled: scrollLeft === scrollWidth - width
+      });
+    }
+  }, {
+    key: "onScroll",
+    value: function onScroll(event) {
+      this.props.scrollable && this.updateButtonState();
+      event.preventDefault();
+    }
+  }, {
+    key: "getVisibleButtonWidths",
+    value: function getVisibleButtonWidths() {
+      var prevBtn = this.prevBtn;
+      var nextBtn = this.nextBtn;
+      return [prevBtn, nextBtn].reduce(function (acc, el) {
+        return el ? acc + DomHandler.getWidth(el) : acc;
+      }, 0);
+    }
+  }, {
+    key: "navBackward",
+    value: function navBackward() {
+      var content = this.content;
+      var width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft - width;
+      content.scrollLeft = pos <= 0 ? 0 : pos;
+    }
+  }, {
+    key: "navForward",
+    value: function navForward() {
+      var content = this.content;
+      var width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft + width;
+      var lastPos = content.scrollWidth - width;
+      content.scrollLeft = pos >= lastPos ? lastPos : pos;
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -208,8 +270,12 @@ var TabView = /*#__PURE__*/function (_Component2) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps) {
       this.updateInkBar();
+
+      if (prevProps.activeIndex !== this.props.activeIndex) {
+        this.updateScrollBar(this.props.activeIndex);
+      }
     }
   }, {
     key: "renderTabHeader",
@@ -294,7 +360,15 @@ var TabView = /*#__PURE__*/function (_Component2) {
       var _this4 = this;
 
       var headers = this.renderTabHeaders();
-      return /*#__PURE__*/React.createElement("ul", {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(el) {
+          return _this4.content = el;
+        },
+        id: this.props.id,
+        className: "p-tabview-nav-content",
+        style: this.props.style,
+        onScroll: this.onScroll
+      }, /*#__PURE__*/React.createElement("ul", {
         ref: function ref(el) {
           return _this4.nav = el;
         },
@@ -305,7 +379,7 @@ var TabView = /*#__PURE__*/function (_Component2) {
           return _this4.inkbar = el;
         },
         className: "p-tabview-ink-bar"
-      }));
+      })));
     }
   }, {
     key: "renderContent",
@@ -339,17 +413,59 @@ var TabView = /*#__PURE__*/function (_Component2) {
         role: "tabpanel"
       }, !this.props.renderActiveOnly ? tab.props.children : selected && tab.props.children);
     }
+  }, {
+    key: "renderPrevButton",
+    value: function renderPrevButton() {
+      var _this6 = this;
+
+      if (this.props.scrollable && !this.state.backwardIsDisabled) {
+        return /*#__PURE__*/React.createElement("button", {
+          ref: function ref(el) {
+            return _this6.prevBtn = el;
+          },
+          className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
+          onClick: this.navBackward,
+          type: "button"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "pi pi-chevron-left"
+        }), /*#__PURE__*/React.createElement(Ripple, null));
+      }
+
+      return null;
+    }
+  }, {
+    key: "renderNextButton",
+    value: function renderNextButton() {
+      var _this7 = this;
+
+      if (this.props.scrollable && !this.state.forwardIsDisabled) {
+        return /*#__PURE__*/React.createElement("button", {
+          ref: function ref(el) {
+            return _this7.nextBtn = el;
+          },
+          className: "p-tabview-nav-next p-tabview-nav-btn p-link",
+          onClick: this.navForward,
+          type: "button"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "pi pi-chevron-right"
+        }), /*#__PURE__*/React.createElement(Ripple, null));
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var className = classNames('p-tabview p-component', this.props.className);
+      var className = classNames('p-tabview p-component', this.props.className, {
+        'p-tabview-scrollable': this.props.scrollable
+      });
       var navigator = this.renderNavigator();
       var content = this.renderContent();
+      var prevButton = this.renderPrevButton();
+      var nextButton = this.renderNextButton();
       return /*#__PURE__*/React.createElement("div", {
-        id: this.props.id,
-        className: className,
-        style: this.props.style
-      }, navigator, content);
+        className: className
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "p-tabview-nav-container"
+      }, prevButton, navigator, nextButton), content);
     }
   }]);
 
@@ -362,7 +478,8 @@ _defineProperty(TabView, "defaultProps", {
   style: null,
   className: null,
   renderActiveOnly: true,
-  onTabChange: null
+  onTabChange: null,
+  scrollable: false
 });
 
 export { TabPanel, TabView };

package/tabview/tabview.esm.min.js

@@ -1 +1 @@
-import e,{Component as t}from"react";import{DomHandler as n,UniqueComponentId as r,classNames as a,ObjectUtils as i,Ripple as o}from"primereact/core";function l(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return!t||"object"!==u(t)&&"function"!=typeof t?f(e):t}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function m(e){var t=g();return function(){var n,r=h(e);if(t){var a=h(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return d(this,n)}}function g(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var O=function(e){p(r,t);var n=m(r);function r(){return c(this,r),n.apply(this,arguments)}return r}();b(O,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,disabled:!1,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var k=function(s){p(b,t);var u,f,d,h=m(b);function b(e){var t;c(this,b),t=h.call(this,e);var n={id:e.id};return t.props.onTabChange||(n=y(y({},n),{},{activeIndex:e.activeIndex})),t.state=n,t}return u=b,(f=[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"onTabHeaderClick",value:function(e,t,n){t.props.disabled||(this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:n}):this.setState({activeIndex:n})),e.preventDefault()}},{key:"updateInkBar",value:function(){var e=this.getActiveIndex(),t=this["tab_".concat(e)];this.inkbar.style.width=n.getWidth(t)+"px",this.inkbar.style.left=n.getOffset(t).left-n.getOffset(this.nav).left+"px"}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:r()}),this.updateInkBar()}},{key:"componentDidUpdate",value:function(){this.updateInkBar()}},{key:"renderTabHeader",value:function(t,n){var r=this,l=this.isSelected(n),c=a("p-unselectable-text",{"p-tabview-selected p-highlight":l,"p-disabled":t.props.disabled},t.props.headerClassName),s=this.state.id+"_header_"+n,p=this.state.id+"_content_"+n,u=t.props.disabled?null:0,f=t.props.leftIcon&&e.createElement("i",{className:t.props.leftIcon}),d=e.createElement("span",{className:"p-tabview-title"},t.props.header),h=t.props.rightIcon&&e.createElement("i",{className:t.props.rightIcon}),b=e.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(e){return r.onTabHeaderClick(e,t,n)},id:s,"aria-controls":p,"aria-selected":l,tabIndex:u},f,d,h,e.createElement(o,null));return t.props.headerTemplate&&(b=i.getJSXElement(t.props.headerTemplate,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(e){return r.onTabHeaderClick(e,t,n)},leftIconElement:f,titleElement:d,rightIconElement:h,element:b,props:this.props,index:n,selected:l,ariaControls:p})),e.createElement("li",{ref:function(e){return r["tab_".concat(n)]=e},className:c,style:t.props.headerStyle,role:"presentation"},b)}},{key:"renderTabHeaders",value:function(){var t=this;return e.Children.map(this.props.children,(function(e,n){return t.renderTabHeader(e,n)}))}},{key:"renderNavigator",value:function(){var t=this,n=this.renderTabHeaders();return e.createElement("ul",{ref:function(e){return t.nav=e},className:"p-tabview-nav",role:"tablist"},n,e.createElement("li",{ref:function(e){return t.inkbar=e},className:"p-tabview-ink-bar"}))}},{key:"renderContent",value:function(){var t=this,n=e.Children.map(this.props.children,(function(e,n){if(!t.props.renderActiveOnly||t.isSelected(n))return t.createContent(e,n)}));return e.createElement("div",{className:"p-tabview-panels"},n)}},{key:"createContent",value:function(t,n){var r=this.isSelected(n),i=a(t.props.contentClassName,"p-tabview-panel",{"p-hidden":!r});return e.createElement("div",{id:this.state.id+"_content_"+n,"aria-labelledby":this.state.id+"_header_"+n,"aria-hidden":!r,className:i,style:t.props.contentStyle,role:"tabpanel"},this.props.renderActiveOnly?r&&t.props.children:t.props.children)}},{key:"render",value:function(){var t=a("p-tabview p-component",this.props.className),n=this.renderNavigator(),r=this.renderContent();return e.createElement("div",{id:this.props.id,className:t,style:this.props.style},n,r)}}])&&l(u.prototype,f),d&&l(u,d),b}();b(k,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null});export{O as TabPanel,k as TabView};
+import e,{Component as t}from"react";import{DomHandler as n,UniqueComponentId as r,classNames as a,ObjectUtils as i,Ripple as o}from"primereact/core";function l(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function f(e,t){if(t&&("object"===d(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return s(e)}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?b(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function m(e){var t=w();return function(){var n,r=h(e);if(t){var a=h(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return f(this,n)}}function w(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var k=function(e){p(r,t);var n=m(r);function r(){return c(this,r),n.apply(this,arguments)}return r}();v(k,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,disabled:!1,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var g=function(u){p(b,t);var d,f,h,v=m(b);function b(e){var t;c(this,b),t=v.call(this,e);var n={id:e.id,backwardIsDisabled:!0,forwardIsDisabled:!1};return t.props.onTabChange||(n=y(y({},n),{},{activeIndex:e.activeIndex})),t.state=n,t.navBackward=t.navBackward.bind(s(t)),t.navForward=t.navForward.bind(s(t)),t.onScroll=t.onScroll.bind(s(t)),t}return d=b,(f=[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"onTabHeaderClick",value:function(e,t,n){t.props.disabled||(this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:n}):this.setState({activeIndex:n})),this.updateScrollBar(n),e.preventDefault()}},{key:"updateInkBar",value:function(){var e=this.getActiveIndex(),t=this["tab_".concat(e)];this.inkbar.style.width=n.getWidth(t)+"px",this.inkbar.style.left=n.getOffset(t).left-n.getOffset(this.nav).left+"px"}},{key:"updateScrollBar",value:function(e){this["tab_".concat(e)].scrollIntoView({block:"nearest"})}},{key:"updateButtonState",value:function(){var e=this.content,t=e.scrollLeft,r=e.scrollWidth,a=n.getWidth(e);this.setState({backwardIsDisabled:0===t}),this.setState({forwardIsDisabled:t===r-a})}},{key:"onScroll",value:function(e){this.props.scrollable&&this.updateButtonState(),e.preventDefault()}},{key:"getVisibleButtonWidths",value:function(){return[this.prevBtn,this.nextBtn].reduce((function(e,t){return t?e+n.getWidth(t):e}),0)}},{key:"navBackward",value:function(){var e=this.content,t=n.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft-t;e.scrollLeft=r<=0?0:r}},{key:"navForward",value:function(){var e=this.content,t=n.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft+t,a=e.scrollWidth-t;e.scrollLeft=r>=a?a:r}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:r()}),this.updateInkBar()}},{key:"componentDidUpdate",value:function(e){this.updateInkBar(),e.activeIndex!==this.props.activeIndex&&this.updateScrollBar(this.props.activeIndex)}},{key:"renderTabHeader",value:function(t,n){var r=this,l=this.isSelected(n),s=a("p-unselectable-text",{"p-tabview-selected p-highlight":l,"p-disabled":t.props.disabled},t.props.headerClassName),c=this.state.id+"_header_"+n,u=this.state.id+"_content_"+n,p=t.props.disabled?null:0,d=t.props.leftIcon&&e.createElement("i",{className:t.props.leftIcon}),f=e.createElement("span",{className:"p-tabview-title"},t.props.header),h=t.props.rightIcon&&e.createElement("i",{className:t.props.rightIcon}),v=e.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(e){return r.onTabHeaderClick(e,t,n)},id:c,"aria-controls":u,"aria-selected":l,tabIndex:p},d,f,h,e.createElement(o,null));return t.props.headerTemplate&&(v=i.getJSXElement(t.props.headerTemplate,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(e){return r.onTabHeaderClick(e,t,n)},leftIconElement:d,titleElement:f,rightIconElement:h,element:v,props:this.props,index:n,selected:l,ariaControls:u})),e.createElement("li",{ref:function(e){return r["tab_".concat(n)]=e},className:s,style:t.props.headerStyle,role:"presentation"},v)}},{key:"renderTabHeaders",value:function(){var t=this;return e.Children.map(this.props.children,(function(e,n){return t.renderTabHeader(e,n)}))}},{key:"renderNavigator",value:function(){var t=this,n=this.renderTabHeaders();return e.createElement("div",{ref:function(e){return t.content=e},id:this.props.id,className:"p-tabview-nav-content",style:this.props.style,onScroll:this.onScroll},e.createElement("ul",{ref:function(e){return t.nav=e},className:"p-tabview-nav",role:"tablist"},n,e.createElement("li",{ref:function(e){return t.inkbar=e},className:"p-tabview-ink-bar"})))}},{key:"renderContent",value:function(){var t=this,n=e.Children.map(this.props.children,(function(e,n){if(!t.props.renderActiveOnly||t.isSelected(n))return t.createContent(e,n)}));return e.createElement("div",{className:"p-tabview-panels"},n)}},{key:"createContent",value:function(t,n){var r=this.isSelected(n),i=a(t.props.contentClassName,"p-tabview-panel",{"p-hidden":!r});return e.createElement("div",{id:this.state.id+"_content_"+n,"aria-labelledby":this.state.id+"_header_"+n,"aria-hidden":!r,className:i,style:t.props.contentStyle,role:"tabpanel"},this.props.renderActiveOnly?r&&t.props.children:t.props.children)}},{key:"renderPrevButton",value:function(){var t=this;return this.props.scrollable&&!this.state.backwardIsDisabled?e.createElement("button",{ref:function(e){return t.prevBtn=e},className:"p-tabview-nav-prev p-tabview-nav-btn p-link",onClick:this.navBackward,type:"button"},e.createElement("span",{className:"pi pi-chevron-left"}),e.createElement(o,null)):null}},{key:"renderNextButton",value:function(){var t=this;if(this.props.scrollable&&!this.state.forwardIsDisabled)return e.createElement("button",{ref:function(e){return t.nextBtn=e},className:"p-tabview-nav-next p-tabview-nav-btn p-link",onClick:this.navForward,type:"button"},e.createElement("span",{className:"pi pi-chevron-right"}),e.createElement(o,null))}},{key:"render",value:function(){var t=a("p-tabview p-component",this.props.className,{"p-tabview-scrollable":this.props.scrollable}),n=this.renderNavigator(),r=this.renderContent(),i=this.renderPrevButton(),o=this.renderNextButton();return e.createElement("div",{className:t},e.createElement("div",{className:"p-tabview-nav-container"},i,n,o),r)}}])&&l(d.prototype,f),h&&l(d,h),b}();v(g,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null,scrollable:!1});export{k as TabPanel,g as TabView};