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

kara项目移动端react组件库

// 重新review了一下 感觉写的好垃圾 (5号之后要重新花时间去重构)

import React, { Component } from 'react'
import { string, node, oneOf, func, bool } from 'prop-types'
import Row from '../row'
import Col from '../col'
import Icon from '../icon'

class Modal extends Component {

  static propTypes = {
    title: node, // modal头的文字
    content: node.isRequired, // modal 中间部分内容
    prefixCls: string,
    type: oneOf(['confirm', 'centain']), // 暂时只有 confirm 和 centain两种类型
    onOk: func, // 点击确定事件
    isShow: bool, // 模态的显示和隐藏
    okTxt: node, // 确定按钮
    cancelTxt: node, // 取消按钮
    onModalHidden: func, // 当模态隐藏时执行操作
    model: oneOf(['center', 'whole', 'diy']), // 模态模式 center 常规中间模态 whole 全屏模态 diy只提供黑色模层 内容位置自己定义
  }

  static defaultProps = {
    title: '',
    prefixCls: 'kara-modal',
    type: 'confirm',
    onOk: () => {},
    isShow: false,
    okTxt: '确定',
    cancelTxt: '取消',
    onModalHidden: () => {},
    model: 'center',
  }

  state = {
    modalShow: false,
  }

  componentWillMount() {
    this.setState({ modalShow: this.props.isShow })
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.isShow !== nextProps.isShow) {
      this.setState({ modalShow: nextProps.isShow })
    }
  }

  // 模态隐藏事件
  modalHidden = () => {
    this.setState({ modalShow: false })
    this.props.onModalHidden()
  }
  // 确定事件
  handelCentain = () => {
    this.props.onOk()
    this.modalHidden()
  }

  render() {
    const { title, prefixCls, content, type, okTxt, cancelTxt, model } = this.props
    const { modalShow } = this.state

    const btnArea = {
      confirm: (<Row>
        <Col>
          <div className={`${prefixCls}-cancel`} onClick={this.modalHidden}>{cancelTxt}</div>
        </Col>
        <Col>
          <div className={`${prefixCls}-centain`} onClick={this.handelCentain}>{okTxt}</div>
        </Col>
      </Row>),
      centain: (<div
        className={`${prefixCls}-centain-full`}
        onClick={this.handelCentain}
      >确定</div>),
    }

    const modalModel = {
      center: (<div>
        <div className={`${prefixCls}-backmodal`} onClick={this.modalHidden} />
        <div className={`${prefixCls}-container`}>
          <div className={`${prefixCls}-title`}>{title}</div>
          <div className={`${prefixCls}-content`}>{content !== '' && content}</div>
          <div className={`${prefixCls}-footer`}>{btnArea[type]}</div>
        </div>
      </div>),
      whole: (<div className={`${prefixCls}-wholemodal`}>
        <div className={`${prefixCls}-whole-title`}>
          <Icon type="closed" onClick={() => this.modalHidden()} />
          <span>{title}</span>
        </div>
        {content !== '' && content}
      </div>),
      diy: (
        <div>
          <div className={`${prefixCls}-backmodal`} onClick={this.modalHidden} />
          {content !== '' && content}
        </div>
      ),
    }

    return (<div className={`${prefixCls}`}>
      {
        modalShow ? modalModel[model] : null
      }
    </div>
    )
  }
}

export default Modal