taro-material/weapp/components/nav-bar/index.js

Mini Program components that implement Google's Material Design.

import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import isObject from 'lodash/isObject';
import AtComponent from '../../common/component';

export default class AtNavBar extends AtComponent {
  constructor() {
    super(...arguments);
    if (process.env.NODE_ENV === 'test') {
      Taro.initPxTransform({ designWidth: 750 });
    }
  }

  handleClickLeftView() {
    this.props.onClickLeftIcon(...arguments);
  }

  handleClickSt() {
    this.props.onClickRgIconSt(...arguments);
  }

  handleClickNd() {
    this.props.onClickRgIconNd(...arguments);
  }

  render() {
    const {
      customStyle,
      className,
      color,
      fixed,
      border,
      leftIconType,
      leftText,
      title,
      rightFirstIconType,
      rightSecondIconType,
    } = this.props;
    const linkStyle = { color };

    const defaultIconInfo = {
      customStyle: '',
      className: '',
      prefixClass: 'at-icon',
      value: '',
      color: '',
      size: 24,
    };

    const leftIconInfo = isObject(leftIconType)
      ? { ...defaultIconInfo, ...leftIconType }
      : { ...defaultIconInfo, value: leftIconType };
    const leftIconClass = classNames(
      leftIconInfo.prefixClass,
      {
        [`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: leftIconInfo.value,
      },
      leftIconInfo.className,
    );

    const rightFirstIconInfo = isObject(rightFirstIconType)
      ? { ...defaultIconInfo, ...rightFirstIconType }
      : { ...defaultIconInfo, value: rightFirstIconType };
    const rightFirstIconClass = classNames(
      rightFirstIconInfo.prefixClass,
      {
        [`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: rightFirstIconInfo.value,
      },
      rightFirstIconInfo.className,
    );

    const rightSecondIconInfo = isObject(rightSecondIconType)
      ? { ...defaultIconInfo, ...rightSecondIconType }
      : { ...defaultIconInfo, value: rightSecondIconType };
    const rightSecondIconClass = classNames(
      rightSecondIconInfo.prefixClass,
      {
        [`${rightSecondIconInfo.prefixClass}-${
          rightSecondIconInfo.value
        }`]: rightSecondIconInfo.value,
      },
      rightSecondIconInfo.className,
    );

    return (
      <View
        className={classNames(
          {
            'at-nav-bar': true,
            'at-nav-bar--fixed': fixed,
            'at-nav-bar--no-border': !border,
          },
          className,
        )}
        style={customStyle}
      >
        <View
          className="at-nav-bar__left-view"
          onClick={this.handleClickLeftView.bind(this)}
          style={linkStyle}
        >
          {leftIconType && (
            <Text
              className={leftIconClass}
              style={this.mergeStyle(
                {
                  color: leftIconInfo.color,
                  fontSize: `${Taro.pxTransform(parseInt(leftIconInfo.size) * 2)}`,
                },
                leftIconInfo.customStyle,
              )}
            />
          )}
          <Text className="at-nav-bar__text">{leftText}</Text>
        </View>
        <View className="at-nav-bar__title">{title}</View>
        <View className="at-nav-bar__right-view">
          <View
            className={classNames({
              'at-nav-bar__container': true,
              'at-nav-bar__container--hide': !rightSecondIconType,
            })}
            style={linkStyle}
            onClick={this.handleClickNd.bind(this)}
          >
            {rightSecondIconType && (
              <Text
                className={rightSecondIconClass}
                style={this.mergeStyle(
                  {
                    color: rightSecondIconInfo.color,
                    fontSize: `${Taro.pxTransform(parseInt(rightSecondIconInfo.size) * 2)}`,
                  },
                  rightSecondIconInfo.customStyle,
                )}
              />
            )}
          </View>
          <View
            className={classNames({
              'at-nav-bar__container': true,
              'at-nav-bar__container--hide': !rightFirstIconType,
            })}
            style={linkStyle}
            onClick={this.handleClickSt.bind(this)}
          >
            {rightFirstIconType && (
              <Text
                className={rightFirstIconClass}
                style={this.mergeStyle(
                  {
                    color: rightFirstIconInfo.color,
                    fontSize: `${Taro.pxTransform(parseInt(rightFirstIconInfo.size) * 2)}`,
                  },
                  rightFirstIconInfo.customStyle,
                )}
              />
            )}
          </View>
        </View>
      </View>
    );
  }
}

AtNavBar.defaultProps = {
  customStyle: '',
  className: '',
  fixed: false,
  border: true,
  color: '',
  leftIconType: '',
  leftText: '',
  title: '',
  rightFirstIconType: '',
  rightSecondIconType: '',
  onClickLeftIcon: () => {},
  onClickRgIconSt: () => {},
  onClickRgIconNd: () => {},
};

AtNavBar.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  fixed: PropTypes.bool,
  border: PropTypes.bool,
  color: PropTypes.string,
  leftIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  leftText: PropTypes.string,
  title: PropTypes.string,
  rightFirstIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  rightSecondIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  onClickLeftIcon: PropTypes.func,
  onClickRgIconSt: PropTypes.func,
  onClickRgIconNd: PropTypes.func,
};