@etsoo/react 1.4.4 → 1.4.8

package/lib/app/ReactApp.d.ts

@@ -1,5 +1,5 @@
-import { CoreApp, IAppSettings, ICoreApp, IUser, IUserData } from '@etsoo/appscript';
-import { NotificationRenderProps } from '@etsoo/notificationbase';
+import { CoreApp, IActionResult, IAppSettings, ICoreApp, IUser, IUserData } from '@etsoo/appscript';
+import { NotificationRenderProps, NotificationReturn } from '@etsoo/notificationbase';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { NotificationReactCallProps } from '../notifier/Notifier';
@@ -87,6 +87,12 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * @param name Application name
      */
     constructor(settings: S, name: string);
+    /**
+     * Override alert action result
+     * @param result Action result
+     * @param callback Callback
+     */
+    alertResult(result: IActionResult, callback?: NotificationReturn<void>): void;
     /**
      * Change culture
      * @param culture New culture definition

package/lib/app/ReactApp.js

@@ -1,4 +1,4 @@
-import { CoreApp, createClient } from '@etsoo/appscript';
+import { ActionResultError, CoreApp, createClient } from '@etsoo/appscript';
 import { WindowStorage } from '@etsoo/shared';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
@@ -83,6 +83,26 @@ export class ReactApp extends CoreApp {
         ReactApp._notifierProvider = NotifierMU.setup();
         return NotifierMU.instance;
     }
+    /**
+     * Override alert action result
+     * @param result Action result
+     * @param callback Callback
+     */
+    alertResult(result, callback) {
+        this.formatResult(result);
+        const message = ActionResultError.format(result);
+        if (message.endsWith(')')) {
+            const startPos = message.lastIndexOf('(');
+            if (startPos > 0) {
+                const main = message.substring(0, startPos).trim();
+                const tip = message.substring(startPos);
+                const titleNode = React.createElement(React.Fragment, null, main, React.createElement('div', { style: { fontSize: '9px' } }, tip));
+                this.notifier.alert(titleNode, callback);
+                return;
+            }
+        }
+        this.notifier.alert(message, callback);
+    }
     /**
      * Change culture
      * @param culture New culture definition

package/lib/index.d.ts

@@ -14,7 +14,6 @@ export * from './components/GridLoader';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
-export * from './mu/pages/AddPage';
 export * from './mu/pages/CommonPage';
 export * from './mu/pages/CommonPageProps';
 export * from './mu/pages/DataGridPage';

package/lib/index.js

@@ -17,7 +17,6 @@ export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
 // mu
-export * from './mu/pages/AddPage';
 export * from './mu/pages/CommonPage';
 export * from './mu/pages/CommonPageProps';
 export * from './mu/pages/DataGridPage';

package/lib/mu/TooltipClick.d.ts

@@ -3,8 +3,9 @@ import React from 'react';
 /**
  * Tooltip with click visibility props
  */
-export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open' | 'disableFocusListener' | 'disableHoverListener' | 'disableTouchListener'> {
+export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open' | 'disableFocusListener' | 'disableTouchListener'> {
     children: (openTooltip: (newTitle?: string) => void) => React.ReactElement<any, any>;
+    disableHoverListener?: boolean;
 }
 /**
  * Tooltip with click visibility

package/lib/mu/TooltipClick.js

@@ -8,7 +8,7 @@ import React from 'react';
 export function TooltipClick(props) {
     // Destruct
     // leaveDelay set to 5 seconds to hide the tooltip automatically
-    const { children, leaveDelay = 5000, onClose, title, ...rest } = props;
+    const { children, disableHoverListener = true, leaveDelay = 5000, onClose, title, ...rest } = props;
     // State
     const [localTitle, setTitle] = React.useState(title);
     const [open, setOpen] = React.useState(false);
@@ -42,5 +42,5 @@ export function TooltipClick(props) {
                 setOpen(false);
                 if (onClose)
                     onClose(event);
-            }, title: localTitle, open: open, disableFocusListener: true, disableHoverListener: true, disableTouchListener: true, ...rest }, children(openTooltip))));
+            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, ...rest }, children(openTooltip))));
 }

package/lib/mu/pages/EditPage.d.ts

@@ -1,15 +1,7 @@
-import { DataTypes } from '@etsoo/shared';
-import { RouteComponentProps } from '@reach/router';
 import { FormEventHandler } from 'react';
 import { CommonPageProps } from './CommonPageProps';
 /**
- * Edit page router props, include 'id' (/:id) query parameter
- */
-export declare type EditPageRouterProps<T extends DataTypes.IdType = number> = RouteComponentProps<{
-    id: T;
-}>;
-/**
- * Edit page props
+ * Add / Edit page props
  */
 export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
     /**
@@ -18,7 +10,7 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
     onSubmit?: FormEventHandler<HTMLFormElement>;
 }
 /**
- * Edit page
+ * Add / Edit page
  * @param props Props
  */
 export declare function EditPage(props: EditPageProps): JSX.Element;

