react-modal-dialog - npm Package Compare versions

Comparing version 3.0.2 to 4.0.0

lib/index.js

@@ -9,5 +9,5 @@ 'use strict';
 
-var _ModalPortal = require('./ModalPortal');
+var _FlexDialog = require('./FlexDialog');
 
-var _ModalPortal2 = _interopRequireDefault(_ModalPortal);
+var _FlexDialog2 = _interopRequireDefault(_FlexDialog);
 
@@ -26,8 +26,15 @@ var _ModalBackground = require('./ModalBackground');
 
-exports['default'] = {
-  ModalPortal: _ModalPortal2['default'],
-  ModalBackground: _ModalBackground2['default'],
-  ModalContainer: _ModalContainer2['default'],
-  ModalDialog: _ModalDialog2['default']
-};
-module.exports = exports['default'];
+var _ModalPortal = require('./ModalPortal');
+
+var _ModalPortal2 = _interopRequireDefault(_ModalPortal);
+
+var _UnstyledFlexDialog = require('./UnstyledFlexDialog');
+
+var _UnstyledFlexDialog2 = _interopRequireDefault(_UnstyledFlexDialog);
+
+exports.FlexDialog = _FlexDialog2['default'];
+exports.ModalBackground = _ModalBackground2['default'];
+exports.ModalContainer = _ModalContainer2['default'];
+exports.ModalDialog = _ModalDialog2['default'];
+exports.ModalPortal = _ModalPortal2['default'];
+exports.UnstyledFlexDialog = _UnstyledFlexDialog2['default'];

lib/ModalBackground.js

@@ -37,2 +37,9 @@ 'use strict';
 
