mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
CSSTransition fixes warnings (#55340)
This commit is contained in:
parent
c088f2be50
commit
10b3c0787a
@ -1,6 +1,6 @@
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { FocusScope } from '@react-aria/focus';
|
import { FocusScope } from '@react-aria/focus';
|
||||||
import React, { useState } from 'react';
|
import React, { useRef, useState } from 'react';
|
||||||
import { usePopperTooltip } from 'react-popper-tooltip';
|
import { usePopperTooltip } from 'react-popper-tooltip';
|
||||||
import { CSSTransition } from 'react-transition-group';
|
import { CSSTransition } from 'react-transition-group';
|
||||||
|
|
||||||
@ -16,6 +16,7 @@ export interface Props {
|
|||||||
|
|
||||||
export const Dropdown = React.memo(({ children, overlay, placement }: Props) => {
|
export const Dropdown = React.memo(({ children, overlay, placement }: Props) => {
|
||||||
const [show, setShow] = useState(false);
|
const [show, setShow] = useState(false);
|
||||||
|
const transitionRef = useRef(null);
|
||||||
|
|
||||||
const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
|
const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
|
||||||
visible: show,
|
visible: show,
|
||||||
@ -46,12 +47,13 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
|
|||||||
<div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked}>
|
<div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked}>
|
||||||
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
|
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
|
||||||
<CSSTransition
|
<CSSTransition
|
||||||
|
nodeRef={transitionRef}
|
||||||
appear={true}
|
appear={true}
|
||||||
in={true}
|
in={true}
|
||||||
timeout={{ appear: animationDuration, exit: 0, enter: 0 }}
|
timeout={{ appear: animationDuration, exit: 0, enter: 0 }}
|
||||||
classNames={animationStyles}
|
classNames={animationStyles}
|
||||||
>
|
>
|
||||||
{ReactUtils.renderOrCallToRender(overlay)}
|
<div ref={transitionRef}>{ReactUtils.renderOrCallToRender(overlay)}</div>
|
||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
</div>
|
</div>
|
||||||
</FocusScope>
|
</FocusScope>
|
||||||
|
@ -55,6 +55,7 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
|
|||||||
return (
|
return (
|
||||||
<OverlayContainer>
|
<OverlayContainer>
|
||||||
<CSSTransition
|
<CSSTransition
|
||||||
|
nodeRef={ref}
|
||||||
in={isOpen}
|
in={isOpen}
|
||||||
unmountOnExit={true}
|
unmountOnExit={true}
|
||||||
classNames={animStyles.overlay}
|
classNames={animStyles.overlay}
|
||||||
@ -93,7 +94,13 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
|
|||||||
</FocusScope>
|
</FocusScope>
|
||||||
</div>
|
</div>
|
||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
<CSSTransition in={isOpen} unmountOnExit={true} classNames={animStyles.backdrop} timeout={animationSpeed}>
|
<CSSTransition
|
||||||
|
nodeRef={backdropRef}
|
||||||
|
in={isOpen}
|
||||||
|
unmountOnExit={true}
|
||||||
|
classNames={animStyles.backdrop}
|
||||||
|
timeout={animationSpeed}
|
||||||
|
>
|
||||||
<div ref={backdropRef} className={styles.backdrop} {...underlayProps} />
|
<div ref={backdropRef} className={styles.backdrop} {...underlayProps} />
|
||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
</OverlayContainer>
|
</OverlayContainer>
|
||||||
|
@ -35,6 +35,7 @@ export function NavBarMenu({ activeItem, isOpen, navItems, onClose, setMenuAnima
|
|||||||
const ANIMATION_DURATION = theme.transitions.duration.standard;
|
const ANIMATION_DURATION = theme.transitions.duration.standard;
|
||||||
const animStyles = getAnimStyles(theme, ANIMATION_DURATION);
|
const animStyles = getAnimStyles(theme, ANIMATION_DURATION);
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
const backdropRef = useRef(null);
|
||||||
const { dialogProps } = useDialog({}, ref);
|
const { dialogProps } = useDialog({}, ref);
|
||||||
|
|
||||||
const { overlayProps, underlayProps } = useOverlay(
|
const { overlayProps, underlayProps } = useOverlay(
|
||||||
@ -50,6 +51,7 @@ export function NavBarMenu({ activeItem, isOpen, navItems, onClose, setMenuAnima
|
|||||||
<OverlayContainer>
|
<OverlayContainer>
|
||||||
<FocusScope contain restoreFocus autoFocus>
|
<FocusScope contain restoreFocus autoFocus>
|
||||||
<CSSTransition
|
<CSSTransition
|
||||||
|
nodeRef={ref}
|
||||||
onEnter={() => setMenuAnimationInProgress(true)}
|
onEnter={() => setMenuAnimationInProgress(true)}
|
||||||
onExited={() => setMenuAnimationInProgress(false)}
|
onExited={() => setMenuAnimationInProgress(false)}
|
||||||
appear={isOpen}
|
appear={isOpen}
|
||||||
@ -88,8 +90,14 @@ export function NavBarMenu({ activeItem, isOpen, navItems, onClose, setMenuAnima
|
|||||||
</div>
|
</div>
|
||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
</FocusScope>
|
</FocusScope>
|
||||||
<CSSTransition appear={isOpen} in={isOpen} classNames={animStyles.backdrop} timeout={ANIMATION_DURATION}>
|
<CSSTransition
|
||||||
<div className={styles.backdrop} {...underlayProps} />
|
nodeRef={backdropRef}
|
||||||
|
appear={isOpen}
|
||||||
|
in={isOpen}
|
||||||
|
classNames={animStyles.backdrop}
|
||||||
|
timeout={ANIMATION_DURATION}
|
||||||
|
>
|
||||||
|
<div className={styles.backdrop} {...underlayProps} ref={backdropRef} />
|
||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
</OverlayContainer>
|
</OverlayContainer>
|
||||||
);
|
);
|
||||||
|
@ -26,6 +26,7 @@ export function DashboardSearchModal({ isOpen }: Props) {
|
|||||||
const animStyles = useStyles2((theme) => getAnimStyles(theme, ANIMATION_DURATION));
|
const animStyles = useStyles2((theme) => getAnimStyles(theme, ANIMATION_DURATION));
|
||||||
const { query, onQueryChange, onCloseSearch } = useSearchQuery({});
|
const { query, onQueryChange, onCloseSearch } = useSearchQuery({});
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const backdropRef = useRef(null);
|
||||||
const [animationComplete, setAnimationComplete] = useState(false);
|
const [animationComplete, setAnimationComplete] = useState(false);
|
||||||
|
|
||||||
const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose: onCloseSearch }, ref);
|
const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose: onCloseSearch }, ref);
|
||||||
@ -45,10 +46,11 @@ export function DashboardSearchModal({ isOpen }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<OverlayContainer>
|
<OverlayContainer>
|
||||||
<CSSTransition appear in timeout={ANIMATION_DURATION} classNames={animStyles.underlay}>
|
<CSSTransition nodeRef={backdropRef} appear in timeout={ANIMATION_DURATION} classNames={animStyles.underlay}>
|
||||||
<div onClick={onCloseSearch} className={styles.underlay} {...underlayProps} />
|
<div ref={backdropRef} onClick={onCloseSearch} className={styles.underlay} {...underlayProps} />
|
||||||
</CSSTransition>
|
</CSSTransition>
|
||||||
<CSSTransition
|
<CSSTransition
|
||||||
|
nodeRef={ref}
|
||||||
onEntered={() => setAnimationComplete(true)}
|
onEntered={() => setAnimationComplete(true)}
|
||||||
appear
|
appear
|
||||||
in
|
in
|
||||||
|
Loading…
Reference in New Issue
Block a user