saven/packages/saven-components/src/components/tabbar/index.js

no

import Nerv from 'nervjs'
import classNames from 'classnames'
import './style'

function fixPagePath (pagePath) {
  return pagePath.replace(/^\.?\//, '')
}
class Tabbar extends Nerv.Component {
  constructor (props) {
    super(...arguments)
    const list = props.conf.list
    if (
      Object.prototype.toString.call(list) !== '[object Array]' ||
      list.length < 2 ||
      list.length > 5
    ) {
      throw new Error('tabBar 配置错误')
    }

    this.homePage = fixPagePath(props.homePage)

    this.state = {
      list,
      isShow: false,
      selectedIndex: 0
    }
  }
  componentDidMount () {
    this.bindEvent()
    this.hashChangeHandler()
  }

  componentUnMount () {
    this.removeEvent()
  }

  hashChangeHandler () {
    const hash = location.hash
    const homePage = hash ? hash.replace(/^#\//, '') : this.homePage

    const len = this.state.list.length
    for (let i = 0; i < len; i++) {
      if (this.state.list[i].pagePath.indexOf(homePage) > -1) {
        return this.setState({
          isShow: true,
          selectedIndex: i
        })
      }
    }
    this.setState({
      isShow: false
    })
  }

  hideBar () {
    this.setState({
      isShow: false
    })
  }

  showBar () {
    this.setState({
      isShow: true
    })
  }

  bindEvent () {
    window.addEventListener('hashchange', this.hashChangeHandler.bind(this))
  }

  removeEvent () {
    window.removeEventListener('hashchange', this.hashChangeHandler.bind(this))
  }

  render () {
    const { conf, router = {} } = this.props
    function handleSelect (index, e) {
      let list = this.state.list
      router.navigateTo &&
        router.navigateTo({
          url:
            (/^\//.test(list[index].pagePath) ? '' : '/') + list[index].pagePath
        })
    }
    conf.borderStyle = conf.borderStyle || 'black'
    let containerCls = classNames('weui-tabbar', {
      [`taro-tabbar__border-${conf.borderStyle}`]: true
    })
    return (
      <div className='taro-tabbar__tabbar' style={{display: this.state.isShow ? '' : 'none'}}>
        <div
          className={containerCls}
          style={{
            backgroundColor: conf.backgroundColor || ''
          }}
        >
          {this.state.list.map((item, index) => {
            const cls = classNames('weui-tabbar__item', {
              [`weui-bar__item_on`]: this.state.selectedIndex === index
            })
            let textStyle = {
              color: this.state.selectedIndex === index ? conf.selectedColor : conf.color || ''
            }
            return (
              <a
                key={index}
                href='javascript:;'
                className={cls}
                onClick={handleSelect.bind(this, index)}
              >
                <span style='display: inline-block;position: relative;'>
                  <img
                    src={this.state.selectedIndex === index ? item.selectedIconPath : item.iconPath}
                    alt=''
                    className='weui-tabbar__icon'
                  />
                </span>
                <p className='weui-tabbar__label' style={textStyle}>
                  {item.text}
                </p>
              </a>
            )
          })}
        </div>
      </div>
    )
  }
}

export default Tabbar