+    this.componentDidMount = function () {
+      // Create a delay so CSS will animate
+      requestAnimationFrame(function () {
+        return _this.setState({ transparent: false });
+      });
+    };
+
     this.componentWillLeave = function (callback) {
@@ -51,9 +58,2 @@ _this.setState({
 
-    this.componentDidMount = function () {
-      // Create a delay so CSS will animate
-      requestAnimationFrame(function () {
-        return _this.setState({ transparent: false });
-      });
-    };
-
     this.getChild = function () {
@@ -83,3 +83,4 @@ var child = _react2['default'].Children.only(_this.props.children);
         transition: 'opacity ' + _this.props.duration / 1000 + 's',
-        WebkitTransition: 'opacity ' + _this.props.duration / 1000 + 's'
+        WebkitTransition: 'opacity ' + _this.props.duration / 1000 + 's',
+        cursor: 'pointer'
       };
@@ -93,9 +94,13 @@
         left: 0,
-        minHeight: '100%',
+        height: '100%',
         width: '100%',
         transition: 'opacity ' + _this.props.duration / 1000 + 's',
-        WebkitTransition: 'opacity ' + _this.props.duration / 1000 + 's'
+        WebkitTransition: 'opacity ' + _this.props.duration / 1000 + 's',
+        cursor: 'pointer'
       };
 
       var style = {
+        // This position needs to be fixed so that when the html/body is bigger
+        // than the viewport, this background still shows up in the center.
+        // This is particularly useful on edusight-home pages.
         position: 'fixed',
@@ -102,0 +107,0 @@ top: 0,

lib/ModalDialog.js

@@ -57,4 +57,2 @@ 'use strict';
 
-// This decorator centers the dialog
-
 var ModalDialog = (function (_React$Component) {
@@ -79,2 +77,23 @@ _inherits(ModalDialog, _React$Component);
 
+    this.componentWillReceiveProps = function (nextProps) {
+      if (nextProps.topOffset !== null && _this.props.topOffset === null) {
+        // This means we are getting top information for the first time
+        if (!_this.didAnimateInAlready) {
+          // Double check we have not animated in yet
+          _this.animateIn();
+        }
+      }
+
+      if (nextProps.componentIsLeaving && !_this.props.componentIsLeaving) {
+        var node = _reactDom2['default'].findDOMNode(_this);
+        _dynamicsJs2['default'].animate(node, {
+          scale: 1.2,
+          opacity: 0
+        }, {
+          duration: 300,
+          type: _dynamicsJs2['default'].easeIn
+        });
+      }
+    };
+
     this.componentWillUnmount = function () {
@@ -84,2 +103,4 @@ _activeEventStack2['default'].removeListenable(_this.eventToken);
 
+    this.didAnimateInAlready = false;
+
     this.shouldClickDismiss = function (event) {
@@ -107,3 +128,3 @@ var target = event.target;
     this.handleGlobalKeydown = function (event) {
-      if ((0, _keycode2['default'])(event) == 'esc') {
+      if ((0, _keycode2['default'])(event) === 'esc') {
         if (typeof _this.props.onClose == 'function') {
@@ -115,20 +136,10 @@ _this.props.onClose();
 
-    this.componentWillReceiveProps = function (nextProps) {
-      if (nextProps.componentIsLeaving && !_this.props.componentIsLeaving) {
-        var node = _reactDom2['default'].findDOMNode(_this);
-        _dynamicsJs2['default'].animate(node, {
-          scale: 1.2,
-          opacity: 0
-        }, {
-          duration: 300,
-          type: _dynamicsJs2['default'].easeIn
-        });
-      }
-    };
+    this.animateIn = function () {
+      _this.didAnimateInAlready = true;
 
-    this.componentDidMount = function () {
       // Animate this node once it is mounted
       var node = _reactDom2['default'].findDOMNode(_this);
 
-      if (document.body.style.transform == undefined) {
+      // This sets the scale...
+      if (document.body.style.transform == null) {
         node.style.WebkitTransform = 'scale(0.5)';
@@ -150,17 +161,20 @@ } else {
       var _props = _this.props;
-      var topOffset = _props.topOffset;
-      var leftOffset = _props.leftOffset;
-      var width = _props.width;
+      var children = _props.children;
       var className = _props.className;
-      var children = _props.children;
+      var componentIsLeaving = _props.componentIsLeaving;
+      var // eslint-disable-line no-unused-vars, this line is used to remove parameters from rest
+      left = _props.left;
+      var // eslint-disable-line no-unused-vars, this line is used to remove parameters from rest
+      leftOffset = _props.leftOffset;
+      var margin = _props.margin;
       var onClose = _props.onClose;
-      var margin = _props.margin;
+      var recenter = _props.recenter;
+      var classes = _props.sheet.classes;
       var style = _props.style;
-      var classes = _props.sheet.classes;
-      var componentIsLeaving = _props.componentIsLeaving;
       var top = _props.top;
-      var left = _props.left;
-      var recenter = _props.recenter;
+      var // eslint-disable-line no-unused-vars, this line is used to remove parameters from rest
+      topOffset = _props.topOffset;
+      var width = _props.width;
 
-      var rest = _objectWithoutProperties(_props, ['topOffset', 'leftOffset', 'width', 'className', 'children', 'onClose', 'margin', 'style', 'sheet', 'componentIsLeaving', 'top', 'left', 'recenter']);
+      var rest = _objectWithoutProperties(_props, ['children', 'className', 'componentIsLeaving', 'left', 'leftOffset', 'margin', 'onClose', 'recenter', 'sheet', 'style', 'top', 'topOffset', 'width']);
 
@@ -206,3 +220,6 @@ var dialogStyle = _extends({
       style: _react.PropTypes.object,
-      sheet: _react.PropTypes.object
+      sheet: _react.PropTypes.object,
+      left: _react.PropTypes.number,
+      recenter: _react.PropTypes.func.isRequired,
+      top: _react.PropTypes.number
     },
@@ -220,2 +237,3 @@ enumerable: true
   var _ModalDialog = ModalDialog;
+  ModalDialog = (0, _reactCenterComponent2['default'])(ModalDialog) || ModalDialog;
   ModalDialog = (0, _useSheet2['default'])({
@@ -247,3 +265,2 @@ dialog: {
   })(ModalDialog) || ModalDialog;
-  ModalDialog = (0, _reactCenterComponent2['default'])(ModalDialog) || ModalDialog;
   return ModalDialog;
@@ -253,2 +270,5 @@ })(_react2['default'].Component);
 exports['default'] = ModalDialog;
-module.exports = exports['default'];
+module.exports = exports['default'];
+
+// This decorator centers the dialog
+// eslint-disable-line no-unused-vars, this line is used to remove parameters from rest

lib/ModalPortal.js

@@ -39,5 +39,2 @@ 'use strict';
 
-    this._target = null;
-    this._component = null;
-
     this.componentDidMount = function () {
@@ -82,2 +79,5 @@ // Create a div and append it to the body
 
+    this._target = null;
+    this._component = null;
+
     this.render = function () {
@@ -90,3 +90,2 @@ return null;
     key: 'propTypes',
-    // ReactComponent, which is mounted on the target
     value: {
@@ -105,2 +104,3 @@ onClose: _react.PropTypes.func, // This is called when the dialog should close
 // HTMLElement, a div that is appended to the body
+// ReactComponent, which is mounted on the target
 // This doesn't actually return anything to render

lib/useSheet.js

@@ -17,6 +17,2 @@ 'use strict';
 
-var _jssVendorPrefixer = require('jss-vendor-prefixer');
-
-var _jssVendorPrefixer2 = _interopRequireDefault(_jssVendorPrefixer);
-
 var _jssPx = require('jss-px');
@@ -35,3 +31,6 @@
 var jss = _jss2['default'].create();
-jss.use((0, _jssVendorPrefixer2['default'])());
+if (typeof window !== 'undefined') {
+  var vendorPrefixer = require('jss-vendor-prefixer')['default'];
+  jss.use(vendorPrefixer());
+}
 jss.use((0, _jssPx2['default'])());
@@ -38,0 +37,0 @@ jss.use((0, _jssCamelCase2['default'])());

package.json

 {
   "name": "react-modal-dialog",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "A simple, idiomatic, and declarative way to launch modal dialogs in ReactJS",
@@ -21,5 +21,7 @@ "repository": {
     "active-event-stack": "^1.0.0",
+    "aphrodite": "^0.4.1",
     "classnames": "^2.1.2",
     "dynamics.js": "^1.1.0",
     "immutable": "^3.7.4",
+    "jss": "^3.1.0",
     "jss-camel-case": "^1.0.0",
@@ -29,3 +31,2 @@ "jss-nested": "^1.0.1",
     "jss-vendor-prefixer": "^1.0.0",
-    "jss": "^3.1.0",
     "keycode": "^2.1.0",
@@ -32,0 +33,0 @@ "lodash": "^3.9.3",

No alert changes

Improved metrics

Total package byte prevSize

54699

increased by85.41%

Number of package files

12

increased by33.33%

Lines of code

817

increased by52.43%

Worsened metrics

Dependency count

16

increased by6.67%

Dependency changes

• + Addedaphrodite@^0.4.1

• + Addedaphrodite@0.4.1(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedinline-style-prefixer@2.0.5(transitive)