rc-dialog - npm Package Compare versions

Comparing version 4.1.3 to 4.2.0

HISTORY.md

 # History
 ----
+## 4.2.0 / 2015-06-09
 
+add renderToBody props
+
 ## 4.0.0 / 2015-04-28
@@ -5,0 +8,0 @@

lib/Dialog.js

@@ -10,3 +10,3 @@ 'use strict';
 var assign = require('object-assign');
-var anim = require('css-animation');
+var _anim = require('css-animation');
 
@@ -47,2 +47,13 @@ function prefixClsFn(prefixCls) {
 
+  anim: function anim(el, transitionName, animation, enter, fn) {
+    if (!transitionName && animation) {
+      transitionName = prefixClsFn(this.props.prefixCls, animation + (enter ? '-enter' : '-leave'));
+    }
+    if (transitionName) {
+      _anim(el, transitionName, fn);
+    } else if (fn) {
+      fn();
+    }
+  },
+
   unMonitorWindowResize: function unMonitorWindowResize() {
@@ -61,28 +72,15 @@ if (this.resizeHandler) {
     var props = this.props;
-    var dialogDomNode, maskNode;
-    var transitionName, maskTransitionName;
+    var wrap = props.wrap;
+    var dialogDomNode = React.findDOMNode(this.refs.dialog);
+    var maskNode = React.findDOMNode(this.refs.mask);
+    prevProps = prevProps || {};
     if (props.visible) {
       this.monitorWindowResize();
-      prevProps = prevProps || {};
       // first show
       if (!prevProps.visible) {
         this.align();
-        dialogDomNode = React.findDOMNode(this.refs.dialog);
-        transitionName = props.transitionName;
-        if (!transitionName && props.animation) {
-          transitionName = prefixClsFn(props.prefixCls, props.animation + '-enter');
-        }
-        if (transitionName) {
-          // dialogDomNode.style.visibility = 'hidden';
-          anim(dialogDomNode, transitionName);
-          // dialogDomNode.style.visibility = '';
-        }
-        maskTransitionName = props.maskTransitionName;
-        if (!maskTransitionName && props.maskAnimation) {
-          maskTransitionName = prefixClsFn(props.prefixCls, props.maskAnimation + '-enter');
-        }
-        if (maskTransitionName) {
-          maskNode = React.findDOMNode(this.refs.mask);
-          anim(maskNode, maskTransitionName);
-        }
+        this.anim(maskNode, props.maskTransitionName, props.maskAnimation, true);
+        this.anim(dialogDomNode, props.transitionName, props.animation, true, function () {
+          wrap.props.onShow();
+        });
         dialogDomNode.focus();
@@ -94,18 +92,6 @@ } else if (props.align !== prevProps.align) {
       if (prevProps.visible) {
-        dialogDomNode = React.findDOMNode(this.refs.dialog);
-        transitionName = props.transitionName;
-        if (!transitionName && props.animation) {
-          transitionName = prefixClsFn(props.prefixCls, props.animation + '-leave');
-        }
-        if (transitionName) {
-          anim(dialogDomNode, transitionName);
-        }
-        maskTransitionName = props.maskTransitionName;
-        if (!maskTransitionName && props.maskAnimation) {
-          maskTransitionName = prefixClsFn(props.prefixCls, props.maskAnimation + '-leave');
-        }
-        if (maskTransitionName) {
-          maskNode = React.findDOMNode(this.refs.mask);
-          anim(maskNode, maskTransitionName);
-        }
+        this.anim(maskNode, props.maskTransitionName, props.maskAnimation);
+        this.anim(dialogDomNode, props.transitionName, props.animation, false, function () {
+          wrap.props.onClose();
+        });
       }
@@ -112,0 +98,0 @@ this.unMonitorWindowResize();

lib/DialogWrap.js

@@ -42,11 +42,2 @@ 'use strict';
   _createClass(DialogWrap, [{
-    key: 'getDialogContainer',
-    value: function getDialogContainer() {
-      if (!this.dialogContainer) {
-        this.dialogContainer = document.createElement('div');
-        document.body.appendChild(this.dialogContainer);
-      }
-      return this.dialogContainer;
-    }
-  }, {
     key: 'componentWillReceiveProps',
@@ -74,7 +65,4 @@ value: function componentWillReceiveProps(props) {
       if (!this.state.visible) {
-        var props = this.props;
         this.setState({
           visible: true
-        }, function () {
-          props.onShow();
         });
@@ -87,7 +75,4 @@ }
       if (this.state.visible) {
-        var props = this.props;
         this.setState({
           visible: false
-        }, function () {
-          props.onClose();
         });
@@ -104,9 +89,20 @@ }
   }, {
-    key: 'renderDialog',
-    value: function renderDialog() {
+    key: 'getDialogContainer',
+    value: function getDialogContainer() {
+      if (!this.dialogContainer) {
+        this.dialogContainer = document.createElement('div');
+        this.dialogContainer.className = '' + this.props.prefixCls + '-container';
+        document.body.appendChild(this.dialogContainer);
+      }
+      return this.dialogContainer;
+    }
+  }, {
+    key: 'getDialogElement',
+    value: function getDialogElement() {
       var props = this.props;
       var dialogProps = copy(props, ['className', 'closable', 'align', 'title', 'footer', 'animation', 'transitionName', 'maskAnimation', 'maskTransitionName', 'prefixCls', 'style', 'width', 'height', 'zIndex']);
-      var dialogElement = React.createElement(
+      return React.createElement(
         Dialog,
         _extends({
+          wrap: this,
           visible: this.state.visible
@@ -117,3 +113,2 @@ }, dialogProps, {
       );
-      this.dialogInstance = React.render(dialogElement, this.getDialogContainer());
     }
@@ -123,3 +118,6 @@ }, {
     value: function render() {
-      return null;
+      if (this.state.visible) {
+        this.dialogRendered = true;
+      }
+      return this.props.renderToBody ? null : this.dialogRendered ? this.getDialogElement() : null;
     }
@@ -130,5 +128,2 @@ }, {
       this.componentDidUpdate();
-      if (this.state.visible) {
-        this.props.onShow();
-      }
     }
@@ -138,4 +133,4 @@ }, {
     value: function componentDidUpdate() {
-      if (this.dialogInstance || this.state.visible) {
-        this.renderDialog();
+      if (this.props.renderToBody && this.dialogRendered) {
+        React.render(this.getDialogElement(), this.getDialogContainer());
       }
@@ -148,2 +143,4 @@ }
         React.unmountComponentAtNode(this.getDialogContainer());
+        document.body.removeChild(this.dialogContainer);
+        this.dialogContainer = null;
       }
@@ -162,2 +159,3 @@ }
   },
+  renderToBody: true,
   closable: true,
@@ -164,0 +162,0 @@ prefixCls: 'rc-dialog',

package.json

 {
   "name": "rc-dialog",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "dialog ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -62,2 +62,5 @@ # rc-dialog
 
+#### renderToBody
+  * whether render dialog to body. default true
+
 #### animation
@@ -64,0 +67,0 @@ * part of dialog animation css class name

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

141

increased by2.17%

Worsened metrics

Total package byte prevSize

24109

decreased by-1.95%

Lines of code

623

decreased by-2.66%

No dependency changes