@twreporter/universal-header - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1-beta.1

CHANGELOG.md

@@ -7,2 +7,11 @@ # CHANGELOG
 
+### 2.1.1
+
+- Remove deprecated componentWillMount
+
+#### Update Dependencies
+
+- Bump react-transition-group to v2
+- Bump react-router-dom to v5
+
 ### 2.1.0
@@ -9,0 +18,0 @@

lib/components/channels.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _CSSTransitionGroup = _interopRequireDefault(require("react-transition-group/CSSTransitionGroup"));
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 
@@ -33,4 +33,2 @@ var _dropDownMenu = _interopRequireDefault(require("./drop-down-menu"));
 
-var _cssTransitionGroup = require("../constants/css-transition-group");
-
 var _css = require("@twreporter/core/lib/utils/css");
@@ -189,11 +187,15 @@
 
+var dropDownMenuEffectCSS =
+/*#__PURE__*/
+(0, _styledComponents.css)([".effect-enter{max-height:0;}.effect-enter-active{max-height:400px;transition:max-height 600ms ease-in 100ms;}"]);
 var linkUnderline =
 /*#__PURE__*/
 (0, _styledComponents.css)(["animation:", " 0.5s linear;position:absolute;left:0;bottom:0;display:block;content:'';width:100%;height:3px;background-color:red;"], changeOpacity('0', '1'));
-var DropDownMenuTransitionGroup =
+
+var DropDownMenuWrapper =
 /*#__PURE__*/
-(0, _styledComponents["default"])(_CSSTransitionGroup["default"]).withConfig({
-  displayName: "channels__DropDownMenuTransitionGroup",
+_styledComponents["default"].div.withConfig({
+  displayName: "channels__DropDownMenuWrapper",
   componentId: "nu2llv-0"
-})(["position:absolute;z-index:999;width:100%;left:0;", ""], _cssTransitionGroup.categoriesMenuEffect);
+})(["position:absolute;z-index:999;width:100%;left:0;", ""], dropDownMenuEffectCSS);
 
@@ -321,10 +323,8 @@ var Box =
       var indexToDropDown = this.state.indexToDropDown;
-      var activeChannelIndex = invalidDataIndex;
+      var toShowDropDownMenu = indexToDropDown > invalidDataIndex;
 
-      if (indexToDropDown > invalidDataIndex) {
-        activeChannelIndex = indexToDropDown;
-      } else {
-        activeChannelIndex = this._checkWhichChannelActive(currentPathname);
-      }
+      var dropDownMenu = _.get(data, [indexToDropDown, dropDownMenuKey], []);
 
+      var activeChannelIndex = toShowDropDownMenu ? indexToDropDown : this._checkWhichChannelActive(currentPathname);
+
       var channelsJSX = _.map(data, function (channelItem, dataIndex) {
@@ -360,13 +360,2 @@ var channelLabel = channelItem.label;
 
-      var dropDownMenuJSX = null;
-
-      if (indexToDropDown > invalidDataIndex) {
-        var dropDownMenu = _.get(data, [indexToDropDown, dropDownMenuKey], {});
-
-        dropDownMenuJSX = _react["default"].createElement(_dropDownMenu["default"], {
-          data: dropDownMenu,
-          onClick: this.closeDropDownMenu
-        });
-      }
-
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Box, null, _react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
@@ -380,8 +369,13 @@ var theme = _ref2.theme;
         }, channelsJSX);
-      })), _react["default"].createElement(DropDownMenuTransitionGroup, {
-        key: "transition",
-        transitionName: "effect",
-        transitionEnterTimeout: 600,
-        transitionLeaveTimeout: 400
-      }, dropDownMenuJSX));
+      })), _react["default"].createElement(DropDownMenuWrapper, null, _react["default"].createElement(_CSSTransition["default"], {
+        "in": toShowDropDownMenu,
+        classNames: "effect",
+        timeout: 600,
+        exit: false,
+        mountOnEnter: true,
+        unmountOnExit: true
+      }, _react["default"].createElement(_dropDownMenu["default"], {
+        data: dropDownMenu,
+        onClick: this.closeDropDownMenu
+      }))));
     }
@@ -388,0 +382,0 @@ }]);

lib/components/search-box.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _CSSTransitionGroup = _interopRequireDefault(require("react-transition-group/CSSTransitionGroup"));
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 
@@ -23,5 +23,5 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _cssTransitionGroup = require("../constants/css-transition-group");
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
 
@@ -81,8 +81,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 };
-var StyledCSSTransitionGroup =
+var searchBoxEffectCSS =
 /*#__PURE__*/
-(0, _styledComponents["default"])(_CSSTransitionGroup["default"]).withConfig({
-  displayName: "search-box__StyledCSSTransitionGroup",
-  componentId: "sc-1rne3k3-0"
-})(["", ""], _cssTransitionGroup.searchBoxEffect);
+(0, _styledComponents.css)(["&.effect-enter{opacity:0;right:-20px;}&.effect-enter-active{opacity:1;right:0;transition:opacity 500ms ease,right 500ms ease;}&.effect-exit{opacity:1;right:0;}&.effect-exit-active{opacity:0;right:-20px;transition:opacity 200ms ease,right 200ms ease;}"]);
 
@@ -93,4 +90,4 @@ var SearchBoxContainer =
   displayName: "search-box__SearchBoxContainer",
-  componentId: "sc-1rne3k3-1"
-})(["display:table-cell;vertical-align:middle;text-align:center;position:absolute;z-index:99;right:0;top:49%;transform:translateY(-50%);height:", "px;box-sizing:border-box;"], styles.containerHeight);
+  componentId: "sc-1rne3k3-0"
+})(["display:table-cell;vertical-align:middle;text-align:center;position:absolute;z-index:99;right:0;top:49%;transform:translateY(-50%);height:", "px;box-sizing:border-box;", ""], styles.containerHeight, searchBoxEffectCSS);
 
@@ -101,3 +98,3 @@ var CellBlock =
   displayName: "search-box__CellBlock",
-  componentId: "sc-1rne3k3-2"
+  componentId: "sc-1rne3k3-1"
 })(["display:table-cell;height:", "px;box-sizing:border-box;vertical-align:middle;line-height:1;svg{height:100%;}"], styles.containerHeight);
@@ -109,3 +106,3 @@
   displayName: "search-box__SearchInput",
-  componentId: "sc-1rne3k3-3"
+  componentId: "sc-1rne3k3-2"
 })(["width:", "px;max-width:calc(100vw - 870px);margin-right:0.5em;font-size:", ";font-weight:", ";height:", "px;border-radius:58px;border:0;padding:0 1em;&:focus{outline:none;}&::placeholder{font-size:", ";font-weight:", ";color:#8c8c8c;opacity:0.5;letter-spacing:0.7px;}"], styles.inputWidth, _fonts["default"].size.base, _fonts["default"].size.medium, styles.inputHeight, _fonts["default"].size.base, _fonts["default"].size.medium);
@@ -179,11 +176,15 @@
       var isSearchOpened = this.props.isSearchOpened;
-      return _react["default"].createElement(StyledCSSTransitionGroup, {
-        key: "transition",
-        transitionName: "effect",
-        transitionEnterTimeout: 500,
-        transitionLeaveTimeout: 200
-      }, !isSearchOpened ? null : _react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref) {
+      return _react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref) {
         var releaseBranch = _ref.releaseBranch,
             isLinkExternal = _ref.isLinkExternal;
-        return _react["default"].createElement(SearchBoxContainer, {
+        return _react["default"].createElement(_CSSTransition["default"], {
+          "in": isSearchOpened,
+          classNames: "effect",
+          timeout: {
+            enter: 500,
+            exit: 200
+          },
+          mountOnEnter: true,
+          unmountOnExit: true
+        }, _react["default"].createElement(SearchBoxContainer, {
           onSubmit: function onSubmit(e) {
@@ -206,4 +207,4 @@ _this2._handleSubmit(e, releaseBranch, isLinkExternal);
           onMouseDown: _this2._onReset
-        })));
-      }));
+        }))));
+      });
     }
@@ -210,0 +211,0 @@ }]);

package.json

 {
   "name": "@twreporter/universal-header",
-  "version": "2.1.0",
+  "version": "2.1.1-beta.1",
   "description": "Universal header of TWReporter sites",
@@ -26,4 +26,4 @@ "main": "lib/index.js",
     "react-redux": "^6.0.0",
-    "react-router-dom": "^4.3.1",
-    "react-transition-group": "^1.2.1",
+    "react-router-dom": "^5.1.2",
+    "react-transition-group": "^2.0.0",
     "styled-components": "^4.0.0"
@@ -30,0 +30,0 @@ },

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

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

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

142923

decreased by-0.25%

Number of package files

25

decreased by-3.85%

Lines of code

2504

decreased by-0.63%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-router@5.3.4(transitive)

• + Addedreact-router-dom@5.3.4(transitive)

• + Addedreact-transition-group@2.9.0(transitive)

• - Removedchain-function@1.0.1(transitive)

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-router@4.3.1(transitive)

• - Removedreact-router-dom@4.3.1(transitive)

• - Removedreact-transition-group@1.2.1(transitive)

• - Removedscheduler@0.19.1(transitive)

• - Removedwarning@3.0.04.0.3(transitive)

• Updatedreact-router-dom@^5.1.2

• Updatedreact-transition-group@^2.0.0