kara-react-components-mobileweb/src/components/scaffold/index.js

kara项目移动端react组件库

/**
 * Created by zhangjingguo on 2017/7/3.
 */

import React, { Component } from 'react'
import { string, bool, node, func } from 'prop-types'
import Icon from '../icon/index'

class Scaffold extends Component {

  // 定义props类型

  static propTypes = {
    prefixCls: string,
    children: node.isRequired,
    title: string, // 标题
    hasFooter: bool, // 是否有底部模块
    onLeftclick: func, // 点击返回键执行的操作
    footer: node, // 底部的DOM
    right: node, // header 右边部分
    onRightclick: func, // 右侧点击事件
  };

  // 定义props初始值

  static defaultProps = {
    prefixCls: 'kara-scaffold',
    hasFooter: false,
    title: '组件标题',
    onLeftclick: () => { history.go(-1) },
    onRightclick: () => {},
    footer: <div />,
    right: <div />,
  };

  handleClick = (e) => {
    e.preventDefault()
    this.props.onLeftclick(e)
  }

  render() {
    const { prefixCls, hasFooter, title, children, footer, right } = this.props

    return (<div className={prefixCls}>
      <div className={`${prefixCls}-header`}>
        <div className={`${prefixCls}-header-left`}><Icon type="back" onClick={this.handleClick} /></div>
        <div className={`${prefixCls}-header-title`}>{title}</div>
        <div className={`${prefixCls}-header-right`} onClick={() => this.props.onRightclick()}>{right}</div>
      </div>
      <div className={`${prefixCls}-content`}>
        <div className={`${prefixCls}-scroll`}>
          {children}
        </div>
      </div>
      {
        hasFooter && <div className={`${prefixCls}-footer`}>
          {footer}
        </div>
      }
    </div>)
  }
}

export default Scaffold