@tramvai/module-autoscroll 2.70.1 → 2.72.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.
- package/lib/components/Autoscroll.es.js +56 -0
- package/lib/components/Autoscroll.js +60 -0
- package/lib/index.es.js +3 -55
- package/lib/index.js +3 -56
- package/package.json +7 -8
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { useRef, useEffect } from 'react';
|
|
2
|
+
import { useRoute, useUrl } from '@tramvai/module-router';
|
|
3
|
+
|
|
4
|
+
const scrollToTop = () => {
|
|
5
|
+
// В некоторых браузерах не поддерживается scrollTo с одним параметром
|
|
6
|
+
try {
|
|
7
|
+
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
8
|
+
}
|
|
9
|
+
catch (error) {
|
|
10
|
+
window.scrollTo(0, 0);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const isAutoScrollEnabled = (route) => {
|
|
14
|
+
var _a;
|
|
15
|
+
return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
|
|
16
|
+
};
|
|
17
|
+
const scrollToAnchor = (anchor) => {
|
|
18
|
+
var _a;
|
|
19
|
+
try {
|
|
20
|
+
(_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
21
|
+
behavior: 'smooth',
|
|
22
|
+
});
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
catch {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
// Поведение с подскроллом похоже на
|
|
30
|
+
// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
|
|
31
|
+
function Autoscroll() {
|
|
32
|
+
const route = useRoute();
|
|
33
|
+
const url = useUrl();
|
|
34
|
+
const routeRef = useRef(url);
|
|
35
|
+
const shouldScroll = useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
|
|
36
|
+
// Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
|
|
39
|
+
routeRef.current = url;
|
|
40
|
+
shouldScroll.current = isAutoScrollEnabled(route);
|
|
41
|
+
}
|
|
42
|
+
if (!shouldScroll.current) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (!url.hash) {
|
|
46
|
+
scrollToTop();
|
|
47
|
+
shouldScroll.current = false;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
shouldScroll.current = !scrollToAnchor(url.hash);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export { Autoscroll };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var moduleRouter = require('@tramvai/module-router');
|
|
7
|
+
|
|
8
|
+
const scrollToTop = () => {
|
|
9
|
+
// В некоторых браузерах не поддерживается scrollTo с одним параметром
|
|
10
|
+
try {
|
|
11
|
+
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
12
|
+
}
|
|
13
|
+
catch (error) {
|
|
14
|
+
window.scrollTo(0, 0);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
const isAutoScrollEnabled = (route) => {
|
|
18
|
+
var _a;
|
|
19
|
+
return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
|
|
20
|
+
};
|
|
21
|
+
const scrollToAnchor = (anchor) => {
|
|
22
|
+
var _a;
|
|
23
|
+
try {
|
|
24
|
+
(_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
25
|
+
behavior: 'smooth',
|
|
26
|
+
});
|
|
27
|
+
return true;
|
|
28
|
+
}
|
|
29
|
+
catch {
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
// Поведение с подскроллом похоже на
|
|
34
|
+
// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
|
|
35
|
+
function Autoscroll() {
|
|
36
|
+
const route = moduleRouter.useRoute();
|
|
37
|
+
const url = moduleRouter.useUrl();
|
|
38
|
+
const routeRef = react.useRef(url);
|
|
39
|
+
const shouldScroll = react.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
|
|
40
|
+
// Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
|
|
41
|
+
react.useEffect(() => {
|
|
42
|
+
if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
|
|
43
|
+
routeRef.current = url;
|
|
44
|
+
shouldScroll.current = isAutoScrollEnabled(route);
|
|
45
|
+
}
|
|
46
|
+
if (!shouldScroll.current) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
if (!url.hash) {
|
|
50
|
+
scrollToTop();
|
|
51
|
+
shouldScroll.current = false;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
shouldScroll.current = !scrollToAnchor(url.hash);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
exports.Autoscroll = Autoscroll;
|
package/lib/index.es.js
CHANGED
|
@@ -1,60 +1,8 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import { Module } from '@tramvai/core';
|
|
3
3
|
import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const scrollToTop = () => {
|
|
8
|
-
// В некоторых браузерах не поддерживается scrollTo с одним параметром
|
|
9
|
-
try {
|
|
10
|
-
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
11
|
-
}
|
|
12
|
-
catch (error) {
|
|
13
|
-
window.scrollTo(0, 0);
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
const isAutoScrollEnabled = (route) => {
|
|
17
|
-
var _a;
|
|
18
|
-
return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
|
|
19
|
-
};
|
|
20
|
-
const scrollToAnchor = (anchor) => {
|
|
21
|
-
var _a;
|
|
22
|
-
try {
|
|
23
|
-
(_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
24
|
-
behavior: 'smooth',
|
|
25
|
-
});
|
|
26
|
-
return true;
|
|
27
|
-
}
|
|
28
|
-
catch {
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
// Поведение с подскроллом похоже на
|
|
33
|
-
// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
|
|
34
|
-
function Autoscroll() {
|
|
35
|
-
const route = useRoute();
|
|
36
|
-
const url = useUrl();
|
|
37
|
-
const routeRef = useRef(url);
|
|
38
|
-
const shouldScroll = useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
|
|
39
|
-
// Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
|
|
40
|
-
useEffect(() => {
|
|
41
|
-
if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
|
|
42
|
-
routeRef.current = url;
|
|
43
|
-
shouldScroll.current = isAutoScrollEnabled(route);
|
|
44
|
-
}
|
|
45
|
-
if (!shouldScroll.current) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
if (!url.hash) {
|
|
49
|
-
scrollToTop();
|
|
50
|
-
shouldScroll.current = false;
|
|
51
|
-
}
|
|
52
|
-
else {
|
|
53
|
-
shouldScroll.current = !scrollToAnchor(url.hash);
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
4
|
+
import { Autoscroll } from './components/Autoscroll.es.js';
|
|
5
|
+
export { Autoscroll } from './components/Autoscroll.es.js';
|
|
58
6
|
|
|
59
7
|
let AutoscrollModule = class AutoscrollModule {
|
|
60
8
|
};
|
|
@@ -74,4 +22,4 @@ AutoscrollModule = __decorate([
|
|
|
74
22
|
})
|
|
75
23
|
], AutoscrollModule);
|
|
76
24
|
|
|
77
|
-
export {
|
|
25
|
+
export { AutoscrollModule };
|
package/lib/index.js
CHANGED
|
@@ -5,60 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var core = require('@tramvai/core');
|
|
7
7
|
var tokensRender = require('@tramvai/tokens-render');
|
|
8
|
-
var
|
|
9
|
-
var moduleRouter = require('@tramvai/module-router');
|
|
10
|
-
|
|
11
|
-
const scrollToTop = () => {
|
|
12
|
-
// В некоторых браузерах не поддерживается scrollTo с одним параметром
|
|
13
|
-
try {
|
|
14
|
-
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
15
|
-
}
|
|
16
|
-
catch (error) {
|
|
17
|
-
window.scrollTo(0, 0);
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
const isAutoScrollEnabled = (route) => {
|
|
21
|
-
var _a;
|
|
22
|
-
return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
|
|
23
|
-
};
|
|
24
|
-
const scrollToAnchor = (anchor) => {
|
|
25
|
-
var _a;
|
|
26
|
-
try {
|
|
27
|
-
(_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
28
|
-
behavior: 'smooth',
|
|
29
|
-
});
|
|
30
|
-
return true;
|
|
31
|
-
}
|
|
32
|
-
catch {
|
|
33
|
-
return false;
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
// Поведение с подскроллом похоже на
|
|
37
|
-
// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
|
|
38
|
-
function Autoscroll() {
|
|
39
|
-
const route = moduleRouter.useRoute();
|
|
40
|
-
const url = moduleRouter.useUrl();
|
|
41
|
-
const routeRef = react.useRef(url);
|
|
42
|
-
const shouldScroll = react.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
|
|
43
|
-
// Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
|
|
44
|
-
react.useEffect(() => {
|
|
45
|
-
if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
|
|
46
|
-
routeRef.current = url;
|
|
47
|
-
shouldScroll.current = isAutoScrollEnabled(route);
|
|
48
|
-
}
|
|
49
|
-
if (!shouldScroll.current) {
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
if (!url.hash) {
|
|
53
|
-
scrollToTop();
|
|
54
|
-
shouldScroll.current = false;
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
shouldScroll.current = !scrollToAnchor(url.hash);
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
8
|
+
var Autoscroll = require('./components/Autoscroll.js');
|
|
62
9
|
|
|
63
10
|
exports.AutoscrollModule = class AutoscrollModule {
|
|
64
11
|
};
|
|
@@ -69,7 +16,7 @@ exports.AutoscrollModule = tslib.__decorate([
|
|
|
69
16
|
provide: tokensRender.LAYOUT_OPTIONS,
|
|
70
17
|
useValue: {
|
|
71
18
|
components: {
|
|
72
|
-
autoscroll: Autoscroll,
|
|
19
|
+
autoscroll: Autoscroll.Autoscroll,
|
|
73
20
|
},
|
|
74
21
|
},
|
|
75
22
|
multi: true,
|
|
@@ -78,4 +25,4 @@ exports.AutoscrollModule = tslib.__decorate([
|
|
|
78
25
|
})
|
|
79
26
|
], exports.AutoscrollModule);
|
|
80
27
|
|
|
81
|
-
exports.Autoscroll = Autoscroll;
|
|
28
|
+
exports.Autoscroll = Autoscroll.Autoscroll;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tramvai/module-autoscroll",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.72.0",
|
|
4
4
|
"description": "Компонент с автопрокруткой к началу страницы",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"typings": "lib/index.d.ts",
|
|
@@ -13,15 +13,14 @@
|
|
|
13
13
|
"url": "git@github.com:Tinkoff/tramvai.git"
|
|
14
14
|
},
|
|
15
15
|
"scripts": {
|
|
16
|
-
"build": "tramvai-build --
|
|
17
|
-
"watch": "tsc -w"
|
|
18
|
-
"build-for-publish": "true"
|
|
16
|
+
"build": "tramvai-build --forPublish --preserveModules",
|
|
17
|
+
"watch": "tsc -w"
|
|
19
18
|
},
|
|
20
19
|
"peerDependencies": {
|
|
21
|
-
"@tramvai/core": "2.
|
|
22
|
-
"@tramvai/module-router": "2.
|
|
23
|
-
"@tramvai/tokens-render": "2.
|
|
24
|
-
"@tinkoff/dippy": "0.8.
|
|
20
|
+
"@tramvai/core": "2.72.0",
|
|
21
|
+
"@tramvai/module-router": "2.72.0",
|
|
22
|
+
"@tramvai/tokens-render": "2.72.0",
|
|
23
|
+
"@tinkoff/dippy": "0.8.13",
|
|
25
24
|
"react": ">=16.14.0",
|
|
26
25
|
"tslib": "^2.4.0"
|
|
27
26
|
},
|