@etsoo/react 1.5.12 → 1.5.16

package/lib/app/Labels.d.ts

@@ -8,6 +8,7 @@ export declare namespace Labels {
      */
     const CommonPage: {
         add: string;
+        back: string;
         delete: string;
         more: string;
         pullToRefresh: string;

package/lib/app/Labels.js

@@ -9,6 +9,7 @@ export var Labels;
      */
     Labels.CommonPage = {
         add: 'Add',
+        back: 'Back',
         delete: 'Delete',
         more: 'More',
         pullToRefresh: 'Pull down to refresh',

package/lib/app/ReactApp.d.ts

@@ -108,19 +108,6 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * @param name Application name
      */
     constructor(settings: S, name: string);
-    /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @returns Parsed Url
-     */
-    protected getHostUrl(url: string): string;
-    /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @param name App name in the host environment
-     * @returns Parsed Url
-     */
-    protected getHostUrlBase(url: string, name: string): string;
     /**
      * Override alert action result
      * @param result Action result

package/lib/app/ReactApp.js

@@ -8,7 +8,7 @@ import { CultureState } from '../states/CultureState';
 import { PageActionType, PageState } from '../states/PageState';
 import { UserActionType, UserState } from '../states/UserState';
 import { Labels } from './Labels';
-import { Utils } from './Utils';
+import { ReactUtils } from './ReactUtils';
 /**
  * Global application
  */
@@ -26,8 +26,8 @@ export function ReactAppStateDetector(props) {
     // Destruct
     const { targetFields, update } = props;
     // Context
-    const { state } = globalApp == null
-        ? { state: {} }
+    const { state = {} } = globalApp == null
+        ? {}
         : React.useContext(globalApp.userState.context);
     // Ready
     React.useEffect(() => {
@@ -66,9 +66,9 @@ export class ReactApp extends CoreApp {
          */
         this.userState = new UserState();
         this.history =
-            window.location.hostname === ''
-                ? Utils.getMemoryHistory(this.getHostUrl(window.location.href))
-                : undefined;
+            BridgeUtils.host == null
+                ? undefined
+                : ReactUtils.getMemoryHistory(BridgeUtils.host.getStartUrl());
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState();
         globalApp = this;
@@ -91,31 +91,6 @@ export class ReactApp extends CoreApp {
         ReactApp._notifierProvider = NotifierMU.setup();
         return NotifierMU.instance;
     }
-    /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @returns Parsed Url
-     */
-    getHostUrl(url) {
-        return this.getHostUrlBase(url, 'core');
-    }
-    /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @param name App name in the host environment
-     * @returns Parsed Url
-     */
-    getHostUrlBase(url, name) {
-        if (url.startsWith('/'))
-            return url;
-        const identifier = `/${name}/`;
-        const pos = url.indexOf(identifier);
-        if (pos === -1)
-            return '/';
-        return url
-            .substring(pos + identifier.length - 1)
-            .replace('/index.html', '/'); // Router take / as start
-    }
     /**
      * Override alert action result
      * @param result Action result

package/lib/app/{Utils.d.ts → ReactUtils.d.ts}

@@ -3,7 +3,7 @@ import React from 'react';
 /**
  * React utils
  */
-export declare namespace Utils {
+export declare namespace ReactUtils {
     /**
      * Format input value
      * @param value Input value
@@ -15,7 +15,12 @@ export declare namespace Utils {
      * @param initialPath Initial path
      * @returns History
      */
-    function getMemoryHistory(initialPath?: string): History;
+    function getMemoryHistory(initialPath?: string | null): History;
+    /**
+     * Get navigate function, works with memory history
+     * @returns NavigateFn
+     */
+    function getNavigateFn(): import("@reach/router").NavigateFn;
     /**
      * Is safe click
      * @param event Mouse event

package/lib/app/{Utils.js → ReactUtils.js}

@@ -1,9 +1,9 @@
-import { createHistory, createMemorySource } from '@reach/router';
+import { createHistory, createMemorySource, navigate } from '@reach/router';
 /**
  * React utils
  */
-export var Utils;
-(function (Utils) {
+export var ReactUtils;
+(function (ReactUtils) {
     // Memory history
     // https://github.com/reach/router/issues/225
     let memoryHistory;
@@ -23,19 +23,29 @@ export var Utils;
             return value;
         return String(value);
     }
-    Utils.formatInputValue = formatInputValue;
+    ReactUtils.formatInputValue = formatInputValue;
     /**
      * Get memory history
      * @param initialPath Initial path
      * @returns History
      */
-    function getMemoryHistory(initialPath = '/') {
+    function getMemoryHistory(initialPath) {
         if (memoryHistory == null) {
-            memoryHistory = createHistory(createMemorySource(initialPath));
+            memoryHistory = createHistory(createMemorySource(initialPath !== null && initialPath !== void 0 ? initialPath : '/'));
         }
         return memoryHistory;
     }
-    Utils.getMemoryHistory = getMemoryHistory;
+    ReactUtils.getMemoryHistory = getMemoryHistory;
+    /**
+     * Get navigate function, works with memory history
+     * @returns NavigateFn
+     */
+    function getNavigateFn() {
+        if (memoryHistory == null)
+            return navigate;
+        return memoryHistory.navigate;
+    }
+    ReactUtils.getNavigateFn = getNavigateFn;
     /**
      * Is safe click
      * @param event Mouse event
@@ -61,7 +71,7 @@ export var Utils;
         }
         return true;
     }
-    Utils.isSafeClick = isSafeClick;
+    ReactUtils.isSafeClick = isSafeClick;
     /**
      * Trigger input change event
      * @param input Form input
@@ -99,5 +109,5 @@ export var Utils;
             input.dispatchEvent(inputEvent);
         }
     }
-    Utils.triggerChange = triggerChange;
-})(Utils || (Utils = {}));
+    ReactUtils.triggerChange = triggerChange;
+})(ReactUtils || (ReactUtils = {}));

package/lib/app/ServiceApp.d.ts

@@ -33,11 +33,9 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
      */
     constructor(settings: S, name: string);
     /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @returns Parsed Url
+     * Load SmartERP core
      */
-    protected getHostUrl(url: string): string;
+    loadSmartERP(): void;
     /**
      * Go to the login page
      * @param tryLogin Try to login again
@@ -66,8 +64,11 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
     serviceEncrypt(message: string, passphrase?: string, iterations?: number): string;
     /**
      * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
      */
-    tryLogin<D extends {} = {}>(data?: D): Promise<boolean>;
+    tryLogin<D extends {} = {}>(data?: D, showLoading?: boolean): Promise<boolean>;
     /**
      * User login extended
      * @param user Core system user

package/lib/app/ServiceApp.js

@@ -40,12 +40,15 @@ export class ServiceApp extends ReactApp {
         this._serviceUser = value;
     }
     /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @returns Parsed Url
+     * Load SmartERP core
      */
-    getHostUrl(url) {
-        return this.getHostUrlBase(url, 's' + this.settings.serviceId);
+    loadSmartERP() {
+        if (BridgeUtils.host == null) {
+            window.location.href = this.settings.webUrl;
+        }
+        else {
+            BridgeUtils.host.loadApp('core');
+        }
     }
     /**
      * Go to the login page
@@ -206,10 +209,13 @@ export class ServiceApp extends ReactApp {
     }
     /**
      * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
      */
-    async tryLogin(data) {
+    async tryLogin(data, showLoading) {
         // Reset user state
-        const result = await super.tryLogin(data);
+        const result = await super.tryLogin(data, showLoading);
         if (!result)
             return false;
         // Refresh token
@@ -228,6 +234,7 @@ export class ServiceApp extends ReactApp {
                 });
             },
             data,
+            showLoading,
             relogin: true
         });
     }

package/lib/index.d.ts

@@ -6,9 +6,9 @@ export * from './app/IServiceUser';
 export * from './app/ISmartERPUser';
 export * from './app/Labels';
 export * from './app/ReactApp';
+export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
-export * from './app/Utils';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
 export * from './components/ListItemReact';
@@ -31,6 +31,7 @@ export * from './mu/texts/DateText';
 export * from './mu/texts/MoneyText';
 export * from './mu/texts/NumberText';
 export * from './mu/AuditDisplay';
+export * from './mu/BackButton';
 export * from './mu/BridgeCloseButton';
 export * from './mu/ButtonLink';
 export * from './mu/ComboBox';

package/lib/index.js

@@ -7,9 +7,9 @@ export * from './app/IServiceUser';
 export * from './app/ISmartERPUser';
 export * from './app/Labels';
 export * from './app/ReactApp';
+export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
-export * from './app/Utils';
 // components
 export * from './components/GridColumn';
 export * from './components/GridLoader';
@@ -34,6 +34,7 @@ export * from './mu/texts/DateText';
 export * from './mu/texts/MoneyText';
 export * from './mu/texts/NumberText';
 export * from './mu/AuditDisplay';
+export * from './mu/BackButton';
 export * from './mu/BridgeCloseButton';
 export * from './mu/ButtonLink';
 export * from './mu/ComboBox';

package/lib/mu/BackButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+/**
+ * BackButton props
+ */
+export interface BackButtonProps extends IconButtonProps {
+}
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export declare function BackButton(props: BackButtonProps): JSX.Element;

package/lib/mu/BackButton.js

@@ -0,0 +1,32 @@
+import { IconButton, useTheme } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export function BackButton(props) {
+    // Destruct
+    const { color = 'primary', size = 'small', onClick, ...rest } = props;
+    // Navigate
+    const navigate = ReactUtils.getNavigateFn();
+    // Theme
+    const theme = useTheme();
+    // Color
+    const pColor = color != 'inherit' && color != 'default' && color in theme.palette
+        ? theme.palette[color]
+        : theme.palette.primary;
+    // Click handler
+    const onClickLocal = (event) => {
+        if (onClick)
+            onClick(event);
+        navigate(-1);
+    };
+    return (React.createElement(IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
+            backgroundColor: pColor.contrastText,
+            border: `1px solid ${pColor.light}`
+        }, ...rest },
+        React.createElement(ArrowBackIcon, null)));
+}

package/lib/mu/BridgeCloseButton.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { IBridgeHost } from '@etsoo/appscript';
-import { IconButtonProps } from '@mui/material';
+import { BoxProps, IconButtonProps } from '@mui/material';
 /**
  * Bridge close button props
  */
 export interface BridgeCloseButtonProps extends IconButtonProps {
+    /**
+     * Box props
+     */
+    boxProps?: BoxProps;
     /**
      * Validate the host
      * @param host Host

package/lib/mu/BridgeCloseButton.js

@@ -1,6 +1,6 @@
 import { BridgeUtils } from '@etsoo/appscript';
 import CloseIcon from '@mui/icons-material/Close';
-import { IconButton } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import React from 'react';
 import { globalApp } from '../app/ReactApp';
 /**
@@ -10,7 +10,7 @@ import { globalApp } from '../app/ReactApp';
  */
 export function BridgeCloseButton(props) {
     // Destruct
-    const { onClick, title = typeof globalApp === 'undefined'
+    const { boxProps, onClick, title = typeof globalApp === 'undefined'
         ? 'Close'
         : globalApp.get('close'), validate, ...rest } = props;
     // Host
@@ -24,11 +24,7 @@ export function BridgeCloseButton(props) {
             onClick(event);
         host.exit();
     };
-    return (React.createElement(IconButton, { "aria-label": "close", color: "secondary", onClick: onClickLocal, title: title, sx: {
-            position: 'absolute',
-            zIndex: (theme) => theme.zIndex.appBar + 1,
-            top: (theme) => theme.spacing(0.5),
-            right: (theme) => theme.spacing(0.5)
-        }, ...rest },
-        React.createElement(CloseIcon, null)));
+    return (React.createElement(Box, { ...boxProps },
+        React.createElement(IconButton, { "aria-label": "close", onClick: onClickLocal, title: title, ...rest },
+            React.createElement(CloseIcon, null))));
 }

package/lib/mu/ButtonLink.js

@@ -1,6 +1,6 @@
 import { Button } from '@mui/material';
-import { useNavigate } from '@reach/router';
 import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * ButtonLink
  * @param props Props
@@ -10,7 +10,7 @@ export function ButtonLink(props) {
     // Destruct
     const { href, ...rest } = props;
     // Navigate
-    const navigate = useNavigate();
+    const navigate = ReactUtils.getNavigateFn();
     const onClick = href.includes('://')
         ? () => window.open(href, '_blank')
         : () => navigate(href);

package/lib/mu/ComboBox.js

@@ -1,10 +1,10 @@
 import { Keyboard } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
 import { Utils as SharedUtils } from '@etsoo/shared';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox
  * @param props Props
@@ -71,7 +71,7 @@ export function ComboBox(props) {
             const newValue = value != null ? `${Reflect.get(value, idField)}` : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

package/lib/mu/IconButtonLink.js

@@ -1,6 +1,6 @@
 import { IconButton } from '@mui/material';
-import { useNavigate } from '@reach/router';
 import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * IconButtonLink
  * @param props Props
@@ -10,7 +10,7 @@ export function IconButtonLink(props) {
     // Destruct
     const { href, ...rest } = props;
     // Navigate
-    const navigate = useNavigate();
+    const navigate = ReactUtils.getNavigateFn();
     // Layout
     return React.createElement(IconButton, { ...rest, onClick: () => navigate(href) });
 }

package/lib/mu/ResponsibleContainer.js

@@ -1,7 +1,7 @@
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { Labels } from '../app/Labels';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { GridDataGet } from '../components/GridLoader';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { useDimensions } from '../uses/useDimensions';
@@ -126,7 +126,7 @@ export function ResponsibleContainer(props) {
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
                 React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
-                        Utils.isSafeClick(event) &&
+                        ReactUtils.isSafeClick(event) &&
                         quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);

package/lib/mu/SearchBar.js

@@ -2,9 +2,9 @@ import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
 import React from 'react';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { useDimensions } from '../uses/useDimensions';
-import { Utils as AppUtils } from '../app/Utils';
 import { DomUtils } from '@etsoo/shared';
 import { Labels } from '../app/Labels';
+import { ReactUtils } from '../app/ReactUtils';
 // Cached width attribute name
 const cachedWidthName = 'data-cached-width';
 // Reset form
@@ -20,7 +20,7 @@ const resetForm = (form) => {
                 continue;
             // Ignore readOnly without data-reset=true inputs
             if (!input.readOnly || input.dataset.reset === 'true') {
-                AppUtils.triggerChange(input, '', true);
+                ReactUtils.triggerChange(input, '', true);
             }
             continue;
         }

package/lib/mu/SelectEx.js

@@ -1,9 +1,9 @@
-import { Utils as AppUtils } from '../app/Utils';
 import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * Extended select component
  * @param props Props
@@ -65,7 +65,7 @@ export function SelectEx(props) {
             const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                AppUtils.triggerChange(input, id, false);
+                ReactUtils.triggerChange(input, id, false);
             }
         }
     };

package/lib/mu/Tiplist.js

@@ -1,7 +1,7 @@
 import { DataTypes } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
 /**
@@ -75,7 +75,7 @@ export function Tiplist(props) {
             const input = inputRef.current;
             if (input && input.value !== '') {
                 // Different value, trigger change event
-                Utils.triggerChange(input, '', false);
+                ReactUtils.triggerChange(input, '', false);
             }
             if (states.options.length > 0) {
                 // Reset options
@@ -106,7 +106,7 @@ export function Tiplist(props) {
             const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

package/lib/mu/pages/CommonPage.js

@@ -7,6 +7,7 @@ import { MoreFab } from '../MoreFab';
 import { ReactAppStateDetector } from '../../app/ReactApp';
 import { Container, Fab } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import { BackButton } from '../BackButton';
 /**
  * Default scroll container
  */
@@ -17,7 +18,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, targetFields, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
     // Merge style
     Object.assign(sx, {
         padding: paddings
@@ -53,6 +54,7 @@ export function CommonPage(props) {
                 fabButtons,
                 onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: 'none', md: 'inherit' } } },
                     React.createElement(RefreshIcon, null))),
-                React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions })),
+                React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
+                supportBack && (React.createElement(BackButton, { title: labels.back, size: fabSize }))),
             children)));
 }

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

@@ -18,7 +18,7 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      */
     fabSize?: CustomFabSize;
     /**
-     * Fab flex column direction?
+     * Fab flex column direction, undefined to hide it
      */
     fabColumnDirection?: boolean;
     /**
@@ -49,6 +49,10 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      * Scroll container
      */
     scrollContainer?: HTMLElement | object;
+    /**
+     * Support back click
+     */
+    supportBack?: boolean;
     /**
      * State last changed fields
      */

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

@@ -16,6 +16,11 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
      * On delete callback
      */
     onDelete?: () => Promise<void> | void;
+    /**
+     * Support back click
+     * @default true
+     */
+    supportBack?: boolean;
 }
 /**
  * Add / Edit page

package/lib/mu/pages/EditPage.js

@@ -5,13 +5,14 @@ import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import SaveIcon from '@mui/icons-material/Save';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { BackButton } from '../BackButton';
 /**
  * Add / Edit page
  * @param props Props
  */
 export function EditPage(props) {
     // Destruct
-    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, ...rest } = props;
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
@@ -23,5 +24,6 @@ export function EditPage(props) {
                     paddingTop: paddings
                 } },
                 isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
-                React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save)))));
+                React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save),
+                supportBack && React.createElement(BackButton, { title: labels.back })))));
 }

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

@@ -48,6 +48,10 @@ export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'c
      * Load data
      */
     loadData: () => PromiseLike<T | undefined>;
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
     /**
      * Support refresh
      */