From 4de79c23880d04ffc2b304ca397a3789968eef4a Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 18 Apr 2024 15:38:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB(ap-impress)=20improve=20transition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve transition on Box component.
---
 .../apps/impress/src/components/Box.tsx       | 15 ++++++++--
 .../apps/impress/src/components/Effect.tsx    | 25 +++++-----------
 .../template/components/TemplateEditor.tsx    | 30 +++++++++----------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 7d8b0e95..cd18c359 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -47,11 +47,22 @@ export const Box = styled('div')<BoxProps>`
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
   ${({ $effect }) => {
+    let effect;
     switch ($effect) {
       case 'show':
-        return showEffect;
+        effect = showEffect;
+        break;
       case 'hide':
-        return hideEffect;
+        effect = hideEffect;
+        break;
     }
+
+    return (
+      effect &&
+      ` 
+        transition: all 0.3s ease-in-out;
+        ${effect}
+      `
+    );
   }}
 `;
diff --git a/src/frontend/apps/impress/src/components/Effect.tsx b/src/frontend/apps/impress/src/components/Effect.tsx
index 40983550..53cffc2a 100644
--- a/src/frontend/apps/impress/src/components/Effect.tsx
+++ b/src/frontend/apps/impress/src/components/Effect.tsx
@@ -1,20 +1,11 @@
-import { css, keyframes } from 'styled-components';
-
-const show = keyframes`
- 0% { transform: scaleY(0); opacity: 0; max-height: 0; }
- 100% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+export const showEffect = `
+  transform: scaleY(1);
+  opacity: 1;
+  max-height: 150px;
 `;
 
-const hide = keyframes`
- 0% { transform: scaleY(1); opacity: 1; max-height: 150px;}
- 100% { display:none; transform: scaleY(0); opacity: 0; max-height: 0;  }
-`;
-
-export const showEffect = css`
-  animation: ${show} 0.3s ease-in-out;
-`;
-
-export const hideEffect = css`
-  animation: ${hide} 0.3s ease-in-out;
-  animation-fill-mode: forwards;
+export const hideEffect = `
+  transform: scaleY(0);
+  opacity: 0;
+  max-height: 0;
 `;
diff --git a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
index 9863d6c3..be7fff76 100644
--- a/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
+++ b/src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx
@@ -31,17 +31,17 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
     },
   });
   const [editor, setEditor] = useState<Editor>();
-  const [showWarning, setShowWarning] = useState(false);
-
   const html = editor?.getHtml();
 
+  const [showWarning, setShowWarning] = useState(!!html);
+
   useEffect(() => {
-    if (showWarning || !html) {
+    if (!html) {
       return;
     }
 
-    setShowWarning(html.includes('{{body}}') === false);
-  }, [html, showWarning]);
+    setShowWarning(!html.includes('{{body}}'));
+  }, [html]);
 
   useEffect(() => {
     if (!editor?.loadProjectData || !editor?.Storage) {
@@ -106,17 +106,15 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
           {t('Save template')}
         </Button>
       </Box>
-      {showWarning && html && (
-        <Box
-          className="m-b"
-          $css="margin-top:0;"
-          $effect={html.includes('{{body}}') ? 'hide' : 'show'}
-        >
-          <Alert
-            type={VariantType.WARNING}
-          >{`The {{body}} tag is necessary to works with the pads.`}</Alert>
-        </Box>
-      )}
+      <Box
+        className="m-b"
+        $css="margin-top:0;"
+        $effect={showWarning ? 'show' : 'hide'}
+      >
+        <Alert
+          type={VariantType.WARNING}
+        >{`The {{body}} tag is necessary to works with the pads.`}</Alert>
+      </Box>
 
       {!template.abilities.partial_update && (
         <Box className="m-b" $css="margin-top:0;">