app-bar - npm Package Compare versions

Comparing version 1.8.6 to 2.0.0

CHANGELOG.md

@@ -5,2 +5,17 @@ # Change Log
 
+<a name="2.0.0"></a>
+# [2.0.0](https://gitlab.com/iiroj/app-bar/compare/v1.8.6...v2.0.0) (2018-10-12)
+
+
+### Features
+
+* Use React.forwardRef ([253e266](https://gitlab.com/iiroj/app-bar/commit/253e266))
+
+
+### BREAKING CHANGES
+
+* This commit removes the `innerRef` prop and opts to use the `React.forwardRef` API.
+
+
+
 <a name="1.8.6"></a>
@@ -7,0 +22,0 @@ ## [1.8.6](https://gitlab.com/iiroj/app-bar/compare/v1.8.5...v1.8.6) (2018-09-22)

index.d.ts

 import * as React from 'react';
-export declare type Props = React.ComponentClass<HTMLElement> & {
+export interface BaseProps {
+    readonly children: any;
     readonly className?: string;
-    readonly children: any;
     readonly disabled?: boolean;
-    readonly innerRef?: (elem: HTMLDivElement) => void;
+}
+export declare type AppBarProps = BaseProps & {
+    readonly innerRef?: React.RefObject<any>;
 };
-export declare type State = {
+export declare type AppBarState = {
     scroll: number;
+    ref: React.RefObject<HTMLDivElement>;
     top: number;
 };
-export default class AppBar extends React.PureComponent<Props, State> {
-    static defaultProps: {
-        disabled: boolean;
-    };
-    private internalRef;
-    constructor(props: Props);
-    private animateTop;
-    private handleScroll;
-    private addEventListener;
-    private removeEventListener;
-    componentDidMount(): void;
-    componentDidUpdate({ disabled: wasDisabled }: Props): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
+declare const _default: React.ComponentType<BaseProps & {
+    ref?: React.RefObject<any> | undefined;
+} & React.ClassAttributes<{}>>;
+export default _default;

index.js

@@ -49,3 +49,3 @@ "use strict";
         _this.animateTop = function () {
-            var ref = _this.internalRef.current;
+            var ref = _this.state.ref.current;
             if (!ref || _this.props.disabled) {
@@ -88,5 +88,5 @@ return;
         _this.handleScroll = function () { return window.requestAnimationFrame(_this.animateTop); };
-        _this.internalRef = React.createRef();
         _this.state = {
             scroll: 0,
+            ref: _this.props.innerRef || React.createRef(),
             top: 0
@@ -113,7 +113,4 @@ };
         }
-        var ref = this.internalRef.current;
+        var ref = this.state.ref.current;
         if (ref) {
-            if (typeof this.props.innerRef === 'function') {
-                this.props.innerRef(ref);
-            }
             var _a = ref.getBoundingClientRect(), height = _a.height, top_1 = _a.top;
@@ -152,3 +149,3 @@ if (top_1 >= 0) {
         };
-        return (React.createElement("nav", __assign({ ref: this.internalRef, style: style }, props), children));
+        return (React.createElement("nav", __assign({ ref: this.state.ref, style: style }, props), children));
     };
@@ -160,2 +157,2 @@ AppBar.defaultProps = {
 }(React.PureComponent));
-exports.default = AppBar;
+exports.default = React.forwardRef(function (props, ref) { return (React.createElement(AppBar, __assign({}, props, { innerRef: ref }))); });

package.json

 {
   "name": "app-bar",
-  "version": "1.8.6",
+  "version": "2.0.0",
   "description": "An app bar for React that stays out of your way",
@@ -30,7 +30,7 @@ "license": "MIT",
   "devDependencies": {
-    "@types/react": "^16.4.14",
-    "@types/react-dom": "^16.0.7",
+    "@types/react": "^16.4.16",
+    "@types/react-dom": "^16.0.9",
     "css-wipe": "^4.3.0",
-    "emotion": "^9.2.10",
-    "parcel-bundler": "^1.9.7",
+    "emotion": "^9.2.12",
+    "parcel-bundler": "^1.10.2",
     "prettier": "^1.14.3",
@@ -45,3 +45,3 @@ "react": "^16.5.2",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.0.3"
+    "typescript": "^3.1.2"
   },
@@ -48,0 +48,0 @@ "keywords": [

README.md

@@ -90,2 +90,2 @@ <div align="center">
 
-If you need to access the dom element, you can supply a function via the `innerRef` prop.
+If you need to access the dom element, you can supply your own ref from `React.createRef` via the `ref?: React.RefObject<any>` prop.

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

16580

increased by0.7%

Number of lines in readme file

91

increased by1.11%

Worsened metrics

Lines of code

171

decreased by-6.04%

No dependency changes