UNPKG

@tarojs/components

Version:
1 lines 10.3 kB
var __spreadArray=this&&this.__spreadArray||function(e,a){for(var t=0,r=a.length,o=e.length;t<r;t++,o++)e[o]=a[t];return e};import{h,r as registerInstance,c as createEvent,H as Host,g as getElement}from"./index-5bd7cbab.js";import Taro from"@tarojs/taro";import{c as classnames}from"./index-cd1a2d33.js";var splitUrl=function(e){var a=e||"";var t;var r={path:null,query:null,fragment:null};t=a.indexOf("#");if(t>-1){r.fragment=a.substring(t+1);a=a.substring(0,t)}t=a.indexOf("?");if(t>-1){r.query=a.substring(t+1);a=a.substring(0,t)}r.path=a;return r};function isAbsolute(e){return e.charAt(0)==="/"}function spliceOne(e,a){for(var t=a,r=t+1,o=e.length;r<o;t+=1,r+=1){e[t]=e[r]}e.pop()}function resolvePathname(e,a){if(a===undefined)a="";var t=e&&e.split("/")||[];var r=a&&a.split("/")||[];var o=e&&isAbsolute(e);var n=a&&isAbsolute(a);var s=o||n;if(e&&isAbsolute(e)){r=t}else if(t.length){r.pop();r=r.concat(t)}if(!r.length)return"/";var i;if(r.length){var l=r[r.length-1];i=l==="."||l===".."||l===""}else{i=false}var d=0;for(var b=r.length;b>=0;b--){var h=r[b];if(h==="."){spliceOne(r,b)}else if(h===".."){spliceOne(r,b);d++}else if(d){spliceOne(r,b);d--}}if(!s)for(;d--;d)r.unshift("..");if(s&&r[0]!==""&&(!r[0]||!isAbsolute(r[0])))r.unshift("");var c=r.join("/");if(i&&c.substr(-1)!=="/")c+="/";return c}var TabbarItem=function(e){var a=e.index,t=e.isSelected,r=t===void 0?false:t,o=e.textColor,n=e.iconPath,s=e.badgeText,i=e.showRedDot,l=i===void 0?false:i,d=e.text,b=e.onSelect;var c=classnames("weui-tabbar__item",{"weui-bar__item_on":r});var f={position:"absolute",top:"-2px",right:"-13px"};var u={position:"absolute",top:"0",right:"-6px"};function v(){b(a)}return h("a",{key:a,href:"javascript:;",class:c,onClick:v},h("span",{style:{display:"inline-block",position:"relative"}},h("img",{src:n,alt:"",class:"weui-tabbar__icon"}),!!s&&h("span",{class:"weui-badge taro-tabbar-badge",style:f},s),l&&h("span",{class:"weui-badge weui-badge_dot",style:u})),h("p",{class:"weui-tabbar__label",style:{color:o}},d))};var indexCss="html,body{height:100%}#app{height:100%}.taro-tabbar__border-white::before{border-top-color:#fff !important}.taro-tabbar__container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column;height:100%}.taro-tabbar__panel{overflow:auto;position:relative;-ms-flex:1;flex:1;-webkit-overflow-scrolling:auto}.taro-tabbar__tabbar{position:relative;width:100%;height:50px;-webkit-transition:bottom 0.2s, top 0.2s;transition:bottom 0.2s, top 0.2s}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{bottom:0;margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom)}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{top:-52px;-ms-flex:0 0;flex:0 0}.taro-tabbar__panel+.taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}";var addLeadingSlash=function(e){return e[0]==="/"?e:"/"+e};var hasBasename=function(e,a){return new RegExp("^"+a+"(\\/|\\?|#|$)","i").test(e)};var stripBasename=function(e,a){return hasBasename(e,a)?e.substr(a.length):e};var STATUS_SHOW=0;var STATUS_HIDE=1;var STATUS_SLIDEOUT=2;var basicTabBarClassName="taro-tabbar__tabbar";var hideTabBarClassName="taro-tabbar__tabbar-hide";var hideTabBarWithAnimationClassName="taro-tabbar__tabbar-slideout";var Tabbar=function(){function e(e){var a=this;registerInstance(this,e);this.onLongPress=createEvent(this,"longpress",7);this.homePage="";this.customRoutes=[];this.tabbarPos="bottom";this.selectedIndex=-1;this.status=STATUS_SHOW;this.getOriginUrl=function(e){var t=a.customRoutes.filter((function(a){var t=a[1];var r=splitUrl(t).path;var o=splitUrl(e).path;return r===o}));return t.length?t[0][0]:e};this.getSelectedIndex=function(e){var t=-1;a.list.forEach((function(a,r){var o=a.pagePath;var n=splitUrl(e).path;var s=splitUrl(o).path;if(n===s){t=r}}));return t};this.switchTab=function(e){a.selectedIndex=e;Taro.switchTab({url:a.list[e].pagePath})};this.switchTabHandler=function(e){var t=e.url,r=e.successHandler,o=e.errorHandler;var n=a.getOriginUrl(a.getCurrentUrl()||a.homePage);var s=resolvePathname(t,n);var i=a.getSelectedIndex(s);if(i>-1){a.switchTab(i);r({errMsg:"switchTab:ok"})}else{o({errMsg:'switchTab:fail page "'+s+'" is not found'})}};this.routerChangeHandler=function(e){var t;var r=(t=e===null||e===void 0?void 0:e.toLocation)===null||t===void 0?void 0:t.path;var o;if(typeof r==="string"){var n=a.conf.basename||"/";o=stripBasename(addLeadingSlash(r||a.homePage),n)||"/"}else{o=a.getCurrentUrl()}a.selectedIndex=a.getSelectedIndex(a.getOriginUrl(o))};this.setTabBarBadgeHandler=function(e){var t=e.index,r=e.text,o=e.successHandler,n=e.errorHandler;var s=__spreadArray([],a.list);if(t in s){s[t].showRedDot=false;s[t].badgeText=r;o({errMsg:"setTabBarBadge:ok"})}else{n({errMsg:"setTabBarBadge:fail tabbar item not found"})}a.list=s};this.removeTabBarBadgeHandler=function(e){var t=e.index,r=e.successHandler,o=e.errorHandler;var n=__spreadArray([],a.list);if(t in n){n[t].badgeText=null;n[t].badgeText=null;r({errMsg:"removeTabBarBadge:ok"})}else{o({errMsg:"removeTabBarBadge:fail tabbar item not found"})}a.list=n};this.showTabBarRedDotHandler=function(e){var t=e.index,r=e.successHandler,o=e.errorHandler;var n=__spreadArray([],a.list);if(t in n){n[t].badgeText=null;n[t].showRedDot=true;r({errMsg:"showTabBarRedDot:ok"})}else{o({errMsg:"showTabBarRedDot:fail tabbar item not found"})}a.list=n};this.hideTabBarRedDotHandler=function(e){var t=e.index,r=e.successHandler,o=e.errorHandler;var n=__spreadArray([],a.list);if(t in n){n[t].showRedDot=false;r({errMsg:"hideTabBarRedDot:ok"})}else{o({errMsg:"hideTabBarRedDot:fail tabbar item not found"})}a.list=n};this.showTabBarHandler=function(e){var t=e.successHandler;a.status=STATUS_SHOW;t({errMsg:"showTabBar:ok"})};this.hideTabBarHandler=function(e){var t=e.animation,r=e.successHandler;a.status=t?STATUS_SLIDEOUT:STATUS_HIDE;r({errMsg:"hideTabBar:ok"})};this.setTabBarStyleHandler=function(e){var t=e.color,r=e.selectedColor,o=e.backgroundColor,n=e.borderStyle,s=e.successHandler;if(o)a.backgroundColor=o;if(n)a.borderStyle=n;if(t)a.color=t;if(r)a.selectedColor=r;s({errMsg:"setTabBarStyle:ok"})};this.setTabBarItemHandler=function(e){var t=e.index,r=e.iconPath,o=e.selectedIconPath,n=e.text,s=e.successHandler,i=e.errorHandler;var l=__spreadArray([],a.list);if(t in l){if(r)l[t].iconPath=r;if(o)l[t].selectedIconPath=o;if(n)l[t].text=n;s({errMsg:"setTabBarItem:ok"})}else{i({errMsg:"setTabBarItem:fail tabbar item not found"})}a.list=l};var t=this.conf.list;var r=this.conf.customRoutes;if(Object.prototype.toString.call(t)!=="[object Array]"||t.length<2||t.length>5){throw new Error("tabBar 配置错误")}this.homePage=addLeadingSlash(this.conf.homePage);var o=function(e){var a;var t=r[e];e=addLeadingSlash(e);if(typeof t==="string"){n.customRoutes.push([e,addLeadingSlash(t)])}else if((t===null||t===void 0?void 0:t.length)>0){(a=n.customRoutes).push.apply(a,t.map((function(a){return[e,addLeadingSlash(a)]})))}};var n=this;for(var s in r){o(s)}t.forEach((function(e){if(e.pagePath.indexOf("/")!==0){e.pagePath="/"+e.pagePath}}));this.list=t;this.borderStyle=this.conf.borderStyle;this.backgroundColor=this.conf.backgroundColor;this.color=this.conf.color;this.selectedColor=this.conf.selectedColor}e.prototype.getCurrentUrl=function(){var e=this.conf.mode;var a=this.conf.basename||"/";var t;if(e==="hash"){var r=window.location.href;var o=r.indexOf("#");t=o===-1?"":r.substring(o+1)}else{t=location.pathname}var n=addLeadingSlash(stripBasename(t,a));return n==="/"?this.homePage:n};e.prototype.bindEvent=function(){Taro.eventCenter.on("__taroRouterChange",this.routerChangeHandler);Taro.eventCenter.on("__taroSwitchTab",this.switchTabHandler);Taro.eventCenter.on("__taroSetTabBarBadge",this.setTabBarBadgeHandler);Taro.eventCenter.on("__taroRemoveTabBarBadge",this.removeTabBarBadgeHandler);Taro.eventCenter.on("__taroShowTabBarRedDotHandler",this.showTabBarRedDotHandler);Taro.eventCenter.on("__taroHideTabBarRedDotHandler",this.hideTabBarRedDotHandler);Taro.eventCenter.on("__taroShowTabBar",this.showTabBarHandler);Taro.eventCenter.on("__taroHideTabBar",this.hideTabBarHandler);Taro.eventCenter.on("__taroSetTabBarStyle",this.setTabBarStyleHandler);Taro.eventCenter.on("__taroSetTabBarItem",this.setTabBarItemHandler)};e.prototype.removeEvent=function(){Taro.eventCenter.off("__taroRouterChange",this.routerChangeHandler);Taro.eventCenter.off("__taroSwitchTab",this.switchTabHandler);Taro.eventCenter.off("__taroSetTabBarBadge",this.setTabBarBadgeHandler);Taro.eventCenter.off("__taroRemoveTabBarBadge",this.removeTabBarBadgeHandler);Taro.eventCenter.off("__taroShowTabBarRedDotHandler",this.showTabBarRedDotHandler);Taro.eventCenter.off("__taroHideTabBarRedDotHandler",this.hideTabBarRedDotHandler);Taro.eventCenter.off("__taroShowTabBar",this.showTabBarHandler);Taro.eventCenter.off("__taroHideTabBar",this.hideTabBarHandler);Taro.eventCenter.off("__taroSetTabBarStyle",this.setTabBarStyleHandler);Taro.eventCenter.off("__taroSetTabBarItem",this.setTabBarItemHandler)};e.prototype.componentDidLoad=function(){this.tabbarPos=this.tabbar.nextElementSibling?"top":"bottom";this.bindEvent();this.routerChangeHandler()};e.prototype.disconnectedCallback=function(){this.removeEvent()};e.prototype.render=function(){var e,a;var t=this;var r=this.tabbarPos,o=r===void 0?"bottom":r;var n=this.status;var s=classnames("weui-tabbar",(e={},e["taro-tabbar__border-"+(this.borderStyle||"black")]=true,e));var i=this.selectedIndex===-1||n===STATUS_HIDE;var l=n===STATUS_SLIDEOUT;return h(Host,{class:classnames(basicTabBarClassName,basicTabBarClassName+"-"+o,(a={},a[hideTabBarClassName]=i,a[hideTabBarWithAnimationClassName]=l,a))},h("div",{class:s,style:{backgroundColor:this.backgroundColor||"",height:"inherit"}},this.list.map((function(e,a){var r=t.selectedIndex===a;var o;var n;if(r){o=t.selectedColor||"";n=e.selectedIconPath}else{o=t.color||"";n=e.iconPath}return h(TabbarItem,{index:a,onSelect:t.switchTab.bind(t),isSelected:r,textColor:o,iconPath:n,text:e.text,badgeText:e.badgeText,showRedDot:e.showRedDot})}))))};Object.defineProperty(e.prototype,"tabbar",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();Tabbar.style=indexCss;export{Tabbar as taro_tabbar};