@etsoo/react 1.5.34 → 1.5.37

package/lib/components/HRouter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HistoryRouterProps } from 'react-router-dom';
+/**
+ * Open to use HistoryRouter of react-router-dom
+ * @param History router properties
+ * @returns Component
+ */
+export declare function HRouter({ basename, children, history }: HistoryRouterProps): JSX.Element;

package/lib/components/HRouter.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+/**
+ * Open to use HistoryRouter of react-router-dom
+ * @param History router properties
+ * @returns Component
+ */
+export function HRouter({ basename, children, history }) {
+    const [state, setState] = React.useState({
+        action: history.action,
+        location: history.location
+    });
+    React.useLayoutEffect(() => history.listen(setState), [history]);
+    return (React.createElement(Router, { basename: basename, children: children, location: state.location, navigationType: state.action, navigator: history }));
+}

package/lib/index.d.ts

@@ -11,6 +11,7 @@ export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
@@ -89,5 +90,6 @@ export * from './states/UserState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
+export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/lib/index.js

@@ -13,6 +13,7 @@ export * from './app/ServiceApp';
 // components
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
@@ -95,5 +96,6 @@ export * from './states/UserState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
+export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/lib/uses/useParamsEx.d.ts

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

package/lib/uses/useParamsEx.js

@@ -0,0 +1,12 @@
+import { DomUtils } from '@etsoo/shared';
+import { useParams } from 'react-router-dom';
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+export function useParamsEx(template) {
+    // Get parameters
+    const params = useParams();
+    // Return
+    return DomUtils.dataAs(params, template, false);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.34",
+    "version": "1.5.37",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.9.0",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.8.1",
-        "@etsoo/appscript": "^1.2.60",
-        "@etsoo/notificationbase": "^1.1.3",
-        "@etsoo/shared": "^1.1.38",
+        "@etsoo/appscript": "^1.2.61",
+        "@etsoo/notificationbase": "^1.1.4",
+        "@etsoo/shared": "^1.1.40",
         "@mui/icons-material": "^5.8.0",
         "@mui/material": "^5.8.1",
         "@types/pica": "^9.0.0",
@@ -76,10 +76,10 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.17.10",
-        "@babel/core": "^7.18.0",
-        "@babel/plugin-transform-runtime": "^7.18.0",
-        "@babel/preset-env": "^7.18.0",
-        "@babel/runtime-corejs3": "^7.18.0",
+        "@babel/core": "^7.18.2",
+        "@babel/plugin-transform-runtime": "^7.18.2",
+        "@babel/preset-env": "^7.18.2",
+        "@babel/runtime-corejs3": "^7.18.3",
         "@types/jest": "^27.5.1",
         "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^5.26.0",

package/src/app/ReactApp.ts

@@ -35,7 +35,6 @@ import {
 } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 import { Labels } from './Labels';
-import { ReactUtils } from './ReactUtils';
 import { createBrowserHistory, createMemoryHistory, History } from 'history';
 
 /**

package/src/components/HRouter.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { HistoryRouterProps, Router } from 'react-router-dom';
+
+/**
+ * Open to use HistoryRouter of react-router-dom
+ * @param History router properties
+ * @returns Component
+ */
+export function HRouter({ basename, children, history }: HistoryRouterProps) {
+    const [state, setState] = React.useState({
+        action: history.action,
+        location: history.location
+    });
+
+    React.useLayoutEffect(() => history.listen(setState), [history]);
+
+    return (
+        <Router
+            basename={basename}
+            children={children}
+            location={state.location}
+            navigationType={state.action}
+            navigator={history}
+        />
+    );
+}

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './app/ServiceApp';
 // components
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
@@ -102,5 +103,6 @@ export * from './states/UserState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
+export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/src/uses/useParamsEx.ts

@@ -0,0 +1,14 @@
+import { DataTypes, DomUtils } from '@etsoo/shared';
+import { useParams } from 'react-router-dom';
+
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+export function useParamsEx<T extends DataTypes.BasicTemplate>(template: T) {
+    // Get parameters
+    const params = useParams<{ [K in keyof T]: string }>();
+
+    // Return
+    return DomUtils.dataAs(params, template, false);
+}