taro-material/h5/BottomNavigation/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro, { Component } from "@tarojs/taro-h5";
import { View, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import RMBadge from "../Badge/index";
import RMIcon from "../Icon/index";
import RMTypography from "../Typography/index";

import theme from "../styles/theme";
import './BottomNavigation.scss';

const objectToString = style => {
  if (typeof style === 'object') {
    let styleStr = '';
    Object.keys(style).forEach(key => {
      const lowerCaseKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
      styleStr += `${lowerCaseKey}:${style[key]};`;
    });
    return styleStr;
  }
  return style;
};

class RMBottomNavigation extends Component {
  // 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(i) {
    this.props.onClick(i, ...arguments);
  }

  /**
   * 合并 style
   * @param {Object|String} style1
   * @param {Object|String} style2
   * @returns {String}
   */
  mergeStyle(style1, style2) {
    return objectToString(style1) + objectToString(style2);
  }

  render() {
    const {
      customStyle,
      className,
      fixed,
      backgroundColor,
      actions,
      current,
      color,
      size,
      iconSize,
      fontSize,
      selectedColor
    } = this.props;
    // const { isIPhoneX } = this.state;
    const defaultStyle = `color: ${color};`;
    const selectedStyle = `color: ${selectedColor};`;
    const titleStyle = `font-size: ${fontSize}px;`;
    const rootStyle = `background-color: ${backgroundColor};`;

    return <View className={classNames({
      'at-tab-bar': true,
      'at-tab-bar--fixed': fixed
      // 'at-tab-bar--ipx': isIPhoneX,
    }, className)} style={this.mergeStyle(rootStyle, customStyle)}>
        {actions.map((item, i) => {
        const { badge = {} } = item;
        return <View className="at-tab-bar__item" style={current === i ? selectedStyle : defaultStyle} key={item.title} onClick={this.handleClick.bind(this, i)}>
              {item.iconType || item.image ? <RMBadge variant={badge.variant || 'text'} value={badge.value} maxValue={badge.maxValue}>
                  <View className="at-tab-bar__icon" style={{
              ...{ fontSize: `${size || iconSize}px` },
              ...{ color: current === i ? selectedStyle : defaultStyle },
              width: `${size || iconSize}px`,
              height: `${size || iconSize}px`
            }}>
                    {item.image && <Image style={{
                width: '100%',
                height: '100%'
                // background: theme.palette.background.paper,
              }} src={current === i && item.activeImage ? item.activeImage : item.image} />}

                    {!item.image && item.iconType && <RMIcon prefixClass={item.iconPrefixClass} fontSize="inherit" color="inherit">
                        {current === i && item.selectedIconType ? item.selectedIconType : item.iconType}
                      </RMIcon>}
                  </View>
                </RMBadge> : null}
              <View>
                <RMBadge variant={item.iconType || item.image ? 'text' : badge.variant} value={item.iconType || item.image ? '' : badge.value} maxValue={item.iconType || item.image ? 0 : badge.maxValue}>
                  <View className="at-tab-bar__title" style={titleStyle}>
                    <RMTypography className="caption" color="inherit" fontSize="inherit">
                      {item.title}
                    </RMTypography>
                  </View>
                </RMBadge>
              </View>
            </View>;
      })}
      </View>;
  }
}

RMBottomNavigation.defaultProps = {
  customStyle: '',
  className: '',
  fixed: false,
  backgroundColor: theme.palette.background.paper,
  current: 0,
  iconSize: 28,
  fontSize: 10,
  size: 28,
  color: theme.palette.text.secondary,
  selectedColor: theme.palette.primary.main,
  scroll: false,
  actions: [],
  onClick: () => {}
};

RMBottomNavigation.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]),
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  color: PropTypes.string,
  selectedColor: PropTypes.string,
  scroll: PropTypes.bool,
  actions: PropTypes.array,
  onClick: PropTypes.func
};

export default RMBottomNavigation;