@etsoo/materialui 1.4.4 → 1.4.6

package/src/custom/CustomFieldUtils.tsx

@@ -5,7 +5,7 @@ import {
 } from "@etsoo/appscript";
 import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
 import { IdType, ListType2 } from "@etsoo/shared";
-import { Grid, GridProps, Typography } from "@mui/material";
+import { Grid2, GridSize, Typography } from "@mui/material";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
 import { FieldCheckbox } from "./FieldCheckbox";
@@ -21,6 +21,7 @@ import { FieldJson } from "./FieldJson";
 import { FieldRadio } from "./FieldRadio";
 import { FieldSelect } from "./FieldSelect";
 import { FieldSwitch } from "./FieldSwitch";
+import { ResponsiveStyleValue } from "../ResponsiveStyleValue";
 
 /**
  * Custom field utilities
@@ -82,14 +83,13 @@ export namespace CustomFieldUtils {
       const creator = customFieldCreators[field.type];
       if (creator == null) {
         return (
-          <Grid
-            item
+          <Grid2
             key={index}
+            size={transformSpace(field.space)}
             {...field.gridItemProps}
-            {...transformSpace(field.space)}
           >
             {`Type ${field.type} is not supported currently`}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -115,14 +115,13 @@ export namespace CustomFieldUtils {
       }
 
       return (
-        <Grid
-          item
+        <Grid2
           key={name ?? index}
+          size={transformSpace(field.space)}
           {...field.gridItemProps}
-          {...transformSpace(field.space)}
         >
           {ui}
-        </Grid>
+        </Grid2>
       );
     });
   }
@@ -150,7 +149,7 @@ export namespace CustomFieldUtils {
    * @returns Result
    */
   export function transformSpace(space?: CustomFieldSpace) {
-    const props: GridProps =
+    const size: ResponsiveStyleValue<GridSize> =
       space === "full"
         ? { xs: 12 }
         : space === "quater"
@@ -162,7 +161,7 @@ export namespace CustomFieldUtils {
         : space === "half1"
         ? { xs: 12, sm: 6 }
         : { sm: 12, md: 6 };
-    return props;
+    return size;
   }
 
   /**

package/src/custom/CustomFieldViewer.tsx

@@ -1,5 +1,5 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { Grid, GridProps, Typography, TypographyProps } from "@mui/material";
+import { Grid2, Grid2Props, Typography, TypographyProps } from "@mui/material";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { MUGlobal } from "../MUGlobal";
 import { VBox } from "../FlexBox";
@@ -20,7 +20,7 @@ export type CustomFieldViewerProps = {
    * Grid props
    * 网格属性
    */
-  gridProps?: GridProps;
+  gridProps?: Grid2Props;
 
   /**
    * JSON data
@@ -96,7 +96,7 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
   }
 
   return (
-    <Grid
+    <Grid2
       container
       justifyContent="left"
       spacing={spacing}
@@ -116,11 +116,10 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
         const value = Utils.getNestedValue(data, name);
 
         return (
-          <Grid
-            item
+          <Grid2
             key={name ?? index}
+            size={CustomFieldUtils.transformSpace(field.space)}
             {...field.gridItemProps}
-            {...CustomFieldUtils.transformSpace(field.space)}
           >
             <VBox gap={verticalGap}>
               <Typography fontWeight="bold" fontSize="small" {...titleProps}>
@@ -130,9 +129,9 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
                 {valueLabelFormatter(value, field)}
               </Typography>
             </VBox>
-          </Grid>
+          </Grid2>
         );
       })}
-    </Grid>
+    </Grid2>
   );
 }

package/src/custom/CustomFieldWindow.tsx

@@ -1,7 +1,7 @@
 import { CustomFieldData } from "@etsoo/appscript";
 import { CustomFieldReactCollection } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
-import { Grid, GridProps, Stack } from "@mui/material";
+import { Grid2, Grid2Props, Stack } from "@mui/material";
 import React from "react";
 import { globalApp } from "../app/ReactApp";
 import { MUGlobal } from "../MUGlobal";
@@ -64,7 +64,7 @@ export type CustomFieldWindowProps<D extends CustomFieldData> = {
    * Grid props
    * 网格属性
    */
-  gridProps?: GridProps;
+  gridProps?: Grid2Props;
 
   /**
    * JSON data
@@ -156,7 +156,7 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
               fullScreen: app.smDown,
               inputs: (
                 <Stack marginTop={1.5}>
-                  <Grid
+                  <Grid2
                     container
                     justifyContent="left"
                     spacing={spacing}
@@ -178,7 +178,7 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
                         Utils.setNestedValue(data, name, value);
                       }
                     )}
-                  </Grid>
+                  </Grid2>
                 </Stack>
               )
             }

package/src/index.ts

@@ -95,6 +95,7 @@ export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
 export * from "./QuickList";
 export * from "./ResponsibleContainer";
+export * from "./ResponsiveStyleValue";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";
 export * from "./SearchBar";

package/src/pages/EditPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid } from "@mui/material";
+import { Button, Grid2 } from "@mui/material";
 import React, { FormEventHandler } from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage, CommonPageProps } from "./CommonPage";
@@ -86,10 +86,15 @@ export function EditPage(props: EditPageProps) {
       )}
       {topPart}
       <form onSubmit={onSubmit}>
-        <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>
+        <Grid2
+          container
+          justifyContent="left"
+          spacing={paddings}
+          paddingTop={1}
+        >
           {children}
-        </Grid>
-        <Grid
+        </Grid2>
+        <Grid2
           container
           position="sticky"
           display="flex"
@@ -121,7 +126,7 @@ export function EditPage(props: EditPageProps) {
             {labels.save}
           </Button>
           {supportBack && <BackButton title={labels.back} />}
-        </Grid>
+        </Grid2>
       </form>
       {bottomPart}
     </CommonPage>

package/src/pages/ViewPage.tsx

@@ -5,8 +5,8 @@ import {
 } from "@etsoo/react";
 import { DataTypes, DateUtils, Utils } from "@etsoo/shared";
 import {
-  Grid,
-  GridProps,
+  Grid2,
+  Grid2Props,
   LinearProgress,
   Stack,
   Typography
@@ -26,7 +26,7 @@ import { OperationMessageContainer } from "../messages/OperationMessageContainer
 /**
  * View page grid item properties
  */
-export type ViewPageGridItemProps = GridProps & {
+export type ViewPageGridItemProps = Grid2Props & {
   data: React.ReactNode;
   label?: React.ReactNode;
   singleRow?: ViewPageRowType;
@@ -43,7 +43,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 
   // Default options
   let options = {};
-  if (gridProps.xs == null && gridProps.md == null) {
+  if (gridProps.size == null) {
     options = getResp(singleRow ?? "small");
   } else if (singleRow != null) {
     options = getResp(singleRow ?? "small");
@@ -51,7 +51,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 
   // Layout
   return (
-    <Grid item {...gridProps} {...options}>
+    <Grid2 {...gridProps} {...options}>
       {label != null && (
         <Typography variant="caption" component="div">
           {label}:
@@ -62,7 +62,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
       ) : (
         <Typography variant="subtitle2">{data}</Typography>
       )}
-    </Grid>
+    </Grid2>
   );
 }
 
@@ -74,7 +74,7 @@ export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
 /**
  * View page display field
  */
-export interface ViewPageField<T extends object> extends GridProps {
+export interface ViewPageField<T extends object> extends Grid2Props {
   /**
    * Data field
    */
@@ -181,29 +181,31 @@ function formatItemData(fieldData: unknown): string | undefined {
 }
 
 function getResp(singleRow: ViewPageRowType) {
-  return typeof singleRow === "object"
-    ? singleRow
-    : singleRow === "medium"
-    ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
-    : singleRow === true
-    ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
-    : {
-        xs: singleRow === false ? 12 : 6,
-        sm: 6,
-        md: 4,
-        lg: 3,
-        xl: 2
-      };
+  const size =
+    typeof singleRow === "object"
+      ? singleRow
+      : singleRow === "medium"
+      ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
+      : singleRow === true
+      ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
+      : {
+          xs: singleRow === false ? 12 : 6,
+          sm: 6,
+          md: 4,
+          lg: 3,
+          xl: 2
+        };
+  return { size };
 }
 
 function getItemField<T extends object>(
   field: ViewPageFieldTypeNarrow<T>,
   data: T
-): [React.ReactNode, React.ReactNode, GridProps] {
+): [React.ReactNode, React.ReactNode, Grid2Props] {
   // Item data and label
   let itemData: React.ReactNode,
     itemLabel: React.ReactNode,
-    gridProps: GridProps = {};
+    gridProps: Grid2Props = {};
 
   if (Array.isArray(field)) {
     const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
@@ -326,7 +328,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               }
             />
           )}
-          <Grid
+          <Grid2
             container
             justifyContent="left"
             spacing={spacing}
@@ -356,7 +358,6 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               // Layout
               return (
                 <ViewPageGridItem
-                  item
                   {...gridProps}
                   key={index}
                   data={itemData}
@@ -364,7 +365,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
                 />
               );
             })}
-          </Grid>
+          </Grid2>
           {actions !== null && (
             <Stack
               className="ET-ViewPage-Actions"