@etsoo/react 1.5.14 → 1.5.15

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

@@ -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
+                : Utils.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/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

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

package/lib/app/Utils.d.ts

@@ -15,7 +15,7 @@ export declare namespace Utils {
      * @param initialPath Initial path
      * @returns History
      */
-    function getMemoryHistory(initialPath?: string): History;
+    function getMemoryHistory(initialPath?: string | null): History;
     /**
      * Is safe click
      * @param event Mouse event

package/lib/app/Utils.js

@@ -29,9 +29,9 @@ export var Utils;
      * @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;
     }

package/lib/mu/BackButton.js

@@ -1,4 +1,4 @@
-import { IconButton } from '@mui/material';
+import { IconButton, useTheme } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import React from 'react';
 import { useNavigate } from '@reach/router';
@@ -12,6 +12,12 @@ export function BackButton(props) {
     const { color = 'primary', size = 'small', onClick, ...rest } = props;
     // Navigate
     const navigate = useNavigate();
+    // 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)
@@ -19,11 +25,8 @@ export function BackButton(props) {
         navigate(-1);
     };
     return (React.createElement(IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
-            border: (theme) => `1px solid ${(() => color != 'inherit' &&
-                color != 'default' &&
-                color in theme.palette
-                ? theme.palette[color]
-                : theme.palette.primary)().light}`
+            backgroundColor: pColor.contrastText,
+            border: `1px solid ${pColor.light}`
         }, ...rest },
         React.createElement(ArrowBackIcon, null)));
 }

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
      */

package/lib/mu/pages/ViewPage.js

@@ -1,9 +1,11 @@
 import { Utils } from '@etsoo/shared';
 import { Grid, LinearProgress, Stack, Typography } from '@mui/material';
 import React from 'react';
+import { Labels } from '../../app/Labels';
 import { globalApp } from '../../app/ReactApp';
 import { GridDataFormat } from '../GridDataFormat';
 import { MUGlobal } from '../MUGlobal';
+import { PullToRefreshUI } from '../PullToRefreshUI';
 import { CommonPage } from './CommonPage';
 function formatItemData(fieldData) {
     if (fieldData == null)
@@ -62,9 +64,13 @@ function getItemField(field, data) {
  */
 export function ViewPage(props) {
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, supportBack = true, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, supportBack = true, pullToRefresh = true, ...rest } = props;
     // Data
     const [data, setData] = React.useState();
+    // Labels
+    const labels = Labels.CommonPage;
+    // Container
+    const pullContainer = '#page-container';
     // Load data
     const refresh = async () => {
         const result = await loadData();
@@ -91,5 +97,9 @@ export function ViewPage(props) {
                 React.createElement(Typography, { variant: "subtitle2" }, itemData)));
         })),
         actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data, refresh))),
-        Utils.getResult(children, data, refresh)))));
+        Utils.getResult(children, data, refresh),
+        pullToRefresh && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                const container = document.querySelector(pullContainer);
+                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
+            } }))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.14",
+    "version": "1.5.15",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.49",
+        "@etsoo/appscript": "^1.2.50",
         "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.11",
         "@mui/icons-material": "^5.4.1",

package/src/app/ReactApp.ts

@@ -219,43 +219,18 @@ export class ReactApp<
             new WindowStorage(),
             name
         );
+
         this.history =
-            window.location.hostname === ''
-                ? Utils.getMemoryHistory(this.getHostUrl(window.location.href))
-                : undefined;
+            BridgeUtils.host == null
+                ? undefined
+                : Utils.getMemoryHistory(BridgeUtils.host.getStartUrl());
+
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState<P>();
 
         globalApp = this;
     }
 