package/lib/mu/pages/EditPage.js

@@ -5,7 +5,7 @@ import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import SaveIcon from '@mui/icons-material/Save';
 /**
- * Edit page
+ * Add / Edit page
  * @param props Props
  */
 export function EditPage(props) {

package/lib/states/RouterProps.d.ts

@@ -1,10 +1,27 @@
 import { DataTypes } from '@etsoo/shared';
 import { RouteComponentProps } from '@reach/router';
+/**
+ * Add / Edit page router props, include 'id' (/:id) or none when adding query parameter
+ */
+export declare type EditPageRouterProps = IdRouterProps & WildcardRouterProps;
+/**
+ * Get edit page id
+ * @param props Route props
+ * @param type Target data type
+ * @returns Data
+ */
+export declare function getEditPageId<T extends DataTypes.BasicNames>(props: EditPageRouterProps, type: T): DataTypes.BasicConditional<T> | undefined;
 /**
  * Id router props, include 'id' (/:id) query parameter
  */
-export declare type IdRouterProps<T extends DataTypes.IdType = number> = RouteComponentProps<{
-    id: T;
+export declare type IdRouterProps = RouteComponentProps<{
+    id: string;
+}>;
+/**
+ * Wildcard router props, (/*) query parameter
+ */
+export declare type WildcardRouterProps = RouteComponentProps<{
+    '*': string;
 }>;
 /**
  * Id state router props, include 'id' in location.state

package/lib/states/RouterProps.js

@@ -1 +1,14 @@
-export {};
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Get edit page id
+ * @param props Route props
+ * @param type Target data type
+ * @returns Data
+ */
+export function getEditPageId(props, type) {
+    var _a;
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : props['*'];
+    if (id == null || id === '')
+        return undefined;
+    return DataTypes.convertByType(id, type);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.4",
+    "version": "1.4.8",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.15",
+        "@etsoo/appscript": "^1.2.18",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.0.97",
+        "@etsoo/shared": "^1.1.0",
         "@mui/icons-material": "^5.2.5",
-        "@mui/material": "^5.2.6",
+        "@mui/material": "^5.2.7",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -83,11 +83,11 @@
         "@babel/runtime-corejs3": "^7.16.7",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.8.1",
-        "@typescript-eslint/parser": "^5.8.1",
-        "eslint": "^8.5.0",
+        "@typescript-eslint/eslint-plugin": "^5.9.0",
+        "@typescript-eslint/parser": "^5.9.0",
+        "eslint": "^8.6.0",
         "eslint-config-airbnb-base": "^15.0.0",
-        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",
         "jest": "^27.4.5",
         "react-test-renderer": "^17.0.2",

package/src/app/ReactApp.ts

@@ -1,12 +1,17 @@
 import {
+    ActionResultError,
     CoreApp,
     createClient,
+    IActionResult,
     IAppSettings,
     ICoreApp,
     IUser,
     IUserData
 } from '@etsoo/appscript';
-import { NotificationRenderProps } from '@etsoo/notificationbase';
+import {
+    NotificationRenderProps,
+    NotificationReturn
+} from '@etsoo/notificationbase';
 import { DataTypes, WindowStorage } from '@etsoo/shared';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
@@ -197,6 +202,40 @@ export class ReactApp<
         globalApp = this;
     }
 
+    /**
+     * Override alert action result
+     * @param result Action result
+     * @param callback Callback
+     */
+    override alertResult(
+        result: IActionResult,
+        callback?: NotificationReturn<void>
+    ) {
+        this.formatResult(result);
+        const message = ActionResultError.format(result);
+        if (message.endsWith(')')) {
+            const startPos = message.lastIndexOf('(');
+            if (startPos > 0) {
+                const main = message.substring(0, startPos).trim();
+                const tip = message.substring(startPos);
+
+                const titleNode = React.createElement(
+                    React.Fragment,
+                    null,
+                    main,
+                    React.createElement(
+                        'div',
+                        { style: { fontSize: '9px' } },
+                        tip
+                    )
+                );
+                this.notifier.alert(titleNode, callback);
+                return;
+            }
+        }
+        this.notifier.alert(message, callback);
+    }
+
     /**
      * Change culture
      * @param culture New culture definition

package/src/index.ts

@@ -19,7 +19,6 @@ export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
 
 // mu
-export * from './mu/pages/AddPage';
 export * from './mu/pages/CommonPage';
 export * from './mu/pages/CommonPageProps';
 export * from './mu/pages/DataGridPage';

package/src/mu/TooltipClick.tsx

@@ -7,15 +7,13 @@ import React from 'react';
 export interface TooltipClickProps
     extends Omit<
         TooltipProps,
-        | 'children'
-        | 'open'
-        | 'disableFocusListener'
-        | 'disableHoverListener'
-        | 'disableTouchListener'
+        'children' | 'open' | 'disableFocusListener' | 'disableTouchListener'
     > {
     children: (
         openTooltip: (newTitle?: string) => void
     ) => React.ReactElement<any, any>;
+
+    disableHoverListener?: boolean;
 }
 
 /**
@@ -26,7 +24,14 @@ export interface TooltipClickProps
 export function TooltipClick(props: TooltipClickProps) {
     // Destruct
     // leaveDelay set to 5 seconds to hide the tooltip automatically
-    const { children, leaveDelay = 5000, onClose, title, ...rest } = props;
+    const {
+        children,
+        disableHoverListener = true,
+        leaveDelay = 5000,
+        onClose,
+        title,
+        ...rest
+    } = props;
 
     // State
     const [localTitle, setTitle] = React.useState(title);
@@ -74,8 +79,8 @@ export function TooltipClick(props: TooltipClickProps) {
                 title={localTitle}
                 open={open}
                 disableFocusListener
-                disableHoverListener
                 disableTouchListener
+                disableHoverListener={disableHoverListener}
                 {...rest}
             >
                 {children(openTooltip)}

package/src/mu/pages/EditPage.tsx

@@ -1,6 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
 import { Button, Grid } from '@mui/material';
-import { RouteComponentProps } from '@reach/router';
 import React, { FormEventHandler } from 'react';
 import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
@@ -9,13 +7,7 @@ import { CommonPageProps } from './CommonPageProps';
 import SaveIcon from '@mui/icons-material/Save';
 
 /**
- * Edit page router props, include 'id' (/:id) query parameter
- */
-export type EditPageRouterProps<T extends DataTypes.IdType = number> =
-    RouteComponentProps<{ id: T }>;
-
-/**
- * Edit page props
+ * Add / Edit page props
  */
 export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
     /**
@@ -25,7 +17,7 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
 }
 
 /**
- * Edit page
+ * Add / Edit page
  * @param props Props
  */
 export function EditPage(props: EditPageProps) {

package/src/states/RouterProps.ts

@@ -1,11 +1,36 @@
 import { DataTypes } from '@etsoo/shared';
 import { RouteComponentProps } from '@reach/router';
+import { Props } from 'react-input-mask';
+
+/**
+ * Add / Edit page router props, include 'id' (/:id) or none when adding query parameter
+ */
+export type EditPageRouterProps = IdRouterProps & WildcardRouterProps;
+
+/**
+ * Get edit page id
+ * @param props Route props
+ * @param type Target data type
+ * @returns Data
+ */
+export function getEditPageId<T extends DataTypes.BasicNames>(
+    props: EditPageRouterProps,
+    type: T
+): DataTypes.BasicConditional<T> | undefined {
+    const id = props.id ?? props['*'];
+    if (id == null || id === '') return undefined;
+    return DataTypes.convertByType(id, type);
+}
 
 /**
  * Id router props, include 'id' (/:id) query parameter
  */
-export type IdRouterProps<T extends DataTypes.IdType = number> =
-    RouteComponentProps<{ id: T }>;
+export type IdRouterProps = RouteComponentProps<{ id: string }>;
+
+/**
+ * Wildcard router props, (/*) query parameter
+ */
+export type WildcardRouterProps = RouteComponentProps<{ '*': string }>;
 
 /**
  * Id state router props, include 'id' in location.state

package/lib/mu/pages/AddPage.d.ts

@@ -1,11 +0,0 @@
-import { CommonPageProps } from './CommonPageProps';
-/**
- * Add page props
- */
-export interface AddPageProps extends CommonPageProps {
-}
-/**
- * Add page
- * @param props Props
- */
-export declare function AddPage(props: AddPageProps): void;

package/lib/mu/pages/AddPage.js

@@ -1,5 +0,0 @@
-/**
- * Add page
- * @param props Props
- */
-export function AddPage(props) { }

package/src/mu/pages/AddPage.tsx

@@ -1,12 +0,0 @@
-import { CommonPageProps } from './CommonPageProps';
-
-/**
- * Add page props
- */
-export interface AddPageProps extends CommonPageProps {}
-
-/**
- * Add page
- * @param props Props
- */
-export function AddPage(props: AddPageProps) {}