@etsoo/react 1.4.56 → 1.4.60

package/lib/app/ReactApp.d.ts

@@ -8,6 +8,10 @@ import { IStateProps } from '../states/IState';
 import { IPageData, PageAction, PageState } from '../states/PageState';
 import { UserAction, UserState } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
+/**
+ * Global application
+ */
+export declare let globalApp: IReactApp<IAppSettings, any, IPageData>;
 /**
  * React app state detector
  * Case 1: undefined, when refresh the whole page

package/lib/app/ReactApp.js

@@ -7,8 +7,10 @@ import { CultureState } from '../states/CultureState';
 import { PageActionType, PageState } from '../states/PageState';
 import { UserActionType, UserState } from '../states/UserState';
 import { Labels } from './Labels';
-// Global application
-let globalApp;
+/**
+ * Global application
+ */
+export let globalApp;
 /**
  * React app state detector
  * Case 1: undefined, when refresh the whole page

package/lib/app/ServiceApp.js

@@ -234,11 +234,12 @@ export class ServiceApp extends ReactApp {
         // Service user login
         this.servicePassphrase =
             (_a = this.decrypt(serviceUser.serviceDeviceId, this.settings.serviceId.toString())) !== null && _a !== void 0 ? _a : '';
-        // Keep = true, means service could hold the refresh token for long access
-        super.userLogin(user, refreshToken, true);
         // Service user
         this.serviceUser = serviceUser;
         // Service API token
         this.serviceApi.authorize(this.settings.authScheme, serviceUser.token);
+        // Keep = true, means service could hold the refresh token for long access
+        // Trigger Context change and serviceUser is ready then
+        super.userLogin(user, refreshToken, true);
     }
 }

package/lib/mu/MobileListItemRenderer.js

@@ -63,7 +63,9 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
                 } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
         React.createElement(CardContent, { sx: {
                 paddingTop: 0,
-                paddingBottom: cardActions == null ? margins : 0
+                paddingBottom: cardActions == null
+                    ? Reflect.get(margins, 'marginBottom')
+                    : 0
             } }, children),
         cardActions));
 }

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

@@ -1,12 +1,40 @@
-/// <reference types="react" />
+import { GridProps } from '@mui/material';
+import React from 'react';
 import { CommonPageProps } from './CommonPageProps';
+/**
+ * View page display field
+ */
+export interface ViewPageField<T extends {}> extends GridProps {
+    /**
+     * Data field
+     */
+    data: keyof T | ((item: T) => React.ReactNode);
+    /**
+     * Label field
+     */
+    label?: string | (() => React.ReactNode);
+}
+declare type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
 /**
  * View page props
  */
