@etsoo/react 1.4.61 → 1.4.62

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

@@ -13,6 +13,10 @@ export interface ViewPageField<T extends {}> extends GridProps {
      * Label field
      */
     label: string | (() => React.ReactNode);
+    /**
+     * Display as single row
+     */
+    singleRow?: boolean;
 }
 declare type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
 /**

package/lib/mu/pages/ViewPage.js

@@ -4,18 +4,25 @@ import { globalApp } from '../../app/ReactApp';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
 function formatItemData(fieldData) {
+    if (fieldData == null)
+        return undefined;
+    if (typeof fieldData === 'string')
+        return fieldData;
     if (fieldData instanceof Date)
         return globalApp.formatDate(fieldData, 'd');
-    return new String(fieldData);
+    return `${fieldData}`;
 }
 function getItemField(field, data) {
     var _a, _b;
     // Item data and label
-    let itemData, itemLabel, gridProps;
+    let itemData, itemLabel, gridProps = {};
     if (typeof field === 'object') {
         // Destruct
-        const { data: fieldData, label: fieldLabel, ...rest } = field;
-        gridProps = rest;
+        const { data: fieldData, label: fieldLabel, singleRow = false, ...rest } = field;
+        gridProps = {
+            ...rest,
+            ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
+        };
         // Field data
         if (typeof fieldData === 'function')
             itemData = fieldData(data);
@@ -30,9 +37,12 @@ function getItemField(field, data) {
     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];
+    return [
+        itemData,
+        itemLabel,
+        { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+    ];
 }
 /**
  * View page

package/package.json

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

package/src/mu/pages/ViewPage.tsx

@@ -18,6 +18,11 @@ export interface ViewPageField<T extends {}> extends GridProps {
      * Label field
      */
     label: string | (() => React.ReactNode);
+
+    /**
+     * Display as single row
+     */
+    singleRow?: boolean;
 }
 
 type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
@@ -42,9 +47,11 @@ export interface ViewPageProps<T extends {}> extends CommonPageProps {
     supportRefresh?: boolean;
 }
 
-function formatItemData(fieldData: unknown) {
+function formatItemData(fieldData: unknown): string | undefined {
+    if (fieldData == null) return undefined;
+    if (typeof fieldData === 'string') return fieldData;
     if (fieldData instanceof Date) return globalApp.formatDate(fieldData, 'd');
-    return new String(fieldData);
+    return `${fieldData}`;
 }
 
 function getItemField<T>(
@@ -54,12 +61,21 @@ function getItemField<T>(
     // Item data and label
     let itemData: React.ReactNode,
         itemLabel: React.ReactNode,
-        gridProps: GridProps;
+        gridProps: GridProps = {};
 
     if (typeof field === 'object') {
         // Destruct
-        const { data: fieldData, label: fieldLabel, ...rest } = field;
-        gridProps = rest;
+        const {
+            data: fieldData,
+            label: fieldLabel,
+            singleRow = false,
+            ...rest
+        } = field;
+
+        gridProps = {
+            ...rest,
+            ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
+        };
 
         // Field data
         if (typeof fieldData === 'function') itemData = fieldData(data);
@@ -73,10 +89,13 @@ function getItemField<T>(
     } else {
         itemData = formatItemData(data[field]);
         itemLabel = globalApp.get<string>(field) ?? field;
-        gridProps = { xs: 12, sm: 6, md: 4, lg: 3 };
     }
 
-    return [itemData, itemLabel, gridProps];
+    return [
+        itemData,
+        itemLabel,
+        { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+    ];
 }
 
 /**