tinper-bee/bee-modal

modal component for tinper-bee

bee-modal

Browser Support

IE 9+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

react bee-modal component for tinper-bee

模态框组件

使用方法

import Modal from 'bee-modal';

class ModalDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
    }

    close() {
        this.setState({ showModal: false });
    }

    open() {
        this.setState({ showModal: true });
    }
    render () {
        return (
            <div>
              <Button color="primary" size="large" onClick={this.open}>
                点击打开模态框
              </Button>
              <Modal show = {
                  this.state.showModal
              }
              onHide = {
                  this.close
              }>
                <Modal.Header>
                  <Modal.Title>标题</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                  正文描述。。。
                </Modal.Body>

                <Modal.Footer>
                  <Button>关闭</Button>
                  <Button color="primary">确认</Button>
                </Modal.Footer>

              </Modal>
            </div>
        )
    }
}

);

ReactDOM.render(
        <ModalDemo />
        , document.getElementById('target'));

样式引入

• 可以使用link引入build目录下Modal.css

<link rel="stylesheet" href="./node_modules/bee-modal/build/Modal.css">

• 可以在js中import样式

import "./node_modules/bee-modal/src/Modal.scss"
//或是
import "./node_modules/bee-modal/build/Modal.css"

API

Modal

参数	说明	类型	默认值
backdrop	是否弹出遮罩层	boolean	true
backdropClosable	遮罩层点击是否触发关闭	boolean	true
keyboard	esc触发关闭	boolean	-
animation	显隐时是否使用动画	boolean	true
dialogComponentClass	传递给模态框使用的元素	string/element	-
dialogClassName	传递给模态框的样式	class	-
autoFocus	自动设置焦点	boolean	true
enforceFocus	防止打开时焦点离开模态框	boolean	true
show	是否打开模态框	boolean	-
width	模态框宽度，如只传数字则会拼接默认单位 px。例如 100px/100/100%/100rem/100em	string/number	-
onHide	关闭时的钩子函数	function	-
size	模态框尺寸	sm/lg/xlg	-
width	自定义模态框尺寸	string/number	-
onEnter	开始显示时的钩子函数	function	-
onEntering	显示时的钩子函数	function	-
onEntered	显示完成后的钩子函数	function	-
onExit	隐藏开始时的钩子函数	function	-
onExiting	隐藏进行时的钩子函数	function	-
onExited	隐藏结束时的钩子函数	function	-
container	容器	DOM元素\React组件\或者返回React组件的函数	-
onShow	当模态框显示时的钩子函数	function	-
renderBackdrop	返回背景元素的函数	function	-
onEscapeKeyUp	响应ESC键时的钩子函数	function	-
onBackdropClick	点击背景元素的函数	function	-
backdropStyle	添加到背景元素的style	object	-
backdropClassName	添加到背景元素的class	string	-
transition	动画组件	function	-
dialogTransitionTimeout	设置动画超时时间	function	-
backdropTransitionTimeout	设置背景动画超时时间	function	-
manager	管理模态框状态的组件	required	-
draggable	设置模态框是否可拖拽	bool	false
resizable	设置模态框是否可resize	bool	false
resizeClassName	设置拖拽dom的class名称	string	-
onResizeStart	resize开始时的回调	function	-
onResize	resize时的回调	function	-
onResizeStop	resize结束时的回调	function	-
minWidth	resize时模态框的最小宽度	number/string	200
minHeight	resize时模态框的最小高度	number/string	150
maxWidth	resize时模态框的最大宽度	number/string	-
maxHeight	resize时模态框的最大高度	number/string	-

Modal.Header

参数	说明	类型	默认值
closeButton	是否显示关闭按钮	boolean	false

Modal.method()

包括：

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

以上均为一个函数，参数为 object，具体属性如下：

参数	说明	类型	默认值
cancelText	取消按钮文字	string	取消
okText	确认按钮文字	string	确定
okType	确认按钮类型，取值范围(primary/secondary/success/info/warning/danger/dark/light)	string	primary
title	标题	string/ReactNode	-
content	内容	string/ReactNode	-
className	容器类名	string	-
icon	自定义图标	ReactNode	<Icon type="uf-qm-c"/>
backdrop	是否弹出遮罩层/点击遮罩层是否触发关闭	boolean/"static"	true
width	宽度	string/number	400
onCancel	取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	-
onOk	点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	-

以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

const modal = Modal.info();

modal.update({
  title: '修改的标题',
  content: '修改的内容',
});

modal.destroy();

• Modal.destroyAll 使用 Modal.destroyAll() 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）

import { browserHistory } from 'react-router';

// router change
browserHistory.listen(() => {
  Modal.destroyAll();
});

已支持的键盘操作

按键	功能
esc	关闭模态框

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-modal
$ cd bee-modal
$ npm install
$ npm run dev

bee-modal's Issues

bee-transition@^0.2.5

question： × Install fail! Error: [[email protected] › bee-transition@^0.2.5] Can't find package bee-transition@^0.2.5

弹出双模态框之后，滚动条消失了

第一次打开一个模态框滚动条能够正常使用，在模态框上再次打开参照框，然后将参照框关闭，第一个模态框的滚动条也消失了

Modal.info({})传参className不生效

问题：需要自定义modal框内的一些样式但不能影响全局modal
版本：2.1.3

Modal组件点击Header部分，整个Modal会飞到左上角

Modal版本 2.0.19， 点击Modal的Header部分，Modal窗口会飞到左上角，或者先飞到左上角然后隐藏掉

modal拖拽到左下角拖拽不回去

bee-modal 2.1.8版本
环境及账号信息：http://10.16.5.56 yon2/123456a
随便选一个节点，有弹窗的都行
复现步骤：拖拽到左下角至出页面，在快速往右上角拖拽，就拖拽不回去了
直接用你们的 bee-modal上的代码直接测试也不行

Modal.info success 等方法点击遮罩层无法关闭

调用Modal.info success warning error confirm 等方法 backdrop 参数为true时，点击遮罩层无法关闭弹窗，看了一下代码，在src/confirm.js Modal的关闭是使用 props.close 方法控制的，但是最终调动Modal组件时，Modal的onHide调用的是props.onHide方法 就算调用是传入onHide方法，也无法控制Modal的关闭

modal提供`info`、`success`、`error`、`warning`、`confirm` API单独引用bee-modal时无法使用

modal提供info、success、error、warning、confirm API单独引用bee-modal时无法使用,报错： React is not defined；

npm run dev 运行，点击弹窗报错

Uncaught TypeError: Cannot read property 'contains' of undefined

模态框弹出之后，body元素被加了个padding-right:17px

模态框弹出之后，body元素被加了个padding-right:17px，会导致页面内容左移一下

样式问题

Modal第二个例子报错无法使用

http://bee.tinper.org/bee-modal

第二个例子无法弹出

添加对拖曳的支持

模态框中的操作要参考主页面的数据，希望能拖曳，不遮挡下方信息