-    /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @returns Parsed Url
-     */
-    protected getHostUrl(url: string) {
-        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
-     */
-    protected getHostUrlBase(url: string, name: string) {
-        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/src/app/ServiceApp.ts

@@ -69,12 +69,14 @@ export class ServiceApp<
     }
 
     /**
-     * Get parsed Url under bridge host
-     * @param url Url
-     * @returns Parsed Url
+     * Load SmartERP core
      */
-    protected override getHostUrl(url: string) {
-        return this.getHostUrlBase(url, 's' + this.settings.serviceId);
+    loadSmartERP() {
+        if (BridgeUtils.host == null) {
+            window.location.href = this.settings.webUrl;
+        } else {
+            BridgeUtils.host.loadApp('core');
+        }
     }
 
     /**

package/src/app/Utils.ts

@@ -31,9 +31,11 @@ export namespace Utils {
      * @param initialPath Initial path
      * @returns History
      */
-    export function getMemoryHistory(initialPath: string = '/') {
+    export function getMemoryHistory(initialPath?: string | null) {
         if (memoryHistory == null) {
-            memoryHistory = createHistory(createMemorySource(initialPath));
+            memoryHistory = createHistory(
+                createMemorySource(initialPath ?? '/')
+            );
         }
         return memoryHistory;
     }

package/src/mu/BackButton.tsx

@@ -1,4 +1,4 @@
-import { IconButton, IconButtonProps } from '@mui/material';
+import { IconButton, IconButtonProps, useTheme } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import React from 'react';
 import { useNavigate } from '@reach/router';
@@ -20,6 +20,15 @@ export function BackButton(props: BackButtonProps) {
     // Navigate
     const navigate = useNavigate();
 
+    // 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: React.MouseEvent<HTMLButtonElement>) => {
         if (onClick) onClick(event);
@@ -33,15 +42,8 @@ export function BackButton(props: BackButtonProps) {
             size={size}
             onClick={onClickLocal}
             sx={{
-                border: (theme) =>
-                    `1px solid ${
-                        (() =>
-                            color != 'inherit' &&
-                            color != 'default' &&
-                            color in theme.palette
-                                ? theme.palette[color]
-                                : theme.palette.primary)().light
-                    }`
+                backgroundColor: pColor.contrastText,
+                border: `1px solid ${pColor.light}`
             }}
             {...rest}
         >

package/src/mu/pages/ViewPage.tsx

@@ -7,6 +7,7 @@ import {
     Typography
 } from '@mui/material';
 import React from 'react';
+import { Labels } from '../../app/Labels';
 import { globalApp } from '../../app/ReactApp';
 import {
     GridColumnRenderProps,
@@ -14,6 +15,7 @@ import {
 } from '../../components/GridColumn';
 import { GridDataFormat } from '../GridDataFormat';
 import { MUGlobal } from '../MUGlobal';
+import { PullToRefreshUI } from '../PullToRefreshUI';
 import { CommonPage } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
 
@@ -81,6 +83,11 @@ export interface ViewPageProps<T extends {}>
      */
     loadData: () => PromiseLike<T | undefined>;
 
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
+
     /**
      * Support refresh
      */
@@ -167,12 +174,19 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
         supportRefresh = true,
         fabColumnDirection = true,
         supportBack = true,
+        pullToRefresh = true,
         ...rest
     } = props;
 
     // Data
     const [data, setData] = React.useState<T>();
 
+    // Labels
+    const labels = Labels.CommonPage;
+
+    // Container
+    const pullContainer = '#page-container';
+
     // Load data
     const refresh = async () => {
         const result = await loadData();
@@ -245,6 +259,23 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                         </Stack>
                     )}
                     {Utils.getResult(children, data, refresh)}
+                    {pullToRefresh && (
+                        <PullToRefreshUI
+                            mainElement={pullContainer}
+                            triggerElement={pullContainer}
+                            instructionsPullToRefresh={labels.pullToRefresh}
+                            instructionsReleaseToRefresh={
+                                labels.releaseToRefresh
+                            }
+                            instructionsRefreshing={labels.refreshing}
+                            onRefresh={refresh}
+                            shouldPullToRefresh={() => {
+                                const container =
+                                    document.querySelector(pullContainer);
+                                return !container?.scrollTop;
+                            }}
+                        />
+                    )}
                 </React.Fragment>
             )}
         </CommonPage>