@etsoo/react 1.4.63 → 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,6 +10,10 @@ export interface ViewPageField<T extends {}> extends GridProps {
      * Data field
      */
     data: keyof T | ((item: T) => React.ReactNode);
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
     /**
      * Label field
      */
@@ -17,8 +22,12 @@ export interface ViewPageField<T extends {}> extends GridProps {
      * 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,6 +1,7 @@
 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) {
@@ -13,12 +14,17 @@ function formatItemData(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') {
+    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
-        const { data: fieldData, label: fieldLabel, singleRow = false, ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = false, ...rest } = field;
         gridProps = {
             ...rest,
             ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
@@ -26,17 +32,19 @@ function getItemField(field, data) {
         // Field data
         if (typeof fieldData === 'function')
             itemData = fieldData(data);
-        else
+        else if (dataType == null)
             itemData = formatItemData(data[fieldData]);
+        else
+            itemData = GridDataFormat(data[fieldData], dataType, renderProps);
         // Field label
         itemLabel =
             typeof fieldLabel === 'function'
                 ? fieldLabel()
-                : (_a = globalApp.get(fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : (typeof fieldData === 'string' ? fieldData : 'noData'))) !== 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;
+        itemLabel = (_c = globalApp.get(field)) !== null && _c !== void 0 ? _c : field;
     }
     return [
         itemData,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.63",
+    "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,6 +19,11 @@ export interface ViewPageField<T extends {}> extends GridProps {
      */
     data: keyof T | ((item: T) => React.ReactNode);
 
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
+
     /**
      * Label field
      */
@@ -23,9 +33,17 @@ export interface ViewPageField<T extends {}> extends GridProps {
      * 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
@@ -63,11 +81,17 @@ function getItemField<T>(
         itemLabel: React.ReactNode,
         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
         const {
             data: fieldData,
+            dataType,
             label: fieldLabel,
+            renderProps,
             singleRow = false,
             ...rest
         } = field;
@@ -79,7 +103,8 @@ function getItemField<T>(
 
         // Field data
         if (typeof fieldData === 'function') itemData = fieldData(data);
-        else itemData = formatItemData(data[fieldData]);
+        else if (dataType == null) itemData = formatItemData(data[fieldData]);
+        else itemData = GridDataFormat(data[fieldData], dataType, renderProps);
 
         // Field label
         itemLabel =