@tramvai/module-autoscroll 2.104.3 → 2.105.0

package/README.md

@@ -48,3 +48,35 @@ function Component() {
   return <Button onClick={navigateToWithoutScroll} />;
 }
 ```
+
+### Scroll behavior change
+
+#### Global
+
+```tsx
+import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN } from '@tramvai/module-autoscroll';
+import { provide } from '@tramvai/core';
+
+const providers = [
+  // ...,
+  provide({
+    provide: AUTOSCROLL_BEHAVIOR_MODE_TOKEN,
+    useValue: 'auto', // default is 'smooth'
+  }),
+];
+```
+
+#### Local
+
+```tsx
+import { useNavigate } from '@tramvai/module-router';
+
+function Component() {
+  const navigateToWithAutoBehavior = useNavigate({
+    url: '/url/',
+    navigateState: { autoscrollBehavior: 'auto' },
+  });
+
+  return <Button onClick={navigateToWithAutoBehavior} />;
+}
+```

package/lib/components/Autoscroll.es.js

@@ -1,10 +1,14 @@
 import { useRef, useEffect } from 'react';
 import { useRoute, useUrl } from '@tramvai/module-router';
+import { optional } from '@tinkoff/dippy';
+import { useDi } from '@tramvai/react';
+import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN } from '../tokens.es.js';
 
-const scrollToTop = () => {
+const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
+const scrollToTop = (behavior) => {
     // В некоторых браузерах не поддерживается scrollTo с одним параметром
     try {
-        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        window.scrollTo({ top: 0, left: 0, behavior });
     }
     catch (error) {
         window.scrollTo(0, 0);
@@ -14,11 +18,11 @@ const isAutoScrollEnabled = (route) => {
     var _a;
     return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
 };
-const scrollToAnchor = (anchor) => {
+const scrollToAnchor = (anchor, behavior) => {
     var _a;
     try {
         (_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: 'smooth',
+            behavior,
         });
         return true;
     }
@@ -29,12 +33,14 @@ const scrollToAnchor = (anchor) => {
 // Поведение с подскроллом похоже на
 // https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
 function Autoscroll() {
+    const globalScrollBehavior = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
     const route = useRoute();
     const url = useUrl();
     const routeRef = useRef(url);
     const shouldScroll = useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
     // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
     useEffect(() => {
+        var _a;
         if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
             routeRef.current = url;
             shouldScroll.current = isAutoScrollEnabled(route);
@@ -42,12 +48,13 @@ function Autoscroll() {
         if (!shouldScroll.current) {
             return;
         }
+        const scrollBehavior = ((_a = route === null || route === void 0 ? void 0 : route.navigateState) === null || _a === void 0 ? void 0 : _a.autoscrollBehavior) || globalScrollBehavior;
         if (!url.hash) {
-            scrollToTop();
+            scrollToTop(scrollBehavior);
             shouldScroll.current = false;
         }
         else {
-            shouldScroll.current = !scrollToAnchor(url.hash);
+            shouldScroll.current = !scrollToAnchor(url.hash, scrollBehavior);
         }
     });
     return null;

package/lib/components/Autoscroll.js

@@ -2,13 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+var react$1 = require('react');
 var moduleRouter = require('@tramvai/module-router');
+var dippy = require('@tinkoff/dippy');
+var react = require('@tramvai/react');
+var tokens = require('../tokens.js');
 
-const scrollToTop = () => {
+const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
+const scrollToTop = (behavior) => {
     // В некоторых браузерах не поддерживается scrollTo с одним параметром
     try {
-        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        window.scrollTo({ top: 0, left: 0, behavior });
     }
     catch (error) {
         window.scrollTo(0, 0);
@@ -18,11 +22,11 @@ const isAutoScrollEnabled = (route) => {
     var _a;
     return !((_a = route.navigateState) === null || _a === void 0 ? void 0 : _a.disableAutoscroll);
 };
-const scrollToAnchor = (anchor) => {
+const scrollToAnchor = (anchor, behavior) => {
     var _a;
     try {
         (_a = document.querySelector(anchor)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: 'smooth',
+            behavior,
         });
         return true;
     }
@@ -33,12 +37,14 @@ const scrollToAnchor = (anchor) => {
 // Поведение с подскроллом похоже на
 // https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
 function Autoscroll() {
+    const globalScrollBehavior = react.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
     const route = moduleRouter.useRoute();
     const url = moduleRouter.useUrl();
-    const routeRef = react.useRef(url);
-    const shouldScroll = react.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
+    const routeRef = react$1.useRef(url);
+    const shouldScroll = react$1.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route));
     // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
-    react.useEffect(() => {
+    react$1.useEffect(() => {
+        var _a;
         if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
             routeRef.current = url;
             shouldScroll.current = isAutoScrollEnabled(route);
@@ -46,12 +52,13 @@ function Autoscroll() {
         if (!shouldScroll.current) {
             return;
         }
+        const scrollBehavior = ((_a = route === null || route === void 0 ? void 0 : route.navigateState) === null || _a === void 0 ? void 0 : _a.autoscrollBehavior) || globalScrollBehavior;
         if (!url.hash) {
-            scrollToTop();
+            scrollToTop(scrollBehavior);
             shouldScroll.current = false;
         }
         else {
-            shouldScroll.current = !scrollToAnchor(url.hash);
+            shouldScroll.current = !scrollToAnchor(url.hash, scrollBehavior);
         }
     });
     return null;

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import { Autoscroll } from './components/Autoscroll';
+export * from './tokens';
 export { Autoscroll };
 export declare class AutoscrollModule {
 }

package/lib/index.es.js

@@ -3,6 +3,7 @@ import { Module } from '@tramvai/core';
 import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
 import { Autoscroll } from './components/Autoscroll.es.js';
 export { Autoscroll } from './components/Autoscroll.es.js';
+export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN } from './tokens.es.js';
 
 let AutoscrollModule = class AutoscrollModule {
 };

package/lib/index.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var core = require('@tramvai/core');
 var tokensRender = require('@tramvai/tokens-render');
 var Autoscroll = require('./components/Autoscroll.js');
+var tokens = require('./tokens.js');
 
 exports.AutoscrollModule = class AutoscrollModule {
 };
@@ -26,3 +27,4 @@ exports.AutoscrollModule = tslib.__decorate([
 ], exports.AutoscrollModule);
 
 exports.Autoscroll = Autoscroll.Autoscroll;
+exports.AUTOSCROLL_BEHAVIOR_MODE_TOKEN = tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN;

package/lib/tokens.d.ts

@@ -0,0 +1,5 @@
+export declare const AUTOSCROLL_BEHAVIOR_MODE_TOKEN: ("smooth" & {
+    __type?: "base token" | undefined;
+}) | ("auto" & {
+    __type?: "base token" | undefined;
+});

package/lib/tokens.es.js

@@ -0,0 +1,5 @@
+import { createToken } from '@tinkoff/dippy';
+
+const AUTOSCROLL_BEHAVIOR_MODE_TOKEN = createToken('autoscroll behavior');
+
+export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN };

package/lib/tokens.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dippy = require('@tinkoff/dippy');
+
+const AUTOSCROLL_BEHAVIOR_MODE_TOKEN = dippy.createToken('autoscroll behavior');
+
+exports.AUTOSCROLL_BEHAVIOR_MODE_TOKEN = AUTOSCROLL_BEHAVIOR_MODE_TOKEN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-autoscroll",
-  "version": "2.104.3",
+  "version": "2.105.0",
   "description": "Компонент с автопрокруткой к началу страницы",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -17,10 +17,11 @@
     "watch": "tsc -w"
   },
   "peerDependencies": {
-    "@tramvai/core": "2.104.3",
-    "@tramvai/module-router": "2.104.3",
-    "@tramvai/tokens-render": "2.104.3",
+    "@tramvai/react": "2.105.0",
     "@tinkoff/dippy": "0.8.15",
+    "@tramvai/core": "2.105.0",
+    "@tramvai/module-router": "2.105.0",
+    "@tramvai/tokens-render": "2.105.0",
     "react": ">=16.14.0",
     "tslib": "^2.4.0"
   },