pebble-web 2.26.1 → 3.0.0-alpha.1

package/dist/utils/animation.d.ts

@@ -1,19 +1,7 @@
-import { State } from "react-spring";
-export declare const animationConfig: {
-    from: {
-        opacity: number;
-        transform: string;
-    };
-    enter: {
-        opacity: number;
-        transform: string;
-    };
-    leave: {
-        opacity: number;
-        transform: string;
-        pointerEvents: string;
-    };
-    config: (_a: boolean, motion: State) => {
-        duration: number;
-    };
+import { TransitionState, UseTransitionProps } from "react-spring";
+export declare type TransitionPhase = TransitionState["phase"];
+export declare const animationConfig: UseTransitionProps<boolean>;
+export declare type AnimationStyle = {
+    opacity: number;
+    transform: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.26.1",
+  "version": "3.0.0-alpha.1",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -37,7 +37,7 @@
     "react-calendar": "^2.19.2",
     "react-ink": "^6.4.0",
     "react-popper": "^1.3.6",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.7.4",
     "rheostat": "2.2.0",
     "rifm": "^0.12.0",
     "scroll-into-view-if-needed": "^2.2.25",

package/src/components/DropDown.tsx

@@ -4,7 +4,7 @@ import { DropDownButton } from "./Button";
 import { dropDownStyle, wrapperStyle } from "./styles/Dropdown.styles";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
-import { animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring";
 import MountTransition from "./shared/MountTransition";
 import { Manager, Reference, Popper } from "react-popper";
 import { colors } from "pebble-shared";
@@ -105,9 +105,9 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                       ...style,
                       ...transitionStyles,
                       backgroundColor: colors.white.base,
-                      transform: `${style.transform || ""} ${
-                        transitionStyles.transform || ""
-                      }`,
+                      transform: transitionStyles.transform.to(
+                        t => `${style.transform || ""} ${t || ""}`
+                      ),
                       transformOrigin: `${arrowProps.style.left || 0}px ${
                         arrowProps.style.top || 0
                       }px`,
@@ -115,7 +115,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                     };
 
                     return (
-                      <div
+                      <animated.div
                         className={cx(dropDownStyle, dropDownClassName)}
                         ref={ref}
                         style={popperWrapperStyle}
@@ -125,7 +125,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                           toggle: this.toggleDropdown,
                           isOpen: _isDropDownOpen
                         })}
-                      </div>
+                      </animated.div>
                     );
                   }}
                 </Popper>

package/src/components/Modal.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { ModalProps } from "./typings/Modal";
 import { modalContainer } from "./styles/Modal.styles";
-import { cx, css } from "emotion";
+import { cx } from "emotion";
 import isBrowser from "is-in-browser";
 import * as ReactDOM from "react-dom";
 import MountTransition from "./shared/MountTransition";
+import { animated } from "react-spring";
 
 class Modal extends React.PureComponent<ModalProps> {
   private node = isBrowser ? document.createElement("div") : null;
@@ -41,23 +42,21 @@ class Modal extends React.PureComponent<ModalProps> {
       // tslint:disable-next-line:jsx-wrap-multiline
       <MountTransition visible={visible}>
         {transitionStyles => (
-          <div
+          <animated.div
             style={{
               opacity: transitionStyles.opacity
             }}
             className={cx(modalContainer, backDropClassName)}
           >
-            <div
-              className={cx(
-                css({
-                  transform: transitionStyles.transform
-                }),
-                modalClassName
-              )}
+            <animated.div
+              style={{
+                transform: transitionStyles.transform
+              }}
+              className={modalClassName}
             >
               {children}
-            </div>
-          </div>
+            </animated.div>
+          </animated.div>
         )}
       </MountTransition>,
       node as NonNullable<typeof node>

package/src/components/Popper.tsx

@@ -6,6 +6,7 @@ import { colors } from "pebble-shared";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
 import MountTransition from "./shared/MountTransition";
+import { animated } from "react-spring";
 
 export default class PebblePopper extends React.PureComponent<
   PopperProps,
@@ -71,16 +72,16 @@ export default class PebblePopper extends React.PureComponent<
                     ...style,
                     ...transitionStyles,
                     backgroundColor: popperBackgroundColor,
-                    transform: `${style.transform || ""} ${
-                      transitionStyles.transform || ""
-                    }`,
+                    transform: transitionStyles.transform.to(
+                      t => `${style.transform || ""} ${t || ""}`
+                    ),
                     transformOrigin: `${arrowProps.style.left || 0}px ${
                       arrowProps.style.top || 0
                     }px`
                   };
 
                   return (
-                    <div
+                    <animated.div
                       className={cx(popperStyle, popperClassName)}
                       ref={ref}
                       style={wrapperStyle}
@@ -101,7 +102,7 @@ export default class PebblePopper extends React.PureComponent<
                       >
                         ▶
                       </div>
-                    </div>
+                    </animated.div>
                   );
                 }}
               </Popper>

