app-bar - npm Package Compare versions

Comparing version 1.4.6 to 1.5.0

CHANGELOG.md

@@ -7,2 +7,9 @@ # Changelog
 
+## [1.5.0] - 2018-07-16
+### changed
+- Use new `React.createRef`
+- Update packages
+### Fixed
+- Set component to `unfixed` when it has reached the top of the scrollable area
+
 ## [1.4.6] - 2018-07-02
@@ -12,2 +19,6 @@ ### changed
 
+## [1.4.6] - 2018-07-02
+### changed
+- Update packages
+
 ## [1.4.5] - 2018-06-24
@@ -14,0 +25,0 @@ ### changed

index.d.ts

 import * as React from 'react';
-export interface AppBarProps {
+export declare type Props = React.ComponentClass<HTMLElement> & {
+    readonly className?: string;
     readonly children: any;
     readonly disabled?: boolean;
     readonly innerRef?: (elem: HTMLDivElement) => void;
-    readonly [key: string]: any;
-}
-export interface AppBarState {
+};
+export declare type State = {
     scroll: number;
     top: number;
-}
-export default class AppBar extends React.PureComponent<AppBarProps, AppBarState> {
+};
+export default class AppBar extends React.PureComponent<Props, State> {
     static defaultProps: {
         disabled: boolean;
     };
-    constructor(props: AppBarProps);
     private internalRef;
-    private createRef;
+    constructor(props: Props);
     private animateTop;
@@ -24,5 +23,5 @@ private handleScroll;
     componentDidMount(): void;
-    componentDidUpdate({ disabled: wasDisabled }: AppBarProps): void;
+    componentDidUpdate({ disabled: wasDisabled }: Props): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
 }

index.js

@@ -42,11 +42,5 @@ "use strict";
         var _this = _super.call(this, props) || this;
-        _this.internalRef = null;
-        _this.createRef = function (elem) {
-            _this.internalRef = elem;
-            if (_this.props.innerRef) {
-                _this.props.innerRef(elem);
-            }
-        };
         _this.animateTop = function () {
-            if (!_this.internalRef || _this.props.disabled) {
+            var ref = _this.internalRef.current;
+            if (!ref || _this.props.disabled) {
                 return;
@@ -58,7 +52,7 @@ }
             }
-            var classList = _this.internalRef.classList;
+            var classList = ref.classList;
             var oldScroll = _this.state.scroll;
             var direction = scroll - oldScroll > 0 ? 'down' : 'up';
             var newTop = _this.state.top + oldScroll - scroll;
-            var _a = _this.internalRef.getBoundingClientRect(), height = _a.height, fromTop = _a.top;
+            var _a = ref.getBoundingClientRect(), height = _a.height, fromTop = _a.top;
             var top;
@@ -81,3 +75,3 @@ if (direction === 'down') {
             }
-            if (!classList.contains('unfixed') && fromTop > 0) {
+            if (!classList.contains('unfixed') && (fromTop > 0 || scroll === 0)) {
                 classList.remove('hidden');
@@ -88,5 +82,6 @@ classList.remove('pinned');
             _this.setState({ scroll: scroll, top: top });
-            _this.internalRef.style.top = top.toString();
+            ref.style.top = top.toString();
         };
         _this.handleScroll = function () { return window.requestAnimationFrame(_this.animateTop); };
+        _this.internalRef = React.createRef();
         _this.state = {
@@ -115,9 +110,13 @@ scroll: 0,
         }
-        if (this.internalRef) {
-            var _a = this.internalRef.getBoundingClientRect(), height = _a.height, top_1 = _a.top;
+        var ref = this.internalRef.current;
+        if (ref) {
+            if (typeof this.props.innerRef === 'function') {
+                this.props.innerRef(ref);
+            }
+            var _a = ref.getBoundingClientRect(), height = _a.height, top_1 = _a.top;
             if (top_1 >= 0) {
-                this.internalRef.classList.add('unfixed');
+                ref.classList.add('unfixed');
             }
             else if (top_1 < -height) {
-                this.internalRef.classList.add('hidden');
+                ref.classList.add('hidden');
             }
@@ -147,8 +146,6 @@ }
         var style = {
-            display: 'block',
             position: 'sticky',
-            transition: 'top 100ms',
-            width: '100%'
+            transition: 'top 100ms'
         };
-        return (React.createElement("nav", __assign({ ref: this.createRef, style: style }, props), children));
+        return (React.createElement("nav", __assign({ ref: this.internalRef, style: style }, props), children));
     };
@@ -155,0 +152,0 @@ AppBar.defaultProps = {

package.json

 {
   "name": "app-bar",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "An app bar for React that stays out of your way",
@@ -31,4 +31,4 @@ "license": "MIT",
     "css-wipe": "^4.3.0",
-    "emotion": "^9.2.4",
-    "parcel-bundler": "^1.9.4",
+    "emotion": "^9.2.6",
+    "parcel-bundler": "^1.9.7",
     "prettier": "^1.13.7",
@@ -35,0 +35,0 @@ "react": "^16.4.1",

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

17181

increased by0.56%

Worsened metrics

Lines of code

177

decreased by-2.21%

No dependency changes