@etsoo/react 1.5.35 → 1.5.36

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';

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';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.35",
+    "version": "1.5.36",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -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';