@tramvai/module-autoscroll 5.9.2 → 5.14.9

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 (9) hide show
  1. package/README.md +17 -0
  2. package/lib/components/Autoscroll.es.js +10 -11
  3. package/lib/components/Autoscroll.js +9 -10
  4. package/lib/index.es.js +1 -1
  5. package/lib/index.js +1 -0
  6. package/lib/tokens.d.ts +3 -0
  7. package/lib/tokens.es.js +2 -1
  8. package/lib/tokens.js +2 -0
  9. package/package.json +5 -5
package/README.md CHANGED
@@ -80,3 +80,20 @@ function Component() {
80
80
  return <Button onClick={navigateToWithAutoBehavior} />;
81
81
  }
82
82
  ```
83
+
84
+ ### ScrollTo top change
85
+
86
+ #### Global
87
+
88
+ ```tsx
89
+ import { AUTOSCROLL_SCROLL_TOP_TOKEN } from '@tramvai/module-autoscroll';
90
+ import { provide } from '@tramvai/core';
91
+
92
+ const providers = [
93
+ // ...,
94
+ provide({
95
+ provide: AUTOSCROLL_SCROLL_TOP_TOKEN,
96
+ useValue: -1, // default is 0
97
+ }),
98
+ ];
99
+ ```
package/lib/components/Autoscroll.es.js CHANGED
@@ -2,26 +2,25 @@ import { useRef, useEffect } from 'react';
2
2
  import { useRoute, useUrl } from '@tramvai/module-router';
3
3
  import { optional } from '@tinkoff/dippy';
4
4
  import { useDi } from '@tramvai/react';
5
- import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN } from '../tokens.es.js';
5
+ import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from '../tokens.es.js';
6
6
 
7
7
  const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
8
- const scrollToTop = (behavior) => {
8
+ const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
9
+ const scrollToTop = (behavior, top) => {
9
10
  // В некоторых браузерах не поддерживается scrollTo с одним параметром
10
11
  try {
11
- window.scrollTo({ top: 0, left: 0, behavior });
12
+ window.scrollTo({ top, left: 0, behavior });
12
13
  }
13
14
  catch (error) {
14
- window.scrollTo(0, 0);
15
+ window.scrollTo(0, top);
15
16
  }
16
17
  };
17
18
  const isAutoScrollEnabled = (route) => {
18
- var _a;
19
- return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
19
+ return !route.navigateState?.disableAutoscroll;
20
20
  };
21
21
  const scrollToAnchor = (anchor, behavior) => {
22
- var _a;
23
22
  try {
24
- (_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
23
+ document.querySelector(anchor)?.scrollIntoView({
25
24
  behavior,
26
25
  });
27
26
  return true;
@@ -34,13 +33,13 @@ const scrollToAnchor = (anchor, behavior) => {
34
33
  // https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
35
34
  function Autoscroll() {
36
35
  const globalScrollBehavior = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
36
+ const scrollTop = useDi(optional(AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
37
37
  const route = useRoute();
38
38
  const url = useUrl();
39
39
  const routeRef = useRef(url);
40
40
  const shouldScroll = useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
41
41
  // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
42
42
  useEffect(() => {
43
- var _a;
44
43
  if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
45
44
  routeRef.current = url;
46
45
  shouldScroll.current = isAutoScrollEnabled(route);
@@ -48,9 +47,9 @@ function Autoscroll() {
48
47
  if (!shouldScroll.current) {
49
48
  return;
50
49
  }
51
- const scrollBehavior = ((_a = route === null || route === void 0 ? void 0 : route.navigateState) === null || _a === void 0 ? void 0 : _a.autoscrollBehavior) || globalScrollBehavior;
50
+ const scrollBehavior = route?.navigateState?.autoscrollBehavior || globalScrollBehavior;
52
51
  if (!url.hash) {
53
- scrollToTop(scrollBehavior);
52
+ scrollToTop(scrollBehavior, scrollTop);
54
53
  shouldScroll.current = false;
55
54
  }
56
55
  else {
package/lib/components/Autoscroll.js CHANGED
@@ -9,23 +9,22 @@ var react = require('@tramvai/react');
9
9
  var tokens = require('../tokens.js');
10
10
 
11
11
  const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
12
- const scrollToTop = (behavior) => {
12
+ const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
13
+ const scrollToTop = (behavior, top) => {
13
14
  // В некоторых браузерах не поддерживается scrollTo с одним параметром
14
15
  try {
15
- window.scrollTo({ top: 0, left: 0, behavior });
16
+ window.scrollTo({ top, left: 0, behavior });
16
17
  }
17
18
  catch (error) {
18
- window.scrollTo(0, 0);
19
+ window.scrollTo(0, top);
19
20
  }
20
21
  };
21
22
  const isAutoScrollEnabled = (route) => {
22
- var _a;
23
- return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
23
+ return !route.navigateState?.disableAutoscroll;
24
24
  };
25
25
  const scrollToAnchor = (anchor, behavior) => {
26
- var _a;
27
26
  try {
28
- (_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
27
+ document.querySelector(anchor)?.scrollIntoView({
29
28
  behavior,
30
29
  });
31
30
  return true;
@@ -38,13 +37,13 @@ const scrollToAnchor = (anchor, behavior) => {
38
37
  // https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
39
38
  function Autoscroll() {
40
39
  const globalScrollBehavior = react.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
40
+ const scrollTop = react.useDi(dippy.optional(tokens.AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
41
41
  const route = moduleRouter.useRoute();
42
42
  const url = moduleRouter.useUrl();
43
43
  const routeRef = react$1.useRef(url);
44
44
  const shouldScroll = react$1.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
45
45
  // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
46
46
  react$1.useEffect(() => {
47
- var _a;
48
47
  if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
49
48
  routeRef.current = url;
50
49
  shouldScroll.current = isAutoScrollEnabled(route);
@@ -52,9 +51,9 @@ function Autoscroll() {
52
51
  if (!shouldScroll.current) {
53
52
  return;
54
53
  }
55
- const scrollBehavior = ((_a = route === null || route === void 0 ? void 0 : route.navigateState) === null || _a === void 0 ? void 0 : _a.autoscrollBehavior) || globalScrollBehavior;
54
+ const scrollBehavior = route?.navigateState?.autoscrollBehavior || globalScrollBehavior;
56
55
  if (!url.hash) {
57
- scrollToTop(scrollBehavior);
56
+ scrollToTop(scrollBehavior, scrollTop);
58
57
  shouldScroll.current = false;
59
58
  }
60
59
  else {
package/lib/index.es.js CHANGED
@@ -3,7 +3,7 @@ import { Module } from '@tramvai/core';
3
3
  import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
4
4
  import { Autoscroll } from './components/Autoscroll.es.js';
5
5
  export { Autoscroll } from './components/Autoscroll.es.js';
6
- export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN } from './tokens.es.js';
6
+ export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from './tokens.es.js';
7
7
 
8
8
  let AutoscrollModule = class AutoscrollModule {
9
9
  };
package/lib/index.js CHANGED
@@ -28,3 +28,4 @@ exports.AutoscrollModule = tslib.__decorate([
28
28
 
29
29
  exports.Autoscroll = Autoscroll.Autoscroll;
30
30
  exports.AUTOSCROLL_BEHAVIOR_MODE_TOKEN = tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN;
31
+ exports.AUTOSCROLL_SCROLL_TOP_TOKEN = tokens.AUTOSCROLL_SCROLL_TOP_TOKEN;
package/lib/tokens.d.ts CHANGED
@@ -3,4 +3,7 @@ export declare const AUTOSCROLL_BEHAVIOR_MODE_TOKEN: ("smooth" & {
3
3
  }) | ("auto" & {
4
4
  __type?: "base token" | undefined;
5
5
  });
6
+ export declare const AUTOSCROLL_SCROLL_TOP_TOKEN: number & {
7
+ __type?: "base token" | undefined;
8
+ };
6
9
  //# sourceMappingURL=tokens.d.ts.map
package/lib/tokens.es.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { createToken } from '@tinkoff/dippy';
2
2
 
3
3
  const AUTOSCROLL_BEHAVIOR_MODE_TOKEN = createToken('autoscroll behavior');
4
+ const AUTOSCROLL_SCROLL_TOP_TOKEN = createToken('autoscroll scroll top');
4
5
 
5
- export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN };
6
+ export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN };
package/lib/tokens.js CHANGED
@@ -5,5 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var dippy = require('@tinkoff/dippy');
6
6
 
7
7
  const AUTOSCROLL_BEHAVIOR_MODE_TOKEN = dippy.createToken('autoscroll behavior');
8
+ const AUTOSCROLL_SCROLL_TOP_TOKEN = dippy.createToken('autoscroll scroll top');
8
9
 
9
10
  exports.AUTOSCROLL_BEHAVIOR_MODE_TOKEN = AUTOSCROLL_BEHAVIOR_MODE_TOKEN;
11
+ exports.AUTOSCROLL_SCROLL_TOP_TOKEN = AUTOSCROLL_SCROLL_TOP_TOKEN;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tramvai/module-autoscroll",
3
- "version": "5.9.2",
3
+ "version": "5.14.9",
4
4
  "description": "Компонент с автопрокруткой к началу страницы",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
@@ -17,11 +17,11 @@
17
17
  "watch": "tsc -w"
18
18
  },
19
19
  "peerDependencies": {
20
- "@tramvai/react": "5.9.2",
20
+ "@tramvai/react": "5.14.9",
21
21
  "@tinkoff/dippy": "0.11.3",
22
- "@tramvai/core": "5.9.2",
23
- "@tramvai/module-router": "5.9.2",
24
- "@tramvai/tokens-render": "5.9.2",
22
+ "@tramvai/core": "5.14.9",
23
+ "@tramvai/module-router": "5.14.9",
24
+ "@tramvai/tokens-render": "5.14.9",
25
25
  "react": ">=16.14.0",
26
26
  "tslib": "^2.4.0"
27
27
  },