mantine

client/src/components/FormFields.tsx

@@ -1,7 +1,7 @@
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { CreateField } from '../interfaces/create'
-import { Box, Button, CircularProgress, Stack, SxProps, TextField, Typography } from '@mui/material';
 import { AxiosResponse } from 'axios';
+import { Button, Loader, Stack, Text, TextInput } from '@mantine/core';
 
 interface Props {
     title?: string;
@@ -11,7 +11,6 @@ interface Props {
     mutateHandler?: any;
     defaultValues?: {};
     watchValues?: string[];
-    sx?: SxProps | null;
 }
 
 function FormFields({
@@ -20,8 +19,7 @@ function FormFields({
     fields,
     submitButtonText = 'Сохранить',
     mutateHandler,
-    defaultValues,
-    sx
+    defaultValues
 }: Props) {
     const getDefaultValues = (fields: CreateField[]) => {
         let result: { [key: string]: string | boolean } = {}
@@ -53,20 +51,20 @@ function FormFields({
 
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
-            <Stack sx={sx} spacing={2} width='100%'>
-                <Typography variant="h6" component="h6" gutterBottom>
-                    {title}
-                </Typography>
+            <Stack gap='sm' w='100%'>
+                {title.length > 0 &&
+                    <Text size="xl" fw={500}>
+                        {title}
+                    </Text>
+                }
 
                 {fields.map((field: CreateField) => {
                     return (
-                        <TextField
-                            fullWidth
-                            margin='normal'
+                        <TextInput
                             key={field.key}
-                            type={field.inputType ? field.inputType : 'text'}
                             label={field.headerName || field.key.charAt(0).toUpperCase() + field.key.slice(1)}
-                            required={field.required || false}
+                            //placeholder="Your name"
+                            type={field.inputType ? field.inputType : 'text'}
                             {...register(field.key, {
                                 required: field.required ? `${field.headerName} обязателен` : false,
                                 validate: (val: string | boolean) => {
@@ -77,21 +75,17 @@ function FormFields({
                                     }
                                 },
                             })}
-                            error={!!errors[field.key]}
-                            helperText={errors[field.key]?.message}
+                            radius="md"
+                            required={field.required || false}
+                            error={errors[field.key]?.message}
+                            errorProps={errors[field.key]}
                         />
                     )
                 })}
 
-                <Box sx={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    gap: "8px"
-                }}>
-                    <Button disabled={isSubmitting || Object.keys(dirtyFields).length === 0 || !isValid} type="submit" variant="contained" color="primary">
-                        {isSubmitting ? <CircularProgress size={16} /> : submitButtonText}
-                    </Button>
-                </Box>
+                <Button disabled={isSubmitting || Object.keys(dirtyFields).length === 0 || !isValid} type='submit'>
+                    {isSubmitting ? <Loader size={16} /> : submitButtonText}
+                </Button>
             </Stack>
         </form>
     )