@etsoo/react 1.5.35 → 1.5.38

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/lib/mu/OptionGroup.js

@@ -66,12 +66,13 @@ export function OptionGroup(props) {
         return (React.createElement(FormControlLabel, { key: value, control: control, value: value, label: label }));
     });
     // Group
-    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: defaultValue, onChange: (_event, value) => {
+    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: values[0], onChange: (_event, value) => {
             if (firstOptionValue == null)
                 return;
             const typeValue = Utils.parseString(value, firstOptionValue);
             if (onValueChange)
                 onValueChange(typeValue);
+            setValues([typeValue]);
         } }, list));
     // Layout
     return (React.createElement(FormControl, { component: "fieldset", ...rest },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.35",
+    "version": "1.5.38",
     "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';

package/src/mu/OptionGroup.tsx

@@ -194,11 +194,12 @@ export function OptionGroup<
         <RadioGroup
             row={row}
             name={name}
-            value={defaultValue}
+            value={values[0]}
             onChange={(_event, value) => {
                 if (firstOptionValue == null) return;
                 const typeValue = Utils.parseString<D>(value, firstOptionValue);
                 if (onValueChange) onValueChange(typeValue);
+                setValues([typeValue]);
             }}
         >
             {list}