UNPKG

@tarojs/components

Version:
1 lines 9.48 kB
import{h as t,r as a,c as e,H as i,g as o}from"./p-dd7a128d.js";import{stripSuffix as r,stripBasename as s,addLeadingSlash as n,getCurrentPage as b}from"@tarojs/runtime";import h from"@tarojs/taro";import{c as l}from"./p-de951a46.js";import d from"resolve-pathname";import{a as c}from"./p-5893c3ed.js";const _=t=>{let a,e=t||"";const i={path:null,query:null,fragment:null};return a=e.indexOf("#"),a>-1&&(i.fragment=e.substring(a+1),e=e.substring(0,a)),a=e.indexOf("?"),a>-1&&(i.query=e.substring(a+1),e=e.substring(0,a)),i.path=e,i},u=({index:a,isSelected:e=!1,textColor:i,iconPath:o,badgeText:r,showRedDot:s=!1,pagePath:n,text:b,onSelect:d})=>{const _=l("weui-tabbar__item",{"weui-bar__item_on":e});return t("a",{key:a,href:"javascript:;",class:_,onClick:function(){const t=h.getCurrentPages().shift();"function"==typeof(null==t?void 0:t.onTabItemTap)&&c(this)&&t.onTabItemTap({index:a,pagePath:n,text:b}),d(a)}},t("span",{style:{display:"inline-block",position:"relative"}},t("img",{src:o,alt:"",class:"weui-tabbar__icon"}),!!r&&t("span",{class:"weui-badge taro-tabbar-badge",style:{position:"absolute",top:"-2px",right:"-13px"}},r),s&&t("span",{class:"weui-badge weui-badge_dot",style:{position:"absolute",top:"0",right:"-6px"}})),t("p",{class:"weui-tabbar__label",style:{color:i}},b))},m="taro-tabbar__tabbar",g=class{constructor(t){a(this,t),this.onLongPress=e(this,"longpress",7),this.homePage="",this.customRoutes=[],this.tabbarPos="bottom",this.getOriginUrl=t=>{const a=this.customRoutes.filter((([,a])=>_(a).path===_(t).path));return r(a.length?a[0][0]:t,".html")},this.getSelectedIndex=t=>{let a=-1;return this.list.forEach((({pagePath:e},i)=>{_(t).path===_(e).path&&(a=i)})),a},this.switchTab=t=>{this.selectedIndex=t,h.switchTab({url:this.list[t].pagePath})},this.switchTabHandler=({url:t,successHandler:a,errorHandler:e})=>{const i=this.getOriginUrl(this.getCurrentUrl()||this.homePage),o=d(t,i),r=this.getSelectedIndex(o);r>-1?(this.switchTab(r),a({errMsg:"switchTab:ok"})):e({errMsg:`switchTab:fail page "${o}" is not found`})},this.routerChangeHandler=t=>{var a;const e=null===(a=null==t?void 0:t.toLocation)||void 0===a?void 0:a.path;let i;if("string"==typeof e){const t=this.conf.basename||"/";i=s(n(e||this.homePage),t)||"/"}else i=this.getCurrentUrl();this.selectedIndex=this.getSelectedIndex(this.getOriginUrl(i))},this.setTabBarBadgeHandler=({index:t,text:a,successHandler:e,errorHandler:i})=>{const o=[...this.list];t in o?(o[t].showRedDot=!1,o[t].badgeText=a,e({errMsg:"setTabBarBadge:ok"})):i({errMsg:"setTabBarBadge:fail tabbar item not found"}),this.list=o},this.removeTabBarBadgeHandler=({index:t,successHandler:a,errorHandler:e})=>{const i=[...this.list];t in i?(i[t].badgeText=null,i[t].badgeText=null,a({errMsg:"removeTabBarBadge:ok"})):e({errMsg:"removeTabBarBadge:fail tabbar item not found"}),this.list=i},this.showTabBarRedDotHandler=({index:t,successHandler:a,errorHandler:e})=>{const i=[...this.list];t in i?(i[t].badgeText=null,i[t].showRedDot=!0,a({errMsg:"showTabBarRedDot:ok"})):e({errMsg:"showTabBarRedDot:fail tabbar item not found"}),this.list=i},this.hideTabBarRedDotHandler=({index:t,successHandler:a,errorHandler:e})=>{const i=[...this.list];t in i?(i[t].showRedDot=!1,a({errMsg:"hideTabBarRedDot:ok"})):e({errMsg:"hideTabBarRedDot:fail tabbar item not found"}),this.list=i},this.showTabBarHandler=({successHandler:t})=>{this.status=0,t({errMsg:"showTabBar:ok"})},this.hideTabBarHandler=({animation:t,successHandler:a})=>{this.status=t?2:1,a({errMsg:"hideTabBar:ok"})},this.setTabBarStyleHandler=({color:t,selectedColor:a,backgroundColor:e,borderStyle:i,successHandler:o})=>{e&&(this.backgroundColor=e),i&&(this.borderStyle=i),t&&(this.color=t),a&&(this.selectedColor=a),o({errMsg:"setTabBarStyle:ok"})},this.setTabBarItemHandler=({index:t,iconPath:a,selectedIconPath:e,text:i,successHandler:o,errorHandler:r})=>{const s=[...this.list];t in s?(a&&(s[t].iconPath=a),e&&(s[t].selectedIconPath=e),i&&(s[t].text=i),o({errMsg:"setTabBarItem:ok"})):r({errMsg:"setTabBarItem:fail tabbar item not found"}),this.list=s},this.conf=void 0,this.list=void 0,this.borderStyle=void 0,this.backgroundColor=void 0,this.color=void 0,this.selectedColor=void 0,this.selectedIndex=-1,this.status=0}componentWillLoad(){var t,a;const e=(null===(t=this.conf)||void 0===t?void 0:t.list)||[],i=(null===(a=this.conf)||void 0===a?void 0:a.customRoutes)||{};if("[object Array]"!==Object.prototype.toString.call(e)||e.length<2||e.length>5)throw new Error("tabBar 配置错误");this.homePage=n(this.conf.homePage);for(let t in i){const a=i[t];t=n(t),"string"==typeof a?this.customRoutes.push([t,n(a)]):(null==a?void 0:a.length)>0&&this.customRoutes.push(...a.map((a=>[t,n(a)])))}e.forEach((t=>{0!==t.pagePath.indexOf("/")&&(t.pagePath="/"+t.pagePath)})),this.list=e,this.borderStyle=this.conf.borderStyle,this.backgroundColor=this.conf.backgroundColor,this.color=this.conf.color,this.selectedColor=this.conf.selectedColor}getCurrentUrl(){const t=b(this.conf.mode,this.conf.basename);return decodeURI("/"===t?this.homePage:t)}bindEvent(){h.eventCenter.on("__taroRouterChange",this.routerChangeHandler),h.eventCenter.on("__taroSwitchTab",this.switchTabHandler),h.eventCenter.on("__taroSetTabBarBadge",this.setTabBarBadgeHandler),h.eventCenter.on("__taroRemoveTabBarBadge",this.removeTabBarBadgeHandler),h.eventCenter.on("__taroShowTabBarRedDotHandler",this.showTabBarRedDotHandler),h.eventCenter.on("__taroHideTabBarRedDotHandler",this.hideTabBarRedDotHandler),h.eventCenter.on("__taroShowTabBar",this.showTabBarHandler),h.eventCenter.on("__taroHideTabBar",this.hideTabBarHandler),h.eventCenter.on("__taroSetTabBarStyle",this.setTabBarStyleHandler),h.eventCenter.on("__taroSetTabBarItem",this.setTabBarItemHandler)}removeEvent(){h.eventCenter.off("__taroRouterChange",this.routerChangeHandler),h.eventCenter.off("__taroSwitchTab",this.switchTabHandler),h.eventCenter.off("__taroSetTabBarBadge",this.setTabBarBadgeHandler),h.eventCenter.off("__taroRemoveTabBarBadge",this.removeTabBarBadgeHandler),h.eventCenter.off("__taroShowTabBarRedDotHandler",this.showTabBarRedDotHandler),h.eventCenter.off("__taroHideTabBarRedDotHandler",this.hideTabBarRedDotHandler),h.eventCenter.off("__taroShowTabBar",this.showTabBarHandler),h.eventCenter.off("__taroHideTabBar",this.hideTabBarHandler),h.eventCenter.off("__taroSetTabBarStyle",this.setTabBarStyleHandler),h.eventCenter.off("__taroSetTabBarItem",this.setTabBarItemHandler)}componentDidLoad(){this.tabbarPos=this.tabbar.nextElementSibling?"top":"bottom",this.bindEvent(),this.routerChangeHandler()}disconnectedCallback(){this.removeEvent()}render(){const{tabbarPos:a="bottom"}=this,e=this.status,o=l("weui-tabbar",{[`taro-tabbar__border-${this.borderStyle||"black"}`]:!0});return t(i,{class:l(m,`${m}-${a}`,{"taro-tabbar__tabbar-hide":-1===this.selectedIndex||1===e,"taro-tabbar__tabbar-slideout":2===e})},t("div",{class:o,style:{backgroundColor:this.backgroundColor||"",height:"inherit"}},this.list.map(((a,e)=>{const i=this.selectedIndex===e;let o,r;return i?(o=this.selectedColor||"",r=a.selectedIconPath):(o=this.color||"",r=a.iconPath),t(u,{index:e,onSelect:this.switchTab.bind(this),isSelected:i,textColor:o,iconPath:r,pagePath:a.pagePath,text:a.text,badgeText:a.badgeText,showRedDot:a.showRedDot})}))))}get tabbar(){return o(this)}};g.style='.weui-tabbar{z-index:500;background-color:#f7f7fa;-ms-flex-align:center;align-items:center;width:100%;display:-ms-flexbox;display:flex;position:absolute;bottom:0}.weui-tabbar:before{content:" ";color:#c0bfc4;-webkit-transform-origin:0 0;transform-origin:0 0;border-top:1px solid #c0bfc4;height:1px;position:absolute;top:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-tabbar__item{padding:5px 0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);color:#999;text-align:center;-webkit-tap-highlight-color:transparent;-ms-flex:1;flex:1;font-size:0;display:block}.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{color:#09bb07}.weui-tabbar__icon{width:27px;height:27px;display:inline-block}.weui-tabbar__icon img{width:100%;height:100%}i.weui-tabbar__icon,.weui-tabbar__icon>i{color:#999;font-size:24px}.weui-tabbar__label{text-align:center;color:#999;font-size:10px;line-height:1.8}.weui-badge{color:#fff;text-align:center;vertical-align:middle;background-color:#f43530;border-radius:18px;min-width:8px;padding:.15em .4em;font-size:12px;line-height:1.2;display:inline-block}.weui-badge_dot{min-width:0;padding:.4em}html,body{height:100%}:root{--taro-tabbar-height:50px}#app{height:100%}.taro-tabbar__border-white:before{border-top-color:#fff!important}.taro-tabbar__container{-ms-flex-direction:column;flex-direction:column;height:100%;display:-ms-flexbox;display:flex;overflow:hidden}.taro-tabbar__panel{-webkit-overflow-scrolling:auto;-ms-flex:1;flex:1;position:relative;overflow:auto}.taro-tabbar__tabbar{height:var(--taro-tabbar-height);width:100%;-webkit-transition:bottom .2s,top .2s;transition:bottom .2s,top .2s;position:relative}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom);bottom:0}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{-ms-flex:0 0;flex:0 0;top:-52px}.taro-tabbar__panel+.taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}';export{g as taro_tabbar}