@etsoo/react 1.4.1 → 1.4.5

package/lib/app/IServiceUser.d.ts

@@ -11,4 +11,4 @@ export interface IServiceUser extends IUser {
 /**
  * Service user login result
  */
-export declare type ServiceLoginResult = IActionResult<IServiceUser>;
+export declare type ServiceLoginResult<U extends IServiceUser = IServiceUser> = IActionResult<U>;

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/app/ServiceApp.d.ts

@@ -11,7 +11,7 @@ import { RefreshTokenRQ } from './RefreshTokenRQ';
  * Use the acess token to the service api, get a service access token
  * Use the new acess token and refresh token to login
  */
-export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends IServicePageData = IServicePageData, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U, P> {
+export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends IServicePageData = IServicePageData, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, ISmartERPUser, P> {
     /**
      * Service API
      */
@@ -20,8 +20,8 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
     /**
      * Service user
      */
-    get serviceUser(): IServiceUser | undefined;
-    protected set serviceUser(value: IServiceUser | undefined);
+    get serviceUser(): U | undefined;
+    protected set serviceUser(value: U | undefined);
     /**
      * Service passphrase
      */
@@ -67,5 +67,5 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
      * @param refreshToken Refresh token
      * @param serviceUser Service user
      */
-    userLoginEx(user: ISmartERPUser, refreshToken: string, serviceUser: IServiceUser): void;
+    userLoginEx(user: ISmartERPUser, refreshToken: string, serviceUser: U): void;
 }

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/DnDList.d.ts

@@ -6,7 +6,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Item renderer
      */
-    children: (item: D, index: number, deleteItem: (index: number) => void, editItem: (newItem: D, indexOrLabel: number | string) => void) => React.ReactNode;
+    children: (item: D, index: number, deleteItem: (index: number) => void, editItem: (newItem: D, index: number) => boolean) => React.ReactNode;
     /**
      * List container component
      * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
@@ -32,6 +32,10 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      * Load data
      */
     loadData: (name: string) => PromiseLike<D[]>;
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
     /**
      * Top and bottom sides renderer
      */

package/lib/mu/DnDList.js

@@ -9,9 +9,16 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
  */
 export function DnDList(props) {
     // Destruct
-    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, sideRenderer } = props;
+    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, sideRenderer } = props;
     // State
     const [items, setItems] = React.useState([]);
+    const changeItems = (items) => {
+        // Possible to alter items with the handler
+        if (onChange)
+            onChange(items);
+        // Update state
+        setItems(items);
+    };
     // Drag end handler
     const onDragEnd = (result) => {
         // Dropped outside the list
@@ -25,34 +32,33 @@ export function DnDList(props) {
         // Insert to the destination index
         newItems.splice(result.destination.index, 0, removed);
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
     // Add item
     const addItem = (newItem) => {
         // Existence check
-        if (items.some((item) => item[labelField] == newItem[labelField])) {
+        if (items.some((item) => item[labelField] === newItem[labelField])) {
             return false;
         }
         // Clone
         const newItems = [newItem, ...items];
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
         return true;
     };
     // Edit item
-    const editItem = (newItem, indexOrLabel) => {
-        const index = typeof indexOrLabel === 'number'
-            ? indexOrLabel
-            : items.findIndex((item) => DataTypes.convert(item[labelField], 'string') ==
-                indexOrLabel);
-        if (index === -1)
-            return;
+    const editItem = (newItem, index) => {
+        // Existence check
+        if (items.some((item) => item[labelField] === newItem[labelField])) {
+            return false;
+        }
         // Clone
         const newItems = [...items];
         // Remove the item
         newItems.splice(index, 1, newItem);
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
+        return true;
     };
     // Add items
     const addItems = (inputItems) => {
@@ -67,7 +73,7 @@ export function DnDList(props) {
             newItems.push(newItem);
         });
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
         return newItems.length - items.length;
     };
     // Delete item
@@ -77,9 +83,10 @@ export function DnDList(props) {
         // Remove the item
         newItems.splice(index, 1);
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
     React.useEffect(() => {
+        // Load data
         loadData(name).then((items) => setItems(items));
     }, [name]);
     // Layout

package/lib/mu/NotifierMU.js

@@ -176,13 +176,10 @@ export class NotificationMU extends NotificationReact {
                 input === null || input === void 0 ? void 0 : input.focus();
                 return;
             }
-            if (Array.isArray(v)) {
-                if (!v[0]) {
-                    const error = v[1];
-                    setError(error);
-                    input === null || input === void 0 ? void 0 : input.focus();
-                    return;
-                }
+            if (typeof v === 'string') {
+                setError(v);
+                input === null || input === void 0 ? void 0 : input.focus();
+                return;
             }
             this.dismiss();
         };

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

@@ -3,13 +3,13 @@ import { RouteComponentProps } from '@reach/router';
 import { FormEventHandler } from 'react';
 import { CommonPageProps } from './CommonPageProps';
 /**
- * Edit page router props, include 'id' (/:id) query parameter
+ * Add / 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 +18,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.1",
+    "version": "1.4.5",
     "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.12",
-        "@etsoo/notificationbase": "^1.0.96",
-        "@etsoo/shared": "^1.0.97",
+        "@etsoo/appscript": "^1.2.18",
+        "@etsoo/notificationbase": "^1.1.0",
+        "@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/IServiceUser.ts

@@ -13,4 +13,5 @@ export interface IServiceUser extends IUser {
 /**
  * Service user login result
  */
-export type ServiceLoginResult = IActionResult<IServiceUser>;
+export type ServiceLoginResult<U extends IServiceUser = IServiceUser> =
+    IActionResult<U>;

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/app/ServiceApp.ts

@@ -24,20 +24,20 @@ export class ServiceApp<
     U extends IServiceUser = IServiceUser,
     P extends IServicePageData = IServicePageData,
     S extends IServiceAppSettings = IServiceAppSettings
-> extends ReactApp<S, U, P> {
+> extends ReactApp<S, ISmartERPUser, P> {
     /**
      * Service API
      */
     readonly serviceApi: IApi;
 
-    private _serviceUser?: IServiceUser;
+    private _serviceUser?: U;
     /**
      * Service user
      */
     get serviceUser() {
         return this._serviceUser;
     }
-    protected set serviceUser(value: IServiceUser | undefined) {
+    protected set serviceUser(value: U | undefined) {
         this._serviceUser = value;
     }
 
@@ -140,7 +140,9 @@ export class ServiceApp<
             const userData = result.data;
 
             // Use core system access token to service api to exchange service access token
-            const serviceResult = await this.serviceApi.put<ServiceLoginResult>(
+            const serviceResult = await this.serviceApi.put<
+                ServiceLoginResult<U>
+            >(
                 'Auth/ExchangeToken',
                 {
                     token: this.encryptEnhanced(
@@ -322,7 +324,7 @@ export class ServiceApp<
     userLoginEx(
         user: ISmartERPUser,
         refreshToken: string,
-        serviceUser: IServiceUser
+        serviceUser: U
     ): void {
         // Service user login
         this.servicePassphrase =

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/DnDList.tsx

@@ -18,7 +18,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
         item: D,
         index: number,
         deleteItem: (index: number) => void,
-        editItem: (newItem: D, indexOrLabel: number | string) => void
+        editItem: (newItem: D, index: number) => boolean
     ) => React.ReactNode;
 
     /**
@@ -52,6 +52,11 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     loadData: (name: string) => PromiseLike<D[]>;
 
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+
     /**
      * Top and bottom sides renderer
      */
@@ -87,12 +92,21 @@ export function DnDList<
         labelField,
         loadData,
         name,
+        onChange,
         sideRenderer
     } = props;
 
     // State
     const [items, setItems] = React.useState<D[]>([]);
 
+    const changeItems = (items: D[]) => {
+        // Possible to alter items with the handler
+        if (onChange) onChange(items);
+
+        // Update state
+        setItems(items);
+    };
+
     // Drag end handler
     const onDragEnd = (result: DropResult) => {
         // Dropped outside the list
@@ -110,13 +124,13 @@ export function DnDList<
         newItems.splice(result.destination.index, 0, removed);
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
 
     // Add item
     const addItem = (newItem: D) => {
         // Existence check
-        if (items.some((item) => item[labelField] == newItem[labelField])) {
+        if (items.some((item) => item[labelField] === newItem[labelField])) {
             return false;
         }
 
@@ -124,22 +138,17 @@ export function DnDList<
         const newItems = [newItem, ...items];
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
 
         return true;
     };
 
     // Edit item
-    const editItem = (newItem: D, indexOrLabel: number | string) => {
-        const index =
-            typeof indexOrLabel === 'number'
-                ? indexOrLabel
-                : items.findIndex(
-                      (item) =>
-                          DataTypes.convert(item[labelField], 'string') ==
-                          indexOrLabel
-                  );
-        if (index === -1) return;
+    const editItem = (newItem: D, index: number) => {
+        // Existence check
+        if (items.some((item) => item[labelField] === newItem[labelField])) {
+            return false;
+        }
 
         // Clone
         const newItems = [...items];
@@ -148,7 +157,9 @@ export function DnDList<
         newItems.splice(index, 1, newItem);
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
+
+        return true;
     };
 
     // Add items
@@ -169,7 +180,7 @@ export function DnDList<
         });
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
 
         return newItems.length - items.length;
     };
@@ -183,10 +194,11 @@ export function DnDList<
         newItems.splice(index, 1);
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
 
     React.useEffect(() => {
+        // Load data
         loadData(name).then((items) => setItems(items));
     }, [name]);
 

package/src/mu/NotifierMU.tsx

@@ -253,10 +253,9 @@ export class NotificationMU extends NotificationReact {
             // Result
             let result:
                 | boolean
-                | [boolean, string | undefined]
+                | string
                 | void
-                | PromiseLike<boolean | [boolean, string | undefined] | void> =
-                undefined;
+                | PromiseLike<boolean | string | void> = undefined;
 
             const input = inputRef.current;
 
@@ -302,13 +301,10 @@ export class NotificationMU extends NotificationReact {
                 input?.focus();
                 return;
             }
-            if (Array.isArray(v)) {
-                if (!v[0]) {
-                    const error = v[1];
-                    setError(error);
-                    input?.focus();
-                    return;
-                }
+            if (typeof v === 'string') {
+                setError(v);
+                input?.focus();
+                return;
             }
 
             this.dismiss();

package/src/mu/pages/EditPage.tsx

@@ -9,13 +9,13 @@ import { CommonPageProps } from './CommonPageProps';
 import SaveIcon from '@mui/icons-material/Save';
 
 /**
- * Edit page router props, include 'id' (/:id) query parameter
+ * Add / 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 +25,7 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
 }
 
 /**
- * Edit page
+ * Add / Edit page
  * @param props Props
  */
 export function EditPage(props: EditPageProps) {

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) {}