@etsoo/react 1.6.71 → 1.6.73

package/lib/components/ScrollRestoration.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Scroll restoration
+ */
+export declare function ScrollRestoration(): JSX.Element;

package/lib/components/ScrollRestoration.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { useWindowScroll } from '../uses/useWindowScroll';
+const urls = {};
+/**
+ * Scroll restoration
+ */
+export function ScrollRestoration() {
+    // Location key
+    const { key } = useLocation();
+    // Mounted
+    const mounted = React.useRef(false);
+    // Detect scroll
+    const data = useWindowScroll();
+    if (mounted.current) {
+        urls[key] = data;
+    }
+    // Setup
+    React.useEffect(() => {
+        const pos = urls[key];
+        if (pos) {
+            window.scrollTo(pos.x, pos.y);
+        }
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, [key]);
+    return React.createElement(React.Fragment, null);
+}

package/lib/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/GridMethodRef';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
+export * from './components/ScrollRestoration';
 export * from './notifier/Notifier';
 export * from '@etsoo/notificationbase';
 export * from './states/CultureState';

package/lib/index.js

@@ -12,6 +12,7 @@ export * from './components/GridMethodRef';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
+export * from './components/ScrollRestoration';
 // notifier
 export * from './notifier/Notifier';
 export * from '@etsoo/notificationbase';

package/lib/uses/useWindowScroll.d.ts

@@ -1,4 +1,7 @@
-interface IScrollPos {
+/**
+ * Window scroll position
+ */
+export interface IScrollPos {
     x: number;
     y: number;
 }
@@ -7,4 +10,3 @@ interface IScrollPos {
  * @returns Scroll location
  */
 export declare const useWindowScroll: () => IScrollPos;
-export {};

package/lib/uses/useWindowScroll.js

@@ -22,7 +22,7 @@ export const useWindowScroll = () => {
                 requestAnimationFrameSeed = window.requestAnimationFrame(() => {
                     ticking = false;
                     requestAnimationFrameSeed = 0;
-                    if (lastPos.x != lastPos.x || lastPos.y != lastPos.y) {
+                    if (lastPos.x != pos.x || lastPos.y != pos.y) {
                         setPos(lastPos);
                     }
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.6.71",
+    "version": "1.6.73",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,20 +50,20 @@
         "@emotion/css": "^11.10.8",
         "@emotion/react": "^11.10.8",
         "@emotion/styled": "^11.10.8",
-        "@etsoo/appscript": "^1.3.97",
+        "@etsoo/appscript": "^1.3.99",
         "@etsoo/notificationbase": "^1.1.24",
         "@etsoo/shared": "^1.2.1",
-        "@types/react": "^18.2.0",
-        "@types/react-dom": "^18.2.1",
+        "@types/react": "^18.2.2",
+        "@types/react-dom": "^18.2.3",
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.11.0",
+        "react-router-dom": "^6.11.1",
         "react-window": "^1.8.9"
     },
     "devDependencies": {
         "@babel/cli": "^7.21.5",
-        "@babel/core": "^7.21.5",
+        "@babel/core": "^7.21.8",
         "@babel/plugin-transform-runtime": "^7.21.4",
         "@babel/preset-env": "^7.21.5",
         "@babel/runtime-corejs3": "^7.21.5",

package/src/components/ScrollRestoration.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { IScrollPos, useWindowScroll } from '../uses/useWindowScroll';
+
+const urls: Record<string, IScrollPos | undefined> = {};
+
+/**
+ * Scroll restoration
+ */
+export function ScrollRestoration() {
+    // Location key
+    const { key } = useLocation();
+
+    // Mounted
+    const mounted = React.useRef(false);
+
+    // Detect scroll
+    const data = useWindowScroll();
+    if (mounted.current) {
+        urls[key] = data;
+    }
+
+    // Setup
+    React.useEffect(() => {
+        const pos = urls[key];
+        if (pos) {
+            window.scrollTo(pos.x, pos.y);
+        }
+
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, [key]);
+
+    return <React.Fragment />;
+}

package/src/index.ts

@@ -13,6 +13,7 @@ export * from './components/GridMethodRef';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
+export * from './components/ScrollRestoration';
 
 // notifier
 export * from './notifier/Notifier';

package/src/uses/useWindowScroll.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 
-interface IScrollPos {
+/**
+ * Window scroll position
+ */
+export interface IScrollPos {
     x: number;
     y: number;
 }
@@ -32,7 +35,7 @@ export const useWindowScroll = () => {
                     ticking = false;
                     requestAnimationFrameSeed = 0;
 
-                    if (lastPos.x != lastPos.x || lastPos.y != lastPos.y) {
+                    if (lastPos.x != pos.x || lastPos.y != pos.y) {
                         setPos(lastPos);
                     }
                 });