@tarojs/components
Version:
355 lines (345 loc) • 15.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index$1 = require('./index-a7069008.js');
const runtime = require('@tarojs/runtime');
const Taro = require('@tarojs/taro');
const index = require('./index-b873e40f.js');
const resolvePathname = require('resolve-pathname');
const index$2 = require('./index-8a70c333.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
const Taro__default = /*#__PURE__*/_interopDefaultLegacy(Taro);
const resolvePathname__default = /*#__PURE__*/_interopDefaultLegacy(resolvePathname);
const splitUrl = _url => {
let url = _url || '';
let pos;
const res = {
path: null,
query: null,
fragment: null
};
pos = url.indexOf('#');
if (pos > -1) {
res.fragment = url.substring(pos + 1);
url = url.substring(0, pos);
}
pos = url.indexOf('?');
if (pos > -1) {
res.query = url.substring(pos + 1);
url = url.substring(0, pos);
}
res.path = url;
return res;
};
const TabbarItem = ({ index: index$3, isSelected = false, textColor, iconPath, badgeText, showRedDot = false, pagePath, text, onSelect }) => {
const className = index.classnames('weui-tabbar__item', {
'weui-bar__item_on': isSelected
});
const badgeStyle = {
position: 'absolute',
top: '-2px',
right: '-13px'
};
const dotStyle = {
position: 'absolute',
top: '0',
right: '-6px'
};
function onClick() {
const page = Taro__default['default'].getCurrentPages().shift();
if (typeof (page === null || page === void 0 ? void 0 : page.onTabItemTap) === 'function' && index$2.isVisible(this)) {
page.onTabItemTap({ index: index$3, pagePath, text });
}
onSelect(index$3);
}
return (index$1.h("a", { key: index$3, href: 'javascript:;', class: className, onClick: onClick },
index$1.h("span", { style: { display: 'inline-block', position: 'relative' } },
index$1.h("img", { src: iconPath, alt: '', class: 'weui-tabbar__icon' }),
!!badgeText && (index$1.h("span", { class: 'weui-badge taro-tabbar-badge', style: badgeStyle }, badgeText)),
showRedDot && (index$1.h("span", { class: 'weui-badge weui-badge_dot', style: dotStyle }))),
index$1.h("p", { class: 'weui-tabbar__label', style: { color: textColor } }, text)));
};
const indexCss = ".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}: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}";
const STATUS_SHOW = 0;
const STATUS_HIDE = 1;
const STATUS_SLIDEOUT = 2;
const basicTabBarClassName = 'taro-tabbar__tabbar';
const hideTabBarClassName = 'taro-tabbar__tabbar-hide';
const hideTabBarWithAnimationClassName = 'taro-tabbar__tabbar-slideout';
const Tabbar = class {
constructor(hostRef) {
index$1.registerInstance(this, hostRef);
this.onLongPress = index$1.createEvent(this, "longpress", 7);
this.homePage = '';
this.customRoutes = [];
this.tabbarPos = 'bottom';
this.getOriginUrl = (url) => {
const customRoute = this.customRoutes.filter(([, customUrl]) => {
const pathA = splitUrl(customUrl).path;
const pathB = splitUrl(url).path;
return pathA === pathB;
});
return runtime.stripSuffix(customRoute.length ? customRoute[0][0] : url, '.html');
};
this.getSelectedIndex = (url) => {
let foundIndex = -1;
this.list.forEach(({ pagePath }, idx) => {
const pathA = splitUrl(url).path;
const pathB = splitUrl(pagePath).path;
if (pathA === pathB) {
foundIndex = idx;
}
});
return foundIndex;
};
this.switchTab = (index) => {
this.selectedIndex = index;
Taro__default['default'].switchTab({
url: this.list[index].pagePath
});
};
this.switchTabHandler = ({ url, successHandler, errorHandler }) => {
const currentUrl = this.getOriginUrl(this.getCurrentUrl() || this.homePage);
const nextTab = resolvePathname__default['default'](url, currentUrl);
const foundIndex = this.getSelectedIndex(nextTab);
if (foundIndex > -1) {
this.switchTab(foundIndex);
successHandler({
errMsg: 'switchTab:ok'
});
}
else {
errorHandler({
errMsg: `switchTab:fail page "${nextTab}" is not found`
});
}
};
this.routerChangeHandler = (options) => {
var _a;
const to = (_a = options === null || options === void 0 ? void 0 : options.toLocation) === null || _a === void 0 ? void 0 : _a.path;
let currentPage;
if (typeof to === 'string') {
const routerBasename = this.conf.basename || '/';
currentPage = runtime.stripBasename(runtime.addLeadingSlash(to || this.homePage), routerBasename) || '/';
}
else {
currentPage = this.getCurrentUrl();
}
this.selectedIndex = this.getSelectedIndex(this.getOriginUrl(currentPage));
};
this.setTabBarBadgeHandler = ({ index, text, successHandler, errorHandler }) => {
const list = [...this.list];
if (index in list) {
list[index].showRedDot = false;
list[index].badgeText = text;
successHandler({
errMsg: 'setTabBarBadge:ok'
});
}
else {
errorHandler({
errMsg: 'setTabBarBadge:fail tabbar item not found'
});
}
this.list = list;
};
this.removeTabBarBadgeHandler = ({ index, successHandler, errorHandler }) => {
const list = [...this.list];
if (index in list) {
list[index].badgeText = null;
list[index].badgeText = null;
successHandler({
errMsg: 'removeTabBarBadge:ok'
});
}
else {
errorHandler({
errMsg: 'removeTabBarBadge:fail tabbar item not found'
});
}
this.list = list;
};
this.showTabBarRedDotHandler = ({ index, successHandler, errorHandler }) => {
const list = [...this.list];
if (index in list) {
list[index].badgeText = null;
list[index].showRedDot = true;
successHandler({
errMsg: 'showTabBarRedDot:ok'
});
}
else {
errorHandler({
errMsg: 'showTabBarRedDot:fail tabbar item not found'
});
}
this.list = list;
};
this.hideTabBarRedDotHandler = ({ index, successHandler, errorHandler }) => {
const list = [...this.list];
if (index in list) {
list[index].showRedDot = false;
successHandler({
errMsg: 'hideTabBarRedDot:ok'
});
}
else {
errorHandler({
errMsg: 'hideTabBarRedDot:fail tabbar item not found'
});
}
this.list = list;
};
this.showTabBarHandler = ({ successHandler }) => {
this.status = STATUS_SHOW;
successHandler({
errMsg: 'showTabBar:ok'
});
};
this.hideTabBarHandler = ({ animation, successHandler }) => {
this.status = animation ? STATUS_SLIDEOUT : STATUS_HIDE;
successHandler({
errMsg: 'hideTabBar:ok'
});
};
this.setTabBarStyleHandler = ({ color, selectedColor, backgroundColor, borderStyle, successHandler }) => {
if (backgroundColor)
this.backgroundColor = backgroundColor;
if (borderStyle)
this.borderStyle = borderStyle;
if (color)
this.color = color;
if (selectedColor)
this.selectedColor = selectedColor;
successHandler({
errMsg: 'setTabBarStyle:ok'
});
};
this.setTabBarItemHandler = ({ index, iconPath, selectedIconPath, text, successHandler, errorHandler }) => {
const list = [...this.list];
if (index in list) {
if (iconPath)
list[index].iconPath = iconPath;
if (selectedIconPath)
list[index].selectedIconPath = selectedIconPath;
if (text)
list[index].text = text;
successHandler({
errMsg: 'setTabBarItem:ok'
});
}
else {
errorHandler({
errMsg: 'setTabBarItem:fail tabbar item not found'
});
}
this.list = list;
};
this.conf = undefined;
this.list = undefined;
this.borderStyle = undefined;
this.backgroundColor = undefined;
this.color = undefined;
this.selectedColor = undefined;
this.selectedIndex = -1;
this.status = STATUS_SHOW;
}
componentWillLoad() {
var _a, _b;
const list = ((_a = this.conf) === null || _a === void 0 ? void 0 : _a.list) || [];
const customRoutes = ((_b = this.conf) === null || _b === void 0 ? void 0 : _b.customRoutes) || {};
if (Object.prototype.toString.call(list) !== '[object Array]' ||
list.length < 2 ||
list.length > 5) {
throw new Error('tabBar 配置错误');
}
this.homePage = runtime.addLeadingSlash(this.conf.homePage);
for (let key in customRoutes) {
const path = customRoutes[key];
key = runtime.addLeadingSlash(key);
if (typeof path === 'string') {
this.customRoutes.push([key, runtime.addLeadingSlash(path)]);
}
else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
this.customRoutes.push(...path.map(p => [key, runtime.addLeadingSlash(p)]));
}
}
list.forEach(item => {
if (item.pagePath.indexOf('/') !== 0) {
item.pagePath = '/' + item.pagePath;
}
});
this.list = list;
this.borderStyle = this.conf.borderStyle;
this.backgroundColor = this.conf.backgroundColor;
this.color = this.conf.color;
this.selectedColor = this.conf.selectedColor;
}
getCurrentUrl() {
const routePath = runtime.getCurrentPage(this.conf.mode, this.conf.basename);
return decodeURI(routePath === '/' ? this.homePage : routePath);
}
bindEvent() {
Taro__default['default'].eventCenter.on('__taroRouterChange', this.routerChangeHandler);
Taro__default['default'].eventCenter.on('__taroSwitchTab', this.switchTabHandler);
Taro__default['default'].eventCenter.on('__taroSetTabBarBadge', this.setTabBarBadgeHandler);
Taro__default['default'].eventCenter.on('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler);
Taro__default['default'].eventCenter.on('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler);
Taro__default['default'].eventCenter.on('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler);
Taro__default['default'].eventCenter.on('__taroShowTabBar', this.showTabBarHandler);
Taro__default['default'].eventCenter.on('__taroHideTabBar', this.hideTabBarHandler);
Taro__default['default'].eventCenter.on('__taroSetTabBarStyle', this.setTabBarStyleHandler);
Taro__default['default'].eventCenter.on('__taroSetTabBarItem', this.setTabBarItemHandler);
}
removeEvent() {
Taro__default['default'].eventCenter.off('__taroRouterChange', this.routerChangeHandler);
Taro__default['default'].eventCenter.off('__taroSwitchTab', this.switchTabHandler);
Taro__default['default'].eventCenter.off('__taroSetTabBarBadge', this.setTabBarBadgeHandler);
Taro__default['default'].eventCenter.off('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler);
Taro__default['default'].eventCenter.off('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler);
Taro__default['default'].eventCenter.off('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler);
Taro__default['default'].eventCenter.off('__taroShowTabBar', this.showTabBarHandler);
Taro__default['default'].eventCenter.off('__taroHideTabBar', this.hideTabBarHandler);
Taro__default['default'].eventCenter.off('__taroSetTabBarStyle', this.setTabBarStyleHandler);
Taro__default['default'].eventCenter.off('__taroSetTabBarItem', this.setTabBarItemHandler);
}
componentDidLoad() {
this.tabbarPos = this.tabbar.nextElementSibling ? 'top' : 'bottom';
this.bindEvent();
this.routerChangeHandler();
}
disconnectedCallback() {
this.removeEvent();
}
render() {
const { tabbarPos = 'bottom' } = this;
const status = this.status;
const containerCls = index.classnames('weui-tabbar', {
[`taro-tabbar__border-${this.borderStyle || 'black'}`]: true
});
const shouldHideTabBar = this.selectedIndex === -1 || status === STATUS_HIDE;
const shouldSlideout = status === STATUS_SLIDEOUT;
return (index$1.h(index$1.Host, { class: index.classnames(basicTabBarClassName, `${basicTabBarClassName}-${tabbarPos}`, {
[hideTabBarClassName]: shouldHideTabBar,
[hideTabBarWithAnimationClassName]: shouldSlideout
}) }, index$1.h("div", { class: containerCls, style: {
backgroundColor: this.backgroundColor || '',
height: 'inherit'
} }, this.list.map((item, index) => {
const isSelected = this.selectedIndex === index;
let textColor;
let iconPath;
if (isSelected) {
textColor = this.selectedColor || '';
iconPath = item.selectedIconPath;
}
else {
textColor = this.color || '';
iconPath = item.iconPath;
}
return (index$1.h(TabbarItem, { index: index, onSelect: this.switchTab.bind(this), isSelected: isSelected, textColor: textColor, iconPath: iconPath, pagePath: item.pagePath, text: item.text, badgeText: item.badgeText, showRedDot: item.showRedDot }));
}))));
}
get tabbar() { return index$1.getElement(this); }
};
Tabbar.style = indexCss;
exports.taro_tabbar = Tabbar;