@transferwise/components 44.1.0 → 44.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/es/no-polyfill/tabs/Tabs.js +1 -1
  2. package/build/es/polyfill/tabs/Tabs.js +1 -1
  3. package/build/umd/no-polyfill/main.js +1 -1
  4. package/build/umd/polyfill/main.js +1 -1
  5. package/package.json +2 -2
package/build/es/no-polyfill/tabs/Tabs.js CHANGED
@@ -1 +1 @@
1
- import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){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(a){return!1}}import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,createRef,Fragment}from"react";import{Spring}from"react-spring/renderprops.cjs";import{Size,Width,Direction}from"../common";import KeyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){/** @type {RefObject<HTMLDivElement>} */function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"containerReference",/*#__PURE__*/createRef()),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var l=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?l:c);var m=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:l,start:b,end:f}),n=!!m&&-(d.containerWidth*e)+m;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:n||a.translateFrom,translateTo:n||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(b){var h=b===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:a.containerReference,className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?a.handleTouchStart:void 0,onTouchEnd:d?a.handleTouchEnd:void 0,onTouchMove:d?a.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){var b;null!==(b=a.containerReference.current)&&void 0!==b&&b.contains(document.activeElement)&&a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:a.getTabLineWidth(),transform:h?"translateX(-".concat(l,")"):"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:a.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"]),id:PropTypes.string},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
1
+ import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){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(a){return!1}}import{Spring}from"@react-spring/web";import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,createRef,Fragment}from"react";import{Size,Width,Direction}from"../common";import KeyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){/** @type {RefObject<HTMLDivElement>} */function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"containerReference",/*#__PURE__*/createRef()),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var l=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?l:c);var m=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:l,start:b,end:f}),n=!!m&&-(d.containerWidth*e)+m;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:n||a.translateFrom,translateTo:n||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(b){var h=b===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:a.containerReference,className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?a.handleTouchStart:void 0,onTouchEnd:d?a.handleTouchEnd:void 0,onTouchMove:d?a.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){var b;null!==(b=a.containerReference.current)&&void 0!==b&&b.contains(document.activeElement)&&a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:a.getTabLineWidth(),transform:h?"translateX(-".concat(l,")"):"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:a.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"]),id:PropTypes.string},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
package/build/es/polyfill/tabs/Tabs.js CHANGED
@@ -1 +1 @@
1
- import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.number.is-nan.js";import"core-js/modules/es.number.constructor.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){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(a){return!1}}import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,createRef,Fragment}from"react";import{Spring}from"react-spring/renderprops.cjs";import{Size,Width,Direction}from"../common";import KeyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){/** @type {RefObject<HTMLDivElement>} */function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"containerReference",/*#__PURE__*/createRef()),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var l=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?l:c);var m=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:l,start:b,end:f}),n=!!m&&-(d.containerWidth*e)+m;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:n||a.translateFrom,translateTo:n||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(b){var h=b===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:a.containerReference,className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?a.handleTouchStart:void 0,onTouchEnd:d?a.handleTouchEnd:void 0,onTouchMove:d?a.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){var b;null!==(b=a.containerReference.current)&&void 0!==b&&b.contains(document.activeElement)&&a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:a.getTabLineWidth(),transform:h?"translateX(-".concat(l,")"):"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:a.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"]),id:PropTypes.string},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
1
+ import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.number.is-nan.js";import"core-js/modules/es.number.constructor.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){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(a){return!1}}import{Spring}from"@react-spring/web";import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,createRef,Fragment}from"react";import{Size,Width,Direction}from"../common";import KeyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){/** @type {RefObject<HTMLDivElement>} */function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"containerReference",/*#__PURE__*/createRef()),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var l=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?l:c);var m=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:l,start:b,end:f}),n=!!m&&-(d.containerWidth*e)+m;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:n||a.translateFrom,translateTo:n||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(b){var h=b===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:a.containerReference,className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?a.handleTouchStart:void 0,onTouchEnd:d?a.handleTouchEnd:void 0,onTouchMove:d?a.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){var b;null!==(b=a.containerReference.current)&&void 0!==b&&b.contains(document.activeElement)&&a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:a.getTabLineWidth(),transform:h?"translateX(-".concat(l,")"):"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:a.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"]),id:PropTypes.string},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;