npm - @integreat-app/react-sticky-headroom - Versions diffs - 1.2.2 → 2.0.0 - Mend

@integreat-app/react-sticky-headroom 1.2.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +7 -1
package/index.d.ts +86 -18
package/index.d.ts.map +1 -0
package/index.js +155 -288
package/index.js.map +1 -0
package/{index.js.flow → index.tsx} +82 -93
package/package.json +58 -69

package/README.md CHANGED Viewed

@@ -53,10 +53,16 @@ The component generally supports:
 * Firefox >= 40
 * Safari >= 6.2
+However, if you want to support non-modern browsers, you are responsible for transpiling the code for your preferred target.
 For hiding and revealing the header, the browser needs to support the css-property `position: sticky`.
 You can read about the browser support for that on [caniuse.com](https://caniuse.com/#feat=css-sticky).
 'Partial-Support' is enough for ReactStickyHeadroom to work in most cases.
-ReactStickyHeadroom offers types for both TypeScript and FlowJS which should work out of the box.
+Since version 2.x.x, ReactStickyHeadroom is written in TypeScript.
+Support for FlowJS types were dropped in version 2.0.0.
+ReactStickyHeadroom is a client-side library and hence does not support Server Side Rendering (SSR) a priori.
+For NextJS you can find more information on how to embed this library [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).
 If there are any problems, please don't hesitate to open an issue on GitHub.

package/index.d.ts CHANGED Viewed

@@ -1,18 +1,86 @@
-import React, { ReactNode } from 'react'
-declare type PropsType = {
-    children: ReactNode,
-    scrollHeight: number,
-    pinStart?: number,
-    height?: number,
-    onStickyTopChanged?: (number) => void,
-    positionStickyDisabled?: boolean,
-    parent?: HTMLElement,
-    zIndex?: number,
-    className?: string
-}
-declare class Headroom extends React.Component<PropsType> {
-}
-export default Headroom
+import React from 'react';
+declare const DIRECTION_UP = "up";
+declare const DIRECTION_DOWN = "down";
+declare const MODE_UNPINNED = "unpinned";
+declare const MODE_PINNED = "pinned";
+declare const MODE_STATIC = "static";
+declare const TRANSITION_NONE = "none";
+declare const TRANSITION_NORMAL = "normal";
+declare const TRANSITION_PINNED_TO_STATIC = "pinned-to-static";
+type ModeType = typeof MODE_PINNED | typeof MODE_UNPINNED | typeof MODE_STATIC;
+type DirectionType = typeof DIRECTION_UP | typeof DIRECTION_DOWN;
+type TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof TRANSITION_PINNED_TO_STATIC;
+type PropsType = {
+    /** The child node to be displayed as a header */
+    children: React.ReactNode;
+    /** The maximum amount of px the header should move up when scrolling */
+    scrollHeight: number;
+    /** The minimum scrollTop position where the transform should start */
+    pinStart: number;
+    /** Used for calculating the stickyTop position of an ancestor */
+    height?: number;
+    /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */
+    onStickyTopChanged?: (stickyTop: number) => void;
+    /** True, if sticky position should be disabled (e.g. for edge 16 support) */
+    positionStickyDisabled?: boolean;
+    /** The parent element firing the scroll event. Defaults to document.documentElement */
+    parent?: HTMLElement | null;
+    /** The z-index used by the wrapper. Defaults to 1. */
+    zIndex?: number;
+    /** A classname for applying custom styles to the wrapper. Use at your own risk. */
+    className?: string;
+};
+type StateType = {
+    mode: ModeType;
+    transition: TransitionType;
+    animateUpFrom: number | null;
+};
+declare class Headroom extends React.PureComponent<PropsType, StateType> {
+    static defaultProps: {
+        pinStart: number;
+        zIndex: number;
+        parent: HTMLElement | null;
+    };
+    state: StateType;
+    /** the very last scrollTop which we know about (to determine direction changes) */
+    lastKnownScrollTop: number;
+    /**
+     * @returns {number} the current scrollTop position of the window
+     */
+    getScrollTop(): number;
+    componentDidMount(): void;
+    addScrollListener(parent?: HTMLElement | null): void;
+    removeScrollListener(parent?: HTMLElement | null): void;
+    componentDidUpdate(prevProps: PropsType): void;
+    componentWillUnmount(): void;
+    /**
+     * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.
+     * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of
+     * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).
+     * Else we shouldn't set it static.
+     * @param scrollTop the currentScrollTop position
+     * @param direction the current direction
+     * @returns {boolean} if we should set the header static
+     */
+    shouldSetStatic(scrollTop: number, direction: DirectionType): boolean;
+    /**
+     * Determines the mode depending on the scrollTop position and the current direction
+     * @param {number} scrollTop
+     * @param {string} direction
+     * @returns {string} the next mode of Headroom
+     */
+    determineMode(scrollTop: number, direction: DirectionType): ModeType;
+    /**
+     * @returns {TransitionType} determines the kind of transition
+     */
+    determineTransition(mode: ModeType, direction: DirectionType): TransitionType;
+    /**
+     * Checks the current scrollTop position and updates the state accordingly
+     */
+    update: () => void;
+    handleEvent: () => void;
+    static calcStickyTop(mode: ModeType, height: number, scrollHeight: number): number;
+    render(): React.ReactElement;
+}
+export default Headroom;
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,QAAA,MAAM,YAAY,OAAO,CAAA;AACzB,QAAA,MAAM,cAAc,SAAS,CAAA;AAE7B,QAAA,MAAM,aAAa,aAAa,CAAA;AAChC,QAAA,MAAM,WAAW,WAAW,CAAA;AAC5B,QAAA,MAAM,WAAW,WAAW,CAAA;AAE5B,QAAA,MAAM,eAAe,SAAS,CAAA;AAC9B,QAAA,MAAM,iBAAiB,WAAW,CAAA;AAClC,QAAA,MAAM,2BAA2B,qBAAqB,CAAA;AAEtD,KAAK,QAAQ,GAAG,OAAO,WAAW,GAAG,OAAO,aAAa,GAAG,OAAO,WAAW,CAAA;AAC9E,KAAK,aAAa,GAAG,OAAO,YAAY,GAAG,OAAO,cAAc,CAAA;AAChE,KAAK,cAAc,GAAG,OAAO,eAAe,GAAG,OAAO,iBAAiB,GAAG,OAAO,2BAA2B,CAAA;AAE5G,KAAK,SAAS,GAAG;IACf,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uFAAuF;IACvF,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAsCD,cAAM,QAAS,SAAQ,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,YAAY,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAIpF;IAED,KAAK,EAAE,SAAS,CAIf;IAED,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAI;IAE9B;;OAEG;IACH,YAAY,IAAK,MAAM;IAevB,iBAAiB;IAIjB,iBAAiB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAU9C,oBAAoB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAQjD,kBAAkB,CAAE,SAAS,EAAE,SAAS;IAOxC,oBAAoB;IAIpB;;;;;;;;OAQG;IACH,eAAe,CAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,OAAO;IAWtE;;;;;OAKG;IACH,aAAa,CAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,QAAQ;IAQrE;;OAEG;IACH,mBAAmB,CAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAG,cAAc;IAmB9E;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAqBjB;IAED,WAAW,EAAE,MAAM,IAAI,CAEtB;IAED,MAAM,CAAC,aAAa,CAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,GACnB,MAAM;IAIT,MAAM,IAAK,KAAK,CAAC,YAAY;CA2B9B;AAED,eAAe,QAAQ,CAAA"}

package/index.js CHANGED Viewed

@@ -1,305 +1,172 @@
-"use strict";
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var UPWARDS = 'up';
-var DOWNWARDS = 'down';
-var UNPINNED = 'unpinned';
-var PINNED = 'pinned';
-var STATIC = 'static';
-var NO_TRANSITION = 'none';
-var NORMAL_TRANSITION = 'normal';
-var PINNED_TO_STATIC = 'pinned-to-static';
-var HeaderWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Headroom__HeaderWrapper",
-  componentId: "sc-16d3zk-0"
-})(["position:", ";top:", "px;z-index:", ";transform:translateY(", "px);animation-duration:0.2s;animation-timing-function:ease-out;", " ", " ", ""], function (props) {
-  return props.positionStickyDisabled ? 'static' : 'sticky';
-}, function (props) {
-  return props.top;
-}, function (props) {
-  return props.zIndex;
-}, function (props) {
-  return props.translateY;
-}, function (props) {
-  return props.transition === NORMAL_TRANSITION && !props.static ? 'transition: transform 0.2s ease-out;' : '';
-}, function (props) {
-  return props.transition === PINNED_TO_STATIC ? (0, _styledComponents.css)(["animation-name:", ";"], keyframesMoveUpFrom(props.animateUpFrom)) : '';
-}, function (props) {
-  return props.static ? 'transition: none;' : '';
-});
-var keyframesMoveUpFrom = function keyframesMoveUpFrom(from) {
-  return (0, _styledComponents.keyframes)(["from{transform:translateY(", "px)}to{transform:translateY(0)}"], Math.max(from, 0));
-};
-var Headroom = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Headroom, _React$PureComponent);
-  var _super = _createSuper(Headroom);
-  function Headroom() {
-    var _this;
-    _classCallCheck(this, Headroom);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      mode: STATIC,
-      transition: NO_TRANSITION,
-      animateUpFrom: null
-    });
-    _defineProperty(_assertThisInitialized(_this), "lastKnownScrollTop", 0);
-    _defineProperty(_assertThisInitialized(_this), "update", function () {
-      var currentScrollTop = _this.getScrollTop();
-      var newState = {};
-      if (currentScrollTop === _this.lastKnownScrollTop) {
-        return;
-      }
-      var direction = _this.lastKnownScrollTop < currentScrollTop ? DOWNWARDS : UPWARDS;
-      newState.mode = _this.determineMode(currentScrollTop, direction);
-      newState.transition = _this.determineTransition(newState.mode, direction);
-      var _this$props = _this.props,
-          onStickyTopChanged = _this$props.onStickyTopChanged,
-          height = _this$props.height,
-          scrollHeight = _this$props.scrollHeight,
-          pinStart = _this$props.pinStart;
-      if (_this.state.mode === PINNED && newState.mode === STATIC) {
-        // animation in the special case from pinned to static
-        newState.animateUpFrom = currentScrollTop - pinStart;
-      }
-      if (onStickyTopChanged && newState.mode !== _this.state.mode && height) {
-        onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight));
-      }
-      _this.setState(newState);
-      _this.lastKnownScrollTop = currentScrollTop;
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleEvent", function () {
-      window.requestAnimationFrame(_this.update);
-    });
-    return _this;
-  }
-  _createClass(Headroom, [{
-    key: "getScrollTop",
-    value:
+import React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+const DIRECTION_UP = 'up';
+const DIRECTION_DOWN = 'down';
+const MODE_UNPINNED = 'unpinned';
+const MODE_PINNED = 'pinned';
+const MODE_STATIC = 'static';
+const TRANSITION_NONE = 'none';
+const TRANSITION_NORMAL = 'normal';
+const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static';
+const HeaderWrapper = styled.div([
+    "position:",
+    ";top:",
+    "px;z-index:",
+    ";transform:translateY(",
+    "px);animation-duration:0.2s;animation-timing-function:ease-out;",
+    " ",
+    " ",
+    ""
+], (props)=>props.$positionStickyDisabled ? 'static' : 'sticky', (props)=>props.$top, (props)=>props.$zIndex, (props)=>props.$translateY, (props)=>props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '', (props)=>props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null ? css([
+        "animation-name:",
+        ";"
+    ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
+const keyframesMoveUpFrom = (from)=>keyframes([
+        "from{transform:translateY(",
+        "px)}to{transform:translateY(0)}"
+    ], Math.max(from, 0));
+class Headroom extends React.PureComponent {
+    static defaultProps = {
+        pinStart: 0,
+        zIndex: 1,
+        parent: window.document.documentElement
+    };
+    state = {
+        mode: MODE_STATIC,
+        transition: TRANSITION_NONE,
+        animateUpFrom: null
+    };
+    /** the very last scrollTop which we know about (to determine direction changes) */ lastKnownScrollTop = 0;
     /**
-     * @returns {number} the current scrollTop position of the window
-     */
-    function getScrollTop() {
-      var parent = this.props.parent;
-      if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {
-        return parent.scrollTop;
-      }
-      if (parent !== document.documentElement) {
-        console.warn('Could not find parent for StickyHeadroom. Defaulting to window, documentElement or body.');
-      }
-      if (window.pageYOffset !== undefined) {
+   * @returns {number} the current scrollTop position of the window
+   */ getScrollTop() {
+        const parent = this.props.parent;
+        if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {
+            return parent.scrollTop;
+        }
+        if (parent !== document.documentElement) {
+            console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.');
+        }
+        if (window.pageYOffset === undefined) {
+            console.error('window.pageYOffset is undefined. Defaulting to 0.');
+            return 0;
+        }
         return window.pageYOffset;
-      } else if (window.scrollTop !== undefined) {
-        return window.scrollTop;
-      } else if (document.documentElement) {
-        return document.documentElement.scrollTop;
-      } else if (document.body) {
-        return document.body.scrollTop;
-      } else {
-        throw new Error('Could not determine scrollTop!');
-      }
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.addScrollListener(this.props.parent);
+    componentDidMount() {
+        this.addScrollListener(this.props.parent);
     }
-  }, {
-    key: "addScrollListener",
-    value: function addScrollListener(parent) {
-      if (parent === window.document.documentElement) {
-        window.addEventListener('scroll', this.handleEvent);
-      } else if (parent) {
-        parent.addEventListener('scroll', this.handleEvent);
-      } else {
-        console.debug('Property parent of Headroom is null. Assuming, parent will be set soon...');
-      }
+    addScrollListener(parent) {
+        if (parent === window.document.documentElement) {
+            window.addEventListener('scroll', this.handleEvent);
+        } else if (parent) {
+            parent.addEventListener('scroll', this.handleEvent);
+        } else {
+            console.debug("'parent' prop of Headroom is null. Assuming, it will be set soon...");
+        }
     }
-  }, {
-    key: "removeScrollListener",
-    value: function removeScrollListener(parent) {
-      if (parent === window.document.documentElement) {
-        window.removeEventListener('scroll', this.handleEvent);
-      } else if (parent) {
-        parent.removeEventListener('scroll', this.handleEvent);
-      }
+    removeScrollListener(parent) {
+        if (parent === window.document.documentElement) {
+            window.removeEventListener('scroll', this.handleEvent);
+        } else if (parent) {
+            parent.removeEventListener('scroll', this.handleEvent);
+        }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.parent !== this.props.parent) {
-        this.removeScrollListener(prevProps.parent);
-        this.addScrollListener(this.props.parent);
-      }
+    componentDidUpdate(prevProps) {
+        if (prevProps.parent !== this.props.parent) {
+            this.removeScrollListener(prevProps.parent);
+            this.addScrollListener(this.props.parent);
+        }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeScrollListener(this.props.parent);
+    componentWillUnmount() {
+        this.removeScrollListener(this.props.parent);
     }
     /**
-     * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.
-     * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of
-     * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).
-     * Else we shouldn't set it static.
-     * @param scrollTop the currentScrollTop position
-     * @param direction the current direction
-     * @returns {boolean} if we should set the header static
-     */
-  }, {
-    key: "shouldSetStatic",
-    value: function shouldSetStatic(scrollTop, direction) {
-      if (this.state.mode === STATIC || this.state.mode === PINNED && direction === DOWNWARDS) {
-        return this.props.pinStart + this.props.scrollHeight >= scrollTop;
-      } else {
-        return this.props.pinStart >= scrollTop;
-      }
+   * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.
+   * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of
+   * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).
+   * Else we shouldn't set it static.
+   * @param scrollTop the currentScrollTop position
+   * @param direction the current direction
+   * @returns {boolean} if we should set the header static
+   */ shouldSetStatic(scrollTop, direction) {
+        if (this.state.mode === MODE_STATIC || this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN) {
+            return this.props.pinStart + this.props.scrollHeight >= scrollTop;
+        } else {
+            return this.props.pinStart >= scrollTop;
+        }
     }
     /**
-     * Determines the mode depending on the scrollTop position and the current direction
-     * @param {number} scrollTop
-     * @param {string} direction
-     * @returns {string} the next mode of Headroom
-     */
-  }, {
-    key: "determineMode",
-    value: function determineMode(scrollTop, direction) {
-      if (this.shouldSetStatic(scrollTop, direction)) {
-        return STATIC;
-      } else {
-        return direction === UPWARDS ? PINNED : UNPINNED;
-      }
+   * Determines the mode depending on the scrollTop position and the current direction
+   * @param {number} scrollTop
+   * @param {string} direction
+   * @returns {string} the next mode of Headroom
+   */ determineMode(scrollTop, direction) {
+        if (this.shouldSetStatic(scrollTop, direction)) {
+            return MODE_STATIC;
+        } else {
+            return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED;
+        }
     }
     /**
-     * @returns {TransitionType} determines the kind of transition
-     */
-  }, {
-    key: "determineTransition",
-    value: function determineTransition(mode, direction) {
-      // Handle special case: If we're pinned and going to static, we need a special transition using css animation
-      if (this.state.mode === PINNED && mode === STATIC) {
-        return PINNED_TO_STATIC;
-      } // If mode is static, then no transition, because we're already in the right spot
-      // (and want to change transform and top properties seamlessly)
-      if (mode === STATIC) {
-        return this.state.transition === NO_TRANSITION ? NO_TRANSITION : PINNED_TO_STATIC;
-      } // mode is not static, transition when moving upwards or when we've lastly did the transition
-      return direction === UPWARDS || this.state.transition === NORMAL_TRANSITION ? NORMAL_TRANSITION : NO_TRANSITION;
+   * @returns {TransitionType} determines the kind of transition
+   */ determineTransition(mode, direction) {
+        // Handle special case: If we're pinned and going to static, we need a special transition using css animation
+        if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {
+            return TRANSITION_PINNED_TO_STATIC;
+        }
+        // If mode is static, then no transition, because we're already in the right spot
+        // (and want to change transform and top properties seamlessly)
+        if (mode === MODE_STATIC) {
+            return this.state.transition === TRANSITION_NONE ? TRANSITION_NONE : TRANSITION_PINNED_TO_STATIC;
+        }
+        // mode is not static, transition when moving upwards or when we've lastly did the transition
+        return direction === DIRECTION_UP || this.state.transition === TRANSITION_NORMAL ? TRANSITION_NORMAL : TRANSITION_NONE;
     }
     /**
-     * Checks the current scrollTop position and updates the state accordingly
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          scrollHeight = _this$props2.scrollHeight,
-          positionStickyDisabled = _this$props2.positionStickyDisabled,
-          zIndex = _this$props2.zIndex,
-          className = _this$props2.className;
-      var _this$state = this.state,
-          mode = _this$state.mode,
-          transition = _this$state.transition,
-          animateUpFrom = _this$state.animateUpFrom;
-      var transform = mode === UNPINNED ? -scrollHeight : 0;
-      var ownStickyTop = mode === STATIC ? -scrollHeight : 0;
-      return /*#__PURE__*/React.createElement(HeaderWrapper, {
-        className: className,
-        translateY: transform,
-        top: ownStickyTop,
-        transition: transition,
-        positionStickyDisabled: positionStickyDisabled,
-        static: mode === STATIC,
-        animateUpFrom: animateUpFrom,
-        zIndex: zIndex
-      }, children);
+   * Checks the current scrollTop position and updates the state accordingly
+   */ update = ()=>{
+        const currentScrollTop = this.getScrollTop();
+        const newState = {};
+        if (currentScrollTop === this.lastKnownScrollTop) {
+            return;
+        }
+        const direction = this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP;
+        newState.mode = this.determineMode(currentScrollTop, direction);
+        newState.transition = this.determineTransition(newState.mode, direction);
+        const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props;
+        if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {
+            // animation in the special case from pinned to static
+            newState.animateUpFrom = currentScrollTop - pinStart;
+        }
+        if (onStickyTopChanged && newState.mode !== this.state.mode && height) {
+            onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight));
+        }
+        this.setState(newState);
+        this.lastKnownScrollTop = currentScrollTop;
+    };
+    handleEvent = ()=>{
+        window.requestAnimationFrame(this.update);
+    };
+    static calcStickyTop(mode, height, scrollHeight) {
+        return mode === MODE_PINNED ? height : height - scrollHeight;
     }
-  }], [{
-    key: "calcStickyTop",
-    value: function calcStickyTop(mode, height, scrollHeight) {
-      return mode === PINNED ? height : height - scrollHeight;
+    render() {
+        const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props;
+        const { mode, transition, animateUpFrom } = this.state;
+        const transform = mode === MODE_UNPINNED ? -scrollHeight : 0;
+        const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0;
+        return /*#__PURE__*/ React.createElement(HeaderWrapper, {
+            className: className,
+            $translateY: transform,
+            $top: ownStickyTop,
+            $transition: transition,
+            $positionStickyDisabled: !!positionStickyDisabled,
+            $static: mode === MODE_STATIC,
+            $animateUpFrom: animateUpFrom,
+            $zIndex: zIndex
+        }, children);
     }
-  }]);
-  return Headroom;
-}(React.PureComponent);
-_defineProperty(Headroom, "defaultProps", {
-  pinStart: 0,
-  zIndex: 1,
-  parent: window.document.documentElement
-});
-var _default = Headroom;
-exports.default = _default;
+}
+export default Headroom;
+//# sourceMappingURL=index.js.map

package/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled, { css, keyframes } from 'styled-components'\n\nconst DIRECTION_UP = 'up'\nconst DIRECTION_DOWN = 'down'\n\nconst MODE_UNPINNED = 'unpinned'\nconst MODE_PINNED = 'pinned'\nconst MODE_STATIC = 'static'\n\nconst TRANSITION_NONE = 'none'\nconst TRANSITION_NORMAL = 'normal'\nconst TRANSITION_PINNED_TO_STATIC = 'pinned-to-static'\n\ntype ModeType = typeof MODE_PINNED | typeof MODE_UNPINNED | typeof MODE_STATIC\ntype DirectionType = typeof DIRECTION_UP | typeof DIRECTION_DOWN\ntype TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof TRANSITION_PINNED_TO_STATIC\n\ntype PropsType = {\n /** The child node to be displayed as a header */\n children: React.ReactNode,\n /** The maximum amount of px the header should move up when scrolling */\n scrollHeight: number,\n /** The minimum scrollTop position where the transform should start */\n pinStart: number,\n /** Used for calculating the stickyTop position of an ancestor */\n height?: number,\n /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */\n onStickyTopChanged?: (stickyTop: number) => void,\n /** True, if sticky position should be disabled (e.g. for edge 16 support) */\n positionStickyDisabled?: boolean,\n /** The parent element firing the scroll event. Defaults to document.documentElement */\n parent?: HTMLElement | null,\n /** The z-index used by the wrapper. Defaults to 1. */\n zIndex?: number,\n /** A classname for applying custom styles to the wrapper. Use at your own risk. */\n className?: string\n}\n\ntype StateType = {\n mode: ModeType,\n transition: TransitionType,\n animateUpFrom: number | null\n}\n\nconst HeaderWrapper = styled.div<{\n $positionStickyDisabled: boolean,\n $translateY: number,\n $transition: TransitionType,\n $animateUpFrom: number | null,\n $zIndex?: number,\n $top: number,\n $static: boolean\n}>`\n position: ${props => props.$positionStickyDisabled ? 'static' : 'sticky'};\n top: ${props => props.$top}px;\n z-index: ${props => props.$zIndex};\n transform: translateY(${props => props.$translateY}px);\n animation-duration: 0.2s;\n animation-timing-function: ease-out;\n ${props => props.$transition === TRANSITION_NORMAL && !props.$static\n ? 'transition: transform 0.2s ease-out;'\n : ''}\n ${props => props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null\n ? css`\n animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};\n `\n : ''}\n ${props => props.$static ? 'transition: none;' : ''}\n`\n\nconst keyframesMoveUpFrom = (from: number) => keyframes`\n from {\n transform: translateY(${Math.max(from, 0)}px)\n }\n\n to {\n transform: translateY(0)\n }\n`\n\nclass Headroom extends React.PureComponent<PropsType, StateType> {\n static defaultProps: { pinStart: number, zIndex: number, parent: HTMLElement | null } = {\n pinStart: 0,\n zIndex: 1,\n parent: window.document.documentElement\n }\n\n state: StateType = {\n mode: MODE_STATIC,\n transition: TRANSITION_NONE,\n animateUpFrom: null\n }\n\n /** the very last scrollTop which we know about (to determine direction changes) */\n lastKnownScrollTop: number = 0\n\n /**\n * @returns {number} the current scrollTop position of the window\n */\n getScrollTop (): number {\n const parent = this.props.parent\n if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {\n return parent.scrollTop\n }\n if (parent !== document.documentElement) {\n console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.')\n }\n if (window.pageYOffset === undefined) {\n console.error('window.pageYOffset is undefined. Defaulting to 0.')\n return 0\n }\n return window.pageYOffset\n }\n\n componentDidMount () {\n this.addScrollListener(this.props.parent)\n }\n\n addScrollListener (parent?: HTMLElement | null) {\n if (parent === window.document.documentElement) {\n window.addEventListener('scroll', this.handleEvent)\n } else if (parent) {\n parent.addEventListener('scroll', this.handleEvent)\n } else {\n console.debug(\"'parent' prop of Headroom is null. Assuming, it will be set soon...\")\n }\n }\n\n removeScrollListener (parent?: HTMLElement | null) {\n if (parent === window.document.documentElement) {\n window.removeEventListener('scroll', this.handleEvent)\n } else if (parent) {\n parent.removeEventListener('scroll', this.handleEvent)\n }\n }\n\n componentDidUpdate (prevProps: PropsType) {\n if (prevProps.parent !== this.props.parent) {\n this.removeScrollListener(prevProps.parent)\n this.addScrollListener(this.props.parent)\n }\n }\n\n componentWillUnmount () {\n this.removeScrollListener(this.props.parent)\n }\n\n /**\n * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.\n * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of\n * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).\n * Else we shouldn't set it static.\n * @param scrollTop the currentScrollTop position\n * @param direction the current direction\n * @returns {boolean} if we should set the header static\n */\n shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {\n if (\n this.state.mode === MODE_STATIC ||\n (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)\n ) {\n return this.props.pinStart + this.props.scrollHeight >= scrollTop\n } else {\n return this.props.pinStart >= scrollTop\n }\n }\n\n /**\n * Determines the mode depending on the scrollTop position and the current direction\n * @param {number} scrollTop\n * @param {string} direction\n * @returns {string} the next mode of Headroom\n */\n determineMode (scrollTop: number, direction: DirectionType): ModeType {\n if (this.shouldSetStatic(scrollTop, direction)) {\n return MODE_STATIC\n } else {\n return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED\n }\n }\n\n /**\n * @returns {TransitionType} determines the kind of transition\n */\n determineTransition (mode: ModeType, direction: DirectionType): TransitionType {\n // Handle special case: If we're pinned and going to static, we need a special transition using css animation\n if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {\n return TRANSITION_PINNED_TO_STATIC\n }\n // If mode is static, then no transition, because we're already in the right spot\n // (and want to change transform and top properties seamlessly)\n if (mode === MODE_STATIC) {\n return this.state.transition === TRANSITION_NONE\n ? TRANSITION_NONE\n : TRANSITION_PINNED_TO_STATIC\n }\n // mode is not static, transition when moving upwards or when we've lastly did the transition\n return direction === DIRECTION_UP ||\n this.state.transition === TRANSITION_NORMAL\n ? TRANSITION_NORMAL\n : TRANSITION_NONE\n }\n\n /**\n * Checks the current scrollTop position and updates the state accordingly\n */\n update: () => void = () => {\n const currentScrollTop = this.getScrollTop()\n const newState: Partial<StateType> = {}\n if (currentScrollTop === this.lastKnownScrollTop) {\n return\n }\n const direction =\n this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP\n newState.mode = this.determineMode(currentScrollTop, direction)\n newState.transition = this.determineTransition(newState.mode, direction)\n\n const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props\n if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {\n // animation in the special case from pinned to static\n newState.animateUpFrom = currentScrollTop - pinStart\n }\n if (onStickyTopChanged && newState.mode !== this.state.mode && height) {\n onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight))\n }\n this.setState(newState as StateType)\n this.lastKnownScrollTop = currentScrollTop\n }\n\n handleEvent: () => void = () => {\n window.requestAnimationFrame(this.update)\n }\n\n static calcStickyTop (\n mode: ModeType,\n height: number,\n scrollHeight: number\n ): number {\n return mode === MODE_PINNED ? height : height - scrollHeight\n }\n\n render (): React.ReactElement {\n const {\n children,\n scrollHeight,\n positionStickyDisabled,\n zIndex,\n className\n } = this.props\n const {\n mode,\n transition,\n animateUpFrom\n } = this.state\n const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n return <HeaderWrapper\n className={className}\n $translateY={transform}\n $top={ownStickyTop}\n $transition={transition}\n $positionStickyDisabled={!!positionStickyDisabled}\n $static={mode === MODE_STATIC}\n $animateUpFrom={animateUpFrom}\n $zIndex={zIndex}>\n {children}\n </HeaderWrapper>\n }\n}\n\nexport default Headroom\n"],"names":["React","styled","css","keyframes","DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","keyframesMoveUpFrom","from","Math","max","Headroom","PureComponent","defaultProps","pinStart","zIndex","parent","window","document","documentElement","state","mode","transition","animateUpFrom","lastKnownScrollTop","getScrollTop","scrollTop","undefined","console","warn","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","scrollHeight","determineMode","determineTransition","update","currentScrollTop","newState","onStickyTopChanged","height","calcStickyTop","setState","requestAnimationFrame","render","children","positionStickyDisabled","className","transform","ownStickyTop"],"mappings":"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"}

package/{index.js.flow → index.tsx} RENAMED Viewed

@@ -1,28 +1,24 @@
-// @flow
-import type { Node } from 'react'
-import * as React from 'react'
-import type { StyledComponent } from 'styled-components'
+import React from 'react'
 import styled, { css, keyframes } from 'styled-components'
-const UPWARDS = 'up'
-const DOWNWARDS = 'down'
+const DIRECTION_UP = 'up'
+const DIRECTION_DOWN = 'down'
-const UNPINNED = 'unpinned'
-const PINNED = 'pinned'
-const STATIC = 'static'
+const MODE_UNPINNED = 'unpinned'
+const MODE_PINNED = 'pinned'
+const MODE_STATIC = 'static'
-const NO_TRANSITION = 'none'
-const NORMAL_TRANSITION = 'normal'
-const PINNED_TO_STATIC = 'pinned-to-static'
+const TRANSITION_NONE = 'none'
+const TRANSITION_NORMAL = 'normal'
+const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static'
-type ModeType = 'pinned' | 'unpinned' | 'static'
-type DirectionType = 'up' | 'down'
-type TransitionType = 'none' | 'normal' | 'pinned-to-static'
+type ModeType = typeof MODE_PINNED | typeof MODE_UNPINNED | typeof MODE_STATIC
+type DirectionType = typeof DIRECTION_UP | typeof DIRECTION_DOWN
+type TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof TRANSITION_PINNED_TO_STATIC
-type PropsType = $ReadOnly<{|
+type PropsType = {
   /** The child node to be displayed as a header */
-  children: Node,
+  children: React.ReactNode,
   /** The maximum amount of px the header should move up when scrolling */
   scrollHeight: number,
   /** The minimum scrollTop position where the transform should start */
@@ -30,45 +26,47 @@ type PropsType = $ReadOnly<{|
   /** Used for calculating the stickyTop position of an ancestor */
   height?: number,
   /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */
-  onStickyTopChanged?: (number) => void,
+  onStickyTopChanged?: (stickyTop: number) => void,
   /** True, if sticky position should be disabled (e.g. for edge 16 support) */
   positionStickyDisabled?: boolean,
   /** The parent element firing the scroll event. Defaults to document.documentElement */
-  parent: ?HTMLElement,
+  parent?: HTMLElement | null,
   /** The z-index used by the wrapper. Defaults to 1. */
   zIndex?: number,
   /** A classname for applying custom styles to the wrapper. Use at your own risk. */
   className?: string
-|}>
+}
-type StateType = $ReadOnly<{|
+type StateType = {
   mode: ModeType,
   transition: TransitionType,
-  animateUpFrom: ?number
-|}>
+  animateUpFrom: number | null
+}
-const HeaderWrapper: StyledComponent<{|
-  positionStickyDisabled: boolean,
-  translateY: number,
-  transition: TransitionType,
-  animateUpFrom: ?number,
-  zIndex: number
-|}, *, *, *> = styled.div`
-  position: ${props => props.positionStickyDisabled ? 'static' : 'sticky'};
-  top: ${props => props.top}px;
-  z-index: ${props => props.zIndex};
-  transform: translateY(${props => props.translateY}px);
+const HeaderWrapper = styled.div<{
+  $positionStickyDisabled: boolean,
+  $translateY: number,
+  $transition: TransitionType,
+  $animateUpFrom: number | null,
+  $zIndex?: number,
+  $top: number,
+  $static: boolean
+}>`
+  position: ${props => props.$positionStickyDisabled ? 'static' : 'sticky'};
+  top: ${props => props.$top}px;
+  z-index: ${props => props.$zIndex};
+  transform: translateY(${props => props.$translateY}px);
   animation-duration: 0.2s;
   animation-timing-function: ease-out;
-  ${props => props.transition === NORMAL_TRANSITION && !props.static
+  ${props => props.$transition === TRANSITION_NORMAL && !props.$static
   ? 'transition: transform 0.2s ease-out;'
   : ''}
-  ${props => props.transition === PINNED_TO_STATIC
+  ${props => props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null
   ? css`
-    animation-name: ${keyframesMoveUpFrom(props.animateUpFrom)};
+    animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
   `
   : ''}
-  ${props => props.static ? 'transition: none;' : ''}
+  ${props => props.$static ? 'transition: none;' : ''}
 `
 const keyframesMoveUpFrom = (from: number) => keyframes`
@@ -79,18 +77,18 @@ const keyframesMoveUpFrom = (from: number) => keyframes`
     to {
       transform: translateY(0)
     }
-  `
+`
 class Headroom extends React.PureComponent<PropsType, StateType> {
-  static defaultProps: {| pinStart: number, zIndex: number, parent: ?HTMLElement |} = {
+  static defaultProps: { pinStart: number, zIndex: number, parent: HTMLElement | null } = {
     pinStart: 0,
     zIndex: 1,
     parent: window.document.documentElement
   }
   state: StateType = {
-    mode: STATIC,
-    transition: NO_TRANSITION,
+    mode: MODE_STATIC,
+    transition: TRANSITION_NONE,
     animateUpFrom: null
   }
@@ -106,36 +104,30 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
       return parent.scrollTop
     }
     if (parent !== document.documentElement) {
-      console.warn('Could not find parent for StickyHeadroom. Defaulting to window, documentElement or body.')
+      console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.')
     }
-    if (window.pageYOffset !== undefined) {
-      return window.pageYOffset
-    } else if (window.scrollTop !== undefined) {
-      return window.scrollTop
-    } else if (document.documentElement) {
-      return document.documentElement.scrollTop
-    } else if (document.body) {
-      return document.body.scrollTop
-    } else {
-      throw new Error('Could not determine scrollTop!')
+    if (window.pageYOffset === undefined) {
+      console.error('window.pageYOffset is undefined. Defaulting to 0.')
+      return 0
     }
+    return window.pageYOffset
   }
   componentDidMount () {
     this.addScrollListener(this.props.parent)
   }
-  addScrollListener (parent: ?HTMLElement) {
+  addScrollListener (parent?: HTMLElement | null) {
     if (parent === window.document.documentElement) {
       window.addEventListener('scroll', this.handleEvent)
     } else if (parent) {
       parent.addEventListener('scroll', this.handleEvent)
     } else {
-      console.debug('Property parent of Headroom is null. Assuming, parent will be set soon...')
+      console.debug("'parent' prop of Headroom is null. Assuming, it will be set soon...")
     }
   }
-  removeScrollListener (parent: ?HTMLElement) {
+  removeScrollListener (parent?: HTMLElement | null) {
     if (parent === window.document.documentElement) {
       window.removeEventListener('scroll', this.handleEvent)
     } else if (parent) {
@@ -164,8 +156,10 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
    * @returns {boolean} if we should set the header static
    */
   shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {
-    if (this.state.mode === STATIC || (this.state.mode === PINNED && direction ===
-      DOWNWARDS)) {
+    if (
+      this.state.mode === MODE_STATIC ||
+      (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)
+    ) {
       return this.props.pinStart + this.props.scrollHeight >= scrollTop
     } else {
       return this.props.pinStart >= scrollTop
@@ -180,9 +174,9 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
    */
   determineMode (scrollTop: number, direction: DirectionType): ModeType {
     if (this.shouldSetStatic(scrollTop, direction)) {
-      return STATIC
+      return MODE_STATIC
     } else {
-      return direction === UPWARDS ? PINNED : UNPINNED
+      return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED
     }
   }
@@ -191,20 +185,21 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
    */
   determineTransition (mode: ModeType, direction: DirectionType): TransitionType {
     // Handle special case: If we're pinned and going to static, we need a special transition using css animation
-    if (this.state.mode === PINNED && mode === STATIC) {
-      return PINNED_TO_STATIC
+    if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {
+      return TRANSITION_PINNED_TO_STATIC
     }
     // If mode is static, then no transition, because we're already in the right spot
     // (and want to change transform and top properties seamlessly)
-    if (mode === STATIC) {
-      return this.state.transition === NO_TRANSITION
-        ? NO_TRANSITION
-        : PINNED_TO_STATIC
+    if (mode === MODE_STATIC) {
+      return this.state.transition === TRANSITION_NONE
+        ? TRANSITION_NONE
+        : TRANSITION_PINNED_TO_STATIC
     }
     // mode is not static, transition when moving upwards or when we've lastly did the transition
-    return direction === UPWARDS || this.state.transition === NORMAL_TRANSITION
-      ? NORMAL_TRANSITION
-      : NO_TRANSITION
+    return direction === DIRECTION_UP ||
+      this.state.transition === TRANSITION_NORMAL
+      ? TRANSITION_NORMAL
+      : TRANSITION_NONE
   }
   /**
@@ -212,30 +207,24 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
    */
   update: () => void = () => {
     const currentScrollTop = this.getScrollTop()
-    const newState = {}
+    const newState: Partial<StateType> = {}
     if (currentScrollTop === this.lastKnownScrollTop) {
       return
     }
-    const direction = this.lastKnownScrollTop < currentScrollTop
-      ? DOWNWARDS
-      : UPWARDS
+    const direction =
+      this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP
     newState.mode = this.determineMode(currentScrollTop, direction)
     newState.transition = this.determineTransition(newState.mode, direction)
-    const {
-      onStickyTopChanged,
-      height,
-      scrollHeight,
-      pinStart
-    } = this.props
-    if (this.state.mode === PINNED && newState.mode === STATIC) {
+    const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props
+    if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {
       // animation in the special case from pinned to static
       newState.animateUpFrom = currentScrollTop - pinStart
     }
     if (onStickyTopChanged && newState.mode !== this.state.mode && height) {
       onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight))
     }
-    this.setState(newState)
+    this.setState(newState as StateType)
     this.lastKnownScrollTop = currentScrollTop
   }
@@ -248,10 +237,10 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
     height: number,
     scrollHeight: number
   ): number {
-    return mode === PINNED ? height : height - scrollHeight
+    return mode === MODE_PINNED ? height : height - scrollHeight
   }
-  render (): * {
+  render (): React.ReactElement {
     const {
       children,
       scrollHeight,
@@ -264,17 +253,17 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
       transition,
       animateUpFrom
     } = this.state
-    const transform = mode === UNPINNED ? -scrollHeight : 0
-    const ownStickyTop = mode === STATIC ? -scrollHeight : 0
+    const transform = mode === MODE_UNPINNED ? -scrollHeight : 0
+    const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0
     return <HeaderWrapper
       className={className}
-      translateY={transform}
-      top={ownStickyTop}
-      transition={transition}
-      positionStickyDisabled={positionStickyDisabled}
-      static={mode === STATIC}
-      animateUpFrom={animateUpFrom}
-      zIndex={zIndex}>
+      $translateY={transform}
+      $top={ownStickyTop}
+      $transition={transition}
+      $positionStickyDisabled={!!positionStickyDisabled}
+      $static={mode === MODE_STATIC}
+      $animateUpFrom={animateUpFrom}
+      $zIndex={zIndex}>
       {children}
     </HeaderWrapper>
   }

package/package.json CHANGED Viewed

@@ -1,25 +1,23 @@
 {
   "name": "@integreat-app/react-sticky-headroom",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "engines": {
-    "node": ">=6.9",
-    "npm": ">=3.8"
+    "node": ">=18",
+    "npm": ">=10"
   },
-  "browserslist": [
-    "ie >= 11",
-    "edge >= 16",
-    "chrome >= 41",
-    "firefox >= 40",
-    "safari >= 6.2"
-  ],
   "license": "MIT",
   "description": "ReactStickyHeadroom is a React Component for hiding the header when scrolling.",
   "author": "Michael Markl <marklmichael98@gmail.com>",
-  "repository": "https://github.com/integreat/react-sticky-headroom",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/integreat/react-sticky-headroom.git"
+  },
   "files": [
     "index.js",
-    "index.js.flow",
-    "index.d.ts"
+    "index.js.map",
+    "index.d.ts",
+    "index.d.ts.map",
+    "index.tsx"
   ],
   "publishConfig": {
     "access": "public"
@@ -31,83 +29,74 @@
     "hide",
     "header",
     "styled-components",
-    "typescript",
-    "flow"
+    "typescript"
   ],
-  "module": "index.js",
+  "module": "./index.js",
   "scripts": {
-    "build": "node tools/build.js",
-    "build:demo": "node tools/build.demo.js",
+    "build": "ts-node tools/build.ts",
+    "build:demo": "webpack --config tools/demo.webpack.config.ts",
     "test": "jest --config jest.config.json",
     "test:coverage": "jest --config jest.config.json --coverage",
     "test:watch": "jest --config jest.config.json --watchAll",
     "test:update": "jest --config jest.config.json -u",
-    "lint": "yarn run eslint && yarn run stylelint",
-    "lint:fix": "yarn run eslint --fix && yarn run stylelint",
+    "lint": "npm run eslint && npm run stylelint",
+    "lint:fix": "eslint . --fix && npm run stylelint",
     "eslint": "eslint .",
-    "stylelint": "stylelint './src/**/*.js'",
-    "flow:check-now": "flow check",
-    "flow:install-types": "flow-typed install --skip",
-    "prepublishOnly": "yarn build && yarn build:demo && yarn test && yarn lint && yarn flow:check-now"
+    "stylelint": "stylelint './src/**/*.{ts,tsx}'",
+    "ts:check": "tsc",
+    "prepublishOnly": "npm run build && npm run build:demo && npm run test && npm run lint && npm run ts:check"
   },
+  "//": "browserslist only affects the build of the demo app, not the library itself.",
+  "browserslist": [
+    "ie >= 11",
+    "edge >= 16",
+    "chrome >= 41",
+    "firefox >= 40",
+    "safari >= 6.2"
+  ],
   "peerDependencies": {
     "react": "16.x.x || 17.x.x || 18.x.x",
-    "styled-components": "4.x.x || 5.x.x"
+    "styled-components": "4.x.x || 5.x.x || 6.x.x"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.8",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-do-expressions": "^7.16.7",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
-    "@babel/plugin-proposal-json-strings": "^7.16.7",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
-    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/plugin-proposal-pipeline-operator": "^7.17.6",
-    "@babel/plugin-proposal-throw-expressions": "^7.16.7",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/runtime": "^7.17.8",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.4",
-    "babel-plugin-styled-components": "^2.0.6",
-    "browserslist": "^4.20.2",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@swc/core": "^1.3.100",
+    "@swc/jest": "^0.2.29",
+    "@swc/plugin-styled-components": "^1.5.105",
+    "@types/enzyme": "^3.10.15",
+    "@types/enzyme-adapter-react-16": "^1.0.8",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^20.8.7",
+    "@types/react": "16",
+    "@types/react-dom": "^18.2.13",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "browserslist": "^4.22.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.11.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.3",
+    "eslint": "^8.51.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "flow-bin": "~0.174.1",
-    "flow-copy-source": "^2.0.9",
-    "flow-typed": "^3.7.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
     "jest": "^27.5.1",
     "jest-junit": "^13.0.0",
     "jest-styled-components": "^7.0.8",
     "raf": "^3.4.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
-    "stylelint": "^14.6.0",
-    "stylelint-config-recommended": "^7.0.0",
+    "styled-components": "^6.1.2",
+    "stylelint": "^15.6.0",
+    "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
-    "webpack": "^5.70.0"
-  },
-  "packageManager": "yarn@3.2.0"
+    "swc-loader": "^0.2.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^5.1.4"
+  }
 }