trithuc-mvc-react 2.8.2 → 2.8.4

package/components/DataManagement/DataTable.jsx

@@ -288,16 +288,16 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
         </Table>
       </TableContainer>
 
-      <Grid container>
+      <Grid2 container>
         {!hasTabpanel && (
-          <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
+          <Grid2 item alignSelf={"center"} sx={{ pl: 2 }}>
             <Typography variant="body1">
               Tổng số lượng: <span>{total}</span>
             </Typography>
           </Grid>
         )}
 
-        <Grid item xs>
+        <Grid2 item xs>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/DataTableSM.jsx

@@ -289,16 +289,16 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
         </Table>
       </TableContainer>
 
-      <Grid container>
+      <Grid2 container>
         {!hasTabpanel && (
-          <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
+          <Grid2 item alignSelf={"center"} sx={{ pl: 2 }}>
             <Typography variant="body1">
               Tổng số lượng: <span>{total}</span>
             </Typography>
           </Grid>
         )}
 
-        <Grid item xs>
+        <Grid2 item xs>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/EditorForm.jsx

@@ -166,7 +166,7 @@ function EditorForm({ fields, submitRef }) {
   return (
     <FormProvider {...methods}>
       <Box component={"form"} onSubmit={methods.handleSubmit(onSubmit, onValid)}>
-        <Grid container spacing={2}>
+        <Grid2 container spacing={2}>
           {fields.map(
             ({
               field,
@@ -185,7 +185,7 @@ function EditorForm({ fields, submitRef }) {
               ...rest
             }) => {
               return (
-                <Grid item md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
+                <Grid2 item md={size?.md} xs={size?.xs} sm={size?.sm} key={field}>
                   <FormField
                     type={type}
                     label={label}

package/components/DataManagement/FilterGod.jsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionSummary, Box, Slider, Typography } from "@mui/material";
+import { Accordion, AccordionSummary, Box, Grid2, Slider, Typography } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 
 import { FilterElement } from "./FilterElement";
@@ -30,7 +30,7 @@ export const FilterGod = ({ filters, elementSize = "small", setPage = () => {} }
           <Typography variant="h6">Tìm kiếm</Typography>
         </AccordionSummary>
         <AccordionDetails>
-          <Grid container spacing={1}>
+          <Grid2 container spacing={1}>
             {filters.map(({ field, size, ...rest }) => {
               if (rest.type === "date-range") {
                 let label = ["Từ ngày", "Đến ngày"];
@@ -39,7 +39,7 @@ export const FilterGod = ({ filters, elementSize = "small", setPage = () => {} }
                   label = field.label;
                 }
                 return (
-                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                  <Grid2 key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
                     <DateRangePicker
                       label={label}
                       onChange={(value) => {
@@ -59,7 +59,7 @@ export const FilterGod = ({ filters, elementSize = "small", setPage = () => {} }
 
               if (rest.type === "slider-range") {
                 return (
-                  <Grid key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                  <Grid2 key={field.toString()} md={size?.md} xs={size?.xs} sm={size?.sm}>
                     <Slider
                       onChange={(e, value) => {
                         setDataSearch({
@@ -80,7 +80,7 @@ export const FilterGod = ({ filters, elementSize = "small", setPage = () => {} }
                 );
               }
               return (
-                <Grid key={field} md={size?.md} xs={size?.xs} sm={size?.sm}>
+                <Grid2 key={field} md={size?.md} xs={size?.xs} sm={size?.sm}>
                   <FilterElement name={field} {...rest} setPage={setPage} />
                 </Grid>
               );

package/components/form/DynamicForm.jsx

@@ -1,18 +1,16 @@
 import { Box } from "@mui/material";
-import { FormProvider, useForm } from "react-hook-form";
-import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
+
 import PropTypes from "prop-types";
+import { FormProvider, useForm } from "react-hook-form";
 
 import moment from "moment/moment";
 
-
-import FormField from "./FormField";
 import { yupResolver } from "@hookform/resolvers/yup";
+import FormField from "./FormField";
 DynamicForm.propTypes = {
   fields: PropTypes.array
 };
 function DynamicForm({ fields, elementSize = "medium", submitRef, validationSchema, onSubmit }) {
-
   const methods = useForm({ defaultValues: {}, resolver: yupResolver(validationSchema) });
 
   const handleSubmit = (data) => {
@@ -30,8 +28,8 @@ function DynamicForm({ fields, elementSize = "medium", submitRef, validationSche
           data[keyValueLabel] = datas.find((item) => item[keyValue] == data[field])?.[keyLabel];
         }
       });
-      
-      onSubmit(data);
+
+    onSubmit(data);
   };
 
   return (

package/components/form/FormField.jsx

@@ -12,15 +12,14 @@ import {
   Switch,
   TextField
 } from "@mui/material";
-import { Controller,  useFormContext } from "react-hook-form";
-// Grid version 2
-import PropTypes from "prop-types";
+import { Controller, useFormContext } from "react-hook-form";
+
 import { DatePicker } from "@mui/x-date-pickers";
-import { useCallback, useEffect, } from "react";
 import moment from "moment/moment";
+import PropTypes from "prop-types";
+import { useCallback, useEffect } from "react";
 import { DEFAULT_DATE_FORMAT } from "../../constants";
 
-
 FormField.propTypes = {
   datas: PropTypes.array,
   loading: PropTypes.bool
@@ -57,7 +56,6 @@ function FormField({
     }
   }, []);
 
-
   switch (type) {
     case "textarea":
       return (
@@ -130,7 +128,9 @@ function FormField({
                 value={getValueObject(value)}
                 fullWidth
                 getOptionLabel={(option) => option[keyLabel]}
-                renderInput={(params) => <TextField {...params} label={label} error={Boolean(error)} helperText={error?.message} />}
+                renderInput={(params) => (
+                  <TextField {...params} label={label} error={Boolean(error)} helperText={error?.message} />
+                )}
               />
             );
           }}
@@ -218,18 +218,17 @@ function FormField({
                 format={DEFAULT_DATE_FORMAT}
                 slotProps={{
                   textField: {
-                    fullWidth: true, error: Boolean(error),
+                    fullWidth: true,
+                    error: Boolean(error),
                     helperText: error?.message
                   },
                   popper: {
                     disablePortal: false,
                     popperOptions: {
-                      strategy: 'fixed'
-                    },
+                      strategy: "fixed"
+                    }
                   }
                 }}
-
-
               />
             );
           }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"