synapsefi-ui - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

dist/components/Modal.js

@@ -9,8 +9,9 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  background-color: ', ';\n\n  width: 100vw;\n  height: 100vh;\n\n  width: ', ';\n  height: ', ';\n\n  position: absolute;\n\n  top: ', ';\n  left: ', ';\n'], ['\n  background-color: ', ';\n\n  width: 100vw;\n  height: 100vh;\n\n  width: ', ';\n  height: ', ';\n\n  position: absolute;\n\n  top: ', ';\n  left: ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n\n  padding: 32px;\n  background-color: ', ';\n\n  position: absolute;\n  top: ', ';\n  left: ', ';\n  transform: translate(-50%, -50%);\n\n  width: ', ';\n  height: ', ';\n\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  border: solid 1px ', ';\n  border-radius: 4px;\n'], ['\n  display: flex;\n  flex-direction: column;\n\n  padding: 32px;\n  background-color: ', ';\n\n  position: absolute;\n  top: ', ';\n  left: ', ';\n  transform: translate(-50%, -50%);\n\n  width: ', ';\n  height: ', ';\n\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  border: solid 1px ', ';\n  border-radius: 4px;\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  top: 32px;\n  right: 32px;\n'], ['\n  position: absolute;\n  top: 32px;\n  right: 32px;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  font-size: 28px;\n  font-weight: bold;\n  color: ', ';\n  border-bottom: solid 1px ', ';\n  line-height: 1;\n  padding-bottom: 24px;\n  margin-bottom: 32px;\n'], ['\n  font-size: 28px;\n  font-weight: bold;\n  color: ', ';\n  border-bottom: solid 1px ', ';\n  line-height: 1;\n  padding-bottom: 24px;\n  margin-bottom: 32px;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  flex: 1;\n\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n\n  & > button {\n    &:not(:last-child) {\n      margin-right: 16px;\n    }\n  }\n\n  ', ';\n'], ['\n  flex: 1;\n\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n\n  & > button {\n    &:not(:last-child) {\n      margin-right: 16px;\n    }\n  }\n\n  ', ';\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n      & > button {\n        flex: 1;\n      }\n    '], ['\n      & > button {\n        flex: 1;\n      }\n    ']);
+var _templateObject = _taggedTemplateLiteral(['\n  background-color: ', ';\n\n  width: 100vw;\n  height: 100vh;\n\n  width: ', ';\n  height: ', ';\n\n  position: fixed;\n\n  top: ', ';\n  left: ', ';\n\n  z-index: 100000;\n'], ['\n  background-color: ', ';\n\n  width: 100vw;\n  height: 100vh;\n\n  width: ', ';\n  height: ', ';\n\n  position: fixed;\n\n  top: ', ';\n  left: ', ';\n\n  z-index: 100000;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: absolute;\n  top: ', ';\n  left: ', ';\n  transform: translate(-50%, -50%);\n'], ['\n  position: absolute;\n  top: ', ';\n  left: ', ';\n  transform: translate(-50%, -50%);\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n\n  padding: 32px;\n  background-color: ', ';\n\n  width: ', ';\n  height: ', ';\n\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  border: solid 1px ', ';\n  border-radius: 4px;\n\n  overflow: scroll;\n'], ['\n  display: flex;\n  flex-direction: column;\n\n  padding: 32px;\n  background-color: ', ';\n\n  width: ', ';\n  height: ', ';\n\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  border: solid 1px ', ';\n  border-radius: 4px;\n\n  overflow: scroll;\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  position: absolute;\n  top: 32px;\n  right: 32px;\n'], ['\n  position: absolute;\n  top: 32px;\n  right: 32px;\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  font-size: 28px;\n  font-weight: bold;\n  color: ', ';\n  border-bottom: solid 1px ', ';\n  line-height: 1;\n  padding-bottom: 24px;\n  margin-bottom: 32px;\n'], ['\n  font-size: 28px;\n  font-weight: bold;\n  color: ', ';\n  border-bottom: solid 1px ', ';\n  line-height: 1;\n  padding-bottom: 24px;\n  margin-bottom: 32px;\n']),
+    _templateObject6 = _taggedTemplateLiteral(['\n  flex: 1;\n\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n\n  & > button {\n    &:not(:last-child) {\n      margin-right: 16px;\n    }\n  }\n\n  ', ';\n'], ['\n  flex: 1;\n\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n\n  & > button {\n    &:not(:last-child) {\n      margin-right: 16px;\n    }\n  }\n\n  ', ';\n']),
+    _templateObject7 = _taggedTemplateLiteral(['\n      & > button {\n        flex: 1;\n      }\n    '], ['\n      & > button {\n        flex: 1;\n      }\n    ']);
 
