Add css transition

eea · Oct 3, 2020 · 512f454 · 512f454
1 parent ce64eac
commit 512f454
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 20 deletions.
diff --git a/src/SidebarPopup/SidebarPopup.jsx b/src/SidebarPopup/SidebarPopup.jsx
@@ -1,28 +1,35 @@
 import React from 'react';
 import { Portal } from 'react-portal';
+import { CSSTransition } from 'react-transition-group';
 
+const DEFAULT_TIMEOUT = 500;
 // TODO: add CSS transition on display
 
 const SidebarPopup = ({ children, open }, ref) => {
-  return open ? (
-    <Portal>
-      <aside
-        role="presentation"
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-        onKeyDown={(e) => {
-          e.stopPropagation();
-        }}
-        ref={ref}
-        key="sidebarpopup"
-        className="sidebar-container"
-      >
-        {children}
-      </aside>
-    </Portal>
-  ) : (
-    ''
+  return (
+    <CSSTransition
+      in={open}
+      timeout={DEFAULT_TIMEOUT}
+      classNames="sidebar-container"
+      unmountOnExit
+    >
+      <Portal>
+        <aside
+          role="presentation"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+          }}
+          ref={ref}
+          key="sidebarpopup"
+          className="sidebar-container"
+        >
+          {children}
+        </aside>
+      </Portal>
+    </CSSTransition>
   );
 };
 

diff --git a/src/StyleWrapper/StyleWrapperEdit.jsx b/src/StyleWrapper/StyleWrapperEdit.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Portal } from 'react-portal';
+import { Button } from 'semantic-ui-react';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { Icon } from '@plone/volto/components';
 import themeSVG from '@plone/volto/icons/theme.svg';
@@ -55,7 +56,21 @@ export default (props) => {
           <SidebarPopup open={isOpen} ref={nodeRef}>
             <InlineForm
               schema={schema}
-              title={schema.title}
+              title={
+                <div>
+                  <Button
+                    floated="right"
+                    basic
+                    circular
+                    icon="close"
+                    size="mini"
+                    onClick={() => {
+                      setIsOpen(false);
+                    }}
+                  ></Button>
+                  {schema.title}
+                </div>
+              }
               onChangeField={(id, value) => {
                 onChangeValue(id, value);
               }}