From 9a8502a7ff66596cecf1f3dc99cc6cff312fba7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 6 Jan 2022 17:16:11 +0100 Subject: [PATCH] Rename stack item's transition duration --- .../circuit-ui/components/Modal/Modal.tsx | 2 +- .../ModalContext/ModalContext.spec.tsx | 2 +- .../components/ModalContext/ModalContext.tsx | 8 +++-- .../ModalContext/createUseModal.spec.tsx | 2 +- .../components/ModalContext/types.ts | 2 +- .../NotificationInline/NotificationInline.tsx | 2 +- .../NotificationModal/NotificationModal.tsx | 2 +- .../NotificationToast/NotificationToast.tsx | 2 +- .../MobileNavigation/MobileNavigation.tsx | 2 +- .../ToastContext/ToastContext.spec.tsx | 2 +- .../components/ToastContext/ToastContext.tsx | 8 +++-- .../ToastContext/createUseToast.spec.tsx | 2 +- .../components/ToastContext/types.ts | 2 +- .../hooks/useStack/useStack.spec.ts | 10 +++---- .../circuit-ui/hooks/useStack/useStack.ts | 30 ++++++++++++------- 15 files changed, 45 insertions(+), 33 deletions(-) diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx index 7688720e5c..5c42f986d9 100644 --- a/packages/circuit-ui/components/Modal/Modal.tsx +++ b/packages/circuit-ui/components/Modal/Modal.tsx @@ -302,6 +302,6 @@ export const Modal: ModalComponent = ({ ); }; -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 index f4e4e3e57d..720f524543 100644 --- 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 }) => ( ); -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 index 5b3b961361..754d43919a 100644 --- a/packages/circuit-ui/components/ModalContext/ModalContext.tsx +++ b/packages/circuit-ui/components/ModalContext/ModalContext.tsx @@ -120,7 +120,9 @@ export function ModalProvider({ 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({ const { id, onClose, - timeout, + transition, component: Component, ...modalProps } = modal; @@ -168,7 +170,7 @@ export function ModalProvider({ {...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 index 090b32810c..1c66a7f175 100644 --- 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 }) => ( ); -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 index 387b1e8c61..f2afb4788a 100644 --- 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 = (( 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 index 537d5081c1..66e672079b 100644 --- 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): string { if (!element || !element.current) { diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx index 6973c44ec0..605493c3db 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx @@ -230,4 +230,4 @@ export const NotificationModal: ModalComponent = ({ ); }; -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 index 20fd2f30c8..b542c1a19c 100644 --- 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): string { if (!element || !element.current) { diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx index 8aa662e920..45fa628f92 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx @@ -334,6 +334,6 @@ export const MobileNavigation: ModalComponent = ({ ); }; -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 index 09a586e4ff..92b58bb88c 100644 --- 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 }) => ( ); -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 index 62043dc535..aac72dfc74 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/packages/circuit-ui/components/ToastContext/ToastContext.tsx @@ -101,7 +101,9 @@ export function ToastProvider({ 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({ const { id, onClose, - timeout, + transition, component: Component, ...toastProps } = toast; @@ -148,7 +150,7 @@ export function ToastProvider({ 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 index 29e1d85298..e0028fce5d 100644 --- 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 }) => ( ); -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 index 2456049b92..f1508a9d51 100644 --- 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 = (( 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 index 5086914d72..41858b4063 100644 --- 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 index 7c51a3da7c..3e360931da 100644 --- 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 = | { 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 = Dispatch>; @@ -38,10 +41,10 @@ function createReducer() { 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]; } @@ -49,9 +52,9 @@ function createReducer() { 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( 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];