app-bar - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Change Log
 
+<a name="2.1.0"></a>
+# [2.1.0](https://gitlab.com/iiroj/app-bar/compare/v2.0.5...v2.1.0) (2018-12-26)
+
+
+### Features
+
+* add current position to state ([4457d3c](https://gitlab.com/iiroj/app-bar/commit/4457d3c))
+* allow usage of children as render function that receives current position ([446543c](https://gitlab.com/iiroj/app-bar/commit/446543c))
+* upgrade packages, use styled-components in example ([69c8bbe](https://gitlab.com/iiroj/app-bar/commit/69c8bbe))
+
+
+
 <a name="2.0.5"></a>
@@ -7,0 +19,0 @@ ## [2.0.5](https://gitlab.com/iiroj/app-bar/compare/v2.0.4...v2.0.5) (2018-11-30)

index.d.ts

@@ -1,13 +0,16 @@
-import * as React from 'react';
+import * as React from "react";
 declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-declare type PartialHTMLElement = Omit<React.HTMLProps<HTMLDivElement>, 'children' | 'className' | 'ref'>;
+declare type PartialHTMLElement = Omit<React.HTMLProps<HTMLDivElement>, "children" | "className" | "ref">;
+declare enum Position {
+    HIDDEN = "hidden",
+    PINNED = "pinned",
+    UNFIXED = "unfixed"
+}
+declare type RenderProp = (props: Position) => JSX.Element;
 interface BaseProps extends PartialHTMLElement {
-    readonly children: any;
+    readonly children: RenderProp | React.ReactNode;
     readonly className?: string;
     readonly disabled?: boolean;
 }
-declare type WrapperProps = BaseProps & {
-    ref?: React.RefObject<any>;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<WrapperProps, "max" | "required" | "low" | "high" | "disabled" | "default" | "start" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "open" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "children" | "list" | "step" | "className" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<{}>>;
+declare const _default: React.ForwardRefExoticComponent<BaseProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

index.js

@@ -44,6 +44,19 @@ "use strict";
 var React = __importStar(require("react"));
+var Position;
+(function (Position) {
+    Position["HIDDEN"] = "hidden";
+    Position["PINNED"] = "pinned";
+    Position["UNFIXED"] = "unfixed";
+})(Position || (Position = {}));
 var AppBar = (function (_super) {
     __extends(AppBar, _super);
-    function AppBar(props) {
-        var _this = _super.call(this, props) || this;
+    function AppBar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            position: Position.UNFIXED,
+            scroll: 0,
+            ref: _this.props.innerRef ||
+                React.createRef(),
+            top: 0
+        };
         _this.animateTop = function () {
@@ -60,12 +73,13 @@ var ref = _this.state.ref.current;
             var oldScroll = _this.state.scroll;
-            var direction = scroll - oldScroll > 0 ? 'down' : 'up';
+            var direction = scroll - oldScroll > 0 ? "down" : "up";
             var newTop = _this.state.top + oldScroll - scroll;
             var _a = ref.getBoundingClientRect(), height = _a.height, fromTop = _a.top;
             var top;
-            if (direction === 'down') {
+            if (direction === "down") {
                 top = Math.max(newTop, -height);
-                if (!classList.contains('hidden') && newTop < -height) {
-                    classList.remove('pinned');
-                    classList.remove('unfixed');
-                    classList.add('hidden');
+                if (!classList.contains(Position.HIDDEN) && newTop < -height) {
+                    classList.remove(Position.PINNED);
+                    classList.remove(Position.UNFIXED);
+                    classList.add(Position.HIDDEN);
+                    _this.setState({ position: Position.HIDDEN });
                 }
@@ -75,12 +89,15 @@ }
                 top = Math.min(newTop, 0);
-                if (!classList.contains('pinned') && newTop > -height) {
-                    classList.remove('hidden');
-                    classList.remove('unfixed');
-                    classList.add('pinned');
+                if (!classList.contains(Position.PINNED) && newTop > -height) {
+                    classList.remove(Position.HIDDEN);
+                    classList.remove(Position.UNFIXED);
+                    classList.add(Position.PINNED);
+                    _this.setState({ position: Position.PINNED });
                 }
             }
-            if (!classList.contains('unfixed') && (fromTop > 0 || scroll === 0)) {
-                classList.remove('hidden');
-                classList.remove('pinned');
-                classList.add('unfixed');
+            if (!classList.contains(Position.UNFIXED) &&
+                (fromTop > 0 || scroll === 0)) {
+                classList.remove(Position.HIDDEN);
+                classList.remove(Position.PINNED);
+                classList.add(Position.UNFIXED);
+                _this.setState({ position: Position.UNFIXED });
             }
@@ -90,7 +107,2 @@ _this.setState({ scroll: scroll, top: top });
         _this.handleScroll = function () { return window.requestAnimationFrame(_this.animateTop); };
-        _this.state = {
-            scroll: 0,
-            ref: _this.props.innerRef || React.createRef(),
-            top: 0
-        };
         return _this;
@@ -100,5 +112,5 @@ }
         var _this = this;
-        if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
             this.setState({ scroll: window.pageYOffset }, function () {
-                return window.addEventListener('scroll', _this.handleScroll);
+                return window.addEventListener("scroll", _this.handleScroll);
             });
@@ -108,4 +120,4 @@ }
     AppBar.prototype.removeEventListener = function () {
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('scroll', this.handleScroll);
+        if (typeof window !== "undefined") {
+            window.removeEventListener("scroll", this.handleScroll);
         }
@@ -121,7 +133,12 @@ };
             if (top_1 >= 0) {
-                ref.classList.add('unfixed');
+                ref.classList.add(Position.UNFIXED);
             }
             else if (top_1 < -height) {
-                ref.classList.add('hidden');
+                ref.classList.add(Position.HIDDEN);
+                this.setState({ position: Position.HIDDEN });
             }
+            else {
+                ref.classList.add(Position.PINNED);
+                this.setState({ position: Position.PINNED });
+            }
         }
@@ -149,7 +166,10 @@ };
         var _a = this.props, children = _a.children, innerRef = _a.innerRef, props = __rest(_a, ["children", "innerRef"]);
+        var _b = this.state, position = _b.position, ref = _b.ref, top = _b.top;
         var style = {
-            position: 'sticky',
-            top: this.state.top + 'px'
+            position: "sticky",
+            top: top + "px"
         };
-        return (React.createElement("nav", __assign({ ref: this.state.ref, style: style }, props), children));
+        return (React.createElement("nav", __assign({ ref: ref, style: style }, props), typeof children === "function"
+            ? children(position)
+            : children));
     };
@@ -156,0 +176,0 @@ AppBar.defaultProps = {

package.json

 {
   "name": "app-bar",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "An app bar for React that stays out of your way",
@@ -31,12 +31,13 @@ "license": "MIT",
   "devDependencies": {
-    "@types/react": "^16.7.10",
+    "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
-    "css-wipe": "^4.3.0",
-    "emotion": "^10.0.0",
-    "parcel-bundler": "^1.10.3",
+    "@types/styled-components": "^4.1.4",
+    "parcel-bundler": "^1.11.0",
     "prettier": "^1.15.3",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-style-reset": "^1.0.2",
     "standard-version": "^4.4.0",
-    "tslint": "^5.11.0",
+    "styled-components": "^4.1.3",
+    "tslint": "^5.12.0",
     "tslint-config-prettier": "^1.17.0",
@@ -46,3 +47,3 @@ "tslint-config-standard": "^8.0.1",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.2.1"
+    "typescript": "^3.2.2"
   },
@@ -49,0 +50,0 @@ "keywords": [

README.md

@@ -38,11 +38,13 @@ <div align="center">
 
-Basic usage:
+### Basic
 
-```javascript
-import React from 'react';
-import { css } from 'emotion';
-import Navigation from 'app-bar';
+```jsx
+// @jsx jsx
 
-import { HamburgerMenu, Logo } from './components';
+import React from "react";
+import { css, jsx } from "@emotion/core";
+import Navigation from "app-bar";
 
+import { HamburgerMenu, Logo } from "./components";
+
 ...
@@ -52,3 +54,3 @@
   background-color: white;
-  box-shadow: ${open ? 'none' : '0 1px 2px rgba(0, 0, 0, 0.08)'};
+  box-shadow: ${open ? "none" : "0 1px 2px rgba(0, 0, 0, 0.08)"};
   height: 64px;
@@ -60,8 +62,33 @@ position: -webkit-sticky /* This is needed for Safari support */
 
-<Navigation className={styles} disabled={open}>
-  <Logo />
-  <HamburgerMenu open={open} />
-</Navigation>
+ReactDOM.render(
+  <Navigation css={styles} disabled={open}>
+    <Logo />
+    <HamburgerMenu open={open} />
+  </Navigation>,
+  document.getElementById("#root")
+);
 ```
 
+### Render Prop
+
+To use `<AppBar />`'s current position (_hidden_, _pinned_, or _unfixed_) in its children, you can supply `<AppBar /` a render function as its child:
+
+```jsx
+const SizableLogo = styled(Logo)(props => ({
+  height: props.large ? "128px" : "64px"
+}));
+
+ReactDOM.render(
+  <Navigation css={styles} disabled={open}>
+    {position => (
+      <>
+        <SizableLogo large={!open && position === "unfixed"} />
+        <HamburgerMenu open={open} />
+      </>
+    )}
+  </Navigation>,
+  document.getElementById("#root")
+);
+```
+
 ### Styling
@@ -71,3 +98,3 @@
 
-The `<AppBar />` component is `<nav />` element with the following inline styles:
+The `<AppBar />` component is a `<nav />` element with the following inline styles:
 
@@ -94,2 +121,2 @@ ```css
 
-If you need to access the dom element, you can supply your own ref from `React.createRef` via the `ref?: React.RefObject<any>` prop.
+If you need to access the dom element, you can supply your own ref from `React.createRef` via the `ref?: React.Ref<HTMLDivElement>` 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

Lines of code

189

increased by1.61%

Number of lines in readme file

118

increased by29.67%

Worsened metrics

Total package byte prevSize

19354

decreased by-15.7%

Dev dependency count

16

increased by6.67%

No dependency changes