@depay/react-dialog

快速启动

yarn add @depay/react-dialog

或者说

npm install --save @depay/react-dialog

import { ReactDialog } from '@depay/react-dialog'

  /*...*/

  close() {
    if(this.state == something) {
      this.setState({ showDialog: false })
    }
  }

  /*...*/

  <ReactDialog close={this.close} open={this.state.showDialog}>
    <div className="ReactDialogAnimation MyDialogStyle">
      <h1>I am a dialog</h1>
      <button onclick={this.close}>Close Dialog</button>
    </div>
  </ReactDialog>

演示

https://depayfi.github.io/react-dialog/demo.html 互联网档案馆的存檔,存档日期2014-12-22

职能

渲染器

import { ReactDialog } from '@depay/react-dialog'

render() {
  return(
    ...
    <ReactDialog close={this.close} open={this.state.showDialog}>
      <div className="ReactDialogAnimation MyDialogStyle">
        <h1>I am a dialog</h1>
        <button onclick={this.close}>Close Dialog</button>
      </div>
    </ReactDialog>
  )
}

请应用 ReactDialogAnimation 分类到您想要作为对话框打开动画的一部分被动画所显示的儿童元素.

道具

close (function): 从 ReactDialog 中调取的、在对话框中生活的函数 。 如果一个对话框是可阻塞的, 父母必须小心, 并且需要设定它自己的状态.

  close() {
    if(this.state == something) {
      this.setState({ showDialog: false })
    }
  }

  /*...*/

  <ReactDialog close={this.close} open={this.state.showDialog}>
    <h1>I am a dialog</h1>
    <button onclick={this.close}>Close Dialog</button>
  </ReactDialog>

background (string): 背景作为 CSS 传递到 ReactDialogBackground。 。 。 .

  <ReactDialog background={'rgba(255,255,255,0.6)'} close={this.close} open={this.state.showDialog}>
    <h1>I am a dialog with white background.</h1>
  </ReactDialog>

document (Document): 允许在对话框中转发不同的文档 .

  <ReactDialog document={someIframe.document}>
    <h1>I am a dialog</h1>
    <button onclick={this.close}>Close Dialog</button>
  </ReactDialog>

container (HTMLElement): 允许提供一个清晰的容器, 对话框应该被打开 .

  <ReactDialog container={document.getElementById('app')}>
    <h1>I am a dialog</h1>
    <button onclick={this.close}>Close Dialog</button>
  </ReactDialog>

发展

开始吧

yarn install
yarn start

测试

调试 Cypress

开始在 --headed 财务报告和审定财务报表 --no-exit

test:cypress:debug

测试并调试单个cypress文件 :

yarn test:cypress:debug --spec "cypress/integration/close.js"

释放

npm publish