@etsoo/react 1.5.84 → 1.5.87

package/lib/index.d.ts

@@ -5,6 +5,7 @@ export * from './app/RefreshTokenRQ';
 export * from './components/DnDList';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/GridMethodRef';
 export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
@@ -20,6 +21,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/lib/index.js

@@ -7,6 +7,7 @@ export * from './app/RefreshTokenRQ';
 export * from './components/DnDList';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/GridMethodRef';
 export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
@@ -25,6 +26,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/lib/uses/useSearchParamsEx.d.ts

@@ -0,0 +1,6 @@
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export declare function useSearchParamsEx<T extends DataTypes.BasicTemplate>(template: T): DataTypes.BasicTemplateType<T>;

package/lib/uses/useSearchParamsEx.js

@@ -0,0 +1,16 @@
+import { DomUtils } from '@etsoo/shared';
+import { useSearchParams } from 'react-router-dom';
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export function useSearchParamsEx(template) {
+    // Get parameters
+    const [sp] = useSearchParams();
+    const paras = Object.fromEntries(Object.keys(template).map((key) => {
+        const type = template[key];
+        return [key, type.endsWith('[]') ? sp.getAll(key) : sp.get(key)];
+    }));
+    // Return
+    return DomUtils.dataAs(paras, template, false);
+}

package/lib/uses/useWindowScroll.js

@@ -6,8 +6,8 @@ import React from 'react';
 export const useWindowScroll = () => {
     // State
     const [pos, setPos] = React.useState({
-        x: window.pageXOffset,
-        y: window.pageYOffset
+        x: window.scrollX,
+        y: window.scrollY
     });
     React.useEffect(() => {
         let ticking = false;
@@ -15,8 +15,8 @@ export const useWindowScroll = () => {
         let requestAnimationFrameSeed = 0;
         const scrollHandler = () => {
             lastPos = {
-                x: window.pageXOffset,
-                y: window.pageYOffset
+                x: window.scrollX,
+                y: window.scrollY
             };
             if (!ticking) {
                 requestAnimationFrameSeed = window.requestAnimationFrame(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.84",
+    "version": "1.5.87",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -48,12 +48,12 @@
         "@dnd-kit/core": "^6.0.5",
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/css": "^11.10.0",
-        "@emotion/react": "^11.10.0",
-        "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.88",
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
+        "@etsoo/appscript": "^1.2.89",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/shared": "^1.1.51",
-        "@types/react": "^18.0.17",
+        "@etsoo/shared": "^1.1.52",
+        "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
@@ -63,19 +63,19 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.13",
+        "@babel/core": "^7.19.0",
         "@babel/plugin-transform-runtime": "^7.18.10",
-        "@babel/preset-env": "^7.18.10",
-        "@babel/runtime-corejs3": "^7.18.9",
+        "@babel/preset-env": "^7.19.0",
+        "@babel/runtime-corejs3": "^7.19.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.3.0",
-        "@types/jest": "^28.1.8",
-        "@typescript-eslint/eslint-plugin": "^5.35.1",
-        "@typescript-eslint/parser": "^5.35.1",
+        "@testing-library/react": "^13.4.0",
+        "@types/jest": "^29.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.36.2",
+        "@typescript-eslint/parser": "^5.36.2",
         "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.1",
+        "eslint-plugin-react": "^7.31.7",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
         "ts-jest": "^28.0.8",

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './app/RefreshTokenRQ';
 export * from './components/DnDList';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/GridMethodRef';
 export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
@@ -29,6 +30,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/src/uses/useSearchParamsEx.ts

@@ -0,0 +1,22 @@
+import { DataTypes, DomUtils } from '@etsoo/shared';
+import { useSearchParams } from 'react-router-dom';
+
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export function useSearchParamsEx<T extends DataTypes.BasicTemplate>(
+    template: T
+) {
+    // Get parameters
+    const [sp] = useSearchParams();
+    const paras = Object.fromEntries(
+        Object.keys(template).map((key) => {
+            const type = template[key];
+            return [key, type.endsWith('[]') ? sp.getAll(key) : sp.get(key)];
+        })
+    );
+
+    // Return
+    return DomUtils.dataAs(paras, template, false);
+}

package/src/uses/useWindowScroll.ts

@@ -12,8 +12,8 @@ interface IScrollPos {
 export const useWindowScroll = () => {
     // State
     const [pos, setPos] = React.useState<IScrollPos>({
-        x: window.pageXOffset,
-        y: window.pageYOffset
+        x: window.scrollX,
+        y: window.scrollY
     });
 
     React.useEffect(() => {
@@ -23,8 +23,8 @@ export const useWindowScroll = () => {
 
         const scrollHandler = () => {
             lastPos = {
-                x: window.pageXOffset,
-                y: window.pageYOffset
+                x: window.scrollX,
+                y: window.scrollY
             };
 
             if (!ticking) {