rc-dialog
Advanced tools
Comparing version 3.0.0 to 4.0.0
@@ -15,15 +15,15 @@ /** @jsx React.DOM */ | ||
React.render(<div><h1>call method</h1><div id="d1"></div></div>,document.getElementById('__react-content')); | ||
var dialog = React.render( | ||
(<Dialog title="第一个弹框" onClose={close} onShow={show} | ||
style={{width: 500}} | ||
React.render(<div><h1>render</h1> | ||
<p>does not support render visible on server!</p> | ||
<Dialog | ||
title="第一个弹框" | ||
width="500" | ||
zIndex={100} | ||
visible={true} | ||
onClose={close} | ||
onShow={show} | ||
> | ||
<p>第一个dialog</p> | ||
</Dialog>), | ||
document.getElementById('d1') | ||
); | ||
</Dialog> | ||
setTimeout(function () { | ||
dialog.show(); | ||
}, 100); | ||
</div>,document.getElementById('__react-content')); |
# History | ||
---- | ||
## 4.0.0 / 2015-04-28 | ||
make dialog render to body and use [dom-align](https://github.com/yiminghe/dom-align) to align | ||
## 3.0.0 / 2015-03-17 | ||
@@ -5,0 +9,0 @@ |
@@ -1,1 +0,1 @@ | ||
module.exports = require('./lib/Dialog'); | ||
module.exports = require('./lib/DialogWrap'); |
/** @jsx React.DOM */ | ||
var React = require('react'); | ||
var domAlign = require('dom-align'); | ||
var RcUtil = require('rc-util'); | ||
var Dom = RcUtil.Dom; | ||
var assign = require('object-assign'); | ||
function noop() { | ||
function prefixClsFn(prefixCls) { | ||
var args = Array.prototype.slice.call(arguments, 1); | ||
return args.map(function (s) { | ||
if (!s) { | ||
return prefixCls; | ||
} | ||
return prefixCls + '-' + s; | ||
}).join(' '); | ||
} | ||
class Dialog extends React.Component{ | ||
prefixClsFn() { | ||
var prefixCls = this.props.prefixCls; | ||
var args = Array.prototype.slice.call(arguments, 0); | ||
return args.map(function (s) { | ||
if (!s) { | ||
return prefixCls; | ||
} | ||
return prefixCls + '-' + s; | ||
}).join(' '); | ||
} | ||
var Dialog = React.createClass({ | ||
align() { | ||
var align = this.props.align; | ||
domAlign(React.findDOMNode(this.refs.dialog), align.node || window, align); | ||
}, | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
visible: this.props.visible | ||
}; | ||
this.prefixClsFn = this.prefixClsFn.bind(this); | ||
this.requestClose = this.requestClose.bind(this); | ||
} | ||
componentWillReceiveProps(props) { | ||
if (this.state.visible !== props.visible) { | ||
if (props.visible) { | ||
this.show(); | ||
} else { | ||
this.close(); | ||
} | ||
monitorWindowResize() { | ||
if (!this.resizeHandler) { | ||
this.resizeHandler = Dom.addEventListener(window, 'resize', this.align); | ||
} | ||
} | ||
}, | ||
show() { | ||
var self = this; | ||
if (!this.state.visible) { | ||
var props = this.props; | ||
this.setState({ | ||
visible: true | ||
}, function () { | ||
self.refs.dialog.getDOMNode().focus(); | ||
props.onShow(); | ||
}); | ||
unMonitorWindowResize() { | ||
if (this.resizeHandler) { | ||
this.resizeHandler.remove(); | ||
this.resizeHandler = null; | ||
} | ||
} | ||
}, | ||
close() { | ||
if (this.state.visible) { | ||
var props = this.props; | ||
this.setState({ | ||
visible: false | ||
}, function () { | ||
props.onClose(); | ||
}); | ||
componentDidMount() { | ||
this.componentDidUpdate(); | ||
if (this.props.visible) { | ||
React.findDOMNode(this.refs.dialog).focus(); | ||
} | ||
} | ||
}, | ||
requestClose() { | ||
if (this.props.onBeforeClose(this) !== false) { | ||
this.close(); | ||
componentDidUpdate() { | ||
var props = this.props; | ||
if (props.visible) { | ||
this.align(); | ||
this.monitorWindowResize(); | ||
} else { | ||
this.unMonitorWindowResize(); | ||
} | ||
} | ||
}, | ||
componentWillUnmount() { | ||
this.unMonitorWindowResize(); | ||
}, | ||
render() { | ||
var self = this; | ||
var props = this.props; | ||
var visible = self.state.visible; | ||
var prefixClsFn = this.prefixClsFn; | ||
var className = [prefixClsFn('wrap')]; | ||
var visible = props.visible; | ||
var prefixCls = props.prefixCls; | ||
var className = [prefixClsFn(prefixCls, 'wrap')]; | ||
var closable = props.closable; | ||
if (!visible) { | ||
className.push(prefixClsFn('wrap-hidden')); | ||
className.push(prefixClsFn(prefixCls, 'wrap-hidden')); | ||
} | ||
var dest = {}; | ||
if (props.width !== undefined) { | ||
dest.width = props.width; | ||
} | ||
if (props.height !== undefined) { | ||
dest.height = props.height; | ||
} | ||
if (props.zIndex !== undefined) { | ||
dest.zIndex = props.zIndex; | ||
} | ||
var style = assign({}, props.style, dest); | ||
var maskProps = {}; | ||
if (closable) { | ||
maskProps.onClick = this.requestClose; | ||
maskProps.onClick = this.props.onClose; | ||
} | ||
return ( | ||
<div className={className.join(' ')}> | ||
<div {...maskProps} className={prefixClsFn('mask')}></div> | ||
<div className={[prefixClsFn(''), props.className].join(' ')} tabIndex="0" role="dialog" ref='dialog' style={props.style}> | ||
<div className={prefixClsFn('content')}> | ||
<div className={prefixClsFn('header')}> | ||
if (style.zIndex) { | ||
maskProps.style = {zIndex: style.zIndex}; | ||
} | ||
return (<div className={className.join(' ')}> | ||
<div {...maskProps} className={prefixClsFn(prefixCls, 'mask')}/> | ||
<div className={[prefixClsFn(prefixCls), props.className].join(' ')} tabIndex="0" role="dialog" ref='dialog' style={style}> | ||
<div className={prefixClsFn(prefixCls, 'content')}> | ||
<div className={prefixClsFn(prefixCls, 'header')}> | ||
{closable ? | ||
(<a tabIndex="0" onClick={this.requestClose} className={[prefixClsFn('close')].join('')}> | ||
<span className={prefixClsFn('close-x')}>×</span> | ||
(<a tabIndex="0" onClick={this.props.onClose} className={[prefixClsFn(prefixCls, 'close')].join('')}> | ||
<span className={prefixClsFn(prefixCls, 'close-x')}>×</span> | ||
</a>) : | ||
null} | ||
<div className={prefixClsFn('title')}>{props.title}</div> | ||
</div> | ||
<div className={prefixClsFn('body')}>{props.children}</div> | ||
<div className={prefixClsFn(prefixCls, 'title')}>{props.title}</div> | ||
</div> | ||
<div className={prefixClsFn(prefixCls, 'body')}>{props.children}</div> | ||
</div> | ||
</div> | ||
); | ||
</div>); | ||
} | ||
}); | ||
componentDidMount() { | ||
if (this.state.visible) { | ||
this.refs.dialog.getDOMNode().focus(); | ||
this.props.onShow(); | ||
} | ||
} | ||
} | ||
Dialog.defaultProps = { | ||
className: '', | ||
closable: true, | ||
prefixCls: 'rc-dialog', | ||
visible: false, | ||
onBeforeClose: noop, | ||
onShow: noop, | ||
onClose: noop | ||
}; | ||
module.exports = Dialog; |
{ | ||
"name": "rc-dialog", | ||
"version": "3.0.0", | ||
"version": "4.0.0", | ||
"description": "dialog ui component for react", | ||
@@ -61,3 +61,8 @@ "keywords": [ | ||
"less" | ||
] | ||
], | ||
"dependencies": { | ||
"dom-align": "~1.0.3", | ||
"object-assign": "~2.0.0", | ||
"rc-util": "~2.0.2" | ||
} | ||
} |
@@ -77,2 +77,14 @@ # rc-dialog | ||
#### align | ||
* align config. see https://github.com/yiminghe/dom-align | ||
```js | ||
{ | ||
node: // defaults to window, | ||
points: // defaults to ['cc','cc'], | ||
offset: // | ||
} | ||
``` | ||
### methods (not recommended) | ||
@@ -79,0 +91,0 @@ |
@@ -29,3 +29,4 @@ /** @jsx React.DOM */ | ||
style={{width: 600}} | ||
title={title} onClose={callback1} onShow={callback2}> | ||
title={title} | ||
onClose={callback1} onShow={callback2}> | ||
<p>第一个dialog</p> | ||
@@ -42,3 +43,3 @@ </Dialog>), container); | ||
setTimeout(function () { | ||
expect($('#t1 .rc-dialog-wrap').hasClass('rc-dialog-hidden')).not.to.be.ok(); | ||
expect($('.rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).not.to.be.ok(); | ||
done(); | ||
@@ -49,6 +50,7 @@ }, 10); | ||
it('hide', function (done) { | ||
dialog.hide(); | ||
it('close', function (done) { | ||
dialog.show(); | ||
dialog.close(); | ||
setTimeout(function () { | ||
expect($('#t1 .rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).to.be.ok(); | ||
expect($('.rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).to.be.ok(); | ||
done(); | ||
@@ -59,13 +61,10 @@ }, 10); | ||
it('create', function () { | ||
expect($('#t1 .rc-dialog').length).to.be(1); | ||
expect($('#t1 .rc-dialog-title').text()).to.be(title); | ||
expect($('.rc-dialog').length).to.be(0); | ||
}); | ||
it('mask', function () { | ||
expect($('#t1 .rc-dialog-mask').length).to.be(1); | ||
dialog.show(); | ||
expect($('.rc-dialog-mask').length).to.be(1); | ||
}); | ||
it('default visible false', function () { | ||
expect($('#t1 .rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).to.be.ok(); | ||
}); | ||
@@ -76,3 +75,3 @@ it('show', function (done) { | ||
expect(callback2.called).to.be(true); | ||
expect($('#t1 .rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).not.to.be.ok(); | ||
expect($('.rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).not.to.be.ok(); | ||
done(); | ||
@@ -87,3 +86,3 @@ }, 10); | ||
}, function (done) { | ||
var btn = $('#t1 .rc-dialog-header a')[0]; | ||
var btn = $('.rc-dialog-header a')[0]; | ||
Simulate.click(btn); | ||
@@ -93,3 +92,3 @@ setTimeout(done, 10); | ||
expect(callback1.called).to.be(true); | ||
expect($('#t1 .rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).to.be.ok(); | ||
expect($('.rc-dialog-wrap').hasClass('rc-dialog-wrap-hidden')).to.be.ok(); | ||
done(); | ||
@@ -96,0 +95,0 @@ }], done) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
20610
21
444
123
3
+ Addeddom-align@~1.0.3
+ Addedobject-assign@~2.0.0
+ Addedrc-util@~2.0.2
+ Addeddom-align@1.0.12(transitive)
+ Addedobject-assign@2.0.0(transitive)
+ Addedrc-util@2.0.3(transitive)