Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-dialog

Package Overview
Dependencies
Maintainers
2
Versions
164
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-dialog - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

lib/DialogWrap.js

22

examples/simple.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc