app-bar - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

CHANGELOG.md

@@ -7,2 +7,11 @@ # Changelog
 
+## [1.4.0] - 2018-05-21
+### Added
+- Add three classes, `unfixed`, `hidden` and `pinned` to allow styling on the three absolute states.
+  1. `unfixed` is applied when `<AppBar />` doesn't touch the top of the screen but is on the page
+  2. `hidden` is applied when `<AppBar />` is fully hidden (for example, after scrolling down or reloading page when scrolled)
+  3. `pinned` is applied when `<AppBar />` scrolling up from being hidden
+### Changed
+- The DOM element is now a `nav` instead of `div`
+
 ## [1.3.0] - 2018-05-05
@@ -9,0 +18,0 @@ ### Removed

index.js

@@ -57,13 +57,29 @@ "use strict";
             }
+            var classList = _this.internalRef.classList;
             var oldScroll = _this.state.scroll;
             var direction = scroll - oldScroll > 0 ? 'down' : 'up';
             var newTop = _this.state.top + oldScroll - scroll;
-            var height = _this.internalRef.getBoundingClientRect().height;
+            var _a = _this.internalRef.getBoundingClientRect(), height = _a.height, fromTop = _a.top;
             var top;
             if (direction === 'down') {
                 top = Math.max(newTop, -height);
+                if (!classList.contains('hidden') && newTop < -height) {
+                    classList.remove('pinned');
+                    classList.remove('unfixed');
+                    classList.add('hidden');
+                }
             }
             else {
                 top = Math.min(newTop, 0);
+                if (!classList.contains('pinned') && newTop > -height) {
+                    classList.remove('hidden');
+                    classList.remove('unfixed');
+                    classList.add('pinned');
+                }
             }
+            if (!classList.contains('unfixed') && fromTop > 0) {
+                classList.remove('hidden');
+                classList.remove('pinned');
+                classList.add('unfixed');
+            }
             _this.setState({ scroll: scroll, top: top });
@@ -96,2 +112,11 @@ _this.internalRef.style.top = top.toString();
         }
+        if (this.internalRef) {
+            var _a = this.internalRef.getBoundingClientRect(), height = _a.height, top_1 = _a.top;
+            if (top_1 >= 0) {
+                this.internalRef.classList.add('unfixed');
+            }
+            else if (top_1 < -height) {
+                this.internalRef.classList.add('hidden');
+            }
+        }
     };
@@ -124,3 +149,3 @@ AppBar.prototype.componentDidUpdate = function (_a) {
         };
-        return (React.createElement("div", __assign({ ref: this.createRef, style: style }, props), children));
+        return (React.createElement("nav", __assign({ ref: this.createRef, style: style }, props), children));
     };
@@ -127,0 +152,0 @@ AppBar.defaultProps = {

package.json

 {
   "name": "app-bar",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "An app bar for React that stays out of your way",
@@ -25,15 +25,15 @@ "licence": "MIT",
   "devDependencies": {
-    "@types/react": "^16.3.13",
+    "@types/react": "^16.3.14",
     "@types/react-dom": "^16.0.5",
     "css-wipe": "^4.3.0",
-    "emotion": "^9.1.2",
-    "parcel-bundler": "^1.7.1",
+    "emotion": "^9.1.3",
+    "parcel-bundler": "^1.8.1",
     "prettier": "^1.12.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "tslint": "^5.9.1",
-    "tslint-config-prettier": "^1.12.0",
+    "tslint": "^5.10.0",
+    "tslint-config-prettier": "^1.13.0",
     "tslint-config-standard": "^7.0.0",
     "tslint-plugin-prettier": "^1.3.0",
-    "tslint-react": "^3.5.1",
+    "tslint-react": "^3.6.0",
     "typescript": "^2.8.3"
@@ -40,0 +40,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

16606

increased by18.11%

Lines of code

182

increased by15.92%

No dependency changes