-export interface ViewPageProps extends CommonPageProps {
+export interface ViewPageProps<T extends {}> extends CommonPageProps {
+    /**
+     * Fields to display
+     */
+    fields: ViewPageFieldType<T>[];
+    /**
+     * Load data
+     */
+    loadData: () => PromiseLike<T | undefined>;
+    /**
+     * Support refresh
+     */
+    supportRefresh?: boolean;
 }
 /**
  * View page
  * @param props Props
  */
-export declare function ViewPage(props: ViewPageProps): JSX.Element;
+export declare function ViewPage<T extends {}>(props: ViewPageProps<T>): JSX.Element;
+export {};

package/lib/mu/pages/ViewPage.js

@@ -1,11 +1,73 @@
+import { Grid, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
+import { globalApp } from '../../app/ReactApp';
+import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
+function formatItemData(fieldData) {
+    if (fieldData instanceof Date)
+        return globalApp.formatDate(fieldData, 'd');
+    return new String(fieldData);
+}
+function getItemField(field, data) {
+    var _a, _b;
+    // Item data and label
+    let itemData, itemLabel, gridProps;
+    if (typeof field === 'object') {
+        // Destruct
+        if (field.label == null && typeof field.data === 'string')
+            field.label = field.data;
+        const { data: fieldData, label: fieldLabel, ...rest } = field;
+        gridProps = rest;
+        // Field data
+        if (typeof fieldData === 'function')
+            itemData = fieldData(data);
+        else
+            itemData = formatItemData(formatItemData);
+        // Field label
+        itemLabel =
+            typeof fieldLabel === 'function'
+                ? fieldLabel()
+                : fieldLabel == null
+                    ? 'No Label'
+                    : (_a = globalApp.get(fieldLabel)) !== null && _a !== void 0 ? _a : fieldLabel;
+    }
+    else {
+        itemData = formatItemData(data[field]);
+        itemLabel = (_b = globalApp.get(field)) !== null && _b !== void 0 ? _b : field;
+        gridProps = { xs: 12, sm: 6, md: 4, lg: 3 };
+    }
+    return [itemData, itemLabel, gridProps];
+}
 /**
  * View page
  * @param props Props
  */
 export function ViewPage(props) {
     // Destruct
-    const { ...rest } = props;
-    return React.createElement(CommonPage, { ...rest, scrollContainer: global });
+    const { children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
+    // Data
+    const [data, setData] = React.useState();
+    // Load data
+    const onRefresh = async () => {
+        const result = await loadData();
+        if (result == null)
+            return;
+        setData(result);
+    };
+    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? onRefresh : undefined, onUpdate: supportRefresh ? undefined : onRefresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, sx: {
+                '.MuiTypography-subtitle2': { fontWeight: 'bold' }
+            } }, fields.map((field, index) => {
+            // Get data
+            const [itemData, itemLabel, gridProps] = getItemField(field, data);
+            if (itemData == null)
+                return undefined;
+            // Layout
+            return (React.createElement(Grid, { item: true, ...gridProps, key: index },
+                React.createElement(Typography, { variant: "caption", component: "div" },
+                    itemLabel,
+                    ":"),
+                React.createElement(Typography, { variant: "subtitle2" }, itemData)));
+        })),
+        children))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.56",
+    "version": "1.4.60",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -77,7 +77,7 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.16.8",
-        "@babel/core": "^7.16.10",
+        "@babel/core": "^7.16.12",
         "@babel/plugin-transform-runtime": "^7.16.10",
         "@babel/preset-env": "^7.16.11",
         "@babel/runtime-corejs3": "^7.16.8",

package/src/app/ReactApp.ts

