primereact 7.0.0-rc.1 → 7.1.0

package/tabview/tabview.esm.js

@@ -1,5 +1,41 @@
 import React, { Component } from 'react';
-import { DomHandler, UniqueComponentId, classNames, ObjectUtils, Ripple } from 'primereact/core';
+import { DomHandler, UniqueComponentId, classNames, ObjectUtils } from 'primereact/utils';
+import { Ripple } from 'primereact/ripple';
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
@@ -129,7 +165,10 @@ _defineProperty(TabPanel, "defaultProps", {
   headerTemplate: null,
   leftIcon: null,
   rightIcon: null,
+  closable: false,
   disabled: false,
+  style: null,
+  className: null,
   headerStyle: null,
   headerClassName: null,
   contentStyle: null,
@@ -150,7 +189,8 @@ var TabView = /*#__PURE__*/function (_Component2) {
     var state = {
       id: props.id,
       backwardIsDisabled: true,
-      forwardIsDisabled: false
+      forwardIsDisabled: false,
+      hiddenTabs: []
     };
 
     if (!_this.props.onTabChange) {
@@ -176,6 +216,59 @@ var TabView = /*#__PURE__*/function (_Component2) {
     value: function isSelected(index) {
       return index === this.getActiveIndex();
     }
+  }, {
+    key: "shouldTabRender",
+    value: function shouldTabRender(tab, index) {
+      return tab && tab.type === TabPanel && this.state.hiddenTabs.every(function (_i) {
+        return _i !== index;
+      });
+    }
+  }, {
+    key: "findVisibleActiveTab",
+    value: function findVisibleActiveTab(i) {
+      var _this2 = this;
+
+      var tabsInfo = React.Children.map(this.props.children, function (tab, index) {
+        if (_this2.shouldTabRender(tab, index)) {
+          return {
+            tab: tab,
+            index: index
+          };
+        }
+      });
+      return tabsInfo.find(function (_ref) {
+        var tab = _ref.tab,
+            index = _ref.index;
+        return !tab.props.disabled && index >= i;
+      }) || tabsInfo.reverse().find(function (_ref2) {
+        var tab = _ref2.tab,
+            index = _ref2.index;
+        return !tab.props.disabled && i > index;
+      });
+    }
+  }, {
+    key: "onTabHeaderClose",
+    value: function onTabHeaderClose(event, index) {
+      var _this3 = this;
+
+      var hiddenTabs = [].concat(_toConsumableArray(this.state.hiddenTabs), [index]);
+      this.setState({
+        hiddenTabs: hiddenTabs
+      }, function () {
+        var tabInfo = _this3.findVisibleActiveTab(index);
+
+        tabInfo && _this3.onTabHeaderClick(event, tabInfo.tab, tabInfo.index);
+      });
+
+      if (this.props.onTabClose) {
+        this.props.onTabClose({
+          originalEvent: event,
+          index: index
+        });
+      }
+
+      event.preventDefault();
+    }
   }, {
     key: "onTabHeaderClick",
     value: function onTabHeaderClick(event, tab, index) {
@@ -207,9 +300,12 @@ var TabView = /*#__PURE__*/function (_Component2) {
     key: "updateScrollBar",
     value: function updateScrollBar(index) {
       var tabHeader = this["tab_".concat(index)];
-      tabHeader.scrollIntoView({
-        block: 'nearest'
-      });
+
+      if (tabHeader) {
+        tabHeader.scrollIntoView({
+          block: 'nearest'
+        });
+      }
     }
   }, {
     key: "updateButtonState",
@@ -257,6 +353,27 @@ var TabView = /*#__PURE__*/function (_Component2) {
       var lastPos = content.scrollWidth - width;
       content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
+  }, {
+    key: "reset",
+    value: function reset() {
+      var state = {
+        backwardIsDisabled: true,
+        forwardIsDisabled: false,
+        hiddenTabs: []
+      };
+
+      if (this.props.onTabChange) {
+        this.props.onTabChange({
+          index: this.props.activeIndex
+        });
+      } else {
+        state = _objectSpread(_objectSpread({}, state), {}, {
+          activeIndex: this.props.activeIndex
+        });
+      }
+
+      this.setState(state);
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -276,17 +393,26 @@ var TabView = /*#__PURE__*/function (_Component2) {
       if (prevProps.activeIndex !== this.props.activeIndex) {
         this.updateScrollBar(this.props.activeIndex);
       }
+
+      if (prevProps.children !== this.props.children) {
+        this.setState({
+          hiddenTabs: []
+        });
+      }
     }
   }, {
     key: "renderTabHeader",
     value: function renderTabHeader(tab, index) {
-      var _this2 = this;
+      var _this4 = this;
 
       var selected = this.isSelected(index);
+
+      var style = _objectSpread(_objectSpread({}, tab.props.headerStyle || {}), tab.props.style || {});
+
       var className = classNames('p-unselectable-text', {
         'p-tabview-selected p-highlight': selected,
         'p-disabled': tab.props.disabled
-      }, tab.props.headerClassName);
+      }, tab.props.headerClassName, tab.props.className);
       var id = this.state.id + '_header_' + index;
       var ariaControls = this.state.id + '_content_' + index;
       var tabIndex = tab.props.disabled ? null : 0;
@@ -299,6 +425,12 @@ var TabView = /*#__PURE__*/function (_Component2) {
       var rightIconElement = tab.props.rightIcon && /*#__PURE__*/React.createElement("i", {
         className: tab.props.rightIcon
       });
+      var closableIconElement = tab.props.closable && /*#__PURE__*/React.createElement("i", {
+        className: "p-tabview-close pi pi-times",
+        onClick: function onClick(e) {
+          return _this4.onTabHeaderClose(e, index);
+        }
+      });
       var content =
       /*#__PURE__*/
 
@@ -307,13 +439,13 @@ var TabView = /*#__PURE__*/function (_Component2) {
         role: "tab",
         className: "p-tabview-nav-link",
         onClick: function onClick(event) {
-          return _this2.onTabHeaderClick(event, tab, index);
+          return _this4.onTabHeaderClick(event, tab, index);
         },
         id: id,
         "aria-controls": ariaControls,
         "aria-selected": selected,
         tabIndex: tabIndex
-      }, leftIconElement, titleElement, rightIconElement, /*#__PURE__*/React.createElement(Ripple, null))
+      }, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React.createElement(Ripple, null))
       /* eslint-enable */
       ;
 
@@ -322,7 +454,7 @@ var TabView = /*#__PURE__*/function (_Component2) {
           className: 'p-tabview-nav-link',
           titleClassName: 'p-tabview-title',
           onClick: function onClick(event) {
-            return _this2.onTabHeaderClick(event, tab, index);
+            return _this4.onTabHeaderClick(event, tab, index);
           },
           leftIconElement: leftIconElement,
           titleElement: titleElement,
@@ -338,31 +470,33 @@ var TabView = /*#__PURE__*/function (_Component2) {
 
       return /*#__PURE__*/React.createElement("li", {
         ref: function ref(el) {
-          return _this2["tab_".concat(index)] = el;
+          return _this4["tab_".concat(index)] = el;
         },
         className: className,
-        style: tab.props.headerStyle,
+        style: style,
         role: "presentation"
       }, content);
     }
   }, {
     key: "renderTabHeaders",
     value: function renderTabHeaders() {
-      var _this3 = this;
+      var _this5 = this;
 
       return React.Children.map(this.props.children, function (tab, index) {
-        return _this3.renderTabHeader(tab, index);
+        if (_this5.shouldTabRender(tab, index)) {
+          return _this5.renderTabHeader(tab, index);
+        }
       });
     }
   }, {
     key: "renderNavigator",
     value: function renderNavigator() {
-      var _this4 = this;
+      var _this6 = this;
 
       var headers = this.renderTabHeaders();
       return /*#__PURE__*/React.createElement("div", {
         ref: function ref(el) {
-          return _this4.content = el;
+          return _this6.content = el;
         },
         id: this.props.id,
         className: "p-tabview-nav-content",
@@ -370,13 +504,13 @@ var TabView = /*#__PURE__*/function (_Component2) {
         onScroll: this.onScroll
       }, /*#__PURE__*/React.createElement("ul", {
         ref: function ref(el) {
-          return _this4.nav = el;
+          return _this6.nav = el;
         },
         className: "p-tabview-nav",
         role: "tablist"
       }, headers, /*#__PURE__*/React.createElement("li", {
         ref: function ref(el) {
-          return _this4.inkbar = el;
+          return _this6.inkbar = el;
         },
         className: "p-tabview-ink-bar"
       })));
@@ -384,11 +518,11 @@ var TabView = /*#__PURE__*/function (_Component2) {
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var _this5 = this;
+      var _this7 = this;
 
       var contents = React.Children.map(this.props.children, function (tab, index) {
-        if (!_this5.props.renderActiveOnly || _this5.isSelected(index)) {
-          return _this5.createContent(tab, index);
+        if (_this7.shouldTabRender(tab, index) && (!_this7.props.renderActiveOnly || _this7.isSelected(index))) {
+          return _this7.createContent(tab, index);
         }
       });
       return /*#__PURE__*/React.createElement("div", {
@@ -399,7 +533,10 @@ var TabView = /*#__PURE__*/function (_Component2) {
     key: "createContent",
     value: function createContent(tab, index) {
       var selected = this.isSelected(index);
-      var className = classNames(tab.props.contentClassName, 'p-tabview-panel', {
+
+      var style = _objectSpread(_objectSpread({}, tab.props.contentStyle || {}), tab.props.style || {});
+
+      var className = classNames(tab.props.contentClassName, tab.props.className, 'p-tabview-panel', {
         'p-hidden': !selected
       });
       var id = this.state.id + '_content_' + index;
@@ -409,19 +546,19 @@ var TabView = /*#__PURE__*/function (_Component2) {
         "aria-labelledby": ariaLabelledBy,
         "aria-hidden": !selected,
         className: className,
-        style: tab.props.contentStyle,
+        style: style,
         role: "tabpanel"
       }, !this.props.renderActiveOnly ? tab.props.children : selected && tab.props.children);
     }
   }, {
     key: "renderPrevButton",
     value: function renderPrevButton() {
-      var _this6 = this;
+      var _this8 = this;
 
       if (this.props.scrollable && !this.state.backwardIsDisabled) {
         return /*#__PURE__*/React.createElement("button", {
           ref: function ref(el) {
-            return _this6.prevBtn = el;
+            return _this8.prevBtn = el;
           },
           className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
           onClick: this.navBackward,
@@ -436,12 +573,12 @@ var TabView = /*#__PURE__*/function (_Component2) {
   }, {
     key: "renderNextButton",
     value: function renderNextButton() {
-      var _this7 = this;
+      var _this9 = this;
 
       if (this.props.scrollable && !this.state.forwardIsDisabled) {
         return /*#__PURE__*/React.createElement("button", {
           ref: function ref(el) {
-            return _this7.nextBtn = el;
+            return _this9.nextBtn = el;
           },
           className: "p-tabview-nav-next p-tabview-nav-btn p-link",
           onClick: this.navForward,
@@ -479,6 +616,7 @@ _defineProperty(TabView, "defaultProps", {
   className: null,
   renderActiveOnly: true,
   onTabChange: null,
+  onTabClose: null,
   scrollable: false
 });
 

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 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};
+import e,{Component as t}from"react";import{DomHandler as n,UniqueComponentId as r,classNames as a,ObjectUtils as i}from"primereact/utils";import{Ripple as o}from"primereact/ripple";function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function s(e){if(Array.isArray(e))return l(e)}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function u(e,t){if(e){if("string"==typeof e)return l(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(e,t):void 0}}function p(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(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 f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function b(e,t){return b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},b(e,t)}function v(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&&b(e,t)}function y(e){return y="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},y(e)}function m(e,t){if(t&&("object"===y(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return f(e)}function w(e){return w=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},w(e)}function k(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(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 I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?g(Object(n),!0).forEach((function(t){k(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function S(e){var t=T();return function(){var n,r=w(e);if(t){var a=w(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return m(this,n)}}function T(){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 C=function(e){v(r,t);var n=S(r);function r(){return h(this,r),n.apply(this,arguments)}return r}();k(C,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,closable:!1,disabled:!1,style:null,className:null,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var O=function(l){v(k,t);var b,y,m,w=S(k);function k(e){var t;h(this,k),t=w.call(this,e);var n={id:e.id,backwardIsDisabled:!0,forwardIsDisabled:!1,hiddenTabs:[]};return t.props.onTabChange||(n=I(I({},n),{},{activeIndex:e.activeIndex})),t.state=n,t.navBackward=t.navBackward.bind(f(t)),t.navForward=t.navForward.bind(f(t)),t.onScroll=t.onScroll.bind(f(t)),t}return b=k,(y=[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"shouldTabRender",value:function(e,t){return e&&e.type===C&&this.state.hiddenTabs.every((function(e){return e!==t}))}},{key:"findVisibleActiveTab",value:function(t){var n=this,r=e.Children.map(this.props.children,(function(e,t){if(n.shouldTabRender(e,t))return{tab:e,index:t}}));return r.find((function(e){return!e.tab.props.disabled&&e.index>=t}))||r.reverse().find((function(e){return!e.tab.props.disabled&&t>e.index}))}},{key:"onTabHeaderClose",value:function(e,t){var n,r=this,a=[].concat(s(n=this.state.hiddenTabs)||c(n)||u(n)||p(),[t]);this.setState({hiddenTabs:a},(function(){var n=r.findVisibleActiveTab(t);n&&r.onTabHeaderClick(e,n.tab,n.index)})),this.props.onTabClose&&this.props.onTabClose({originalEvent:e,index:t}),e.preventDefault()}},{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){var t=this["tab_".concat(e)];t&&t.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:"reset",value:function(){var e={backwardIsDisabled:!0,forwardIsDisabled:!1,hiddenTabs:[]};this.props.onTabChange?this.props.onTabChange({index:this.props.activeIndex}):e=I(I({},e),{},{activeIndex:this.props.activeIndex}),this.setState(e)}},{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),e.children!==this.props.children&&this.setState({hiddenTabs:[]})}},{key:"renderTabHeader",value:function(t,n){var r=this,l=this.isSelected(n),s=I(I({},t.props.headerStyle||{}),t.props.style||{}),c=a("p-unselectable-text",{"p-tabview-selected p-highlight":l,"p-disabled":t.props.disabled},t.props.headerClassName,t.props.className),u=this.state.id+"_header_"+n,p=this.state.id+"_content_"+n,d=t.props.disabled?null:0,f=t.props.leftIcon&&e.createElement("i",{className:t.props.leftIcon}),h=e.createElement("span",{className:"p-tabview-title"},t.props.header),b=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:u,"aria-controls":p,"aria-selected":l,tabIndex:d},f,h,b,t.props.closable&&e.createElement("i",{className:"p-tabview-close pi pi-times",onClick:function(e){return r.onTabHeaderClose(e,n)}}),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:f,titleElement:h,rightIconElement:b,element:v,props:this.props,index:n,selected:l,ariaControls:p})),e.createElement("li",{ref:function(e){return r["tab_".concat(n)]=e},className:c,style:s,role:"presentation"},v)}},{key:"renderTabHeaders",value:function(){var t=this;return e.Children.map(this.props.children,(function(e,n){if(t.shouldTabRender(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.shouldTabRender(e,n)&&(!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=I(I({},t.props.contentStyle||{}),t.props.style||{}),o=a(t.props.contentClassName,t.props.className,"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:o,style:i,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)}}])&&d(b.prototype,y),m&&d(b,m),k}();k(O,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null,onTabClose:null,scrollable:!1});export{C as TabPanel,O as TabView};