kara-react-components-mobileweb/src/components/nav-bar/index.js

kara项目移动端react组件库

/**
 * 位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。
 *
 * ### 规则
 *
 * - 可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。
 * - 可在导航栏中使用 SegmentedControl 对内容进行层级划分。
 * - 避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；
 * 如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。
 * 为图标和文字控件，提供更大的点击热区。
 */
import React from 'react'
import { string, node, oneOf, oneOfType, func } from 'prop-types'
import classnames from 'classnames'

import Icon from '../icon/index'

export default class extends React.Component {
  static propTypes = {
    prefixCls: string,
    children: node, // 中间的标题等内容
    mode: oneOf(['light', 'dark']), // UI模式，目前只看到light的
    iconName: oneOfType([string, oneOf([false, null])]), // 图标类
    leftContent: node, // 左边内容
    rightContent: node, // 右边内容
    onLeftclick: func, // 返回按钮点击回调
    onRightclick: func, // 右侧按钮点击回调
  }
  static defaultProps = {
    prefixCls: 'kara-nav-bar',
    children: null,
    mode: 'light',
    iconName: 'back',
    leftContent: null,
    rightContent: null,
    onLeftclick: () => {},
    onRightclick: () => {},
  }

  handleClick = (e) => {
    e.preventDefault()
    this.props.onLeftclick(e)
    history.go(-1)
  }

  handleRightclick = (e) => {
    e.preventDefault()
    this.props.onRightclick(e)
  }

  render() {
    const {
      prefixCls,
      children,
      mode,
      iconName,
      leftContent,
      rightContent,
    } = this.props
    return (<div className={classnames(prefixCls, `${prefixCls}${mode}`)}>
      <div className={`${prefixCls}-left`}>
        <Icon type={iconName} onClick={this.handleClick} />
        {leftContent}
      </div>
      <div className={`${prefixCls}-title`}>{children}</div>
      <div className={`${prefixCls}-right`} onClick={this.handleRightclick}>{rightContent}</div>
    </div>)
  }
}