rc-dialog - npm Package Compare versions

Comparing version 4.4.1 to 4.5.0

HISTORY.md

 # History
 ----
+
+## 4.5.0 2015-07-23
+
+use rc-animate & rc-align
+
 ## 4.4.0 2015-07-03
@@ -4,0 +9,0 @@

lib/Dialog.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var React = require('react');
-var domAlign = require('dom-align');
-var RcUtil = require('rc-util');
-var KeyCode = RcUtil.KeyCode;
-var Dom = RcUtil.Dom;
-var assign = require('object-assign');
-var _anim = require('css-animation');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function prefixClsFn(prefixCls) {
-  var args = Array.prototype.slice.call(arguments, 1);
-  return args.map(function (s) {
-    if (!s) {
-      return prefixCls;
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _rcAlign = require('rc-align');
+
+var _rcAlign2 = _interopRequireDefault(_rcAlign);
+
+var _rcUtil = require('rc-util');
+
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
+var _rcAnimate = require('rc-animate');
+
+var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
+
+var Dialog = _react2['default'].createClass({
+  displayName: 'Dialog',
+
+  getDialogElement: function getDialogElement() {
+    var props = this.props;
+    var closable = props.closable;
+    var prefixCls = props.prefixCls;
+    var dest = {};
+    if (props.width !== undefined) {
+      dest.width = props.width;
     }
-    return prefixCls + '-' + s;
-  }).join(' ');
-}
+    if (props.height !== undefined) {
+      dest.height = props.height;
+    }
+    if (props.zIndex !== undefined) {
+      dest.zIndex = props.zIndex;
+    }
 
-function buffer(fn, ms) {
-  var timer;
-  return function () {
-    if (timer) {
-      clearTimeout(timer);
+    var footer;
+    if (props.footer) {
+      footer = _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-footer' },
+        props.footer
+      );
     }
-    timer = setTimeout(fn, ms);
-  };
-}
 
-var Dialog = React.createClass({
-  displayName: 'Dialog',
+    var header;
+    if (props.title || props.closable) {
+      header = _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-header' },
+        closable ? _react2['default'].createElement(
+          'a',
+          { tabIndex: "0", onClick: props.onRequestClose, className: prefixCls + '-close' },
+          _react2['default'].createElement('span', { className: prefixCls + '-close-x' })
+        ) : null,
+        _react2['default'].createElement(
+          'div',
+          { className: prefixCls + '-title' },
+          props.title
+        )
+      );
+    }
 
-  align: function align() {
-    var align = this.props.align;
-    domAlign(React.findDOMNode(this.refs.dialog), align.node || window, align);
+    var style = (0, _objectAssign2['default'])({}, props.style, dest);
+    var dialogProps = {
+      className: [props.prefixCls, props.className].join(' '),
+      tabIndex: '0',
+      role: 'dialog',
+      ref: 'dialog',
+      style: style,
+      onKeyDown: this.handleKeyDown
+    };
+    var transitionName = this.getTransitionName();
+    var dialogElement = _react2['default'].createElement(
+      'div',
+      dialogProps,
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-content' },
+        header,
+        _react2['default'].createElement(
+          'div',
+          { className: prefixCls + '-body' },
+          props.children
+        ),
+        footer
+      ),
+      _react2['default'].createElement(
+        'div',
+        { tabIndex: "0", ref: 'sentinel', style: { width: 0, height: 0, overflow: 'hidden' } },
+        'sentinel'
+      )
+    );
+    // add key for align to keep animate children stable
+    return _react2['default'].createElement(
+      _rcAnimate2['default'],
+      { key: "dialog",
+        showProp: "dialogVisible",
+        onEnd: this.handleAnimateEnd,
+        transitionName: transitionName,
+        component: "",
+        animateMount: true },
+      _react2['default'].createElement(
+        _rcAlign2['default'],
+        { align: props.align,
+          key: "dialog",
+          dialogVisible: props.visible,
+          monitorBufferTime: 80,
+          monitorWindowResize: true,
+          disabled: !props.visible },
+        dialogElement
+      )
+    );
   },
 
-  monitorWindowResize: function monitorWindowResize() {
-    if (!this.resizeHandler) {
-      this.resizeHandler = Dom.addEventListener(window, 'resize', buffer(this.align, 80));
+  getMaskElement: function getMaskElement() {
+    var props = this.props;
+    var maskProps = {
+      onClick: this.handleMaskClick,
+      'data-visible': props.visible
+    };
+
+    if (props.zIndex) {
+      maskProps.style = { zIndex: props.zIndex };
     }
+    var maskElement;
+    if (props.mask) {
+      var maskTransition = this.getMaskTransitionName();
+      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: "",
+            transitionName: maskTransition },
+          maskElement
+        );
+      }
+    }
+    return maskElement;
   },
 
-  anim: function anim(el, transitionName, animation, enter, fn) {
+  getMaskTransitionName: function getMaskTransitionName() {
     var props = this.props;
+    var transitionName = props.maskTransitionName;
+    var animation = props.maskAnimation;
     if (!transitionName && animation) {
       transitionName = props.prefixCls + '-' + animation;
     }
-    if (transitionName) {
-      _anim(el, transitionName + (enter ? '-enter' : '-leave'), fn);
-    } else if (fn) {
-      fn();
-    }
+    return transitionName;
   },
 
-  unMonitorWindowResize: function unMonitorWindowResize() {
-    if (this.resizeHandler) {
-      this.resizeHandler.remove();
-      this.resizeHandler = null;
-    }
-  },
-
   componentDidMount: function componentDidMount() {
-    this.componentDidUpdate();
+    this.componentDidUpdate({});
   },
 
   componentDidUpdate: function componentDidUpdate(prevProps) {
-    var _this = this;
-
     var props = this.props;
-    var dialogDomNode = React.findDOMNode(this.refs.dialog);
-    var maskNode = React.findDOMNode(this.refs.mask);
-    prevProps = prevProps || {};
     if (props.visible) {
-      this.monitorWindowResize();
       // first show
       if (!prevProps.visible) {
-        this.align();
-        this.anim(maskNode, props.maskTransitionName, props.maskAnimation, true);
-        this.anim(dialogDomNode, props.transitionName, props.animation, true, function () {
-          props.onShow();
-        });
         this.lastOutSideFocusNode = document.activeElement;
-        dialogDomNode.focus();
-      } else if (props.align !== prevProps.align) {
-        this.align();
+        _react2['default'].findDOMNode(this.refs.dialog).focus();
       }
-    } else {
-      if (prevProps.visible) {
-        this.anim(maskNode, props.maskTransitionName, props.maskAnimation);
-        this.anim(dialogDomNode, props.transitionName, props.animation, false, function () {
-          props.onClose();
-          if (props.mask && _this.lastOutSideFocusNode) {
-            try {
-              _this.lastOutSideFocusNode.focus();
-            } catch (e) {}
-            _this.lastOutSideFocusNode = null;
-          }
-        });
+    } else if (prevProps.visible) {
+      if (props.mask && this.lastOutSideFocusNode) {
+        try {
+          this.lastOutSideFocusNode.focus();
+        } catch (e) {
+          // empty
+        }
+        this.lastOutSideFocusNode = null;
       }
-      this.unMonitorWindowResize();
     }
   },
 
-  componentWillUnmount: function componentWillUnmount() {
-    this.unMonitorWindowResize();
-  },
-
   handleKeyDown: function handleKeyDown(e) {
     var props = this.props;
     if (props.closable) {
-      if (e.keyCode === KeyCode.ESC) {
+      if (e.keyCode === _rcUtil.KeyCode.ESC) {
         this.props.onRequestClose();
@@ -121,6 +197,6 @@ }
     if (props.visible) {
-      if (e.keyCode === KeyCode.TAB) {
+      if (e.keyCode === _rcUtil.KeyCode.TAB) {
         var activeElement = document.activeElement;
-        var dialogRoot = React.findDOMNode(this.refs.dialog);
-        var sentinel = React.findDOMNode(this.refs.sentinel);
+        var dialogRoot = _react2['default'].findDOMNode(this.refs.dialog);
+        var sentinel = _react2['default'].findDOMNode(this.refs.sentinel);
         if (e.shiftKey) {
@@ -130,3 +206,3 @@ if (activeElement === dialogRoot) {
           }
-        } else if (activeElement === React.findDOMNode(this.refs.sentinel)) {
+        } else if (activeElement === _react2['default'].findDOMNode(this.refs.sentinel)) {
           dialogRoot.focus();
@@ -138,2 +214,28 @@ }
 
+  getTransitionName: function getTransitionName() {
+    var props = this.props;
+    var transitionName = props.transitionName;
+    var animation = props.animation;
+    if (!transitionName && animation) {
+      transitionName = props.prefixCls + '-' + animation;
+    }
+    return transitionName;
+  },
+
+  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() {
@@ -143,91 +245,16 @@ if (this.props.closable) {
     }
-    React.findDOMNode(this.refs.dialog).focus();
+    _react2['default'].findDOMNode(this.refs.dialog).focus();
   },
 
   render: function render() {
+    var _className;
+
     var props = this.props;
-    var visible = props.visible;
     var prefixCls = props.prefixCls;
-    var className = [prefixClsFn(prefixCls, 'wrap')];
-    var closable = props.closable;
-    if (!visible) {
-      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 className = (_className = {}, _defineProperty(_className, prefixCls + '-wrap', 1), _defineProperty(_className, prefixCls + '-wrap-hidden', !props.visible), _className);
 
-    var style = assign({}, props.style, dest);
-
-    var maskProps = {
-      onClick: this.handleMaskClick
-    };
-    var dialogProps = {
-      className: [prefixCls, props.className].join(' '),
-      tabIndex: '0',
-      role: 'dialog',
-      ref: 'dialog',
-      style: style,
-      onKeyDown: this.handleKeyDown
-    };
-
-    if (style.zIndex) {
-      maskProps.style = { zIndex: style.zIndex };
-    }
-    var footer;
-    if (props.footer) {
-      footer = React.createElement(
-        'div',
-        { className: prefixClsFn(prefixCls, 'footer') },
-        props.footer
-      );
-    }
-    var header;
-    if (props.title || closable) {
-      header = React.createElement(
-        'div',
-        { className: prefixClsFn(prefixCls, 'header') },
-        closable ? React.createElement(
-          'a',
-          { tabIndex: '0', onClick: props.onRequestClose, className: [prefixClsFn(prefixCls, 'close')].join('') },
-          React.createElement('span', { className: prefixClsFn(prefixCls, 'close-x') })
-        ) : null,
-        React.createElement(
-          'div',
-          { className: prefixClsFn(prefixCls, 'title') },
-          props.title
-        )
-      );
-    }
-    return React.createElement(
+    return _react2['default'].createElement(
       'div',
-      { className: className.join(' ') },
-      props.mask ? React.createElement('div', _extends({}, maskProps, { className: prefixClsFn(prefixCls, 'mask'), ref: 'mask' })) : null,
-      React.createElement(
-        'div',
-        dialogProps,
-        React.createElement(
-          'div',
-          { className: prefixClsFn(prefixCls, 'content') },
-          header,
-          React.createElement(
-            'div',
-            { className: prefixClsFn(prefixCls, 'body') },
-            props.children
-          ),
-          footer
-        ),
-        React.createElement(
-          'div',
-          { tabIndex: '0', ref: 'sentinel', style: { width: 0, height: 0, overflow: 'hidden' } },
-          'sentinel'
-        )
-      )
+      { className: (0, _rcUtil.classSet)(className) },
+      [this.getMaskElement(), this.getDialogElement()]
     );
@@ -237,4 +264,3 @@ }
 
-module.exports = Dialog;
-
-// empty
+exports['default'] = Dialog;
+module.exports = exports['default'];

lib/DialogWrap.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -7,10 +13,20 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var React = require('react');
-var Dialog = require('./Dialog');
-var assign = require('object-assign');
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _Dialog = require('./Dialog');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
 function noop() {}
@@ -29,2 +45,4 @@
 var DialogWrap = (function (_React$Component) {
+  _inherits(DialogWrap, _React$Component);
+
   function DialogWrap(props) {
@@ -44,4 +62,2 @@ var _this = this;
 
-  _inherits(DialogWrap, _React$Component);
-
   _createClass(DialogWrap, [{
@@ -132,3 +148,3 @@ key: 'componentWillReceiveProps',
 
-      assign(dialogProps, {
+      (0, _objectAssign2['default'])(dialogProps, {
         onClose: this.handleClose,
@@ -140,5 +156,5 @@ onShow: this.handleShow,
 
-      return React.createElement(
-        Dialog,
-        dialogProps,
+      return _react2['default'].createElement(
+        _Dialog2['default'],
+        _extends({}, dialogProps, { key: "dialog" }),
         props.children
@@ -164,3 +180,3 @@ );
       if (this.props.renderToBody && this.dialogRendered) {
-        React.render(this.getDialogElement(), this.getDialogContainer());
+        _react2['default'].render(this.getDialogElement(), this.getDialogContainer());
       }
@@ -171,3 +187,3 @@ }
     value: function cleanDialogContainer() {
-      React.unmountComponentAtNode(this.getDialogContainer());
+      _react2['default'].unmountComponentAtNode(this.getDialogContainer());
       document.body.removeChild(this.dialogContainer);
@@ -181,3 +197,3 @@ this.dialogContainer = null;
         if (this.state.visible) {
-          React.render(this.getDialogElement({
+          _react2['default'].render(this.getDialogElement({
             onClose: this.cleanDialogContainer,
@@ -194,3 +210,3 @@ visible: false
   return DialogWrap;
-})(React.Component);
+})(_react2['default'].Component);
 
@@ -212,2 +228,18 @@ DialogWrap.defaultProps = {
 
-module.exports = DialogWrap;
+DialogWrap.PropTypes = {
+  className: _react2['default'].PropTypes.string,
+  align: _react2['default'].PropTypes.shape({
+    align: _react2['default'].PropTypes.array,
+    offset: _react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.number)
+  }),
+  renderToBody: _react2['default'].PropTypes.bool,
+  mask: _react2['default'].PropTypes.bool,
+  closable: _react2['default'].PropTypes.bool,
+  prefixCls: _react2['default'].PropTypes.string,
+  visible: _react2['default'].PropTypes.bool,
+  onShow: _react2['default'].PropTypes.func,
+  onClose: _react2['default'].PropTypes.func
+};
+
+exports['default'] = DialogWrap;
+module.exports = exports['default'];

package.json

 {
   "name": "rc-dialog",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "dialog ui component for react",
@@ -57,7 +57,7 @@ "keywords": [
   "dependencies": {
-    "css-animation": "~1.0.1",
-    "dom-align": "~1.0.3",
-    "object-assign": "~2.0.0",
-    "rc-util": "~2.0.2"
+    "object-assign": "2.x",
+    "rc-align": "1.x",
+    "rc-animate": "1.x",
+    "rc-util": "2.x"
   }
 }

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

29451

increased by9.24%

Lines of code

759

increased by5.12%

Dependency changes

• + Addedrc-align@1.x

• + Addedrc-animate@1.x

• + Addedadd-dom-event-listener@1.1.0(transitive)

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedclassnames@2.5.1(transitive)

• + Addedcomponent-classes@1.2.6(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedcss-animation@1.6.1(transitive)

• + Addeddom-align@1.12.4(transitive)

• + Addedobject-assign@2.1.14.1.1(transitive)

• + Addedrc-align@1.2.1(transitive)

• + Addedrc-animate@1.3.0(transitive)

• + Addedrc-util@2.1.1(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• - Removedcss-animation@~1.0.1

• - Removeddom-align@~1.0.3

• - Removedcss-animation@1.0.5(transitive)

• - Removeddom-align@1.0.12(transitive)

• - Removedobject-assign@2.0.0(transitive)

• - Removedrc-util@2.0.3(transitive)

• Updatedobject-assign@2.x

• Updatedrc-util@2.x