弹出框 / Dialog

Dialog（弹出框）

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | visible | Boolean | 是否显示 | | closable | Boolean | 是否有关闭按钮，默认true | | globalScroll | Boolean | 默认需要自己设置容器的高度，在容器内部滚动，设置为true后，当content的高度超出页面时，会全局滚动，默认false | | maskClosable | Boolean | 是否可以点击非内容区域关闭弹窗，默认true | | onClose | Function | 点击关闭的回调 |

Dialog.Modal（对话框）

参数

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | visible | Boolean | 是否显示 | | closable | Boolean | 是否有关闭按钮，默认true | | globalScroll | Boolean | 默认需要自己设置容器的高度，在容器内部滚动，设置为true后，当content的高度超出页面时，会全局滚动，默认false | | maskClosable | Boolean | 是否可以点击非内容区域关闭弹窗，默认true | | confirmText | String | 确定按钮的文案，默认确定 | | cancelText | String | 取消按钮的文案，默认取消 | | title | String|ReactNode | 对话框的标题，如果为空，则不显示 | | content | String|ReactNode | 要展示的内容 | | footer | Boolean|String|ReactNode | 是否显示底部操作区域，默认true 可以传入ReactNode自定义底部 | | confirmLoading | Boolean | 点击确认按钮时，是否显示loading状态，默认false | | onConfirm | Function | 点击确定的回调 | | onCancel | Function | 点击取消的回调 | | onClose | Function | 点击关闭的回调 |

方法

| 方法 | 类型 | 备注 | | :-------- | --------:| :------: | | show | Function | 显示Modal，返回一个函数，调用此函数直接关闭Modal |

Dialog.Notification（通知提醒框）

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | body必填 | String | 要显示的提醒框的内容 | | icon | String | 要显示的提醒框的icon，必须是一个icon的url地址 | | iconfont | String | 要显示的提醒框的icon，可以传入iconfont的class来显示，比如iconfont icon-close，优先级比icon高 | | title | String | 提醒框的title | | duration | Number | duration秒后消失，如果设置为0，则永久显示，默认4000 | | onClose | Function | 关闭时的回调 | | onClick | Function | 点击提醒框的回调 | | tag | String | 提醒框的唯一标示，如果传的tag与正在显示的提醒框一致，则会替换当前正在显示的提醒框的内容，duration重新计算 |

方法

| 方法 | 类型 | 备注 | | :-------- | --------:| :------: | | show | Function | 显示Notification，返回一个对象，包含close方法，可以调用close函数手动关闭提醒框 |

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import Button from '@xm/Button'
import {Modal, Notification} from '@xm/Dialog'
import styles from './components/index.scss'

let i = 0

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      visible: false
    }

    this.modalButtonClickHandler = this.modalButtonClickHandler.bind(this)
    this.firstModalConfirmHandler = this.firstModalConfirmHandler.bind(this)
    this.firstModalCancelHandler = this.firstModalCancelHandler.bind(this)
    this.showAnotherModalByFunction = this.showAnotherModalByFunction.bind(this)

    this.notificationButtonClickHandler = this.notificationButtonClickHandler.bind(this)
  }

  showAnotherModalByFunction () {
    const close = Modal.show({
      style: {
        top: '200px',
        width: '600px'
      },
      title: '另一个modal',
      closable: true,
      // maskClosable: true,
      globalScroll: true,
      content: <div style={{height: '1000px'}}>另一个Modal的内容</div>,
      footer: true,
      confirmText: '关闭第一个Modal',
      cancelText: '关闭',
      onConfirm: () => {
        this.firstModalCancelHandler()
      },
      onCancel: () => {
        close()
      }
    })
  }

  modalButtonClickHandler () {
    this.setState({
      visible: true
    })
  }

  firstModalConfirmHandler () {
    this.showAnotherModalByFunction()
  }

  firstModalCancelHandler () {
    this.setState({
      visible: false
    })
  }

  notificationButtonClickHandler () {
    const n = Notification.show({
      title: `title${i++}`,
      body: `body${i++}`,
      duration: 3000,
      tag: Math.floor(Math.random() * 10),
      iconfont: `${styles.iconfont} ${styles['icon-close']}`,
      icon: 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D72%2C72%2C0/sign=489ae0bbdb09b3deebeab728aa825bb3/2cf5e0fe9925bc3142b4464b54df8db1ca137073.jpg',
      onClose: (data) => {
        console.log(data)
      },
      onClick: (data) => {
        console.log(data)
      }
    })

  }

  render () {
    const {visible} = this.state

    return (<div>
      <Button onClick={this.modalButtonClickHandler}>显示Modal</Button>
      <Button
        onClick={this.notificationButtonClickHandler}>显示Notification</Button>
      <Modal visible={visible} title="标题" footer closable maskClosable
             confirmText="打开一个新的Modal" onClose={this.firstModalCancelHandler}
             onConfirm={this.firstModalConfirmHandler}
             onCancel={this.firstModalCancelHandler}>
        <div>这是内容</div>
      </Modal>
    </div>)
  }
}

ReactDOM.render(<App />, document.body)