@rentalutions/elements - npm Package Compare versions

Comparing version 1.8.2 to 1.9.0

CHANGELOG.md

@@ -0,1 +1,3 @@
+## 1.9.0
+React 16, Made `<FullPageModal />` use `<Portal />` to end of DOM.
 ### 1.8.2
@@ -5,3 +7,3 @@ Made `<Avatar />` accept both JSX and strings for `name` prop.
 Refactored ProgreessBar to use clip-path better. Will fallback to a different yet usable alternative on IE and Edge.
-### 1.8.0
+## 1.8.0
 Built a ProgressBar component as proof of concept. Only available through "lib/ProgressBar".
@@ -8,0 +10,0 @@ ### 1.7.10

lib/FullPageModal/index.js

@@ -7,2 +7,22 @@ "use strict";
 
+var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");
+
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require("babel-runtime/helpers/createClass");
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require("babel-runtime/helpers/inherits");
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _extends2 = require("babel-runtime/helpers/extends");
@@ -16,8 +36,6 @@
 
-var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");
+var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(249, 249, 249, 0.96);\n  opacity: 0;\n  transform: scale(1.25);\n  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n\n  &.in {\n    opacity: 1;\n    transform: none;\n  }\n\n  .svg-close {\n    position: absolute;\n    top: ", "px;\n    right: ", "px;\n    cursor: pointer;\n    font-size: 2rem;\n    height: ", "px;\n    width: ", "px;\n  }\n  .scroll-container {\n    box-sizing: border-box;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    -webkit-overflow-scrolling: touch;\n  }\n  .rnt-modal-body {\n    margin: 3.5em auto;\n    @media (min-width:1080px) {\n      margin: 0 auto;\n    }\n    max-width: ", "px;\n    width: 100%;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(249, 249, 249, 0.96);\n  opacity: 0;\n  transform: scale(1.25);\n  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n\n  &.in {\n    opacity: 1;\n    transform: none;\n  }\n\n  .svg-close {\n    position: absolute;\n    top: ", "px;\n    right: ", "px;\n    cursor: pointer;\n    font-size: 2rem;\n    height: ", "px;\n    width: ", "px;\n  }\n  .scroll-container {\n    box-sizing: border-box;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    -webkit-overflow-scrolling: touch;\n  }\n  .rnt-modal-body {\n    margin: 3.5em auto;\n    @media (min-width:1080px) {\n      margin: 0 auto;\n    }\n    max-width: ", "px;\n    width: 100%;\n  }\n"]);
 
-var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+exports.default = FullPageModal;
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  background: rgba(249, 249, 249, 0.96);\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  .svg-close {\n    position: absolute;\n    top: ", "px;\n    right: ", "px;\n    cursor: pointer;\n    font-size: 2rem;\n    height: ", "px;\n    width: ", "px;\n  }\n  .scroll-container {\n    display: flex;\n    padding: ", "px;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    @media (min-width: ", "px) {\n      padding: 0 ", "px;\n    }\n  }\n  .rnt-modal-body {\n    margin: 0 auto;\n    max-width: ", "px;\n    width: 100%;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  background: rgba(249, 249, 249, 0.96);\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  .svg-close {\n    position: absolute;\n    top: ", "px;\n    right: ", "px;\n    cursor: pointer;\n    font-size: 2rem;\n    height: ", "px;\n    width: ", "px;\n  }\n  .scroll-container {\n    display: flex;\n    padding: ", "px;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    @media (min-width: ", "px) {\n      padding: 0 ", "px;\n    }\n  }\n  .rnt-modal-body {\n    margin: 0 auto;\n    max-width: ", "px;\n    width: 100%;\n  }\n"]);
-
 var _react = require("react");
@@ -37,52 +55,139 @@
 
+var _reactPortal = require("react-portal");
+
+var _TransitionGroup = require("react-transition-group/TransitionGroup");
+
+var _TransitionGroup2 = _interopRequireDefault(_TransitionGroup);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var ModalContainer = (0, _styledComponents2.default)(function (_ref) {
-  var show = _ref.show,
-      rest = (0, _objectWithoutProperties3.default)(_ref, ["show"]);
-  return _react2.default.createElement("div", rest);
-})(_templateObject, function (_ref2) {
-  var show = _ref2.show;
-  return show ? "visible" : "hidden";
-}, function (_ref3) {
-  var show = _ref3.show;
-  return show ? "1" : "0";
-}, function (_ref4) {
-  var show = _ref4.show;
-  return show ? "scale(1)" : "scale(1.25)";
-}, _variables.sizing, _variables.sizing, _variables.sizing, _variables.sizing, _variables.sizing / 2, _variables.sizing * 40, _variables.sizing, _variables.sizing * 40);
+function safeBind(cb) {
+  var _this = this;
 
-var FullPageModal = function FullPageModal(_ref5) {
-  var show = _ref5.show,
-      onHide = _ref5.onHide,
-      children = _ref5.children,
-      props = (0, _objectWithoutProperties3.default)(_ref5, ["show", "onHide", "children"]);
+  return function () {
+    if (_this.mounted) {
+      cb.call(_this);
+    }
+  };
+}
+function Aux(_ref) {
+  var children = _ref.children;
+  return children;
+}
+
+function FullPageModal(_ref2) {
+  var show = _ref2.show,
+      onHide = _ref2.onHide,
+      children = _ref2.children,
+      className = _ref2.className,
+      props = (0, _objectWithoutProperties3.default)(_ref2, ["show", "onHide", "children", "className"]);
+
+
   return _react2.default.createElement(
-    ModalContainer,
-    (0, _extends3.default)({}, props, { show: show }),
-    _react2.default.createElement(
-      "svg",
-      { className: "svg-close", onClick: onHide, viewBox: "0 0 36 36" },
-      _react2.default.createElement("polygon", {
-        fill: _variables.colors.darkGray,
-        points: "35.498 3.414 32.668 .586 18.084 15.172 3.498 .586 .668 3.414 15.254 18 .668 32.586 3.498 35.414 18.084 20.828 32.668 35.414 35.498 32.586 20.912 18"
-      })
-    ),
-    _react2.default.createElement(
+    _TransitionGroup2.default,
+    {
+      component: Aux,
+      childFactory: function childFactory(child) {
+        return _react2.default.createElement(
+          ModalContainer,
+          (0, _extends3.default)({
+            onHide: onHide
+          }, props),
+          child
+        );
+      }
+    },
+    show ? _react2.default.createElement(
       "div",
-      { className: "scroll-container" },
-      _react2.default.createElement(
-        "div",
-        { className: "rnt-modal-body" },
-        children
-      )
-    )
+      { className: ["rnt-modal-body", className].filter(Boolean).join(" ") },
+      children
+    ) : null
   );
-};
+}
 
-FullPageModal.propTypes = {
-  show: _propTypes2.default.bool.isRequired,
-  onHide: _propTypes2.default.func.isRequired
-};
+var ModalContainer = function (_Component) {
+  (0, _inherits3.default)(ModalContainer, _Component);
 
-exports.default = FullPageModal;
+  function ModalContainer() {
+    var _ref3;
+
+    var _temp, _this2, _ret;
+
+    (0, _classCallCheck3.default)(this, ModalContainer);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref3 = ModalContainer.__proto__ || Object.getPrototypeOf(ModalContainer)).call.apply(_ref3, [this].concat(args))), _this2), _this2.state = { className: "" }, _this2.safeSetState = function (s, c) {
+      if (_this2.mounted) _this2.setState(s, c);
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
+  }
+
+  (0, _createClass3.default)(ModalContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.mounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+    }
+  }, {
+    key: "componentWillAppear",
+    value: function componentWillAppear(cb) {
+      var _this3 = this;
+
+      setTimeout(function () {
+        _this3.safeSetState({ className: "in" }, safeBind.call(_this3, cb));
+      }, 50);
+    }
+  }, {
+    key: "componentWillEnter",
+    value: function componentWillEnter(cb) {
+      this.componentWillAppear.call(this, safeBind.call(this, cb));
+    }
+  }, {
+    key: "componentWillLeave",
+    value: function componentWillLeave(cb) {
+      var _this4 = this;
+
+      this.safeSetState({ className: "" }, function () {
+        setTimeout(safeBind.call(_this4, cb), 200);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var props = this.props,
+          state = this.state;
+
+
+      return _react2.default.createElement(
+        _reactPortal.Portal,
+        null,
+        _react2.default.createElement(
+          TransitionContainer,
+          { className: state.className },
+          _react2.default.createElement(
+            "svg",
+            { className: "svg-close", onClick: props.onHide, viewBox: "0 0 36 36" },
+            _react2.default.createElement("polygon", {
+              fill: _variables.colors.darkGray,
+              points: "35.498 3.414 32.668 .586 18.084 15.172 3.498 .586 .668 3.414 15.254 18 .668 32.586 3.498 35.414 18.084 20.828 32.668 35.414 35.498 32.586 20.912 18"
+            })
+          ),
+          _react2.default.createElement(
+            "div",
+            { className: "scroll-container" },
+            props.children
+          )
+        )
+      );
+    }
+  }]);
+  return ModalContainer;
+}(_react.Component);
+
+var TransitionContainer = _styledComponents2.default.div(_templateObject, _variables.sizing, _variables.sizing, _variables.sizing, _variables.sizing, _variables.sizing * 40);

package.json

 {
   "name": "@rentalutions/elements",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "A suite of elements for the consistent and responsive UI",
@@ -23,4 +23,3 @@ "main": "lib/index.js",
     "Patrick Krawczykowski <[e-mail]>",
-    "Kyle Ramirez",
-    "Prakash Koneru"
+    "Kyle Ramirez"
   ],
@@ -40,5 +39,7 @@ "license": "ISC",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-portal": "^4.1.2",
     "react-router-dom": "^4.2.2",
+    "react-transition-group": "^1.2.1",
     "styled-components": "^2.1.0"
@@ -49,2 +50,4 @@ },
     "react": "^15.0.0-0 || ^16.0.0-0",
+    "react-portal": "^4.1.2",
+    "react-transition-group": "^1.0.0-0",
     "styled-components": "^2.1.0"
@@ -51,0 +54,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

551524

increased by182.28%

Number of package files

24

increased by4.35%

Lines of code

15250

increased by221.66%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

17

increased by13.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes