taro-material/h5/components/tab-bar/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import AtBadge from "../badge/index";
import AtComponent from "../../common/component";

export default class AtTabBar extends AtComponent {
  // constructor () {
  //   super(...arguments)
  //   this.state = {
  //     isIPhoneX: false
  //   }
  // }

  // componentDidMount () {
  //   const curEnv = Taro.getEnv()

  //   if (
  //     curEnv === Taro.ENV_TYPE.WEAPP &&
  //     Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
  //   ) {
  //     this.setState({ isIPhoneX: true })
  //   }
  // }

  handleClick() {
    this.props.onClick(...arguments);
  }

  render() {
    const {
      customStyle,
      className,
      fixed,
      backgroundColor,
      tabList,
      current,
      color,
      iconSize,
      fontSize,
      selectedColor
    } = this.props;
    // const { isIPhoneX } = this.state
    const defaultStyle = {
      color: color || ''
    };
    const selectedStyle = {
      color: selectedColor || ''
    };
    const titleStyle = {
      fontSize: fontSize ? `${fontSize}px` : ''
    };
    const rootStyle = {
      backgroundColor: backgroundColor || ''
    };
    const imgStyle = {
      width: `${iconSize}px`,
      height: `${iconSize}px`
    };

    return <View className={classNames({
      'at-tab-bar': true,
      'at-tab-bar--fixed': fixed
      // 'at-tab-bar--ipx': isIPhoneX
    }, className)} style={this.mergeStyle(rootStyle, customStyle)}>
        {tabList.map((item, i) => <View className={classNames('at-tab-bar__item', { 'at-tab-bar__item--active': current === i })} style={current === i ? selectedStyle : defaultStyle} key={item.title} onClick={this.handleClick.bind(this, i)}>
            {item.iconType ? <AtBadge dot={!!item.dot} value={item.text} max={item.max}>
                <View className="at-tab-bar__icon">
                  <Text className={classNames(`${item.iconPrefixClass || 'at-icon'}`, {
              [`${item.iconPrefixClass || 'at-icon'}-${item.selectedIconType}`]: current === i && item.selectedIconType,
              [`${item.iconPrefixClass || 'at-icon'}-${item.iconType}`]: !(current === i && item.selectedIconType)
            })} style={{
              color: current === i ? selectedColor : color,
              fontSize: iconSize ? `${iconSize}px` : ''
            }}></Text>
                </View>
              </AtBadge> : null}

            {item.image ? <AtBadge dot={!!item.dot} value={item.text} max={item.max}>
                <View className="at-tab-bar__icon">
                  <Image className={classNames('at-tab-bar__inner-img', {
              'at-tab-bar__inner-img--inactive': current !== i
            })} mode="widthFix" src={item.selectedImage || item.image} style={imgStyle}></Image>
                  <Image className={classNames('at-tab-bar__inner-img', {
              'at-tab-bar__inner-img--inactive': current === i
            })} mode="widthFix" src={item.image} style={imgStyle}></Image>
                </View>
              </AtBadge> : null}

            <View>
              <AtBadge dot={item.iconType || item.image ? false : !!item.dot} value={item.iconType || item.image ? '' : item.text} max={item.iconType || item.image ? '' : item.max}>
                <View className="at-tab-bar__title" style={titleStyle}>
                  {item.title}
                </View>
              </AtBadge>
            </View>
          </View>)}
      </View>;
  }
}

AtTabBar.defaultProps = {
  customStyle: '',
  className: '',
  fixed: false,
  current: 0,
  scroll: false,
  tabList: [],
  onClick: () => {}
};

AtTabBar.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  fixed: PropTypes.bool,
  backgroundColor: PropTypes.string,
  current: PropTypes.number,
  iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  color: PropTypes.string,
  selectedColor: PropTypes.string,
  scroll: PropTypes.bool,
  tabList: PropTypes.array,
  onClick: PropTypes.func
};