@material/react-tab-bar
Version:
Material Components React Tab Bar
62 lines (60 loc) • 16.4 kB
JavaScript
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("classnames"),require("@material/react-tab-scroller/dist/index.js"),require("@material/react-tab/dist/index.js"));else if("function"==typeof define&&define.amd)define(["react","classnames","@material/react-tab-scroller/dist/index.js","@material/react-tab/dist/index.js"],e);else{var n="object"==typeof exports?e(require("react"),require("classnames"),require("@material/react-tab-scroller/dist/index.js"),require("@material/react-tab/dist/index.js")):e(t.react,t.classnames,t["@material/react-tab-scroller/dist/index.js"],t["@material/react-tab/dist/index.js"]);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}("undefined"!=typeof self?self:this,function(t,e,n,r){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=123)}({0:function(e,n){e.exports=t},1:function(t,n){t.exports=e},123:function(t,e,n){"use strict";var r,i=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),o=this&&this.__assign||function(){return(o=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},a=this&&this.__rest||function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n},c=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=c(n(0)),u=c(n(1)),d=c(n(124)),f=c(n(125));e.Tab=f.default;var l=n(154),p=function(t){function e(e){var n=t.call(this,e)||this;return n.tabBarRef=s.default.createRef(),n.tabScrollerRef=s.default.createRef(),n.tabList=[],n.pushToTabList=function(t){n.tabList.push(t)},n.onKeyDown=function(t){t.persist(),n.setState({previousActiveIndex:n.props.activeIndex},function(){return n.foundation.handleKeyDown(t.nativeEvent)}),n.props.onKeyDown&&n.props.onKeyDown(t)},n.onClickTab=function(t,e,r){n.setState({previousActiveIndex:n.props.activeIndex},function(){return n.adapter.setActiveTab(e)}),r&&r(t)},n.renderTab=function(t,e){var r=t.props,i=r.children,c=r.onClick,u=a(r,["children","onClick"]),d=o({onClick:function(t){return n.onClickTab(t,e,c)},ref:n.pushToTabList},u);return s.default.cloneElement(t,d,i)},n.state={previousActiveIndex:e.activeIndex},n}return i(e,t),e.prototype.componentDidMount=function(){this.foundation=new l.MDCTabBarFoundation(this.adapter),this.foundation.init();var t=this.props,e=t.activeIndex,n=t.indexInView;if(this.tabList[e]){this.tabList[e].activate({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0})}this.foundation.scrollIntoView(n)},e.prototype.componentDidUpdate=function(t){var e=this;this.props.activeIndex!==t.activeIndex&&this.setState({previousActiveIndex:t.activeIndex},function(){return e.foundation.activateTab(e.props.activeIndex)}),this.props.indexInView!==t.indexInView&&this.foundation.scrollIntoView(this.props.indexInView)},e.prototype.componentWillUnmount=function(){this.foundation.destroy()},Object.defineProperty(e.prototype,"classes",{get:function(){return u.default("mdc-tab-bar",this.props.className)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"adapter",{get:function(){var t=this;return{scrollTo:function(e){t.tabScrollerRef.current&&t.tabScrollerRef.current.scrollTo(e)},incrementScroll:function(e){t.tabScrollerRef.current&&t.tabScrollerRef.current.incrementScroll(e)},getScrollPosition:function(){return t.tabScrollerRef.current?t.tabScrollerRef.current.getScrollPosition():0},getScrollContentWidth:function(){return t.tabScrollerRef.current?t.tabScrollerRef.current.getScrollContentWidth():0},getOffsetWidth:function(){return null===t.tabBarRef.current?0:t.tabBarRef.current.offsetWidth},isRTL:function(){return!!t.props.isRtl},setActiveTab:function(e){t.props.handleActiveIndexUpdate&&t.props.handleActiveIndexUpdate(e)},activateTabAtIndex:function(e,n){return t.tabList[e].activate(n)},deactivateTabAtIndex:function(e){return t.tabList[e].deactivate()},focusTabAtIndex:function(e){return t.tabList[e].focus()},getTabIndicatorClientRectAtIndex:function(e){return t.tabList[e].computeIndicatorClientRect()},getTabDimensionsAtIndex:function(e){return t.tabList[e].computeDimensions()},getPreviousActiveTabIndex:function(){return t.state.previousActiveIndex},getFocusedTabIndex:function(){for(var e=document.activeElement,n=0;n<t.tabList.length;n++)if(t.tabList[n].tabRef.current===e)return n;return-1},getIndexOfTabById:function(e){return t.tabList.map(function(t){return t.props.id}).indexOf(e)},getTabListLength:function(){return t.tabList.length},notifyTabActivated:function(e){return t.props.onActivated&&t.props.onActivated(e)}}},enumerable:!0,configurable:!0}),e.prototype.render=function(){var t=this.props,e=(t.className,t.indexInView,t.activeIndex,t.handleActiveIndexUpdate,t.onKeyDown,t.isRtl),n=t.children,r=a(t,["className","indexInView","activeIndex","handleActiveIndexUpdate","onKeyDown","isRtl","children"]);return s.default.createElement("div",o({dir:e?"rtl":"ltr",className:this.classes,role:"tablist",onKeyDown:this.onKeyDown,ref:this.tabBarRef},r),s.default.createElement(d.default,{ref:this.tabScrollerRef},s.default.Children.map(n,this.renderTab)))},e.defaultProps={indexInView:0,activeIndex:0,handleActiveIndexUpdate:function(){},className:"",children:[],isRtl:!1},e}(s.default.Component);e.default=p},124:function(t,e){t.exports=n},125:function(t,e){t.exports=r},154:function(t,e,n){"use strict";n.r(e);"function"==typeof Symbol&&Symbol.iterator;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var i=function(){return(i=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
var o=function(){function t(t){void 0===t&&(t={}),this.adapter_=t}return Object.defineProperty(t,"cssClasses",{get:function(){return{}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return{}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"numbers",{get:function(){return{}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{}},enumerable:!0,configurable:!0}),t.prototype.init=function(){},t.prototype.destroy=function(){},t}(),a={ARROW_LEFT_KEY:"ArrowLeft",ARROW_RIGHT_KEY:"ArrowRight",END_KEY:"End",ENTER_KEY:"Enter",HOME_KEY:"Home",SPACE_KEY:"Space",TAB_ACTIVATED_EVENT:"MDCTabBar:activated",TAB_SCROLLER_SELECTOR:".mdc-tab-scroller",TAB_SELECTOR:".mdc-tab"},c={ARROW_LEFT_KEYCODE:37,ARROW_RIGHT_KEYCODE:39,END_KEYCODE:35,ENTER_KEYCODE:13,EXTRA_SCROLL_AMOUNT:20,HOME_KEYCODE:36,SPACE_KEYCODE:32};n.d(e,"MDCTabBarFoundation",function(){return d});
/**
* @license
* Copyright 2018 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
var s=new Set;s.add(a.ARROW_LEFT_KEY),s.add(a.ARROW_RIGHT_KEY),s.add(a.END_KEY),s.add(a.HOME_KEY),s.add(a.ENTER_KEY),s.add(a.SPACE_KEY);var u=new Map;u.set(c.ARROW_LEFT_KEYCODE,a.ARROW_LEFT_KEY),u.set(c.ARROW_RIGHT_KEYCODE,a.ARROW_RIGHT_KEY),u.set(c.END_KEYCODE,a.END_KEY),u.set(c.HOME_KEYCODE,a.HOME_KEY),u.set(c.ENTER_KEYCODE,a.ENTER_KEY),u.set(c.SPACE_KEYCODE,a.SPACE_KEY);var d=function(t){function e(n){var r=t.call(this,i({},e.defaultAdapter,n))||this;return r.useAutomaticActivation_=!1,r}return function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),Object.defineProperty(e,"strings",{get:function(){return a},enumerable:!0,configurable:!0}),Object.defineProperty(e,"numbers",{get:function(){return c},enumerable:!0,configurable:!0}),Object.defineProperty(e,"defaultAdapter",{get:function(){return{scrollTo:function(){},incrementScroll:function(){},getScrollPosition:function(){return 0},getScrollContentWidth:function(){return 0},getOffsetWidth:function(){return 0},isRTL:function(){return!1},setActiveTab:function(){},activateTabAtIndex:function(){},deactivateTabAtIndex:function(){},focusTabAtIndex:function(){},getTabIndicatorClientRectAtIndex:function(){return{top:0,right:0,bottom:0,left:0,width:0,height:0}},getTabDimensionsAtIndex:function(){return{rootLeft:0,rootRight:0,contentLeft:0,contentRight:0}},getPreviousActiveTabIndex:function(){return-1},getFocusedTabIndex:function(){return-1},getIndexOfTabById:function(){return-1},getTabListLength:function(){return 0},notifyTabActivated:function(){}}},enumerable:!0,configurable:!0}),e.prototype.setUseAutomaticActivation=function(t){this.useAutomaticActivation_=t},e.prototype.activateTab=function(t){var e=this.adapter_.getPreviousActiveTabIndex();this.indexIsInRange_(t)&&t!==e&&(this.adapter_.deactivateTabAtIndex(e),this.adapter_.activateTabAtIndex(t,this.adapter_.getTabIndicatorClientRectAtIndex(e)),this.scrollIntoView(t),this.adapter_.notifyTabActivated(t))},e.prototype.handleKeyDown=function(t){var e=this.getKeyFromEvent_(t);if(void 0!==e)if(this.isActivationKey_(e)||t.preventDefault(),this.useAutomaticActivation_){if(this.isActivationKey_(e))return;var n=this.determineTargetFromKey_(this.adapter_.getPreviousActiveTabIndex(),e);this.adapter_.setActiveTab(n),this.scrollIntoView(n)}else{var r=this.adapter_.getFocusedTabIndex();if(this.isActivationKey_(e))this.adapter_.setActiveTab(r);else{n=this.determineTargetFromKey_(r,e);this.adapter_.focusTabAtIndex(n),this.scrollIntoView(n)}}},e.prototype.handleTabInteraction=function(t){this.adapter_.setActiveTab(this.adapter_.getIndexOfTabById(t.detail.tabId))},e.prototype.scrollIntoView=function(t){if(this.indexIsInRange_(t))return 0===t?this.adapter_.scrollTo(0):t===this.adapter_.getTabListLength()-1?this.adapter_.scrollTo(this.adapter_.getScrollContentWidth()):this.isRTL_()?this.scrollIntoViewRTL_(t):void this.scrollIntoView_(t)},e.prototype.determineTargetFromKey_=function(t,e){var n=this.isRTL_(),r=this.adapter_.getTabListLength()-1,i=t;return e===a.END_KEY?i=r:e===a.ARROW_LEFT_KEY&&!n||e===a.ARROW_RIGHT_KEY&&n?i-=1:e===a.ARROW_RIGHT_KEY&&!n||e===a.ARROW_LEFT_KEY&&n?i+=1:i=0,i<0?i=r:i>r&&(i=0),i},e.prototype.calculateScrollIncrement_=function(t,e,n,r){var i=this.adapter_.getTabDimensionsAtIndex(e),o=i.contentLeft-n-r,a=i.contentRight-n-c.EXTRA_SCROLL_AMOUNT,s=o+c.EXTRA_SCROLL_AMOUNT;return e<t?Math.min(a,0):Math.max(s,0)},e.prototype.calculateScrollIncrementRTL_=function(t,e,n,r,i){var o=this.adapter_.getTabDimensionsAtIndex(e),a=i-o.contentLeft-n,s=i-o.contentRight-n-r+c.EXTRA_SCROLL_AMOUNT,u=a-c.EXTRA_SCROLL_AMOUNT;return e>t?Math.max(s,0):Math.min(u,0)},e.prototype.findAdjacentTabIndexClosestToEdge_=function(t,e,n,r){var i=e.rootLeft-n,o=e.rootRight-n-r,a=i+o;return i<0||a<0?t-1:o>0||a>0?t+1:-1},e.prototype.findAdjacentTabIndexClosestToEdgeRTL_=function(t,e,n,r,i){var o=i-e.rootLeft-r-n,a=i-e.rootRight-n,c=o+a;return o>0||c>0?t+1:a<0||c<0?t-1:-1},e.prototype.getKeyFromEvent_=function(t){return s.has(t.key)?t.key:u.get(t.keyCode)},e.prototype.isActivationKey_=function(t){return t===a.SPACE_KEY||t===a.ENTER_KEY},e.prototype.indexIsInRange_=function(t){return t>=0&&t<this.adapter_.getTabListLength()},e.prototype.isRTL_=function(){return this.adapter_.isRTL()},e.prototype.scrollIntoView_=function(t){var e=this.adapter_.getScrollPosition(),n=this.adapter_.getOffsetWidth(),r=this.adapter_.getTabDimensionsAtIndex(t),i=this.findAdjacentTabIndexClosestToEdge_(t,r,e,n);if(this.indexIsInRange_(i)){var o=this.calculateScrollIncrement_(t,i,e,n);this.adapter_.incrementScroll(o)}},e.prototype.scrollIntoViewRTL_=function(t){var e=this.adapter_.getScrollPosition(),n=this.adapter_.getOffsetWidth(),r=this.adapter_.getTabDimensionsAtIndex(t),i=this.adapter_.getScrollContentWidth(),o=this.findAdjacentTabIndexClosestToEdgeRTL_(t,r,e,n,i);if(this.indexIsInRange_(o)){var a=this.calculateScrollIncrementRTL_(t,o,e,n,i);this.adapter_.incrementScroll(a)}},e}(o);e.default=d}})});
//# sourceMappingURL=tab-bar.js.map