Skip to content

Commit

Permalink
feat(api): 修复 TabBar 相关 api fix #9397 #8580 #8175
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZakaryCode @Chen-jj
ZakaryCode authored and Chen-jj committed Nov 22, 2021
1 parent 4bb7e98 commit 3a07b19
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 47 deletions.
63 changes: 54 additions & 9 deletions packages/taro-components/src/components/tabbar/tabbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,14 @@ export class Tabbar implements ComponentInterface {

@State() list: TabbarList[]

@State() borderStyle: Conf['borderStyle']

@State() backgroundColor: Conf['backgroundColor']

@State() color: Conf['color']

@State() selectedColor: Conf['selectedColor']

@State() selectedIndex = -1

@State() status: 0 | 1 | 2 = STATUS_SHOW
Expand Down Expand Up @@ -106,6 +114,7 @@ export class Tabbar implements ComponentInterface {
})

this.list = list
this.borderStyle = this.conf.borderStyle
}

getCurrentUrl () {
Expand Down Expand Up @@ -137,9 +146,9 @@ export class Tabbar implements ComponentInterface {
getSelectedIndex = (url: string) => {
let foundIndex = -1
this.list.forEach(({ pagePath }, idx) => {
const patha = splitUrl(url).path
const pathb = splitUrl(pagePath).path
if (patha === pathb) {
const pathA = splitUrl(url).path
const pathB = splitUrl(pagePath).path
if (pathA === pathB) {
foundIndex = idx
}
})
Expand Down Expand Up @@ -188,11 +197,14 @@ export class Tabbar implements ComponentInterface {
this.selectedIndex = this.getSelectedIndex(this.getOriginUrl(currentPage))
}

setTabBarBadgeHandler = ({ index, text, errorHandler }: RouterHandler) => {
setTabBarBadgeHandler = ({ index, text, successHandler, errorHandler }: RouterHandler) => {
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'
Expand Down Expand Up @@ -266,6 +278,34 @@ export class Tabbar implements ComponentInterface {
})
}

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'
})
}

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
}

bindEvent () {
Taro.eventCenter.on('__taroRouterChange', this.routerChangeHandler)
Taro.eventCenter.on('__taroSwitchTab', this.switchTabHandler)
Expand All @@ -275,6 +315,8 @@ export class Tabbar implements ComponentInterface {
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)
}

removeEvent () {
Expand All @@ -286,6 +328,8 @@ export class Tabbar implements ComponentInterface {
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)
}

componentDidLoad () {
Expand All @@ -299,10 +343,10 @@ export class Tabbar implements ComponentInterface {
}

render () {
const { conf, tabbarPos = 'bottom' } = this
const { tabbarPos = 'bottom' } = this
const status = this.status
const containerCls = classNames('weui-tabbar', {
[`taro-tabbar__border-${conf.borderStyle || 'black'}`]: true
[`taro-tabbar__border-${this.borderStyle || 'black'}`]: true
})
const shouldHideTabBar = this.selectedIndex === -1 || status === STATUS_HIDE
const shouldSlideout = status === STATUS_SLIDEOUT
Expand All @@ -318,20 +362,21 @@ export class Tabbar implements ComponentInterface {
<div
class={containerCls}
style={{
backgroundColor: conf.backgroundColor || ''
backgroundColor: this.backgroundColor || ''
}}
>
{this.list.map((item, index) => {
const isSelected = this.selectedIndex === index
let textColor
let iconPath
if (isSelected) {
textColor = conf.selectedColor
textColor = this.selectedColor
iconPath = item.selectedIconPath
} else {
textColor = conf.color || ''
textColor = this.color || ''
iconPath = item.iconPath
}
console.log('TabbarItem', item)
return (
<TabbarItem
index={index}
Expand Down
54 changes: 16 additions & 38 deletions packages/taro-h5/src/api/tabBar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import Taro from '@tarojs/api'
import { shouldBeObject, getParameterError, isValidColor, successHandler, errorHandler } from '../utils'

let tabConf
let App

export function initTabBarApis (config = {}) {
tabConf = config.tabBar
App = config
}

/**
Expand Down Expand Up @@ -64,8 +62,6 @@ export function setTabBarBadge (options = {}) {
successHandler: successHandler(success, complete),
errorHandler: errorHandler(fail, complete)
})

return successHandler(success, complete)(res)
}

/**
Expand Down Expand Up @@ -109,8 +105,6 @@ export function removeTabBarBadge (options = {}) {
successHandler: successHandler(success, complete),
errorHandler: errorHandler(fail, complete)
})

return successHandler(success, complete)(res)
}

/**
Expand Down Expand Up @@ -154,8 +148,6 @@ export function showTabBarRedDot (options = {}) {
successHandler: successHandler(success, complete),
errorHandler: errorHandler(fail, complete)
})

return successHandler(success, complete)(res)
}

/**
Expand Down Expand Up @@ -199,8 +191,6 @@ export function hideTabBarRedDot (options = {}) {
successHandler: successHandler(success, complete),
errorHandler: errorHandler(fail, complete)
})

return successHandler(success, complete)(res)
}

/**
Expand Down Expand Up @@ -245,8 +235,6 @@ export function showTabBar (options = {}) {
successHandler: successHandler(success, complete),
errorHandler: errorHandler(success, complete)
})

return successHandler(success, complete)(res)
}

/**
Expand Down Expand Up @@ -291,8 +279,6 @@ export function hideTabBar (options = {}) {
successHandler: successHandler(success, complete),
errorHandler: errorHandler(success, complete)
})

return successHandler(success, complete)(res)
}

/**
Expand Down Expand Up @@ -353,10 +339,14 @@ export function setTabBarStyle (options = {}) {
if (backgroundColor) obj.backgroundColor = backgroundColor
if (borderStyle) obj.borderStyle = borderStyle

const temp = Object.assign({}, tabConf, obj)
App.setState && App.setState({ __tabs: temp })

return successHandler(success, complete)(res)
Taro.eventCenter.trigger('__taroSetTabBarStyle', {
color,
selectedColor,
backgroundColor,
borderStyle,
successHandler: successHandler(success, complete),
errorHandler: errorHandler(success, complete)
})
}

/**
Expand Down Expand Up @@ -401,24 +391,12 @@ export function setTabBarItem (options = {}) {
return errorHandler(fail, complete)(res)
}

if (
!tabConf ||
!tabConf.list ||
!tabConf.list[index]
) {
res.errMsg = 'setTabBarItem:fail tabbar item not found'
return errorHandler(fail, complete)(res)
}

const obj = {}
if (text) obj.text = text
if (iconPath) obj.iconPath = iconPath
if (selectedIconPath) obj.selectedIconPath = selectedIconPath

const temp = Object.assign({}, tabConf)
temp.list[index] = Object.assign({}, temp.list[index], obj)

App.setState && App.setState({ __tabs: temp })

return successHandler(success, complete)(res)
Taro.eventCenter.trigger('__taroSetTabBarItem', {
index,
text,
iconPath,
selectedIconPath,
successHandler: successHandler(success, complete),
errorHandler: errorHandler(success, complete)
})
}

0 comments on commit 3a07b19

Please sign in to comment.