@etsoo/react 1.4.60 → 1.4.64

package/lib/index.d.ts

@@ -42,6 +42,7 @@ export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';
 export * from './mu/FlexBox';
+export * from './mu/GridDataFormat';
 export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';

package/lib/index.js

@@ -45,6 +45,7 @@ export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';
 export * from './mu/FlexBox';
+export * from './mu/GridDataFormat';
 export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';

package/lib/mu/GridDataFormat.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GridColumnRenderProps, GridDataType } from '../components/GridColumn';
+/**
+ * Grid data format
+ * @param data Input data
+ * @param type Data type
+ * @param renderProps Render props
+ * @returns Result
+ */
+export declare function GridDataFormat(data: unknown, type: GridDataType, renderProps?: GridColumnRenderProps): React.ReactNode;

package/lib/mu/GridDataFormat.js

@@ -0,0 +1,43 @@
+import { DateUtils, NumberUtils } from '@etsoo/shared';
+import React from 'react';
+import { DateText } from './texts/DateText';
+import { GridDataType } from '../components/GridColumn';
+/**
+ * Grid data format
+ * @param data Input data
+ * @param type Data type
+ * @param renderProps Render props
+ * @returns Result
+ */
+export function GridDataFormat(data, type, renderProps) {
+    // Null
+    if (data == null)
+        return undefined;
+    // For date time
+    // Conversion if necessary
+    if (type === GridDataType.Date || type === GridDataType.DateTime) {
+        const dateValue = data instanceof Date
+            ? data
+            : typeof data === 'number' || typeof data === 'string'
+                ? new Date(data)
+                : undefined;
+        if (dateValue == null)
+            return undefined;
+        const option = type === GridDataType.DateTime ? 'ds' : 'd';
+        const nearDays = renderProps === null || renderProps === void 0 ? void 0 : renderProps.nearDays;
+        if (nearDays != null) {
+            return (React.createElement(DateText, { value: dateValue, locale: renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, timeZone: renderProps === null || renderProps === void 0 ? void 0 : renderProps.timeZone, options: option, nearDays: nearDays }));
+        }
+        return DateUtils.format(dateValue, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, option, renderProps === null || renderProps === void 0 ? void 0 : renderProps.timeZone);
+    }
+    // For numbers
+    if (typeof data === 'number') {
+        if (type === GridDataType.Money || type === GridDataType.IntMoney)
+            return NumberUtils.formatMoney(data, renderProps === null || renderProps === void 0 ? void 0 : renderProps.currency, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, type === GridDataType.IntMoney, renderProps === null || renderProps === void 0 ? void 0 : renderProps.numberFormatOptions);
+        else
+            return NumberUtils.format(data, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, renderProps === null || renderProps === void 0 ? void 0 : renderProps.numberFormatOptions);
+    }
+    if (typeof data === 'string')
+        return data;
+    return `${data}`;
+}

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

@@ -1,5 +1,6 @@
 import { GridProps } from '@mui/material';
 import React from 'react';
+import { GridColumnRenderProps, GridDataType } from '../../components/GridColumn';
 import { CommonPageProps } from './CommonPageProps';
 /**
  * View page display field
@@ -9,12 +10,24 @@ export interface ViewPageField<T extends {}> extends GridProps {
      * Data field
      */
     data: keyof T | ((item: T) => React.ReactNode);
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
     /**
      * Label field
      */
     label?: string | (() => React.ReactNode);
+    /**
+     * Display as single row
+     */
+    singleRow?: boolean;
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps;
 }
-declare type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
+declare type ViewPageFieldType<T> = (string & keyof T) | [string & keyof T, GridDataType, GridColumnRenderProps?] | ViewPageField<T>;
 /**
  * View page props
  */

package/lib/mu/pages/ViewPage.js

@@ -1,42 +1,56 @@
 import { Grid, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
 import { globalApp } from '../../app/ReactApp';
+import { GridDataFormat } from '../GridDataFormat';
 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;
+    var _a, _b, _c;
     // Item data and label
-    let itemData, itemLabel, gridProps;
-    if (typeof field === 'object') {
+    let itemData, itemLabel, gridProps = {};
+    if (Array.isArray(field)) {
+        const [fieldData, fieldType, renderProps] = field;
+        itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
+        itemLabel = (_a = globalApp.get(fieldData)) !== null && _a !== void 0 ? _a : fieldData;
+    }
+    else 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;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, 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);
+        else if (dataType == null)
+            itemData = formatItemData(data[fieldData]);
         else
-            itemData = formatItemData(formatItemData);
+            itemData = GridDataFormat(data[fieldData], dataType, renderProps);
         // Field label
         itemLabel =
             typeof fieldLabel === 'function'
                 ? fieldLabel()
-                : fieldLabel == null
-                    ? 'No Label'
-                    : (_a = globalApp.get(fieldLabel)) !== null && _a !== void 0 ? _a : fieldLabel;
+                : (_b = globalApp.get(fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : (typeof fieldData === 'string' ? fieldData : 'noData'))) !== null && _b !== void 0 ? _b : 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 };
+        itemLabel = (_c = globalApp.get(field)) !== null && _c !== void 0 ? _c : field;
     }
