@integreat-app/react-sticky-headroom 2.2.0 → 2.2.2

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 (8) hide show
  1. package/README.md +20 -16
  2. package/index.cjs +15 -19
  3. package/index.cjs.map +1 -1
  4. package/index.d.ts.map +1 -1
  5. package/index.js +15 -19
  6. package/index.tsx +58 -78
  7. package/package.json +35 -37
  8. package/index.js.map +0 -1
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  # ReactStickyHeadroom
2
+
2
3
  [![npm badge](https://img.shields.io/npm/v/@integreat-app/react-sticky-headroom.svg)](https://www.npmjs.com/package/@integreat-app/react-sticky-headroom)
3
4
 
4
5
  ReactStickyHeadroom is a React component, that hides your header when you scroll down and shows it
@@ -16,7 +17,9 @@ The component is only compatible with styled-components v4 and higher.
16
17
  The component is inspired by [react-headroom](https://kyleamathews.github.io/react-headroom/).
17
18
 
18
19
  ## Usage
20
+
19
21
  A basic usage example:
22
+
20
23
  ```jsx
21
24
  render () {
22
25
  return <StickyHeadroom scrollHeight={100}>
@@ -31,32 +34,33 @@ Go to [https://digitalfabrik.github.io/react-sticky-headroom/](https://digitalfa
31
34
 
32
35
  [![Demo](https://raw.githubusercontent.com/digitalfabrik/react-sticky-headroom/main/demo.gif)](https://digitalfabrik.github.io/react-sticky-headroom/)
33
36
 
34
-
35
37
  ## API
38
+
36
39
  You can pass the following props to ReactStickyHeadroom:
37
- * `children: React.Node` The header component, that should be hidden and revealed
38
- * `scrollHeight: number` The maximum amount of px the header should move up when scrolling
39
- * `pinStart: number` (Default: `0`) The minimum scrollTop position where the transform should start
40
- * `height?: number` (Optional) The height of the `children` node. Used for calculating the stickyTop position for a sticky ancestor in `onStickyTopChanged`
41
- * `onStickyTopChanged?: (number) => void` Fired, when Headroom changes its state and `height` is provided. Passes the calculated stickyTop position of an ancestor node.
42
- * `positionStickyDisabled?: boolean` (Optional, Default: `false`) If true, the header will stay static (e.g. for edge 16 support)
43
- * `parent: ?HTMLElement` (Optional, Default: `document.documentElement`) The parent element firing the scroll event.
44
- * `zIndex: number` (Optional, Default: 1) The z-index used by the wrapper.
45
- * `className?: string` (Optional) A classname for applying custom styles to the wrapper. Use at your own risk.
46
40
 
41
+ - `children: React.Node` The header component, that should be hidden and revealed
42
+ - `scrollHeight: number` The maximum amount of px the header should move up when scrolling
43
+ - `pinStart: number` (Default: `0`) The minimum scrollTop position where the transform should start
44
+ - `height?: number` (Optional) The height of the `children` node. Used for calculating the stickyTop position for a sticky ancestor in `onStickyTopChanged`
45
+ - `onStickyTopChanged?: (number) => void` Fired, when Headroom changes its state and `height` is provided. Passes the calculated stickyTop position of an ancestor node.
46
+ - `positionStickyDisabled?: boolean` (Optional, Default: `false`) If true, the header will stay static (e.g. for edge 16 support)
47
+ - `parent: ?HTMLElement` (Optional, Default: `document.documentElement`) The parent element firing the scroll event.
48
+ - `zIndex: number` (Optional, Default: 1) The z-index used by the wrapper.
49
+ - `className?: string` (Optional) A classname for applying custom styles to the wrapper. Use at your own risk.
47
50
 
48
51
  ## Support
52
+
49
53
  The component generally supports:
50
- * Internet Explorer 11
51
- * Edge >= 16
52
- * Chrome >= 41
53
- * Firefox >= 40
54
- * Safari >= 6.2
54
+
55
+ - Internet Explorer 11
56
+ - Edge >= 16
57
+ - Chrome >= 41
58
+ - Firefox >= 40
59
+ - Safari >= 6.2
55
60
 
56
61
  However, if you want to support non-modern browsers, you are responsible for transpiling the code for your preferred target.
57
62
  The distributed files on npm are transpiled for ES2020.
58
63
 
59
-
60
64
  For hiding and revealing the header, the browser needs to support the css-property `position: sticky`.
61
65
  You can read about the browser support for that on [caniuse.com](https://caniuse.com/#feat=css-sticky).
62
66
  'Partial-Support' is enough for ReactStickyHeadroom to work in most cases.
package/index.cjs CHANGED
@@ -78,21 +78,21 @@ const TRANSITION_NONE = 'none';
78
78
  const TRANSITION_NORMAL = 'normal';
79
79
  const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static';
80
80
  const HeaderWrapper = _styledcomponents.default.div([
81
- "position:",
82
- ";top:",
83
- "px;z-index:",
84
- ";transform:translateY(",
85
- "px);animation-duration:0.2s;animation-timing-function:ease-out;",
86
- " ",
87
- " ",
88
- ""
81
+ `position:`,
82
+ `;top:`,
83
+ `px;z-index:`,
84
+ `;transform:translateY(`,
85
+ `px);animation-duration:0.2s;animation-timing-function:ease-out;`,
86
+ ` `,
87
+ ` `,
88
+ ``
89
89
  ], (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 ? (0, _styledcomponents.css)([
90
- "animation-name:",
91
- ";"
90
+ `animation-name:`,
91
+ `;`
92
92
  ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
93
93
  const keyframesMoveUpFrom = (from)=>(0, _styledcomponents.keyframes)([
94
- "from{transform:translateY(",
95
- "px)}to{transform:translateY(0)}"
94
+ `from{transform:translateY(`,
95
+ `px)}to{transform:translateY(0)}`
96
96
  ], Math.max(from, 0));
97
97
  var _React_PureComponent;
98
98
  class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
@@ -202,14 +202,11 @@ class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
202
202
  }, children);
203
203
  }
204
204
  constructor(...args){
205
- super(...args);
206
- _define_property(this, "state", {
205
+ super(...args), _define_property(this, "state", {
207
206
  mode: MODE_STATIC,
208
207
  transition: TRANSITION_NONE,
209
208
  animateUpFrom: null
210
- });
211
- /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0);
212
- /**
209
+ }), /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0), /**
213
210
  * Checks the current scrollTop position and updates the state accordingly
214
211
  */ _define_property(this, "update", ()=>{
215
212
  const currentScrollTop = this.getScrollTop();
@@ -230,8 +227,7 @@ class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
230
227
  }
231
228
  this.setState(newState);
232
229
  this.lastKnownScrollTop = currentScrollTop;
233
- });
234
- _define_property(this, "handleEvent", ()=>{
230
+ }), _define_property(this, "handleEvent", ()=>{
235
231
  window.requestAnimationFrame(this.update);
236
232
  });
237
233
  }
package/index.cjs.map CHANGED
@@ -1 +1 @@
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":["DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","styled","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","css","keyframesMoveUpFrom","from","keyframes","Math","max","React","Headroom","PureComponent","getScrollTop","parent","scrollTop","undefined","document","documentElement","console","warn","window","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","state","mode","pinStart","scrollHeight","determineMode","determineTransition","transition","calcStickyTop","height","render","children","positionStickyDisabled","zIndex","className","animateUpFrom","transform","ownStickyTop","lastKnownScrollTop","update","currentScrollTop","newState","onStickyTopChanged","setState","requestAnimationFrame","defaultProps"],"mappings":"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"}
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 ? 'transition: transform 0.2s ease-out;' : '')}\n ${props =>\n 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 (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {\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 ? TRANSITION_NONE : 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 || 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 = 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(mode: ModeType, height: number, scrollHeight: number): number {\n return mode === MODE_PINNED ? height : height - scrollHeight\n }\n\n render(): React.ReactElement {\n const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props\n const { mode, transition, animateUpFrom } = this.state\n const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n return (\n <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}\n\nexport default Headroom\n"],"names":["DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","styled","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","css","keyframesMoveUpFrom","from","keyframes","Math","max","React","Headroom","PureComponent","getScrollTop","parent","scrollTop","undefined","document","documentElement","console","warn","window","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","state","mode","pinStart","scrollHeight","determineMode","determineTransition","transition","calcStickyTop","height","render","children","positionStickyDisabled","zIndex","className","animateUpFrom","transform","ownStickyTop","lastKnownScrollTop","update","currentScrollTop","newState","onStickyTopChanged","setState","requestAnimationFrame","defaultProps"],"mappings":"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"}
package/index.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,CAAA;IACzB,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAA;IACpB,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAA;IAChB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,uFAAuF;IACvF,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,cAAc,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAqCD,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,IAAI,MAAM;IAetB,iBAAiB;IAIjB,iBAAiB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAU7C,oBAAoB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAQhD,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAOvC,oBAAoB;IAIpB;;;;;;;;OAQG;IACH,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,OAAO;IAQrE;;;;;OAKG;IACH,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,QAAQ;IAQpE;;OAEG;IACH,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAG,cAAc;IAgB7E;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAoBjB;IAED,WAAW,EAAE,MAAM,IAAI,CAEtB;IAED,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM;IAIlF,MAAM,IAAI,KAAK,CAAC,YAAY;CAmB7B;AAED,eAAe,QAAQ,CAAA"}
package/index.js CHANGED
@@ -22,21 +22,21 @@ const TRANSITION_NONE = 'none';
22
22
  const TRANSITION_NORMAL = 'normal';
23
23
  const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static';
24
24
  const HeaderWrapper = styled.div([
25
- "position:",
26
- ";top:",
27
- "px;z-index:",
28
- ";transform:translateY(",
29
- "px);animation-duration:0.2s;animation-timing-function:ease-out;",
30
- " ",
31
- " ",
32
- ""
25
+ `position:`,
26
+ `;top:`,
27
+ `px;z-index:`,
28
+ `;transform:translateY(`,
29
+ `px);animation-duration:0.2s;animation-timing-function:ease-out;`,
30
+ ` `,
31
+ ` `,
32
+ ``
33
33
  ], (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([
34
- "animation-name:",
35
- ";"
34
+ `animation-name:`,
35
+ `;`
36
36
  ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
37
37
  const keyframesMoveUpFrom = (from)=>keyframes([
38
- "from{transform:translateY(",
39
- "px)}to{transform:translateY(0)}"
38
+ `from{transform:translateY(`,
39
+ `px)}to{transform:translateY(0)}`
40
40
  ], Math.max(from, 0));
41
41
  var _React_PureComponent;
42
42
  class Headroom extends (_React_PureComponent = React.PureComponent) {
@@ -146,14 +146,11 @@ class Headroom extends (_React_PureComponent = React.PureComponent) {
146
146
  }, children);
147
147
  }
148
148
  constructor(...args){
149
- super(...args);
150
- _define_property(this, "state", {
149
+ super(...args), _define_property(this, "state", {
151
150
  mode: MODE_STATIC,
152
151
  transition: TRANSITION_NONE,
153
152
  animateUpFrom: null
154
- });
155
- /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0);
156
- /**
153
+ }), /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0), /**
157
154
  * Checks the current scrollTop position and updates the state accordingly
158
155
  */ _define_property(this, "update", ()=>{
159
156
  const currentScrollTop = this.getScrollTop();
@@ -174,8 +171,7 @@ class Headroom extends (_React_PureComponent = React.PureComponent) {
174
171
  }
175
172
  this.setState(newState);
176
173
  this.lastKnownScrollTop = currentScrollTop;
177
- });
178
- _define_property(this, "handleEvent", ()=>{
174
+ }), _define_property(this, "handleEvent", ()=>{
179
175
  window.requestAnimationFrame(this.update);
180
176
  });
181
177
  }
package/index.tsx CHANGED
@@ -18,55 +18,54 @@ type TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof
18
18
 
19
19
  type PropsType = {
20
20
  /** The child node to be displayed as a header */
21
- children: React.ReactNode,
21
+ children: React.ReactNode
22
22
  /** The maximum amount of px the header should move up when scrolling */
23
- scrollHeight: number,
23
+ scrollHeight: number
24
24
  /** The minimum scrollTop position where the transform should start */
25
- pinStart: number,
25
+ pinStart: number
26
26
  /** Used for calculating the stickyTop position of an ancestor */
27
- height?: number,
27
+ height?: number
28
28
  /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */
29
- onStickyTopChanged?: (stickyTop: number) => void,
29
+ onStickyTopChanged?: (stickyTop: number) => void
30
30
  /** True, if sticky position should be disabled (e.g. for edge 16 support) */
31
- positionStickyDisabled?: boolean,
31
+ positionStickyDisabled?: boolean
32
32
  /** The parent element firing the scroll event. Defaults to document.documentElement */
33
- parent?: HTMLElement | null,
33
+ parent?: HTMLElement | null
34
34
  /** The z-index used by the wrapper. Defaults to 1. */
35
- zIndex?: number,
35
+ zIndex?: number
36
36
  /** A classname for applying custom styles to the wrapper. Use at your own risk. */
37
37
  className?: string
38
38
  }
39
39
 
40
40
  type StateType = {
41
- mode: ModeType,
42
- transition: TransitionType,
41
+ mode: ModeType
42
+ transition: TransitionType
43
43
  animateUpFrom: number | null
44
44
  }
45
45
 
46
46
  const HeaderWrapper = styled.div<{
47
- $positionStickyDisabled: boolean,
48
- $translateY: number,
49
- $transition: TransitionType,
50
- $animateUpFrom: number | null,
51
- $zIndex?: number,
52
- $top: number,
47
+ $positionStickyDisabled: boolean
48
+ $translateY: number
49
+ $transition: TransitionType
50
+ $animateUpFrom: number | null
51
+ $zIndex?: number
52
+ $top: number
53
53
  $static: boolean
54
54
  }>`
55
- position: ${props => props.$positionStickyDisabled ? 'static' : 'sticky'};
55
+ position: ${props => (props.$positionStickyDisabled ? 'static' : 'sticky')};
56
56
  top: ${props => props.$top}px;
57
57
  z-index: ${props => props.$zIndex};
58
58
  transform: translateY(${props => props.$translateY}px);
59
59
  animation-duration: 0.2s;
60
60
  animation-timing-function: ease-out;
61
- ${props => props.$transition === TRANSITION_NORMAL && !props.$static
62
- ? 'transition: transform 0.2s ease-out;'
63
- : ''}
64
- ${props => props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null
65
- ? css`
66
- animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
67
- `
68
- : ''}
69
- ${props => props.$static ? 'transition: none;' : ''}
61
+ ${props => (props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '')}
62
+ ${props =>
63
+ props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null
64
+ ? css`
65
+ animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
66
+ `
67
+ : ''}
68
+ ${props => (props.$static ? 'transition: none;' : '')}
70
69
  `
71
70
 
72
71
  const keyframesMoveUpFrom = (from: number) => keyframes`
@@ -80,16 +79,16 @@ const keyframesMoveUpFrom = (from: number) => keyframes`
80
79
  `
81
80
 
82
81
  class Headroom extends React.PureComponent<PropsType, StateType> {
83
- static defaultProps: { pinStart: number, zIndex: number, parent: HTMLElement | null } = {
82
+ static defaultProps: { pinStart: number; zIndex: number; parent: HTMLElement | null } = {
84
83
  pinStart: 0,
85
84
  zIndex: 1,
86
- parent: window.document.documentElement
85
+ parent: window.document.documentElement,
87
86
  }
88
87
 
89
88
  state: StateType = {
90
89
  mode: MODE_STATIC,
91
90
  transition: TRANSITION_NONE,
92
- animateUpFrom: null
91
+ animateUpFrom: null,
93
92
  }
94
93
 
95
94
  /** the very last scrollTop which we know about (to determine direction changes) */
@@ -98,7 +97,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
98
97
  /**
99
98
  * @returns {number} the current scrollTop position of the window
100
99
  */
101
- getScrollTop (): number {
100
+ getScrollTop(): number {
102
101
  const parent = this.props.parent
103
102
  if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {
104
103
  return parent.scrollTop
@@ -113,11 +112,11 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
113
112
  return window.pageYOffset
114
113
  }
115
114
 
116
- componentDidMount () {
115
+ componentDidMount() {
117
116
  this.addScrollListener(this.props.parent)
118
117
  }
119
118
 
120
- addScrollListener (parent?: HTMLElement | null) {
119
+ addScrollListener(parent?: HTMLElement | null) {
121
120
  if (parent === window.document.documentElement) {
122
121
  window.addEventListener('scroll', this.handleEvent)
123
122
  } else if (parent) {
@@ -127,7 +126,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
127
126
  }
128
127
  }
129
128
 
130
- removeScrollListener (parent?: HTMLElement | null) {
129
+ removeScrollListener(parent?: HTMLElement | null) {
131
130
  if (parent === window.document.documentElement) {
132
131
  window.removeEventListener('scroll', this.handleEvent)
133
132
  } else if (parent) {
@@ -135,14 +134,14 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
135
134
  }
136
135
  }
137
136
 
138
- componentDidUpdate (prevProps: PropsType) {
137
+ componentDidUpdate(prevProps: PropsType) {
139
138
  if (prevProps.parent !== this.props.parent) {
140
139
  this.removeScrollListener(prevProps.parent)
141
140
  this.addScrollListener(this.props.parent)
142
141
  }
143
142
  }
144
143
 
145
- componentWillUnmount () {
144
+ componentWillUnmount() {
146
145
  this.removeScrollListener(this.props.parent)
147
146
  }
148
147
 
@@ -155,11 +154,8 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
155
154
  * @param direction the current direction
156
155
  * @returns {boolean} if we should set the header static
157
156
  */
158
- shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {
159
- if (
160
- this.state.mode === MODE_STATIC ||
161
- (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)
162
- ) {
157
+ shouldSetStatic(scrollTop: number, direction: DirectionType): boolean {
158
+ if (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {
163
159
  return this.props.pinStart + this.props.scrollHeight >= scrollTop
164
160
  } else {
165
161
  return this.props.pinStart >= scrollTop
@@ -172,7 +168,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
172
168
  * @param {string} direction
173
169
  * @returns {string} the next mode of Headroom
174
170
  */
175
- determineMode (scrollTop: number, direction: DirectionType): ModeType {
171
+ determineMode(scrollTop: number, direction: DirectionType): ModeType {
176
172
  if (this.shouldSetStatic(scrollTop, direction)) {
177
173
  return MODE_STATIC
178
174
  } else {
@@ -183,7 +179,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
183
179
  /**
184
180
  * @returns {TransitionType} determines the kind of transition
185
181
  */
186
- determineTransition (mode: ModeType, direction: DirectionType): TransitionType {
182
+ determineTransition(mode: ModeType, direction: DirectionType): TransitionType {
187
183
  // Handle special case: If we're pinned and going to static, we need a special transition using css animation
188
184
  if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {
189
185
  return TRANSITION_PINNED_TO_STATIC
@@ -191,13 +187,10 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
191
187
  // If mode is static, then no transition, because we're already in the right spot
192
188
  // (and want to change transform and top properties seamlessly)
193
189
  if (mode === MODE_STATIC) {
194
- return this.state.transition === TRANSITION_NONE
195
- ? TRANSITION_NONE
196
- : TRANSITION_PINNED_TO_STATIC
190
+ return this.state.transition === TRANSITION_NONE ? TRANSITION_NONE : TRANSITION_PINNED_TO_STATIC
197
191
  }
198
192
  // mode is not static, transition when moving upwards or when we've lastly did the transition
199
- return direction === DIRECTION_UP ||
200
- this.state.transition === TRANSITION_NORMAL
193
+ return direction === DIRECTION_UP || this.state.transition === TRANSITION_NORMAL
201
194
  ? TRANSITION_NORMAL
202
195
  : TRANSITION_NONE
203
196
  }
@@ -211,8 +204,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
211
204
  if (currentScrollTop === this.lastKnownScrollTop) {
212
205
  return
213
206
  }
214
- const direction =
215
- this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP
207
+ const direction = this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP
216
208
  newState.mode = this.determineMode(currentScrollTop, direction)
217
209
  newState.transition = this.determineTransition(newState.mode, direction)
218
210
 
@@ -232,40 +224,28 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
232
224
  window.requestAnimationFrame(this.update)
233
225
  }
234
226
 
235
- static calcStickyTop (
236
- mode: ModeType,
237
- height: number,
238
- scrollHeight: number
239
- ): number {
227
+ static calcStickyTop(mode: ModeType, height: number, scrollHeight: number): number {
240
228
  return mode === MODE_PINNED ? height : height - scrollHeight
241
229
  }
242
230
 
243
- render (): React.ReactElement {
244
- const {
245
- children,
246
- scrollHeight,
247
- positionStickyDisabled,
248
- zIndex,
249
- className
250
- } = this.props
251
- const {
252
- mode,
253
- transition,
254
- animateUpFrom
255
- } = this.state
231
+ render(): React.ReactElement {
232
+ const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props
233
+ const { mode, transition, animateUpFrom } = this.state
256
234
  const transform = mode === MODE_UNPINNED ? -scrollHeight : 0
257
235
  const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0
258
- return <HeaderWrapper
259
- className={className}
260
- $translateY={transform}
261
- $top={ownStickyTop}
262
- $transition={transition}
263
- $positionStickyDisabled={!!positionStickyDisabled}
264
- $static={mode === MODE_STATIC}
265
- $animateUpFrom={animateUpFrom}
266
- $zIndex={zIndex}>
267
- {children}
268
- </HeaderWrapper>
236
+ return (
237
+ <HeaderWrapper
238
+ className={className}
239
+ $translateY={transform}
240
+ $top={ownStickyTop}
241
+ $transition={transition}
242
+ $positionStickyDisabled={!!positionStickyDisabled}
243
+ $static={mode === MODE_STATIC}
244
+ $animateUpFrom={animateUpFrom}
245
+ $zIndex={zIndex}>
246
+ {children}
247
+ </HeaderWrapper>
248
+ )
269
249
  }
270
250
  }
271
251
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@integreat-app/react-sticky-headroom",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "engines": {
5
5
  "node": ">=18",
6
6
  "npm": ">=10"
@@ -21,6 +21,7 @@
21
21
  "index.d.ts.map",
22
22
  "index.tsx"
23
23
  ],
24
+ "sideEffects": false,
24
25
  "exports": {
25
26
  "import": "./index.js",
26
27
  "require": "./index.cjs",
@@ -62,48 +63,45 @@
62
63
  "safari >= 6.2"
63
64
  ],
64
65
  "peerDependencies": {
65
- "react": "16.x.x || 17.x.x || 18.x.x",
66
+ "react": "16.x.x || 17.x.x || 18.x.x || 19.x.x",
66
67
  "styled-components": "4.x.x || 5.x.x || 6.x.x"
67
68
  },
68
69
  "devDependencies": {
69
70
  "@stylelint/postcss-css-in-js": "^0.38.0",
70
- "@swc/core": "^1.3.100",
71
- "@swc/jest": "^0.2.29",
72
- "@swc/plugin-styled-components": "^1.5.105",
73
- "@types/enzyme": "^3.10.15",
74
- "@types/enzyme-adapter-react-16": "^1.0.8",
75
- "@types/jest": "^29.5.6",
76
- "@types/node": "^20.8.7",
77
- "@types/react": "16",
78
- "@types/react-dom": "^18.2.13",
79
- "@types/styled-components": "^5.1.34",
80
- "@typescript-eslint/eslint-plugin": "6.8.0",
81
- "@typescript-eslint/parser": "^6.8.0",
82
- "browserslist": "^4.22.2",
83
- "enzyme": "^3.11.0",
84
- "enzyme-adapter-react-16": "^1.15.6",
85
- "enzyme-to-json": "^3.6.2",
86
- "eslint": "^8.51.0",
71
+ "@swc/core": "^1.11.24",
72
+ "@swc/jest": "^0.2.38",
73
+ "@swc/plugin-styled-components": "^7.1.5",
74
+ "@types/jest": "^29.5.14",
75
+ "@types/node": "^22.15.21",
76
+ "@types/react-dom": "^19.1.5",
77
+ "@typescript-eslint/eslint-plugin": "^8.32.1",
78
+ "@typescript-eslint/parser": "^8.32.1",
79
+ "browserslist": "^4.24.5",
80
+ "eslint": "^8.57.1",
81
+ "eslint-config-prettier": "^10.1.5",
87
82
  "eslint-config-standard": "^17.1.0",
88
- "eslint-plugin-import": "^2.28.1",
89
- "eslint-plugin-jest": "^27.4.2",
83
+ "eslint-plugin-import": "^2.31.0",
84
+ "eslint-plugin-jest": "^28.11.0",
90
85
  "eslint-plugin-node": "^11.1.0",
91
- "eslint-plugin-promise": "^6.1.1",
92
- "eslint-plugin-react": "^7.33.2",
93
- "jest": "^27.5.1",
94
- "jest-junit": "^13.0.0",
95
- "jest-styled-components": "^7.0.8",
86
+ "eslint-plugin-promise": "^6.6.0",
87
+ "eslint-plugin-react": "^7.37.5",
88
+ "jest": "^29.7.0",
89
+ "jest-environment-jsdom": "^29.7.0",
90
+ "jest-junit": "^16.0.0",
91
+ "jest-styled-components": "^7.2.0",
92
+ "postcss": "^8.5.3",
93
+ "postcss-styled-syntax": "^0.7.1",
94
+ "prettier": "^3.5.3",
96
95
  "raf": "^3.4.1",
97
- "react": "^16.14.0",
98
- "react-dom": "^16.14.0",
99
- "styled-components": "^6.1.2",
100
- "stylelint": "^15.6.0",
101
- "stylelint-config-recommended": "^12.0.0",
102
- "stylelint-config-styled-components": "^0.1.1",
103
- "swc-loader": "^0.2.3",
104
- "ts-node": "^10.9.1",
105
- "typescript": "^5.2.2",
106
- "webpack": "^5.70.0",
107
- "webpack-cli": "^5.1.4"
96
+ "react": "^19.1.0",
97
+ "react-dom": "^19.1.0",
98
+ "styled-components": "^6.1.18",
99
+ "stylelint": "^16.19.1",
100
+ "stylelint-config-recommended": "^16.0.0",
101
+ "swc-loader": "^0.2.6",
102
+ "ts-node": "^10.9.2",
103
+ "typescript": "^5.8.3",
104
+ "webpack": "^5.99.9",
105
+ "webpack-cli": "^6.0.1"
108
106
  }
109
107
  }
package/index.js.map DELETED
@@ -1 +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":["DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","styled","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","css","keyframesMoveUpFrom","from","keyframes","Math","max","Headroom","React","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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"}