@integreat-app/react-sticky-headroom 1.2.1 → 1.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 (5) hide show
  1. package/README.md +2 -2
  2. package/index.d.ts +18 -18
  3. package/index.js +3 -3
  4. package/index.js.flow +29 -10
  5. package/package.json +44 -41
package/README.md CHANGED
@@ -27,9 +27,9 @@ render () {
27
27
 
28
28
  ## Demo
29
29
 
30
- Go to [https://integreat.github.io/react-sticky-headroom/](https://integreat.github.io/react-sticky-headroom/) to view a demo:
30
+ Go to [https://digitalfabrik.github.io/react-sticky-headroom/](https://digitalfabrik.github.io/react-sticky-headroom/) to view a demo:
31
31
 
32
- [![Demo](https://raw.githubusercontent.com/Integreat/react-sticky-headroom/main/demo.gif)](https://integreat.github.io/react-sticky-headroom/)
32
+ [![Demo](https://raw.githubusercontent.com/digitalfabrik/react-sticky-headroom/main/demo.gif)](https://digitalfabrik.github.io/react-sticky-headroom/)
33
33
 
34
34
 
35
35
  ## API
package/index.d.ts CHANGED
@@ -1,18 +1,18 @@
1
- import React, { ReactNode } from 'react'
2
-
3
- declare type PropsType = {
4
- children: ReactNode,
5
- scrollHeight: number,
6
- pinStart?: number,
7
- height?: number,
8
- onStickyTopChanged?: (number) => void,
9
- positionStickyDisabled?: boolean,
10
- parent?: HTMLElement,
11
- zIndex?: number,
12
- className?: string
13
- }
14
-
15
- declare class Headroom extends React.Component<PropsType> {
16
- }
17
-
18
- export default Headroom
1
+ import React, { ReactNode } from 'react'
2
+
3
+ declare type PropsType = {
4
+ children: ReactNode,
5
+ scrollHeight: number,
6
+ pinStart?: number,
7
+ height?: number,
8
+ onStickyTopChanged?: (number) => void,
9
+ positionStickyDisabled?: boolean,
10
+ parent?: HTMLElement,
11
+ zIndex?: number,
12
+ className?: string
13
+ }
14
+
15
+ declare class Headroom extends React.Component<PropsType> {
16
+ }
17
+
18
+ export default Headroom
package/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ 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); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -19,9 +19,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
19
19
 
20
20
  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); } }
21
21
 
22
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
22
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ 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); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
package/index.js.flow CHANGED
@@ -61,10 +61,13 @@ const HeaderWrapper: StyledComponent<{|
61
61
  animation-duration: 0.2s;
62
62
  animation-timing-function: ease-out;
63
63
  ${props => props.transition === NORMAL_TRANSITION && !props.static
64
- ? 'transition: transform 0.2s ease-out;' : ''}
65
- ${props => props.transition === PINNED_TO_STATIC ? css`
64
+ ? 'transition: transform 0.2s ease-out;'
65
+ : ''}
66
+ ${props => props.transition === PINNED_TO_STATIC
67
+ ? css`
66
68
  animation-name: ${keyframesMoveUpFrom(props.animateUpFrom)};
67
- ` : ''}
69
+ `
70
+ : ''}
68
71
  ${props => props.static ? 'transition: none;' : ''}
69
72
  `
70
73
 
@@ -85,7 +88,11 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
85
88
  parent: window.document.documentElement
86
89
  }
87
90
 
88
- state: StateType = { mode: STATIC, transition: NO_TRANSITION, animateUpFrom: null }
91
+ state: StateType = {
92
+ mode: STATIC,
93
+ transition: NO_TRANSITION,
94
+ animateUpFrom: null
95
+ }
89
96
 
90
97
  /** the very last scrollTop which we know about (to determine direction changes) */
91
98
  lastKnownScrollTop: number = 0
@@ -158,7 +165,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
158
165
  */
159
166
  shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {
160
167
  if (this.state.mode === STATIC || (this.state.mode === PINNED && direction ===
161
- DOWNWARDS)) {
168
+ DOWNWARDS)) {
162
169
  return this.props.pinStart + this.props.scrollHeight >= scrollTop
163
170
  } else {
164
171
  return this.props.pinStart >= scrollTop
@@ -190,12 +197,14 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
190
197
  // If mode is static, then no transition, because we're already in the right spot
191
198
  // (and want to change transform and top properties seamlessly)
192
199
  if (mode === STATIC) {
193
- return this.state.transition === NO_TRANSITION ? NO_TRANSITION
200
+ return this.state.transition === NO_TRANSITION
201
+ ? NO_TRANSITION
194
202
  : PINNED_TO_STATIC
195
203
  }
196
204
  // mode is not static, transition when moving upwards or when we've lastly did the transition
197
205
  return direction === UPWARDS || this.state.transition === NORMAL_TRANSITION
198
- ? NORMAL_TRANSITION : NO_TRANSITION
206
+ ? NORMAL_TRANSITION
207
+ : NO_TRANSITION
199
208
  }
200
209
 
201
210
  /**
@@ -207,12 +216,18 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
207
216
  if (currentScrollTop === this.lastKnownScrollTop) {
208
217
  return
209
218
  }
210
- const direction = this.lastKnownScrollTop < currentScrollTop ? DOWNWARDS
219
+ const direction = this.lastKnownScrollTop < currentScrollTop
220
+ ? DOWNWARDS
211
221
  : UPWARDS
212
222
  newState.mode = this.determineMode(currentScrollTop, direction)
213
223
  newState.transition = this.determineTransition(newState.mode, direction)
214
224
 
215
- const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props
225
+ const {
226
+ onStickyTopChanged,
227
+ height,
228
+ scrollHeight,
229
+ pinStart
230
+ } = this.props
216
231
  if (this.state.mode === PINNED && newState.mode === STATIC) {
217
232
  // animation in the special case from pinned to static
218
233
  newState.animateUpFrom = currentScrollTop - pinStart
@@ -244,7 +259,11 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
244
259
  zIndex,
245
260
  className
246
261
  } = this.props
247
- const { mode, transition, animateUpFrom } = this.state
262
+ const {
263
+ mode,
264
+ transition,
265
+ animateUpFrom
266
+ } = this.state
248
267
  const transform = mode === UNPINNED ? -scrollHeight : 0
249
268
  const ownStickyTop = mode === STATIC ? -scrollHeight : 0
250
269
  return <HeaderWrapper
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@integreat-app/react-sticky-headroom",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "engines": {
5
5
  "node": ">=6.9",
6
6
  "npm": ">=3.8"
@@ -51,60 +51,63 @@
51
51
  "prepublishOnly": "yarn build && yarn build:demo && yarn test && yarn lint && yarn flow:check-now"
52
52
  },
53
53
  "peerDependencies": {
54
- "react": "16.x.x || 17.x.x",
54
+ "react": "16.x.x || 17.x.x || 18.x.x",
55
55
  "styled-components": "4.x.x || 5.x.x"
56
56
  },
57
57
  "devDependencies": {
58
- "@babel/cli": "^7.15.7",
59
- "@babel/core": "^7.15.5",
60
- "@babel/plugin-proposal-class-properties": "^7.14.5",
61
- "@babel/plugin-proposal-do-expressions": "^7.14.5",
62
- "@babel/plugin-proposal-export-default-from": "^7.14.5",
63
- "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
64
- "@babel/plugin-proposal-json-strings": "^7.14.5",
65
- "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5",
66
- "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
67
- "@babel/plugin-proposal-numeric-separator": "^7.14.5",
68
- "@babel/plugin-proposal-optional-chaining": "^7.14.5",
69
- "@babel/plugin-proposal-pipeline-operator": "^7.15.0",
70
- "@babel/plugin-proposal-throw-expressions": "^7.14.5",
58
+ "@babel/cli": "^7.17.6",
59
+ "@babel/core": "^7.17.8",
60
+ "@babel/eslint-parser": "^7.17.0",
61
+ "@babel/plugin-proposal-class-properties": "^7.16.7",
62
+ "@babel/plugin-proposal-do-expressions": "^7.16.7",
63
+ "@babel/plugin-proposal-export-default-from": "^7.16.7",
64
+ "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
65
+ "@babel/plugin-proposal-json-strings": "^7.16.7",
66
+ "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
67
+ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
68
+ "@babel/plugin-proposal-numeric-separator": "^7.16.7",
69
+ "@babel/plugin-proposal-optional-chaining": "^7.16.7",
70
+ "@babel/plugin-proposal-pipeline-operator": "^7.17.6",
71
+ "@babel/plugin-proposal-throw-expressions": "^7.16.7",
71
72
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
72
73
  "@babel/plugin-syntax-import-meta": "^7.10.4",
73
- "@babel/plugin-transform-react-jsx": "^7.14.9",
74
- "@babel/plugin-transform-runtime": "^7.15.0",
75
- "@babel/preset-env": "^7.15.6",
76
- "@babel/preset-flow": "^7.14.5",
77
- "@babel/preset-react": "^7.14.5",
78
- "@babel/runtime": "^7.15.4",
79
- "@integreat-app/eslint-config-babel": "^0.6.0",
80
- "@integreat-app/eslint-config-flow": "^0.6.0",
81
- "@integreat-app/eslint-config-jest": "^0.6.0",
82
- "@integreat-app/eslint-config-node": "^0.6.0",
83
- "@integreat-app/eslint-config-react": "^0.6.1",
84
- "babel-eslint": "^10.1.0",
85
- "babel-jest": "^27.2.2",
86
- "babel-loader": "^8.2.2",
87
- "babel-plugin-styled-components": "^1.13.2",
74
+ "@babel/plugin-transform-react-jsx": "^7.17.3",
75
+ "@babel/plugin-transform-runtime": "^7.17.0",
76
+ "@babel/preset-env": "^7.16.11",
77
+ "@babel/preset-flow": "^7.16.7",
78
+ "@babel/preset-react": "^7.16.7",
79
+ "@babel/runtime": "^7.17.8",
80
+ "babel-jest": "^27.5.1",
81
+ "babel-loader": "^8.2.4",
82
+ "babel-plugin-styled-components": "^2.0.6",
83
+ "browserslist": "^4.20.2",
88
84
  "enzyme": "^3.11.0",
89
85
  "enzyme-adapter-react-16": "^1.15.6",
90
86
  "enzyme-to-json": "^3.6.2",
91
- "eslint": "^7.32.0",
92
- "flow-bin": "~0.160.2",
87
+ "eslint": "^8.11.0",
88
+ "eslint-config-standard": "^16.0.3",
89
+ "eslint-plugin-flowtype": "^8.0.3",
90
+ "eslint-plugin-import": "^2.25.4",
91
+ "eslint-plugin-jest": "^26.1.3",
92
+ "eslint-plugin-node": "^11.1.0",
93
+ "eslint-plugin-promise": "^6.0.0",
94
+ "eslint-plugin-react": "^7.29.4",
95
+ "flow-bin": "~0.174.1",
93
96
  "flow-copy-source": "^2.0.9",
94
- "flow-typed": "^3.3.1",
95
- "jest": "^27.2.2",
96
- "jest-junit": "^12.3.0",
97
- "jest-styled-components": "^7.0.5",
97
+ "flow-typed": "^3.7.0",
98
+ "jest": "^27.5.1",
99
+ "jest-junit": "^13.0.0",
100
+ "jest-styled-components": "^7.0.8",
98
101
  "raf": "^3.4.1",
99
102
  "react": "^16.14.0",
100
103
  "react-dom": "^16.14.0",
101
104
  "rimraf": "^3.0.2",
102
- "styled-components": "^5.3.1",
103
- "stylelint": "^13.13.1",
104
- "stylelint-config-recommended": "^5.0.0",
105
+ "styled-components": "^5.3.3",
106
+ "stylelint": "^14.6.0",
107
+ "stylelint-config-recommended": "^7.0.0",
105
108
  "stylelint-config-styled-components": "^0.1.1",
106
109
  "stylelint-processor-styled-components": "^1.10.0",
107
- "webpack": "^5.54.0"
110
+ "webpack": "^5.70.0"
108
111
  },
109
- "dependencies": {}
112
+ "packageManager": "yarn@3.2.0"
110
113
  }