@etsoo/react 1.6.70 → 1.6.72

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.70",
+    "version": "1.6.72",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -47,10 +47,10 @@
     "dependencies": {
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
-        "@emotion/css": "^11.10.6",
-        "@emotion/react": "^11.10.6",
-        "@emotion/styled": "^11.10.6",
-        "@etsoo/appscript": "^1.3.95",
+        "@emotion/css": "^11.10.8",
+        "@emotion/react": "^11.10.8",
+        "@emotion/styled": "^11.10.8",
+        "@etsoo/appscript": "^1.3.98",
         "@etsoo/notificationbase": "^1.1.24",
         "@etsoo/shared": "^1.2.1",
         "@types/react": "^18.2.0",
@@ -58,15 +58,15 @@
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.10.0",
+        "react-router-dom": "^6.11.0",
         "react-window": "^1.8.9"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.4",
+        "@babel/cli": "^7.21.5",
+        "@babel/core": "^7.21.5",
         "@babel/plugin-transform-runtime": "^7.21.4",
-        "@babel/preset-env": "^7.21.4",
-        "@babel/runtime-corejs3": "^7.21.0",
+        "@babel/preset-env": "^7.21.5",
+        "@babel/runtime-corejs3": "^7.21.5",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@types/jest": "^29.5.1",

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);
                     }
                 });