@etsoo/materialui 1.2.68 → 1.2.70

package/lib/pages/ViewPage.d.ts

@@ -3,10 +3,23 @@ import { DataTypes } from "@etsoo/shared";
 import { GridProps } from "@mui/material";
 import React from "react";
 import { CommonPageProps } from "./CommonPageProps";
+/**
+ * View page grid item properties
+ */
+export type ViewPageGridItemProps = GridProps & {
+    data: React.ReactNode;
+    label?: React.ReactNode;
+};
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+export declare function ViewPageGridItem(props: ViewPageGridItemProps): React.JSX.Element;
 /**
  * View page row width type
  */
-export type ViewPageRowType = boolean | "default" | "small" | object;
+export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
 /**
  * View page display field
  */

package/lib/pages/ViewPage.js

@@ -8,6 +8,21 @@ import { GridDataFormat } from "../GridDataFormat";
 import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+export function ViewPageGridItem(props) {
+    // Destruct
+    const { data, label, ...gridProps } = props;
+    // Layout
+    return (React.createElement(Grid, { item: true, ...gridProps },
+        label != null && (React.createElement(Typography, { variant: "caption", component: "div" },
+            label,
+            ":")),
+        typeof data === "object" ? (data) : (React.createElement(Typography, { variant: "subtitle2" }, data))));
+}
 function formatItemData(fieldData) {
     if (fieldData == null)
         return undefined;
@@ -22,7 +37,7 @@ function formatItemData(fieldData) {
 function getResp(singleRow) {
     return typeof singleRow === "object"
         ? singleRow
-        : singleRow === "default"
+        : singleRow === "medium"
             ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
             : singleRow === true
                 ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
@@ -114,11 +129,7 @@ export function ViewPage(props) {
             if (itemData == null || itemData === "")
                 return undefined;
             // Layout
-            return (React.createElement(Grid, { item: true, ...gridProps, key: index },
-                itemLabel != null && (React.createElement(Typography, { variant: "caption", component: "div" },
-                    itemLabel,
-                    ":")),
-                typeof itemData === "object" ? (itemData) : (React.createElement(Typography, { variant: "subtitle2" }, itemData))));
+            return (React.createElement(ViewPageGridItem, { item: true, ...gridProps, key: index, data: itemData, label: itemLabel }));
         })),
         actions !== null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings }, actions != null && Utils.getResult(actions, data, refresh))),
         Utils.getResult(children, data, refresh),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.68",
+  "version": "1.2.70",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/pages/ViewPage.tsx

@@ -20,10 +20,44 @@ import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
 import { CommonPageProps } from "./CommonPageProps";
 
+/**
+ * View page grid item properties
+ */
+export type ViewPageGridItemProps = GridProps & {
+  data: React.ReactNode;
+  label?: React.ReactNode;
+};
+
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+export function ViewPageGridItem(props: ViewPageGridItemProps) {
+  // Destruct
+  const { data, label, ...gridProps } = props;
+
+  // Layout
+  return (
+    <Grid item {...gridProps}>
+      {label != null && (
+        <Typography variant="caption" component="div">
+          {label}:
+        </Typography>
+      )}
+      {typeof data === "object" ? (
+        data
+      ) : (
+        <Typography variant="subtitle2">{data}</Typography>
+      )}
+    </Grid>
+  );
+}
+
 /**
  * View page row width type
  */
-export type ViewPageRowType = boolean | "default" | "small" | object;
+export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
 
 /**
  * View page display field
@@ -135,7 +169,7 @@ function formatItemData(fieldData: unknown): string | undefined {
 function getResp(singleRow: ViewPageRowType) {
   return typeof singleRow === "object"
     ? singleRow
-    : singleRow === "default"
+    : singleRow === "medium"
     ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
     : singleRow === true
     ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
@@ -289,18 +323,13 @@ export function ViewPage<T extends DataTypes.StringRecord>(
 
               // Layout
               return (
-                <Grid item {...gridProps} key={index}>
-                  {itemLabel != null && (
-                    <Typography variant="caption" component="div">
-                      {itemLabel}:
-                    </Typography>
-                  )}
-                  {typeof itemData === "object" ? (
-                    itemData
-                  ) : (
-                    <Typography variant="subtitle2">{itemData}</Typography>
-                  )}
-                </Grid>
+                <ViewPageGridItem
+                  item
+                  {...gridProps}
+                  key={index}
+                  data={itemData}
+                  label={itemLabel}
+                />
               );
             })}
           </Grid>