rc-dialog - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

lib/Dialog.js

@@ -31,5 +31,129 @@ 'use strict';
 
+function noop() {}
+
+function getScroll(w, top) {
+  var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
+  var method = 'scroll' + (top ? 'Top' : 'Left');
+  if (typeof ret !== 'number') {
+    var d = w.document;
+    ret = d.documentElement[method];
+    if (typeof ret !== 'number') {
+      ret = d.body[method];
+    }
+  }
+  return ret;
+}
+
+function setTransformOrigin(node, value) {
+  var style = node.style;
+  ['Webkit', 'Moz', 'Ms', 'ms'].forEach(function (prefix) {
+    style[prefix + 'TransformOrigin'] = value;
+  });
+  style['transformOrigin'] = value;
+}
+
+function offset(el) {
+  var rect = el.getBoundingClientRect();
+  var pos = {
+    left: rect.left,
+    top: rect.top
+  };
+  var doc = el.ownerDocument;
+  var w = doc.defaultView || doc.parentWindow;
+  pos.left += getScroll(w);
+  pos.top += getScroll(w, 1);
+  return pos;
+}
+
 var Dialog = _react2['default'].createClass({
   displayName: 'Dialog',
 
+  propTypes: {
+    onAfterClose: _react2['default'].PropTypes.func,
+    onClose: _react2['default'].PropTypes.func,
+    closable: _react2['default'].PropTypes.bool,
+    visible: _react2['default'].PropTypes.bool,
+    mousePosition: _react2['default'].PropTypes.object
+  },
+
+  getDefaultProps: function getDefaultProps() {
+    return {
+      onAfterClose: noop,
+      onClose: noop
+    };
+  },
+
+  componentDidMount: function componentDidMount() {
+    this.componentDidUpdate({});
+  },
+
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    var props = this.props;
+    if (props.visible) {
+      // first show
+      if (!prevProps.visible) {
+        this.lastOutSideFocusNode = document.activeElement;
+        (0, _react.findDOMNode)(this.refs.dialog).focus();
+      }
+    } else if (prevProps.visible) {
+      if (props.mask && this.lastOutSideFocusNode) {
+        try {
+          this.lastOutSideFocusNode.focus();
+        } catch (e) {
+          this.lastOutSideFocusNode = null;
+        }
+        this.lastOutSideFocusNode = null;
+      }
+    }
+  },
+
+  onAnimateEnd: function onAnimateEnd(key, visible) {
+    if (!visible) {
+      this.props.onAfterClose();
+    }
+  },
+
+  onMaskClick: function onMaskClick() {
+    if (this.props.closable) {
+      this.close();
+    }
+    (0, _react.findDOMNode)(this.refs.dialog).focus();
+  },
+
+  onKeyDown: function onKeyDown(e) {
+    var props = this.props;
+    if (props.closable) {
+      if (e.keyCode === _rcUtil.KeyCode.ESC) {
+        this.close();
+      }
+    }
+    // keep focus inside dialog
+    if (props.visible) {
+      if (e.keyCode === _rcUtil.KeyCode.TAB) {
+        var activeElement = document.activeElement;
+        var dialogRoot = (0, _react.findDOMNode)(this.refs.dialog);
+        var sentinel = (0, _react.findDOMNode)(this.refs.sentinel);
+        if (e.shiftKey) {
+          if (activeElement === dialogRoot) {
+            sentinel.focus();
+          }
+        } else if (activeElement === (0, _react.findDOMNode)(this.refs.sentinel)) {
+          dialogRoot.focus();
+        }
+      }
+    }
+  },
+
+  onAlign: function onAlign(dialogNode) {
+    var mousePosition = this.props.mousePosition;
+    if (this.props.visible) {
+      if (mousePosition) {
+        var elOffset = offset(dialogNode);
+        setTransformOrigin(dialogNode, mousePosition.x - elOffset.left + 'px ' + (mousePosition.y - elOffset.top) + 'px');
+      } else {
+        setTransformOrigin(dialogNode, '');
+      }
+    }
+  },
+
   getDialogElement: function getDialogElement() {
@@ -50,3 +174,3 @@ var props = this.props;
 
-    var footer;
+    var footer = undefined;
     if (props.footer) {
@@ -60,3 +184,3 @@ footer = _react2['default'].createElement(
 
-    var header;
+    var header = undefined;
     if (props.title || props.closable) {
@@ -68,3 +192,3 @@ header = _react2['default'].createElement(
           'a',
-          { tabIndex: "0", onClick: props.onRequestClose, className: prefixCls + '-close' },
+          { tabIndex: '0', onClick: this.close, className: prefixCls + '-close' },
           _react2['default'].createElement('span', { className: prefixCls + '-close-x' })
@@ -87,3 +211,3 @@ ) : null,
       style: style,
-      onKeyDown: this.handleKeyDown
+      onKeyDown: this.onKeyDown
     };
@@ -107,3 +231,3 @@ var transitionName = this.getTransitionName();
         'div',
-        { tabIndex: "0", ref: 'sentinel', style: { width: 0, height: 0, overflow: 'hidden' } },
+        { tabIndex: '0', ref: 'sentinel', style: { width: 0, height: 0, overflow: 'hidden' } },
         'sentinel'
@@ -115,7 +239,7 @@ )
       _rcAnimate2['default'],
-      { key: "dialog",
-        showProp: "dialogVisible",
-        onEnd: this.handleAnimateEnd,
+      { key: 'dialog',
+        showProp: 'dialogVisible',
+        onEnd: this.onAnimateEnd,
         transitionName: transitionName,
-        component: "",
+        component: '',
         animateMount: true },
@@ -125,3 +249,4 @@ _react2['default'].createElement(
         { align: props.align,
-          key: "dialog",
+          key: 'dialog',
+          onAlign: this.onAlign,
           dialogVisible: props.visible,
@@ -139,3 +264,3 @@ monitorBufferTime: 80,
     var maskProps = {
-      onClick: this.handleMaskClick,
+      onClick: this.onMaskClick,
       'data-visible': props.visible
@@ -147,10 +272,10 @@ };
     }
-    var maskElement;
+    var maskElement = undefined;
     if (props.mask) {
       var maskTransition = this.getMaskTransitionName();
-      maskElement = _react2['default'].createElement('div', _extends({}, maskProps, { className: props.prefixCls + '-mask', key: "mask" }));
+      maskElement = _react2['default'].createElement('div', _extends({}, maskProps, { className: props.prefixCls + '-mask', key: 'mask' }));
       if (maskTransition) {
         maskElement = _react2['default'].createElement(
           _rcAnimate2['default'],
-          { key: "mask", showProp: "data-visible", animateMount: true, component: "",
+          { key: 'mask', showProp: 'data-visible', animateMount: true, component: '',
             transitionName: maskTransition },
@@ -174,50 +299,2 @@ maskElement
 
-  componentDidMount: function componentDidMount() {
-    this.componentDidUpdate({});
-  },
-
-  componentDidUpdate: function componentDidUpdate(prevProps) {
-    var props = this.props;
-    if (props.visible) {
-      // first show
-      if (!prevProps.visible) {
-        this.lastOutSideFocusNode = document.activeElement;
-        _react2['default'].findDOMNode(this.refs.dialog).focus();
-      }
-    } else if (prevProps.visible) {
-      if (props.mask && this.lastOutSideFocusNode) {
-        try {
-          this.lastOutSideFocusNode.focus();
-        } catch (e) {
-          // empty
-        }
-        this.lastOutSideFocusNode = null;
-      }
-    }
-  },
-
-  handleKeyDown: function handleKeyDown(e) {
-    var props = this.props;
-    if (props.closable) {
-      if (e.keyCode === _rcUtil.KeyCode.ESC) {
-        this.props.onRequestClose();
-      }
-    }
-    // keep focus inside dialog
-    if (props.visible) {
-      if (e.keyCode === _rcUtil.KeyCode.TAB) {
-        var activeElement = document.activeElement;
-        var dialogRoot = _react2['default'].findDOMNode(this.refs.dialog);
-        var sentinel = _react2['default'].findDOMNode(this.refs.sentinel);
-        if (e.shiftKey) {
-          if (activeElement === dialogRoot) {
-            sentinel.focus();
-          }
-        } else if (activeElement === _react2['default'].findDOMNode(this.refs.sentinel)) {
-          dialogRoot.focus();
-        }
-      }
-    }
-  },
-
   getTransitionName: function getTransitionName() {
@@ -233,25 +310,2 @@ var props = this.props;
 
-  handleShow: function handleShow() {
-    this.props.onShow();
-  },
-
-  handleClose: function handleClose() {
-    this.props.onClose();
-  },
-
-  handleAnimateEnd: function handleAnimateEnd(key, visible) {
-    if (visible) {
-      this.handleShow();
-    } else {
-      this.handleClose();
-    }
-  },
-
-  handleMaskClick: function handleMaskClick() {
-    if (this.props.closable) {
-      this.props.onRequestClose();
-    }
-    _react2['default'].findDOMNode(this.refs.dialog).focus();
-  },
-
   render: function render() {
@@ -269,2 +323,6 @@ var _className;
     );
+  },
+
+  close: function close() {
+    this.props.onClose();
   }
@@ -271,0 +329,0 @@ });

lib/DialogWrap.js

@@ -53,5 +53,5 @@ 'use strict';
     this.state = {
-      visible: this.props.visible
+      visible: props.visible
     };
-    ['cleanDialogContainer', 'requestClose', 'close', 'handleClose', 'handleShow'].forEach(function (m) {
+    ['onClose', 'cleanDialogContainer'].forEach(function (m) {
       _this[m] = _this[m].bind(_this);
@@ -62,10 +62,13 @@ });
   _createClass(DialogWrap, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.componentDidUpdate();
+    }
+  }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(props) {
-      if (this.state.visible !== props.visible) {
-        if (props.visible) {
-          this.show();
-        } else {
-          this.close();
-        }
+      if ('visible' in props) {
+        this.setState({
+          visible: props.visible
+        });
       }
@@ -76,48 +79,32 @@ }
     value: function shouldComponentUpdate(nextProps, nextState) {
-      if (!this.state.visible && !nextState.visible) {
-        return false;
-      }
-      return true;
+      return this.state.visible || nextState.visible;
     }
   }, {
-    key: 'show',
-    value: function show() {
-      if (!this.state.visible) {
-        this.setState({
-          visible: true
-        });
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      if (this.dialogRendered) {
+        _react2['default'].render(this.getDialogElement(), this.getDialogContainer());
       }
     }
   }, {
-    key: 'close',
-    value: function close() {
-      if (this.state.visible) {
-        this.setState({
-          visible: false
-        });
-      }
-    }
-  }, {
-    key: 'requestClose',
-    value: function requestClose() {
-      var onBeforeClose = this.props.onBeforeClose;
-      var close = this.close;
-      if (onBeforeClose) {
-        var ret;
-        if (onBeforeClose.length) {
-          ret = onBeforeClose(close);
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.dialogContainer) {
+        if (this.state.visible) {
+          _react2['default'].render(this.getDialogElement({
+            onAfterClose: this.cleanDialogContainer,
+            onClose: noop,
+            visible: false
+          }), this.dialogContainer);
         } else {
-          ret = onBeforeClose();
-          if (!ret) {
-            close();
-          }
+          this.cleanDialogContainer();
         }
-        if (ret && ret.then) {
-          ret.then(close);
-        }
-      } else {
-        close();
       }
     }
   }, {
+    key: 'onClose',
+    value: function onClose() {
+      this.props.onClose();
+    }
+  }, {
     key: 'getDialogContainer',
@@ -133,27 +120,14 @@ value: function getDialogContainer() {
   }, {
-    key: 'handleClose',
-    value: function handleClose() {
-      this.props.onClose();
-    }
-  }, {
-    key: 'handleShow',
-    value: function handleShow() {
-      this.props.onShow();
-    }
-  }, {
     key: 'getDialogElement',
     value: function getDialogElement(extra) {
       var props = this.props;
-      var dialogProps = copy(props, ['className', 'closable', 'align', 'title', 'footer', 'mask', 'animation', 'transitionName', 'maskAnimation', 'maskTransitionName', 'prefixCls', 'style', 'width', 'height', 'zIndex']);
+      var dialogProps = copy(props, ['className', 'closable', 'align', 'title', 'footer', 'mask', 'animation', 'transitionName', 'maskAnimation', 'maskTransitionName', 'mousePosition', 'prefixCls', 'style', 'width', 'height', 'zIndex']);
 
       (0, _objectAssign2['default'])(dialogProps, {
-        onClose: this.handleClose,
-        onShow: this.handleShow,
-        visible: this.state.visible,
-        onRequestClose: this.requestClose
+        onClose: this.onClose,
+        visible: this.state.visible
       }, extra);
-
       return _react2['default'].createElement(
         _Dialog2['default'],
-        _extends({}, dialogProps, { key: "dialog" }),
+        _extends({}, dialogProps, { key: 'dialog' }),
         props.children
@@ -165,20 +139,6 @@ );
     value: function render() {
-      if (this.state.visible) {
-        this.dialogRendered = true;
-      }
-      return this.props.renderToBody ? null : this.dialogRendered ? this.getDialogElement() : null;
+      this.dialogRendered = this.dialogRendered || this.state.visible;
+      return null;
     }
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.componentDidUpdate();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      if (this.props.renderToBody && this.dialogRendered) {
-        _react2['default'].render(this.getDialogElement(), this.getDialogContainer());
-      }
-    }
-  }, {
     key: 'cleanDialogContainer',
@@ -190,16 +150,2 @@ value: function cleanDialogContainer() {
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.dialogContainer) {
-        if (this.state.visible) {
-          _react2['default'].render(this.getDialogElement({
-            onClose: this.cleanDialogContainer,
-            visible: false
-          }), this.dialogContainer);
-        } else {
-          this.cleanDialogContainer();
-        }
-      }
-    }
   }]);
@@ -216,12 +162,9 @@
   },
-  renderToBody: true,
   mask: true,
   closable: true,
   prefixCls: 'rc-dialog',
-  visible: false,
-  onShow: noop,
   onClose: noop
 };
 
-DialogWrap.PropTypes = {
+DialogWrap.propTypes = {
   className: _react2['default'].PropTypes.string,
@@ -232,3 +175,2 @@ align: _react2['default'].PropTypes.shape({
   }),
-  renderToBody: _react2['default'].PropTypes.bool,
   mask: _react2['default'].PropTypes.bool,
@@ -238,3 +180,2 @@ closable: _react2['default'].PropTypes.bool,
   visible: _react2['default'].PropTypes.bool,
-  onShow: _react2['default'].PropTypes.func,
   onClose: _react2['default'].PropTypes.func
@@ -241,0 +182,0 @@ };

package.json

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

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

Total package byte prevSize

28997

increased by0.41%

Worsened metrics

Lines of code

735

decreased by-0.81%

No dependency changes