package/src/components/Sidebar.tsx

@@ -5,7 +5,7 @@ import {
   sidebarWrapperStyle
 } from "./styles/Sidebar.styles";
 import { SidebarProps } from "./typings/Sidebar";
-import { animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring";
 import Ink from "react-ink";
 import { css, cx } from "emotion";
 import { disableScrollY } from "../theme/styles";

package/src/components/Toast.tsx

@@ -7,7 +7,7 @@ import {
   ToastType,
   ToastPosition
 } from "./typings/Toast";
-import { Transition, animated } from "react-spring/renderprops.cjs";
+import { Transition, animated } from "react-spring";
 import { cx } from "emotion";
 import mitt from "mitt";
 import { animationConfig } from "../utils/animation";
@@ -188,9 +188,8 @@ class Toast extends React.PureComponent<ToastProps, ToastState> {
         }}
         config={animationConfig.config}
       >
-        {show =>
-          show &&
-          (styles => (
+        {(styles, show) =>
+          show && (
             <animated.div
               className={cx(toastWrapper, this.props.className)}
               style={{
@@ -202,7 +201,7 @@ class Toast extends React.PureComponent<ToastProps, ToastState> {
               <i className={iconClass} />
               {this.state.text}
             </animated.div>
-          ))
+          )
         }
       </Transition>
     );

package/src/components/TypeAhead.tsx

@@ -10,7 +10,7 @@ import Input from "./Input";
 import { optionsWrapper, wrapper } from "./styles/TypeAhead.styles";
 import OutsideClick from "./OutsideClick";
 import OptionGroupRadio from "./OptionGroupRadio";
-import { animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring";
 import MountTransition from "./shared/MountTransition";
 import { getTestIds, getTypeaheadTestIds } from "../utils/testIds";
 
@@ -129,7 +129,7 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
           }
         )}
 
-        <MountTransition visible={showSuggestions} native>
+        <MountTransition visible={showSuggestions}>
           {transitionStyles => (
             <animated.div
               style={transitionStyles}

package/src/components/__tests__/__snapshots__/popper.test.tsx.snap

@@ -142,7 +142,7 @@ exports[`Component: Popper snapshot 1`] = `
         "pointerEvents": "none",
         "position": "absolute",
         "top": 0,
-        "transform": " scale(0.95)",
+        "transform": "  scale(0.95)",
         "transformOrigin": "0px 0px",
       }
     }

package/src/components/shared/MountTransition.tsx

@@ -1,29 +1,40 @@
 import * as React from "react";
 import {
-  State,
   Transition,
-  TransitionProps
-} from "react-spring/renderprops.cjs";
-import { animationConfig } from "../../utils/animation";
-import { Omit } from "utility-types";
+  UseTransitionProps,
+  SpringValues,
+  TransitionComponentProps
+} from "react-spring";
+import {
+  animationConfig,
+  TransitionPhase,
+  AnimationStyle
+} from "../../utils/animation";
 
-interface MountTransitionProps
-  extends Omit<Omit<TransitionProps<boolean>, "items">, "children"> {
+interface MountTransitionProps extends UseTransitionProps<boolean> {
   visible: boolean;
   children: (
-    params: React.CSSProperties,
-    state: State,
+    params: SpringValues<AnimationStyle>,
+    state: TransitionPhase,
     index: number
   ) => React.ReactNode;
 }
 
 const MountTransition: React.FunctionComponent<MountTransitionProps> = props => {
   return (
-    <Transition items={props.visible} {...animationConfig} {...props}>
-      {(show, state, index) =>
-        show &&
-        (styles => props.children(styles as React.CSSProperties, state, index))
-      }
+    <Transition<boolean, TransitionComponentProps<boolean>>
+      items={props.visible}
+      {...animationConfig}
+      {...props}
+    >
+      {(styles, show, { phase }, index) => {
+        if (!show) return null;
+        return props.children(
+          styles as SpringValues<AnimationStyle>,
+          phase,
+          index
+        );
+      }}
     </Transition>
   );
 };

package/src/utils/animation.ts

@@ -1,9 +1,18 @@
-import { State } from "react-spring";
+import { TransitionState, UseTransitionProps } from "react-spring";
 
-export const animationConfig = {
+// TransitionPhase enum is not exported by react-spring package
+// so we alias it as a type here
+export type TransitionPhase = TransitionState["phase"];
+
+export const animationConfig: UseTransitionProps<boolean> = {
   from: { opacity: 0, transform: "scale(0.95)" },
   enter: { opacity: 1, transform: "scale(1)" },
   leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" },
-  config: (_a: boolean, motion: State) =>
-    motion === "leave" ? { duration: 80 } : { duration: 200 }
+  config: (_show, _index, state) =>
+    state === "leave" ? { duration: 80 } : { duration: 200 }
+};
+
+export type AnimationStyle = {
+  opacity: number;
+  transform: string;
 };