@etsoo/react 1.4.63 → 1.4.68

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,12 +22,24 @@ 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
  */
-export interface ViewPageProps<T extends {}> extends CommonPageProps {
+export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'children'> {
+    /**
+     * Actions
+     */
+    actions?: (data: T) => React.ReactNode;
+    /**
+     * Children
+     */
+    children?: React.ReactNode | ((data: T) => React.ReactNode);
     /**
      * Fields to display
      */

package/lib/mu/pages/ViewPage.js

@@ -1,6 +1,9 @@
+import { Utils } from '@etsoo/shared';
 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';
 function formatItemData(fieldData) {
@@ -13,12 +16,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 +34,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,
@@ -50,7 +60,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
@@ -62,7 +72,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);
@@ -75,5 +87,6 @@ export function ViewPage(props) {
                     ":"),
                 React.createElement(Typography, { variant: "subtitle2" }, itemData)));
         })),
-        children))));
+        actions != null && (React.createElement(HBox, { paddingTop: paddings, paddingBottom: paddings }, actions)),
+        Utils.getResult(children, data)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.63",
+    "version": "1.4.68",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -53,8 +53,8 @@
         "@etsoo/appscript": "^1.2.27",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.6",
-        "@mui/icons-material": "^5.3.0",
-        "@mui/material": "^5.3.0",
+        "@mui/icons-material": "^5.3.1",
+        "@mui/material": "^5.3.1",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -83,8 +83,8 @@
         "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.10.0",
-        "@typescript-eslint/parser": "^5.10.0",
+        "@typescript-eslint/eslint-plugin": "^5.10.1",
+        "@typescript-eslint/parser": "^5.10.1",
         "eslint": "^8.7.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",

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,13 @@
+import { Utils } from '@etsoo/shared';
 import { Grid, GridProps, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
 import { globalApp } from '../../app/ReactApp';
+import {
+    GridColumnRenderProps,
+    GridDataType
+} from '../../components/GridColumn';
+import { HBox } from '../FlexBox';
+import { GridDataFormat } from '../GridDataFormat';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
@@ -14,6 +21,11 @@ export interface ViewPageField<T extends {}> extends GridProps {
      */
     data: keyof T | ((item: T) => React.ReactNode);
 
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
+
     /**
      * Label field
      */
@@ -23,14 +35,33 @@ 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
  */
-export interface ViewPageProps<T extends {}> extends CommonPageProps {
+export interface ViewPageProps<T extends {}>
+    extends Exclude<CommonPageProps, 'children'> {
+    /**
+     * Actions
+     */
+    actions?: (data: T) => React.ReactNode;
+
+    /**
+     * Children
+     */
+    children?: React.ReactNode | ((data: T) => React.ReactNode);
+
     /**
      * Fields to display
      */
@@ -63,11 +94,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 +116,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 =
@@ -108,6 +146,7 @@ function getItemField<T>(
 export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     // Destruct
     const {
+        actions,
         children,
         fields,
         loadData,
@@ -143,7 +182,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) => {
@@ -169,7 +210,12 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             );
                         })}
                     </Grid>
-                    {children}
+                    {actions != null && (
+                        <HBox paddingTop={paddings} paddingBottom={paddings}>
+                            {actions}
+                        </HBox>
+                    )}
+                    {Utils.getResult(children, data)}
                 </React.Fragment>
             )}
         </CommonPage>