@@ -34,8 +34,10 @@ import {
 import { InputDialogProps } from './InputDialogProps';
 import { Labels } from './Labels';
 
-// Global application
-let globalApp: IReactApp<IAppSettings, any, IPageData>;
+/**
+ * Global application
+ */
+export let globalApp: IReactApp<IAppSettings, any, IPageData>;
 
 /**
  * React app state detector

package/src/app/ServiceApp.ts

@@ -333,13 +333,14 @@ export class ServiceApp<
                 this.settings.serviceId.toString()
             ) ?? '';
 
-        // Keep = true, means service could hold the refresh token for long access
-        super.userLogin(user, refreshToken, true);
-
         // Service user
         this.serviceUser = serviceUser;
 
         // Service API token
         this.serviceApi.authorize(this.settings.authScheme, serviceUser.token);
+
+        // Keep = true, means service could hold the refresh token for long access
+        // Trigger Context change and serviceUser is ready then
+        super.userLogin(user, refreshToken, true);
     }
 }

package/src/mu/MobileListItemRenderer.tsx

@@ -104,7 +104,10 @@ export function MobileListItemRenderer<T>(
             <CardContent
                 sx={{
                     paddingTop: 0,
-                    paddingBottom: cardActions == null ? margins : 0
+                    paddingBottom:
+                        cardActions == null
+                            ? Reflect.get(margins, 'marginBottom')
+                            : 0
                 }}
             >
                 {children}

package/src/mu/pages/ViewPage.tsx

@@ -1,19 +1,159 @@
+import { Grid, GridProps, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
+import { globalApp } from '../../app/ReactApp';
+import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
 
+/**
+ * View page display field
+ */
+export interface ViewPageField<T extends {}> extends GridProps {
+    /**
+     * Data field
+     */
+    data: keyof T | ((item: T) => React.ReactNode);
+
+    /**
+     * Label field
+     */
+    label?: string | (() => React.ReactNode);
+}
+
+type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
+
 /**
  * View page props
  */
-export interface ViewPageProps extends CommonPageProps {}
+export interface ViewPageProps<T extends {}> extends CommonPageProps {
+    /**
+     * Fields to display
+     */
+    fields: ViewPageFieldType<T>[];
+
+    /**
+     * Load data
+     */
+    loadData: () => PromiseLike<T | undefined>;
+
+    /**
+     * Support refresh
+     */
+    supportRefresh?: boolean;
+}
+
+function formatItemData(fieldData: unknown) {
+    if (fieldData instanceof Date) return globalApp.formatDate(fieldData, 'd');
+    return new String(fieldData);
+}
+
+function getItemField<T>(
+    field: ViewPageFieldType<T>,
+    data: T
+): [React.ReactNode, React.ReactNode, GridProps] {
+    // Item data and label
+    let itemData: React.ReactNode,
+        itemLabel: React.ReactNode,
+        gridProps: GridProps;
+
+    if (typeof field === 'object') {
+        // Destruct
+        if (field.label == null && typeof field.data === 'string')
+            field.label = field.data;
+        const { data: fieldData, label: fieldLabel, ...rest } = field;
+        gridProps = rest;
+
+        // Field data
+        if (typeof fieldData === 'function') itemData = fieldData(data);
+        else itemData = formatItemData(formatItemData);
+
+        // Field label
+        itemLabel =
+            typeof fieldLabel === 'function'
+                ? fieldLabel()
+                : fieldLabel == null
+                ? 'No Label'
+                : globalApp.get<string>(fieldLabel) ?? fieldLabel;
+    } else {
+        itemData = formatItemData(data[field]);
+        itemLabel = globalApp.get<string>(field) ?? field;
+        gridProps = { xs: 12, sm: 6, md: 4, lg: 3 };
+    }
+
+    return [itemData, itemLabel, gridProps];
+}
 
 /**
  * View page
  * @param props Props
  */
-export function ViewPage(props: ViewPageProps) {
+export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     // Destruct
-    const { ...rest } = props;
+    const {
+        children,
+        fields,
+        loadData,
+        paddings = MUGlobal.pagePaddings,
+        supportRefresh = true,
+        ...rest
+    } = props;
+
+    // Data
+    const [data, setData] = React.useState<T>();
+
+    // Load data
+    const onRefresh = async () => {
+        const result = await loadData();
+        if (result == null) return;
+        setData(result);
+    };
+
+    return (
+        <CommonPage
+            paddings={paddings}
+            onRefresh={supportRefresh ? onRefresh : undefined}
+            onUpdate={supportRefresh ? undefined : onRefresh}
+            {...rest}
+            scrollContainer={global}
+        >
+            {data == null ? (
+                <LinearProgress />
+            ) : (
+                <React.Fragment>
+                    <Grid
+                        container
+                        justifyContent="left"
+                        spacing={paddings}
+                        sx={{
+                            '.MuiTypography-subtitle2': { fontWeight: 'bold' }
+                        }}
+                    >
+                        {fields.map((field, index) => {
+                            // Get data
+                            const [itemData, itemLabel, gridProps] =
+                                getItemField(field, data);
+
+                            if (itemData == null) return undefined;
 
-    return <CommonPage {...rest} scrollContainer={global}></CommonPage>;
+                            // Layout
+                            return (
+                                <Grid item {...gridProps} key={index}>
+                                    <Typography
+                                        variant="caption"
+                                        component="div"
+                                    >
+                                        {itemLabel}:
+                                    </Typography>
+                                    <Typography variant="subtitle2">
+                                        {itemData}
+                                    </Typography>
+                                </Grid>
+                            );
+                        })}
+                    </Grid>
+                    {children}
+                </React.Fragment>
+            )}
+        </CommonPage>
+    );
 }