@etsoo/react 1.5.12 → 1.5.16

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, ...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();
@@ -72,7 +78,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'
@@ -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.12",
+    "version": "1.5.16",
     "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.48",
+        "@etsoo/appscript": "^1.2.50",
         "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.11",
         "@mui/icons-material": "^5.4.1",

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

@@ -35,7 +35,7 @@ import {
 } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 import { Labels } from './Labels';
-import { Utils } from './Utils';
+import { ReactUtils } from './ReactUtils';
 
 /**
  * Global application
@@ -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(() => {
@@ -221,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
+                : ReactUtils.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/{Utils.ts → ReactUtils.ts}

@@ -1,10 +1,15 @@
-import { createHistory, createMemorySource, History } from '@reach/router';
+import {
+    createHistory,
+    createMemorySource,
+    History,
+    navigate
+} from '@reach/router';
 import React from 'react';
 
 /**
  * React utils
  */
-export namespace Utils {
+export namespace ReactUtils {
     // Memory history
     // https://github.com/reach/router/issues/225
     let memoryHistory: History | null;
@@ -31,13 +36,24 @@ 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;
     }
 
+    /**
+     * Get navigate function, works with memory history
+     * @returns NavigateFn
+     */
+    export function getNavigateFn() {
+        if (memoryHistory == null) return navigate;
+        return memoryHistory.navigate;
+    }
+
     /**
      * Is safe click
      * @param event Mouse event

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');
+        }
     }
 
     /**
@@ -300,10 +302,16 @@ export class ServiceApp<
 
     /**
      * Try login
+     * @param data Additional data
+     * @param showLoading Show loading bar or not
+     * @returns Result
      */
-    override async tryLogin<D extends {} = {}>(data?: D) {
+    override async tryLogin<D extends {} = {}>(
+        data?: D,
+        showLoading?: boolean
+    ) {
         // Reset user state
-        const result = await super.tryLogin(data);
+        const result = await super.tryLogin(data, showLoading);
         if (!result) return false;
 
         // Refresh token
@@ -323,6 +331,7 @@ export class ServiceApp<
                 });
             },
             data,
+            showLoading,
             relogin: true
         });
     }

package/src/index.ts

@@ -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';
@@ -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,53 @@
+import { IconButton, IconButtonProps, useTheme } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
+
+/**
+ * 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 = 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: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClick) onClick(event);
+        navigate(-1);
+    };
+
+    return (
+        <IconButton
+            aria-label="Back"
+            color={color}
+            size={size}
+            onClick={onClickLocal}
+            sx={{
+                backgroundColor: pColor.contrastText,
+                border: `1px solid ${pColor.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/ButtonLink.tsx

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

package/src/mu/ComboBox.tsx

@@ -2,11 +2,11 @@ import { IdLabelDto } from '@etsoo/appscript';
 import { Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
 import { Utils as SharedUtils } from '@etsoo/shared';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * ComboBox props
@@ -152,7 +152,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

package/src/mu/IconButtonLink.tsx

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

package/src/mu/ResponsibleContainer.tsx

@@ -3,7 +3,7 @@ import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { Labels } from '../app/Labels';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { GridColumn } from '../components/GridColumn';
 import {
     GridDataGet,
@@ -326,7 +326,7 @@ export function ResponsibleContainer<
                     mRef={mRefs}
                     onClick={(event, data) =>
                         quickAction &&
-                        Utils.isSafeClick(event) &&
+                        ReactUtils.isSafeClick(event) &&
                         quickAction(data)
                     }
                     oRef={(element) => {

package/src/mu/SearchBar.tsx

@@ -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';
 
 /**
  * Search bar props
@@ -48,7 +48,7 @@ const resetForm = (form: HTMLFormElement) => {
 
             // Ignore readOnly without data-reset=true inputs
             if (!input.readOnly || input.dataset.reset === 'true') {
-                AppUtils.triggerChange(input, '', true);
+                ReactUtils.triggerChange(input, '', true);
             }
             continue;
         }

package/src/mu/SelectEx.tsx

@@ -1,4 +1,3 @@
-import { Utils as AppUtils } from '../app/Utils';
 import {
     Checkbox,
     FormControl,
@@ -15,6 +14,7 @@ import { MUGlobal } from './MUGlobal';
 import { IdLabelDto } from '@etsoo/appscript';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * Extended select component props
@@ -145,7 +145,7 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                AppUtils.triggerChange(input, id as string, false);
+                ReactUtils.triggerChange(input, id as string, false);
             }
         }
     };

package/src/mu/Tiplist.tsx

@@ -2,7 +2,7 @@ import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
@@ -152,7 +152,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
 
             if (input && input.value !== '') {
                 // Different value, trigger change event
-                Utils.triggerChange(input, '', false);
+                ReactUtils.triggerChange(input, '', false);
             }
 
             if (states.options.length > 0) {
@@ -186,7 +186,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
             const newValue = DataTypes.getStringValue(value, idField) ?? '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

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>