@@ -52,3 +53,3 @@ var _react = require('react');
 var OuterBox = _styledComponents2.default.div(_templateObject, function (props) {
-  return props.outsideBgColor ? '' + props.outsideBgColor : 'rgba(255,255,255,.7)';
+  return props.outerBgColor ? '' + props.outerBgColor : 'rgba(255,255,255,.7)';
 }, function (props) {
@@ -64,8 +65,10 @@ return props.outerWidth ? '' + props.outerWidth : '100vw';
 
-var InnerBox = _styledComponents2.default.div(_templateObject2, function (props) {
-  return props.insideBgColor ? '' + props.insideBgColor : '#fff';
-}, function (props) {
+var InnerBoxPositioning = _styledComponents2.default.div(_templateObject2, function (props) {
   return props.top ? '' + props.top : '50%';
 }, function (props) {
   return props.left ? '' + props.left : '50%';
+});
+
+var InnerBox = _styledComponents2.default.div(_templateObject3, function (props) {
+  return props.innerBgColor ? '' + props.innerBgColor : '#fff';
 }, function (props) {
@@ -77,8 +80,8 @@ return props.width ? '' + props.width : 'auto';
 
-var CloseBtnPositioning = _styledComponents2.default.div(_templateObject3);
+var CloseBtnPositioning = _styledComponents2.default.div(_templateObject4);
 
-var HeaderText = _styledComponents2.default.div(_templateObject4, _colors2.default.DARK_NIGHT, _colors2.default.WARM_LIGHT);
+var HeaderText = _styledComponents2.default.div(_templateObject5, _colors2.default.DARK_NIGHT, _colors2.default.WARM_LIGHT);
 
-var BtnWrapper = _styledComponents2.default.div(_templateObject5, function (props) {
-  return props.fullWidthBtn && (0, _styledComponents.css)(_templateObject6);
+var BtnWrapper = _styledComponents2.default.div(_templateObject6, function (props) {
+  return props.fullWidthBtn && (0, _styledComponents.css)(_templateObject7);
 });
@@ -98,3 +101,3 @@
     _this.openModal = _this.openModal.bind(_this);
-    _this.closeModal = _this.closeModal.bind(_this);
+    _this.removeModalFromBodyTag = _this.removeModalFromBodyTag.bind(_this);
     return _this;
@@ -104,18 +107,8 @@ }
   _createClass(Modal, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      // first time modal is opened
-      this.appendElement();
-    }
-  }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
       if (nextProps.isOpen) {
-        if (!document.getElementById(uniqId)) {
-          this.appendElement();
-        }
-
         this.openModal(nextProps.children);
       } else {
-        this.closeModal();
+        this.removeModalFromBodyTag();
       }
@@ -126,3 +119,3 @@ }
     value: function componentWillUnmount() {
-      this.closeModal();
+      this.removeModalFromBodyTag();
     }
@@ -181,4 +174,4 @@ }, {
           outerLeft = _props.outerLeft,
-          outsideBgColor = _props.outsideBgColor,
-          insideBgColor = _props.insideBgColor,
+          outerBgColor = _props.outerBgColor,
+          innerBgColor = _props.innerBgColor,
           top = _props.top,
@@ -194,3 +187,4 @@ left = _props.left,
 
-      ;
+      !document.getElementById(uniqId) && this.appendElement();
+      document.body.style.overflow = 'hidden';
 
@@ -200,3 +194,3 @@ return _reactDom2.default.createPortal(_react2.default.createElement(
         {
-          outsideBgColor: outsideBgColor,
+          outerBgColor: outerBgColor,
           onClick: function onClick(e) {
@@ -212,27 +206,29 @@ return closeModal();
         _react2.default.createElement(
-          InnerBox,
-          {
-            insideBgColor: insideBgColor,
-            top: top,
-            left: left,
-            height: height,
-            width: width,
-            onClick: function onClick(e) {
-              return e.stopPropagation();
-            }
-          },
+          InnerBoxPositioning,
+          { top: top, left: left },
           _react2.default.createElement(
-            CloseBtnPositioning,
-            null,
-            _react2.default.createElement(_CloseBtn2.default, { onClick: function onClick() {
-                return closeModal();
-              }, size: '16px' })
-          ),
-          headerText && _react2.default.createElement(
-            HeaderText,
-            null,
-            headerText
-          ),
-          children,
-          btnObjs && btnObjs.length !== 0 && this.renderBtns(btnObjs, fullWidthBtn)
+            InnerBox,
+            {
+              innerBgColor: innerBgColor,
+              height: height,
+              width: width,
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              }
+            },
+            _react2.default.createElement(
+              CloseBtnPositioning,
+              null,
+              _react2.default.createElement(_CloseBtn2.default, { onClick: function onClick() {
+                  return closeModal();
+                }, size: '16px' })
+            ),
+            headerText && _react2.default.createElement(
+              HeaderText,
+              null,
+              headerText
+            ),
+            children,
+            btnObjs && btnObjs.length !== 0 && this.renderBtns(btnObjs, fullWidthBtn)
+          )
         )
@@ -242,6 +238,8 @@ ), this.modal);
   }, {
-    key: 'closeModal',
-    value: function closeModal() {
-      // ReactDOM.unmountComponentAtNode(this.modal);
-      document.body.removeChild(this.modal);
+    key: 'removeModalFromBodyTag',
+    value: function removeModalFromBodyTag() {
+      if (document.getElementById(uniqId)) {
+        document.body.removeChild(this.modal);
+        document.body.style.overflow = 'auto';
+      }
     }
@@ -251,5 +249,3 @@ }, {
     value: function render() {
-      if (this.props.isOpen) {
-        return this.openModal(this.props.children);
-      }
+      if (this.props.isOpen) return this.openModal(this.props.children);
       return null;
@@ -256,0 +252,0 @@ }

package.json

 {
   "name": "synapsefi-ui",
   "description": "synapsefi-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "main": "index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

66352

increased by0.43%

Worsened metrics

Lines of code

1167

decreased by-0.43%

No dependency changes