@etsoo/react 1.5.9 → 1.5.13

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,6 +108,19 @@ 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

@@ -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(() => {
@@ -67,7 +67,7 @@ export class ReactApp extends CoreApp {
         this.userState = new UserState();
         this.history =
             window.location.hostname === ''
-                ? Utils.getMemoryHistory()
+                ? Utils.getMemoryHistory(this.getHostUrl(window.location.href))
                 : undefined;
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState();
@@ -91,6 +91,31 @@ 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

@@ -32,6 +32,12 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, 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;
     /**
      * Go to the login page
      * @param tryLogin Try to login again

package/lib/app/ServiceApp.js

@@ -39,6 +39,14 @@ export class ServiceApp extends ReactApp {
     set serviceUser(value) {
         this._serviceUser = value;
     }
+    /**
+     * Get parsed Url under bridge host
+     * @param url Url
+     * @returns Parsed Url
+     */
+    getHostUrl(url) {
+        return this.getHostUrlBase(url, 's' + this.settings.serviceId);
+    }
     /**
      * Go to the login page
      * @param tryLogin Try to login again

package/lib/app/Utils.d.ts

@@ -12,9 +12,10 @@ export declare namespace Utils {
     function formatInputValue(value: unknown): string | number | any[] | undefined;
     /**
      * Get memory history
+     * @param initialPath Initial path
      * @returns History
      */
-    function getMemoryHistory(): History;
+    function getMemoryHistory(initialPath?: string): History;
     /**
      * Is safe click
      * @param event Mouse event

package/lib/app/Utils.js

@@ -26,11 +26,12 @@ export var Utils;
     Utils.formatInputValue = formatInputValue;
     /**
      * Get memory history
+     * @param initialPath Initial path
      * @returns History
      */
-    function getMemoryHistory() {
+    function getMemoryHistory(initialPath = '/') {
         if (memoryHistory == null) {
-            memoryHistory = createHistory(createMemorySource('/'));
+            memoryHistory = createHistory(createMemorySource(initialPath));
         }
         return memoryHistory;
     }

package/lib/index.d.ts

@@ -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

@@ -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,29 @@
+import { IconButton } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import React from 'react';
+import { useNavigate } from '@reach/router';
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export function BackButton(props) {
+    // Destruct
+    const { color = 'primary', size = 'small', onClick, ...rest } = props;
+    // Navigate
+    const navigate = useNavigate();
+    // 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: {
+            border: (theme) => `1px solid ${(() => color != 'inherit' &&
+                color != 'default' &&
+                color in theme.palette
+                ? theme.palette[color]
+                : theme.palette.primary)().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/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.js

@@ -62,7 +62,7 @@ function getItemField(field, data) {
  */
 export function ViewPage(props) {
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, supportBack = true, ...rest } = props;
     // Data
     const [data, setData] = React.useState();
     // Load data
@@ -72,7 +72,7 @@ export function ViewPage(props) {
             return;
         setData(result);
     };
-    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", sx: {
                 '.MuiTypography-subtitle2': {
                     fontWeight: 'bold'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.9",
+    "version": "1.5.13",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/app/Labels.ts

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

package/src/app/ReactApp.ts

@@ -56,12 +56,10 @@ export function ReactAppStateDetector(props: IStateProps) {
     const { targetFields, update } = props;
 
     // Context
-    const { state } =
+    const { state = {} } =
         globalApp == null
-            ? ({ state: {} } as UserCalls<IUser>)
-            : React.useContext(
-                  (globalApp.userState as UserState<IUser>).context
-              );
+            ? ({} as UserCalls<IUser>)
+            : React.useContext(globalApp.userState.context);
 
     // Ready
     React.useEffect(() => {
@@ -223,7 +221,7 @@ export class ReactApp<
         );
         this.history =
             window.location.hostname === ''
-                ? Utils.getMemoryHistory()
+                ? Utils.getMemoryHistory(this.getHostUrl(window.location.href))
                 : undefined;
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState<P>();
@@ -231,6 +229,33 @@ export class ReactApp<
         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

@@ -68,6 +68,15 @@ export class ServiceApp<
         this.serviceApi = api;
     }
 
+    /**
+     * Get parsed Url under bridge host
+     * @param url Url
+     * @returns Parsed Url
+     */
+    protected override getHostUrl(url: string) {
+        return this.getHostUrlBase(url, 's' + this.settings.serviceId);
+    }
+
     /**
      * Go to the login page
      * @param tryLogin Try to login again

package/src/app/Utils.ts

@@ -28,11 +28,12 @@ export namespace Utils {
 
     /**
      * Get memory history
+     * @param initialPath Initial path
      * @returns History
      */
-    export function getMemoryHistory() {
+    export function getMemoryHistory(initialPath: string = '/') {
         if (memoryHistory == null) {
-            memoryHistory = createHistory(createMemorySource('/'));
+            memoryHistory = createHistory(createMemorySource(initialPath));
         }
         return memoryHistory;
     }

package/src/index.ts

@@ -38,6 +38,7 @@ 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/src/mu/BackButton.tsx

@@ -0,0 +1,51 @@
+import { IconButton, IconButtonProps } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import React from 'react';
+import { useNavigate } from '@reach/router';
+
+/**
+ * BackButton props
+ */
+export interface BackButtonProps extends IconButtonProps {}
+
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export function BackButton(props: BackButtonProps) {
+    // Destruct
+    const { color = 'primary', size = 'small', onClick, ...rest } = props;
+
+    // Navigate
+    const navigate = useNavigate();
+
+    // Click handler
+    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClick) onClick(event);
+        navigate(-1);
+    };
+
+    return (
+        <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
+                    }`
+            }}
+            {...rest}
+        >
+            <ArrowBackIcon />
+        </IconButton>
+    );
+}

package/src/mu/BridgeCloseButton.tsx

@@ -1,6 +1,6 @@
 import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
 import CloseIcon from '@mui/icons-material/Close';
-import { IconButton, IconButtonProps } from '@mui/material';
+import { Box, BoxProps, IconButton, IconButtonProps } from '@mui/material';
 import React from 'react';
 import { globalApp } from '../app/ReactApp';
 
@@ -8,6 +8,11 @@ import { globalApp } from '../app/ReactApp';
  * Bridge close button props
  */
 export interface BridgeCloseButtonProps extends IconButtonProps {
+    /**
+     * Box props
+     */
+    boxProps?: BoxProps;
+
     /**
      * Validate the host
      * @param host Host
@@ -23,6 +28,7 @@ export interface BridgeCloseButtonProps extends IconButtonProps {
 export function BridgeCloseButton(props: BridgeCloseButtonProps) {
     // Destruct
     const {
+        boxProps,
         onClick,
         title = typeof globalApp === 'undefined'
             ? 'Close'
@@ -45,20 +51,15 @@ export function BridgeCloseButton(props: BridgeCloseButtonProps) {
     };
 
     return (
-        <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}
-        >
-            <CloseIcon />
-        </IconButton>
+        <Box {...boxProps}>
+            <IconButton
+                aria-label="close"
+                onClick={onClickLocal}
+                title={title}
+                {...rest}
+            >
+                <CloseIcon />
+            </IconButton>
+        </Box>
     );
 }

package/src/mu/pages/CommonPage.tsx

@@ -8,6 +8,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
@@ -34,6 +35,7 @@ export function CommonPage(props: CommonPageProps) {
         onUpdateAll,
         paddings = MUGlobal.pagePaddings,
         scrollContainer,
+        supportBack = false,
         targetFields,
         sx = {},
         ...rest
@@ -115,6 +117,9 @@ export function CommonPage(props: CommonPageProps) {
                         title={labels.more}
                         actions={moreActions}
                     />
+                    {supportBack && (
+                        <BackButton title={labels.back} size={fabSize} />
+                    )}
                 </FabBox>
                 {children}
             </Container>

package/src/mu/pages/CommonPageProps.ts

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

package/src/mu/pages/EditPage.tsx

@@ -6,6 +6,7 @@ import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
 import SaveIcon from '@mui/icons-material/Save';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { BackButton } from '../BackButton';
 
 /**
  * Add / Edit page props
@@ -25,6 +26,12 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
      * On delete callback
      */
     onDelete?: () => Promise<void> | void;
+
+    /**
+     * Support back click
+     * @default true
+     */
+    supportBack?: boolean;
 }
 
 /**
@@ -40,6 +47,7 @@ export function EditPage(props: EditPageProps) {
         onSubmit,
         paddings = MUGlobal.pagePaddings,
         scrollContainer = CommonPageScrollContainer,
+        supportBack = true,
         ...rest
     } = props;
 
@@ -91,6 +99,7 @@ export function EditPage(props: EditPageProps) {
                     >
                         {labels.save}
                     </Button>
+                    {supportBack && <BackButton title={labels.back} />}
                 </Grid>
             </form>
         </CommonPage>

package/src/mu/pages/ViewPage.tsx

@@ -165,6 +165,8 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
         loadData,
         paddings = MUGlobal.pagePaddings,
         supportRefresh = true,
+        fabColumnDirection = true,
+        supportBack = true,
         ...rest
     } = props;
 
@@ -184,7 +186,9 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
             onRefresh={supportRefresh ? refresh : undefined}
             onUpdate={supportRefresh ? undefined : refresh}
             {...rest}
-            scrollContainer={global}
+            scrollContainer={globalThis}
+            fabColumnDirection={fabColumnDirection}
+            supportBack={supportBack}
         >
             {data == null ? (
                 <LinearProgress />