@etsoo/react 1.4.64 → 1.4.65

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

@@ -32,6 +32,10 @@ declare type ViewPageFieldType<T> = (string & keyof T) | [string & keyof T, Grid
  * View page props
  */
 export interface ViewPageProps<T extends {}> extends CommonPageProps {
+    /**
+     * Actions
+     */
+    actions?: React.ReactNode;
     /**
      * Fields to display
      */

package/lib/mu/pages/ViewPage.js

@@ -1,6 +1,7 @@
 import { Grid, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
 import { globalApp } from '../../app/ReactApp';
+import { HBox } from '../FlexBox';
 import { GridDataFormat } from '../GridDataFormat';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
@@ -58,7 +59,7 @@ function getItemField(field, data) {
  */
 export function ViewPage(props) {
     // Destruct
-    const { children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
     // Data
     const [data, setData] = React.useState();
     // Load data
@@ -70,7 +71,9 @@ export function ViewPage(props) {
     };
     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' }
+                '.MuiTypography-subtitle2': {
+                    fontWeight: 'bold'
+                }
             } }, fields.map((field, index) => {
             // Get data
             const [itemData, itemLabel, gridProps] = getItemField(field, data);
@@ -83,5 +86,6 @@ export function ViewPage(props) {
                     ":"),
                 React.createElement(Typography, { variant: "subtitle2" }, itemData)));
         })),
+        actions != null && (React.createElement(HBox, { paddingTop: paddings, paddingBottom: paddings }, actions)),
         children))));
 }

package/package.json

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

package/src/mu/pages/ViewPage.tsx

@@ -5,6 +5,7 @@ import {
     GridColumnRenderProps,
     GridDataType
 } from '../../components/GridColumn';
+import { HBox } from '../FlexBox';
 import { GridDataFormat } from '../GridDataFormat';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
@@ -49,6 +50,11 @@ type ViewPageFieldType<T> =
  * View page props
  */
 export interface ViewPageProps<T extends {}> extends CommonPageProps {
+    /**
+     * Actions
+     */
+    actions?: React.ReactNode;
+
     /**
      * Fields to display
      */
@@ -133,6 +139,7 @@ function getItemField<T>(
 export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     // Destruct
     const {
+        actions,
         children,
         fields,
         loadData,
@@ -168,7 +175,9 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                         justifyContent="left"
                         spacing={paddings}
                         sx={{
-                            '.MuiTypography-subtitle2': { fontWeight: 'bold' }
+                            '.MuiTypography-subtitle2': {
+                                fontWeight: 'bold'
+                            }
                         }}
                     >
                         {fields.map((field, index) => {
@@ -194,6 +203,11 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             );
                         })}
                     </Grid>
+                    {actions != null && (
+                        <HBox paddingTop={paddings} paddingBottom={paddings}>
+                            {actions}
+                        </HBox>
+                    )}
                     {children}
                 </React.Fragment>
             )}