kenote-react-admin-modal v1.0.3

kenote-react-admin-modal

Admin Modal for React

Install

yarn add kenote-react-admin-modal

Usages

Confirm

import { Button } from 'antd'
import Modal from 'kenote-react-admin-modal'

export default () => (
  <div>
    {/* Info */}
    <Button
      onClick={() => Modal.info({
        title: '标题',
        content: (
          <div>
            <p>some messages...some messages...</p>
            <p>some messages...some messages...</p>
          </div>
        )
      })}
      >
      Info
    </Button>
    {/* Confirm */}
    <Button
      onClick={() => Modal.confirm({
        title: '标题',
        content: (
          <div>
            <p>some messages...some messages...</p>
            <p>some messages...some messages...</p>
          </div>
        ),
        onOk() {
          console.log('ok')
        },
        onCancel() {
          console.log('cancel')
        }
      })}
      >
      Confirm
    </Button>
  </div>
)

Modal

import React, { PureComponent } from 'react'
import { Button } from 'antd'
import Modal from 'kenote-react-admin-modal'

export default class ModalDemo extends PureComponent {

  state = {
    visible: false,
    loading: false
  }

  constructor (props) {
    super(props)
    this._Modal = null
  }

  render () {
    return (
      <div>
        <Button 
          onClick={() => this.setState({ visible: true })}
          >
          Modal
        </Button>
        <Modal
          ref={view => this._Modal = view}
          visible={this.state.visible}
          title="Basic Modal"
          onCancel={ () => this.setState({ visible: false })}
          footer={[
            <Button
              onClick={() => this._Modal.handleOnCancel()}
              >
              取消
            </Button>,
            <Button
              type="primary"
              loading={this.state.loading}
              onClick={() => {
                this.setState({ loading: true })
                return new Promise((resolve, reject) => {
                  setTimeout(() => resolve('ok'), 1000)
                })
                .then( ret => {
                  this.setState({ loading: false })
                  this._Modal.handleOnCancel()
                })
              }}
              >
              确定
            </Button>
          ]}
          >
          <p>some messages...some messages...</p>
          <p>some messages...some messages...</p>
        </Modal>
      </div>
    )
  }
}

API

\<Modal>

Modal.method()

• Modal.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.confirm

License

this repo is released under the MIT License.