-    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.60",
+    "version": "1.4.64",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/index.ts

@@ -49,6 +49,7 @@ export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';
 export * from './mu/FlexBox';
+export * from './mu/GridDataFormat';
 export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';

package/src/mu/GridDataFormat.tsx

@@ -0,0 +1,77 @@
+import { DateUtils, NumberUtils } from '@etsoo/shared';
+import React from 'react';
+import { DateText } from './texts/DateText';
+import { GridColumnRenderProps, GridDataType } from '../components/GridColumn';
+
+/**
+ * Grid data format
+ * @param data Input data
+ * @param type Data type
+ * @param renderProps Render props
+ * @returns Result
+ */
+export function GridDataFormat(
+    data: unknown,
+    type: GridDataType,
+    renderProps?: GridColumnRenderProps
+): React.ReactNode {
+    // Null
+    if (data == null) return undefined;
+
+    // For date time
+    // Conversion if necessary
+    if (type === GridDataType.Date || type === GridDataType.DateTime) {
+        const dateValue =
+            data instanceof Date
+                ? data
+                : typeof data === 'number' || typeof data === 'string'
+                ? new Date(data)
+                : undefined;
+
+        if (dateValue == null) return undefined;
+
+        const option = type === GridDataType.DateTime ? 'ds' : 'd';
+
+        const nearDays = renderProps?.nearDays;
+        if (nearDays != null) {
+            return (
+                <DateText
+                    value={dateValue}
+                    locale={renderProps?.culture}
+                    timeZone={renderProps?.timeZone}
+                    options={option}
+                    nearDays={nearDays}
+                />
+            );
+        }
+
+        return DateUtils.format(
+            dateValue,
+            renderProps?.culture,
+            option,
+            renderProps?.timeZone
+        );
+    }
+
+    // For numbers
+    if (typeof data === 'number') {
+        if (type === GridDataType.Money || type === GridDataType.IntMoney)
+            return NumberUtils.formatMoney(
+                data,
+                renderProps?.currency,
+                renderProps?.culture,
+                type === GridDataType.IntMoney,
+                renderProps?.numberFormatOptions
+            );
+        else
+            return NumberUtils.format(
+                data,
+                renderProps?.culture,
+                renderProps?.numberFormatOptions
+            );
+    }
+
+    if (typeof data === 'string') return data;
+
+    return `${data}`;
+}

package/src/mu/pages/ViewPage.tsx

@@ -1,6 +1,11 @@
 import { Grid, GridProps, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
 import { globalApp } from '../../app/ReactApp';
+import {
+    GridColumnRenderProps,
+    GridDataType
+} from '../../components/GridColumn';
+import { GridDataFormat } from '../GridDataFormat';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
@@ -14,13 +19,31 @@ export interface ViewPageField<T extends {}> extends GridProps {
      */
     data: keyof T | ((item: T) => React.ReactNode);
 
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
+
     /**
      * Label field
      */
     label?: string | (() => React.ReactNode);
+
+    /**
+     * Display as single row
+     */
+    singleRow?: boolean;
+
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps;
 }
 
-type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
+type ViewPageFieldType<T> =
+    | (string & keyof T)
+    | [string & keyof T, GridDataType, GridColumnRenderProps?]
+    | ViewPageField<T>;
 
 /**
  * View page props
@@ -42,9 +65,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,33 +79,51 @@ function getItemField<T>(
     // Item data and label
     let itemData: React.ReactNode,
         itemLabel: React.ReactNode,
-        gridProps: GridProps;
+        gridProps: GridProps = {};
 
-    if (typeof field === 'object') {
+    if (Array.isArray(field)) {
+        const [fieldData, fieldType, renderProps] = field;
+        itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
+        itemLabel = globalApp.get<string>(fieldData) ?? fieldData;
+    } else 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;
+        const {
+            data: fieldData,
+            dataType,
+            label: fieldLabel,
+            renderProps,
+            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);
-        else itemData = formatItemData(formatItemData);
+        else if (dataType == null) itemData = formatItemData(data[fieldData]);
+        else itemData = GridDataFormat(data[fieldData], dataType, renderProps);
 
         // Field label
         itemLabel =
             typeof fieldLabel === 'function'
                 ? fieldLabel()
-                : fieldLabel == null
-                ? 'No Label'
-                : globalApp.get<string>(fieldLabel) ?? fieldLabel;
+                : globalApp.get<string>(
+                      fieldLabel ??
+                          (typeof fieldData === 'string' ? fieldData : 'noData')
+                  ) ?? 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];
+    return [
+        itemData,
+        itemLabel,
+        { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+    ];
 }
 
 /**