pebble-web 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.5.0"
+    "pebble-shared": "^2.6.0"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "10642c163578a97858d3df92ec9532d01c2cbc52"
+  "gitHead": "17ffd0408f8ba57c3d4ef1342da8c696924bd5db"
 }

package/src/components/Sidebar.tsx

@@ -5,16 +5,16 @@ import {
   sidebarWrapperStyle
 } from "./styles/Sidebar.styles";
 import { SidebarProps } from "./typings/Sidebar";
-import { Transition, animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring/renderprops.cjs";
 import Ink from "react-ink";
 import { css, cx } from "emotion";
 import { disableScrollY } from "../theme/styles";
-import { animationConfig } from "../utils/animation";
+import MountTransition from "./shared/MountTransition";
 
 const transitionProps = {
-  from: { opacity: 0 },
-  enter: { opacity: 1 },
-  leave: { opacity: 0 }
+  from: { opacity: 0, transform: "translateX(100%)" },
+  enter: { opacity: 1, transform: "translateX(0)" },
+  leave: { opacity: 0, transform: "translateX(100%)", pointerEvents: "none" }
 };
 
 class SideBar extends React.PureComponent<SidebarProps> {
@@ -57,65 +57,36 @@ class SideBar extends React.PureComponent<SidebarProps> {
       onOutsideClick,
       closeOnOutsideClick
     } = this.props;
-    const _sidebarOverride = css({
-      width,
-      transform: isOpen ? `translateX(0)` : `translateX(${width}px)`
-    });
-    const _sidebarStyle = cx(
-      _sidebarOverride,
-      sidebarStyle,
-      css({
-        transform: isOpen ? `translateX(0)` : `translateX(100%)`
-      })
-    );
+    const _sidebarStyle = cx(sidebarStyle, css({ width }));
 
     return (
-      <React.Fragment>
-        <Transition
-          items={isOpen}
-          {...transitionProps}
-          config={animationConfig.config}
-        >
-          {show =>
-            show &&
-            (styles => (
-              <animated.div
-                style={styles}
-                className={sidebarWrapperStyle}
-                onClick={
-                  onOutsideClick || closeOnOutsideClick
-                    ? this.onOutsideClick
-                    : undefined
-                }
-                data-testid="shadowArea"
-              />
-            ))
-          }
-        </Transition>
+      <MountTransition visible={isOpen} {...transitionProps}>
+        {styles => (
+          <>
+            <animated.div
+              style={{ opacity: styles.opacity }}
+              className={sidebarWrapperStyle}
+              onClick={
+                onOutsideClick || closeOnOutsideClick
+                  ? this.onOutsideClick
+                  : undefined
+              }
+              data-testid="shadowArea"
+            />
+
+            <animated.div className={_sidebarStyle} style={styles}>
+              <div className={closeStyle} onClick={onClose}>
+                <i className="pi pi-close" />
+                <Ink />
+              </div>
 
-        <div className={_sidebarStyle}>
-          <Transition items={isOpen} {...transitionProps}>
-            {show =>
-              show &&
-              (styles => (
-                <animated.div
-                  style={styles}
-                  className={closeStyle}
-                  onClick={onClose}
-                >
-                  <i className="pi pi-close" />
-                  <Ink />
-                </animated.div>
-              ))
-            }
-          </Transition>
-          {isOpen && (
-            <div style={{ overflowY: "scroll", height: "100vh" }}>
-              {children}
-            </div>
-          )}
-        </div>
-      </React.Fragment>
+              <div style={{ overflowY: "scroll", height: "100vh" }}>
+                {children}
+              </div>
+            </animated.div>
+          </>
+        )}
+      </MountTransition>
     );
   }
 }

package/src/components/styles/Sidebar.styles.ts

@@ -44,7 +44,6 @@ export const closeStyle = css({
 });
 
 export const sidebarStyle = css({
-  transition: `transform 200ms ${constants.animationCurve}`,
   backgroundColor: colors.white.base,
   position: "fixed",
   top: 0,

package/src/utils/animation.ts

@@ -5,5 +5,5 @@ export const animationConfig = {
   enter: { opacity: 1, transform: "scale(1)" },
   leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" },
   config: (_a: boolean, motion: State) =>
-    motion === "leave" ? { duration: 0.1 } : { duration: 200 }
+    motion === "leave" ? { duration: 80 } : { duration: 200 }
 };