app-bar - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGELOG.md

@@ -7,2 +7,8 @@ # Changelog
 
+## [1.2.0] - 2018-05-05
+### Changed
+- Styles are set via the dom node's `setAttribute` to allow for `position: -webkit-sticky;`
+- Animation is run via `window.requestAnimationFrame`
+- Animation function directly sets the `style.top`
+
 ## [1.1.3] - 2018-05-05
@@ -9,0 +15,0 @@ ### Fixed

index.d.ts

@@ -20,2 +20,4 @@ /// <reference types="react" />
     private createRef;
+    private setStyle;
+    private animateTop;
     private handleScroll;
@@ -22,0 +24,0 @@ private addEventListener();

index.js

@@ -49,3 +49,13 @@ "use strict";
         };
-        _this.handleScroll = function () {
+        _this.setStyle = function () {
+            if (_this.internalRef) {
+                _this.internalRef.setAttribute('style', 'position: -webkit-sticky;' +
+                    'position: sticky;' +
+                    'top: 0;' +
+                    'transition: top 100ms;' +
+                    'width: 100%;' +
+                    'display: block;');
+            }
+        };
+        _this.animateTop = function () {
             if (!_this.internalRef || _this.props.disabled) {
@@ -60,12 +70,15 @@ return;
             var direction = scroll - oldScroll > 0 ? 'down' : 'up';
-            var top = _this.state.top + oldScroll - scroll;
+            var newTop = _this.state.top + oldScroll - scroll;
             var height = _this.internalRef.getBoundingClientRect().height;
+            var top;
             if (direction === 'down') {
-                _this.setState({ top: Math.max(top, -height) });
+                top = Math.max(newTop, -height);
             }
             else {
-                _this.setState({ top: Math.min(top, 0) });
+                top = Math.min(newTop, 0);
             }
-            _this.setState({ scroll: scroll });
+            _this.setState({ scroll: scroll, top: top });
+            _this.internalRef.style.top = top.toString();
         };
+        _this.handleScroll = function () { return window.requestAnimationFrame(_this.animateTop); };
         _this.state = {
@@ -94,2 +107,3 @@ scroll: 0,
         }
+        this.setStyle();
     };
@@ -116,9 +130,3 @@ AppBar.prototype.componentDidUpdate = function (_a) {
         var _a = this.props, children = _a.children, innerRef = _a.innerRef, props = __rest(_a, ["children", "innerRef"]);
-        var style = {
-            display: 'block',
-            position: 'sticky',
-            top: this.state.top,
-            width: '100%'
-        };
-        return (React.createElement("div", __assign({ style: style, ref: this.createRef }, props), children));
+        return (React.createElement("div", __assign({ ref: this.createRef }, props), children));
     };
@@ -125,0 +133,0 @@ AppBar.defaultProps = {

package.json

 {
   "name": "app-bar",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "An app bar for React that stays out of your way",
@@ -5,0 +5,0 @@ "licence": "MIT",

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

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

Improved metrics

Total package byte prevSize

13637

increased by6.86%

Lines of code

163

increased by6.54%

No dependency changes