Rename stack item's transition duration

sumup-oss · Jan 6, 2022 · 9a8502a · 9a8502a
1 parent 57eb738
commit 9a8502a
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 33 deletions.
diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx
@@ -302,6 +302,6 @@ export const Modal: ModalComponent<ModalProps> = ({
   );
 };
 
-Modal.TIMEOUT = TRANSITION_DURATION;
+Modal.TRANSITION_DURATION = TRANSITION_DURATION;
 
 export const useModal = createUseModal(Modal);
diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx
@@ -29,7 +29,7 @@ const Modal: ModalComponent = ({ onClose }) => (
     <button onClick={onClose}>Close</button>
   </div>
 );
-Modal.TIMEOUT = 200;
+Modal.TRANSITION_DURATION = 200;
 
 describe('ModalContext', () => {
   beforeAll(() => {

diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.tsx
@@ -120,7 +120,9 @@ export function ModalProvider<TProps extends BaseModalProps>({
       dispatch({
         type: 'remove',
         id: modal.id,
-        timeout: modal.component.TIMEOUT,
+        transition: {
+          duration: modal.component.TRANSITION_DURATION,
+        },
       });
     },
     [dispatch, sendEvent],
@@ -157,7 +159,7 @@ export function ModalProvider<TProps extends BaseModalProps>({
         const {
           id,
           onClose,
-          timeout,
+          transition,
           component: Component,
           ...modalProps
         } = modal;
@@ -168,7 +170,7 @@ export function ModalProvider<TProps extends BaseModalProps>({
             {...defaultModalProps}
             {...modalProps}
             key={id}
-            isOpen={!timeout}
+            isOpen={!transition}
             onClose={() => removeModal(modal)}
             portalClassName={portalClassName}
             htmlOpenClassName={htmlOpenClassName}

diff --git a/packages/circuit-ui/components/ModalContext/createUseModal.spec.tsx b/packages/circuit-ui/components/ModalContext/createUseModal.spec.tsx
@@ -27,7 +27,7 @@ const Modal: ModalComponent = ({ onClose }) => (
     <button onClick={onClose}>Close</button>
   </div>
 );
-Modal.TIMEOUT = 200;
+Modal.TRANSITION_DURATION = 200;
 
 describe('createUseModal', () => {
   const useModal = createUseModal(Modal);

diff --git a/packages/circuit-ui/components/ModalContext/types.ts b/packages/circuit-ui/components/ModalContext/types.ts
@@ -37,4 +37,4 @@ export interface BaseModalProps
 
 export type ModalComponent<TProps extends BaseModalProps = BaseModalProps> = ((
   props: TProps,
-) => JSX.Element) & { TIMEOUT?: number };
+) => JSX.Element) & { TRANSITION_DURATION: number };
diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx
@@ -256,7 +256,7 @@ export function NotificationInline({
   );
 }
 
-NotificationInline.TIMEOUT = TRANSITION_DURATION;
+NotificationInline.TRANSITION_DURATION = TRANSITION_DURATION;
 
 export function getHeight(element: RefObject<HTMLElement>): string {
   if (!element || !element.current) {

diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx
@@ -230,4 +230,4 @@ export const NotificationModal: ModalComponent<NotificationModalProps> = ({
   );
 };
 
-NotificationModal.TIMEOUT = TRANSITION_DURATION;
+NotificationModal.TRANSITION_DURATION = TRANSITION_DURATION;
diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx
@@ -219,7 +219,7 @@ export function NotificationToast({
   );
 }
 
-NotificationToast.TIMEOUT = TRANSITION_DURATION;
+NotificationToast.TRANSITION_DURATION = TRANSITION_DURATION;
 
 export function getHeight(element: RefObject<HTMLElement>): string {
   if (!element || !element.current) {

diff --git a/...ges/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx b/...ges/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx
@@ -334,6 +334,6 @@ export const MobileNavigation: ModalComponent<MobileNavigationProps> = ({
   );
 };
 
-MobileNavigation.TIMEOUT = TRANSITION_DURATION;
+MobileNavigation.TRANSITION_DURATION = TRANSITION_DURATION;
 
 export const useMobileNavigation = createUseModal(MobileNavigation);
diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.spec.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.spec.tsx
@@ -27,7 +27,7 @@ jest.mock('@sumup/collector');
 const Toast: ToastComponent = ({ onClose }) => (
   <button onClick={onClose}>Close</button>
 );
-Toast.TIMEOUT = 200;
+Toast.TRANSITION_DURATION = 200;
 
 describe('ToastContext', () => {
   beforeAll(() => {

diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx
@@ -101,7 +101,9 @@ export function ToastProvider<TProps extends BaseToastProps>({
       dispatch({
         type: 'remove',
         id: toast.id,
-        timeout: toast.component.TIMEOUT,
+        transition: {
+          duration: toast.component.TRANSITION_DURATION,
+        },
       });
     },
     [dispatch, sendEvent],
@@ -137,7 +139,7 @@ export function ToastProvider<TProps extends BaseToastProps>({
           const {
             id,
             onClose,
-            timeout,
+            transition,
             component: Component,
             ...toastProps
           } = toast;
@@ -148,7 +150,7 @@ export function ToastProvider<TProps extends BaseToastProps>({
               css={spacing({ top: 'byte' })}
               {...toastProps}
               key={id}
-              isVisible={!timeout}
+              isVisible={!transition}
               onClose={() => context.removeToast(toast)}
               as="li"
             />

diff --git a/packages/circuit-ui/components/ToastContext/createUseToast.spec.tsx b/packages/circuit-ui/components/ToastContext/createUseToast.spec.tsx
@@ -27,7 +27,7 @@ const Toast: ToastComponent = ({ onClose }) => (
     <button onClick={onClose}>Close</button>
   </div>
 );
-Toast.TIMEOUT = 200;
+Toast.TRANSITION_DURATION = 200;
 
 describe('createUseToast', () => {
   const useToast = createUseToast(Toast);

diff --git a/packages/circuit-ui/components/ToastContext/types.ts b/packages/circuit-ui/components/ToastContext/types.ts
@@ -35,4 +35,4 @@ export interface BaseToastProps {
 
 export type ToastComponent<TProps extends BaseToastProps = BaseToastProps> = ((
   props: TProps,
-) => JSX.Element) & { TIMEOUT?: number };
+) => JSX.Element) & { TRANSITION_DURATION: number };
diff --git a/packages/circuit-ui/hooks/useStack/useStack.spec.ts b/packages/circuit-ui/hooks/useStack/useStack.spec.ts
@@ -73,18 +73,18 @@ describe('useStack', () => {
     });
 
     it('should pop an item from the top of the stack after a delay', () => {
-      const timeout = 200;
+      const transition = { duration: 200 };
       const { result } = renderHook(() => useStack(initialStack));
 
       act(() => {
         const dispatch = result.current[1];
-        dispatch({ type: 'pop', timeout });
+        dispatch({ type: 'pop', transition });
       });
 
       expect(result.current[0]).toHaveLength(3);
 
       act(() => {
-        jest.advanceTimersByTime(timeout);
+        jest.advanceTimersByTime(transition.duration);
       });
 
       expect(result.current[0]).toHaveLength(2);
@@ -102,12 +102,12 @@ describe('useStack', () => {
     });
 
     it('should remove an item from the stack after a delay', () => {
-      const timeout = 200;
+      const transition = { duration: 200 };
       const { result } = renderHook(() => useStack(initialStack));
 
       act(() => {
         const dispatch = result.current[1];
-        dispatch({ type: 'remove', id: 2, timeout });
+        dispatch({ type: 'remove', id: 2, transition });
       });
 
       expect(result.current[0]).toHaveLength(3);

diff --git a/packages/circuit-ui/hooks/useStack/useStack.ts b/packages/circuit-ui/hooks/useStack/useStack.ts
@@ -16,16 +16,19 @@
 import { Dispatch, useEffect, useReducer } from 'react';
 
 type Id = string | number;
+type Transition = {
+  duration: number;
+};
 
 export type StackItem = {
   id: Id;
-  timeout?: number;
+  transition?: Transition;
 };
 
 type Action<T extends StackItem> =
   | { type: 'push'; item: T }
-  | { type: 'pop'; timeout?: number }
-  | { type: 'remove'; id: Id; timeout?: number };
+  | { type: 'pop'; transition?: Transition }
+  | { type: 'remove'; id: Id; transition?: Transition };
 
 export type StackDispatch<T extends StackItem> = Dispatch<Action<T>>;
 
@@ -38,20 +41,20 @@ function createReducer<T extends StackItem>() {
       case 'pop': {
         const firstItems = state.slice(0, -1);
 
-        if (action.timeout) {
+        if (action.transition) {
           const lastItem = {
             ...state[state.length - 1],
-            timeout: action.timeout,
+            transition: action.transition,
           };
           return [...firstItems, lastItem];
         }
 
         return firstItems;
       }
       case 'remove': {
-        if (action.timeout) {
+        if (action.transition) {
           return state.map((s) =>
-            s.id !== action.id ? s : { ...s, timeout: action.timeout },
+            s.id !== action.id ? s : { ...s, transition: action.transition },
           );
         }
 
@@ -72,14 +75,19 @@ export function useStack<T extends StackItem>(
   const [state, dispatch] = useReducer(reducer, initialStack);
 
   useEffect(() => {
-    const itemToRemove = state.find((item) => item.timeout);
+    const itemToRemove = state.find((item) => item.transition);
+
     if (!itemToRemove) {
       return;
     }
 
-    setTimeout(() => {
-      dispatch({ type: 'remove', id: itemToRemove.id });
-    }, itemToRemove.timeout);
+    setTimeout(
+      () => {
+        dispatch({ type: 'remove', id: itemToRemove.id });
+      },
+      // We found the item by the `transition` property, so we can be sure it exists.
+      (itemToRemove.transition as Transition).duration,
+    );
   }, [state, dispatch]);
 
   return [state, dispatch];