feat(completions): animate completions in form

Clm-Roig · Jun 7, 2022 · 965041e · 965041e
1 parent 432aa5e
commit 965041e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/forms/DefaultCompletionsForm/DefaultCompletionsForm.tsx b/src/components/forms/DefaultCompletionsForm/DefaultCompletionsForm.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteIcon from '@mui/icons-material/Delete';
 import {
@@ -66,14 +67,15 @@ const DefaultCompletionsForm: FC<Props> = ({
 }) => {
   const themeMode = useAppSelector(selectThemeMode);
   const theme = useTheme();
+  const [animateRef] = useAutoAnimate<HTMLDivElement>();
 
   const fieldsetSx = {
     bgcolor: themeMode === ThemeMode.LIGHT ? theme.palette.grey[100] : theme.palette.grey[900],
     mb: 1
   };
 
   return (
-    <Box>
+    <Box ref={animateRef}>
       {fields.map((field, index) => (
         <FieldsetGrid columns={2} container key={field.id} sx={fieldsetSx} {...gridProps}>
           <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>

diff --git a/src/components/forms/RequiredCompletionsForm/RequiredCompletionsForm.tsx b/src/components/forms/RequiredCompletionsForm/RequiredCompletionsForm.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Button, Grid, GridProps, IconButton, Typography, useTheme } from '@mui/material';
@@ -54,6 +55,7 @@ const RequiredCompletionsForm: FC<Props> = ({
 }) => {
   const themeMode = useAppSelector(selectThemeMode);
   const theme = useTheme();
+  const [animateRef] = useAutoAnimate<HTMLDivElement>();
 
   const fieldsetSx = {
     bgcolor: themeMode === ThemeMode.LIGHT ? theme.palette.grey[100] : theme.palette.grey[900],
@@ -66,7 +68,7 @@ const RequiredCompletionsForm: FC<Props> = ({
   };
 
   return (
-    <>
+    <div ref={animateRef}>
       {fields.map((field, index) => (
         <FieldsetGrid columns={2} container key={field.id} sx={fieldsetSx} {...gridProps}>
           <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
@@ -166,7 +168,7 @@ const RequiredCompletionsForm: FC<Props> = ({
         variant="contained">
         Objectif
       </Button>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/forms/ValidateCompletionsForm/ValidateCompletionsForm.tsx b/src/components/forms/ValidateCompletionsForm/ValidateCompletionsForm.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Grid } from '@mui/material';
 import { FC, useEffect } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
@@ -36,6 +37,7 @@ const ValidateCompletionsForm: FC<Props> = ({ completions, formId, onSubmit }) =
     control, // control props comes from useForm
     name: 'completions'
   });
+  const [animateRef] = useAutoAnimate<HTMLFormElement>();
 
   useEffect(() => {
     const previousCompletions = getValues().completions;
@@ -68,7 +70,7 @@ const ValidateCompletionsForm: FC<Props> = ({ completions, formId, onSubmit }) =
   };
 
   return (
-    <form id={formId} onSubmit={handleSubmit(formatAndSubmit)}>
+    <form id={formId} onSubmit={handleSubmit(formatAndSubmit)} ref={animateRef}>
       {fields.map((field, index) => (
         <FieldsetGrid
           columns={2}