rc-dialog - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

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.md

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

index.js

@@ -1,1 +0,1 @@
-module.exports = require('./lib/Dialog');
+module.exports = require('./lib/DialogWrap');

lib/Dialog.js

 /** @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;

package.json

 {
   "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"
+  }
 }

README.md

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

tests/index.spec.js

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

No alert changes

Improved metrics

Total package byte prevSize

20610

13.02%

Number of package files

21

5%

Lines of code

444

23.68%

Number of lines in readme file

123

10.81%

Worsened metrics

Dependency count

3

Infinity%

Dependency changes

• + Added

  dom-align@~1.0.3

• + Added

  object-assign@~2.0.0

• + Added

  rc-util@~2.0.2

• + Added

  dom-align@1.0.12
  (transitive)

• + Added

  object-assign@2.0.0
  (transitive)

• + Added

  rc-util@2.0.3
  (transitive)