@twreporter/universal-header 3.0.3-rc.2 → 3.0.3
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.
- package/CHANGELOG.md +19 -0
- package/lib/containers/header.js +26 -19
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.3-rc.3...@twreporter/universal-header@3.0.3) (2024-06-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @twreporter/universal-header
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [3.0.3-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.3-rc.2...@twreporter/universal-header@3.0.3-rc.3) (2024-06-23)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **universal-header:** fix scroll hide issue ([7e86579](https://github.com/twreporter/twreporter-npm-packages/commit/7e86579d01ee4452cc902ef105a945be41c158c0))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [3.0.3-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.3-rc.1...@twreporter/universal-header@3.0.3-rc.2) (2024-06-19)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @twreporter/universal-header
|
package/lib/containers/header.js
CHANGED
|
@@ -57,27 +57,13 @@ var Container = function Container(_ref) {
|
|
|
57
57
|
var readyY = (0, _react.useRef)(0);
|
|
58
58
|
var isTransforming = (0, _react.useRef)(false);
|
|
59
59
|
var transformTimer = (0, _react.useRef)(null);
|
|
60
|
-
var handleScroll = (0, _react.useCallback)(function () {
|
|
61
|
-
lastKnownPageYOffset.current = window.pageYOffset;
|
|
62
|
-
if (!ticking.current) {
|
|
63
|
-
window.requestAnimationFrame(function () {
|
|
64
|
-
updateScrollState(lastKnownPageYOffset.current);
|
|
65
|
-
ticking.current = false;
|
|
66
|
-
});
|
|
67
|
-
ticking.current = true;
|
|
68
|
-
}
|
|
69
|
-
}, []);
|
|
70
|
-
var updateScrollState = (0, _react.useCallback)(function (currentScrollTop) {
|
|
71
|
-
var scrollDirection = currentScrollTop > currentY.current ? 'down' : 'up';
|
|
72
|
-
currentY.current = currentScrollTop;
|
|
73
|
-
var updateState = getScrollState(currentScrollTop, scrollDirection);
|
|
74
|
-
setToUseNarrow(updateState.toUseNarrow);
|
|
75
|
-
setHideHeader(updateState.hideHeader);
|
|
76
|
-
}, []);
|
|
77
60
|
var getScrollState = (0, _react.useCallback)(function (scrollTop, scrollDirection) {
|
|
78
61
|
var isCurrentNarrow = toUseNarrow;
|
|
79
62
|
var nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
|
|
80
|
-
var scrollState = {
|
|
63
|
+
var scrollState = {
|
|
64
|
+
toUseNarrow: toUseNarrow,
|
|
65
|
+
hideHeader: hideHeader
|
|
66
|
+
};
|
|
81
67
|
if (isTransforming.current) {
|
|
82
68
|
return scrollState;
|
|
83
69
|
}
|
|
@@ -106,7 +92,28 @@ var Container = function Container(_ref) {
|
|
|
106
92
|
}
|
|
107
93
|
}
|
|
108
94
|
return scrollState;
|
|
109
|
-
}, [toUseNarrow]);
|
|
95
|
+
}, [toUseNarrow, hideHeader]);
|
|
96
|
+
var updateScrollState = (0, _react.useCallback)(function (currentScrollTop) {
|
|
97
|
+
var scrollDirection = currentScrollTop > currentY.current ? 'down' : 'up';
|
|
98
|
+
currentY.current = currentScrollTop;
|
|
99
|
+
var updateState = getScrollState(currentScrollTop, scrollDirection);
|
|
100
|
+
setToUseNarrow(function () {
|
|
101
|
+
return updateState.toUseNarrow;
|
|
102
|
+
});
|
|
103
|
+
setHideHeader(function () {
|
|
104
|
+
return updateState.hideHeader;
|
|
105
|
+
});
|
|
106
|
+
}, [getScrollState]);
|
|
107
|
+
var handleScroll = (0, _react.useCallback)(function () {
|
|
108
|
+
lastKnownPageYOffset.current = window.pageYOffset;
|
|
109
|
+
if (!ticking.current) {
|
|
110
|
+
window.requestAnimationFrame(function () {
|
|
111
|
+
updateScrollState(lastKnownPageYOffset.current);
|
|
112
|
+
ticking.current = false;
|
|
113
|
+
});
|
|
114
|
+
ticking.current = true;
|
|
115
|
+
}
|
|
116
|
+
}, [updateScrollState]);
|
|
110
117
|
(0, _react.useEffect)(function () {
|
|
111
118
|
window.addEventListener('scroll', handleScroll, {
|
|
112
119
|
passive: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twreporter/universal-header",
|
|
3
|
-
"version": "3.0.3
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "Universal header of TWReporter sites",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@reduxjs/toolkit": "^2.2.5",
|
|
24
24
|
"@twreporter/core": "^1.22.1",
|
|
25
|
-
"@twreporter/react-components": "^9.1.0
|
|
25
|
+
"@twreporter/react-components": "^9.1.0",
|
|
26
26
|
"lodash": "^4.17.11",
|
|
27
27
|
"prop-types": "^15.6.2",
|
|
28
28
|
"querystring": "^0.2.0",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"babel-loader": "^8.2.5",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "d4e15f1555f27b231f403fb987576cec3c23e800"
|
|
57
57
|
}
|