Merge pull request #689 from lumapps/feat/dialogVisibilityChange

feat(dialog): add onVisibilityChange prop

Author: gcornut

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 -   Switch: add attribute `aria-checked` for screen readers correct behavior.
+-   Dialog: add `onVisibilityChange` prop to trigger an action when the dialog is actually visible / invisible.
 
 ## [1.0.22][] - 2021-08-25
 

packages/lumx-react/src/components/dialog/Dialog.stories.tsx

@@ -198,6 +198,28 @@ export const ScrollableDialog = ({ theme }: any) => {
     );
 };
 
+export const WithAnimationCallbacks = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    const handleVisibiltyCallback = (isVisible: boolean) => {
+        alert(isVisible ? 'OPEN' : 'CLOSE');
+    };
+
+    return (
+        <>
+            {button}
+            <Dialog
+                isOpen={isOpen}
+                onClose={closeDialog}
+                size={Size.regular}
+                parentElement={buttonRef}
+                onVisibilityChange={handleVisibiltyCallback}
+            >
+                {content}
+            </Dialog>
+        </>
+    );
+};
+
 export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     return (

packages/lumx-react/src/components/dialog/Dialog.tsx

@@ -54,6 +54,8 @@ export interface DialogProps extends GenericProps {
     dialogProps?: GenericProps;
     /** On close callback. */
     onClose?(): void;
+    /** Callback called when the open animation starts and the close animation finishes. */
+    onVisibilityChange?(isVisible: boolean): void;
 }
 
 export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -108,6 +110,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         zIndex,
         dialogProps,
+        onVisibilityChange,
         ...forwardedProps
     } = props;
 
@@ -158,7 +161,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const footerChildContent = footerChildProps?.children;
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION);
+    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRefs = useRef([wrapperRef]);

packages/lumx-react/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -752,3 +752,46 @@ Aquitani, tertiam.
   </Dialog>
 </Fragment>
 `;
+
+exports[`<Dialog> Snapshots and structure should render story WithAnimationCallbacks 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    isOpen={true}
+    onClose={[Function]}
+    onVisibilityChange={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="regular"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+  </Dialog>
+</Fragment>
+`;

packages/lumx-react/src/hooks/useDelayedVisibility.tsx

@@ -1,14 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 /**
  * Returns true if the component is visible taking into account the component's
  * own visibility and the animations delay
  *
  * @param isComponentVisible Whether the component intends to be visible or not.
  * @param transitionDuration time in ms that the transition takes for the specific component.
+ * @param onVisibilityChange Callback called when the visibility changes.
  * @return true if the component should be rendered
  */
-export function useDelayedVisibility(isComponentVisible: boolean, transitionDuration: number): boolean {
+export function useDelayedVisibility(
+    isComponentVisible: boolean,
+    transitionDuration: number,
+    onVisibilityChange?: (isVisible: boolean) => void,
+): boolean {
     // Delay visibility to account for the 400ms of CSS opacity animation.
     const [isVisible, setVisible] = useState(isComponentVisible);
 
@@ -20,5 +25,20 @@ export function useDelayedVisibility(isComponentVisible: boolean, transitionDura
         }
     }, [isComponentVisible, transitionDuration]);
 
+    /**
+     * Since we don't want onVisibiltyChange function to trigger itself if when it changes,
+     * we store the previous visibility and only trigger when visibility is different
+     * than previous value.
+     */
+
+    const previousVisibility = useRef(isVisible);
+
+    useEffect(() => {
+        if (onVisibilityChange && previousVisibility.current !== isVisible) {
+            onVisibilityChange(isVisible);
+            previousVisibility.current = isVisible;
+        }
+    }, [isVisible, onVisibilityChange]);
+
     return isComponentVisible || isVisible;
 }