feat(Popup): add transition callbacks

gravity-ui · Mar 1, 2024 · 3d1d50e · 3d1d50e
1 parent a34db16
commit 3d1d50e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -20,6 +20,8 @@ import './Popup.scss';
 export type PopupPlacement = PopperPlacement;
 export type PopupAnchorRef = PopperAnchorRef;
 
+type VoidFunction = () => void;
+
 export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, QAProps {
     open?: boolean;
     children?: React.ReactNode;
@@ -32,6 +34,10 @@ export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps,
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onTransitionEnter?: VoidFunction;
+    onTransitionEntered?: VoidFunction;
+    onTransitionExit?: VoidFunction;
+    onTransitionExited?: VoidFunction;
     disablePortal?: boolean;
     container?: HTMLElement;
     contentClassName?: string;
@@ -71,6 +77,10 @@ export function Popup({
     onMouseLeave,
     onFocus,
     onBlur,
+    onTransitionEnter,
+    onTransitionEntered,
+    onTransitionExit,
+    onTransitionExited,
     disablePortal,
     container,
     strategy,
@@ -132,6 +142,18 @@ export function Popup({
                 mountOnEnter={!keepMounted}
                 unmountOnExit={!keepMounted}
                 appear={true}
+                onEnter={() => {
+                    onTransitionEnter?.();
+                }}
+                onEntered={() => {
+                    onTransitionEntered?.();
+                }}
+                onExit={() => {
+                    onTransitionExit?.();
+                }}
+                onExited={() => {
+                    onTransitionExited?.();
+                }}
             >
                 <div
                     ref={handleRef}

diff --git a/src/components/Popup/README.md b/src/components/Popup/README.md
@@ -110,6 +110,10 @@ LANDING_BLOCK-->
 | onMouseEnter         | `mouseenter` event handler                                                         |                `Function`                |                 |
 | onMouseLeave         | `mouseleave` event handler                                                         |                `Function`                |                 |
 | onOutsideClick       | Outside click event handler                                                        |                `Function`                |                 |
+| onTransitionEnter    | On start open popup animation                                                      |                `Function`                |                 |
+| onTransitionEntered  | On finish open popup animation                                                     |                `Function`                |                 |
+| onTransitionExit     | On start close popup animation                                                     |                `Function`                |                 |
+| onTransitionExited   | On finish close popup animation                                                    |                `Function`                |                 |
 | open                 | Manages `Popup` visibility                                                         |                `boolean`                 |     `false`     |
 | placement            | `Popper.js` placement                                                              | `PopupPlacement` `Array<PopupPlacement>` |                 |
 | qa                   | Test attribute (`data-qa`)                                                         |                 `string`                 |                 |