@grafana/ui
Version:
Grafana Components Library
1 lines • 2.83 kB
Source Map (JSON)
{"version":3,"file":"FadeTransition.cjs","sources":["../../../../src/components/transitions/FadeTransition.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ntype Props = {\n children: React.ReactElement<Record<string, unknown>>;\n visible: boolean;\n duration?: number;\n};\n\nexport function FadeTransition(props: Props) {\n const { visible, children, duration = 250 } = props;\n const styles = useStyles2(getStyles, duration);\n const transitionRef = useRef(null);\n\n return (\n <CSSTransition\n in={visible}\n mountOnEnter={true}\n unmountOnExit={true}\n timeout={duration}\n classNames={styles}\n nodeRef={transitionRef}\n >\n {React.cloneElement(children, { ref: transitionRef })}\n </CSSTransition>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, duration: number) => ({\n enter: css({\n label: 'enter',\n opacity: 0,\n }),\n enterActive: css({\n label: 'enterActive',\n opacity: 1,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: `opacity ${duration}ms ease-out`,\n },\n }),\n exit: css({\n label: 'exit',\n opacity: 1,\n }),\n exitActive: css({\n label: 'exitActive',\n opacity: 0,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: `opacity ${duration}ms ease-out`,\n },\n }),\n});\n"],"names":["useStyles2","useRef","jsx","CSSTransition","css"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,SAAS,eAAe,KAAA,EAAc;AAC3C,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,QAAA,GAAW,KAAI,GAAI,KAAA;AAC9C,EAAA,MAAM,MAAA,GAASA,uBAAA,CAAW,SAAA,EAAW,QAAQ,CAAA;AAC7C,EAAA,MAAM,aAAA,GAAgBC,aAAO,IAAI,CAAA;AAEjC,EAAA,uBACEC,cAAA;AAAA,IAACC,kCAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,OAAA;AAAA,MACJ,YAAA,EAAc,IAAA;AAAA,MACd,aAAA,EAAe,IAAA;AAAA,MACf,OAAA,EAAS,QAAA;AAAA,MACT,UAAA,EAAY,MAAA;AAAA,MACZ,OAAA,EAAS,aAAA;AAAA,MAER,2BAAM,YAAA,CAAa,QAAA,EAAU,EAAE,GAAA,EAAK,eAAe;AAAA;AAAA,GACtD;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,QAAA,MAAsB;AAAA,EAC7D,OAAOC,OAAA,CAAI;AAAA,IACT,KAAA,EAAO,OAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACV,CAAA;AAAA,EACD,aAAaA,OAAA,CAAI;AAAA,IACf,KAAA,EAAO,aAAA;AAAA,IACP,OAAA,EAAS,CAAA;AAAA,IACT,CAAC,KAAA,CAAM,WAAA,CAAY,aAAa,eAAA,EAAiB,QAAQ,CAAC,GAAG;AAAA,MAC3D,UAAA,EAAY,WAAW,QAAQ,CAAA,WAAA;AAAA;AACjC,GACD,CAAA;AAAA,EACD,MAAMA,OAAA,CAAI;AAAA,IACR,KAAA,EAAO,MAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACV,CAAA;AAAA,EACD,YAAYA,OAAA,CAAI;AAAA,IACd,KAAA,EAAO,YAAA;AAAA,IACP,OAAA,EAAS,CAAA;AAAA,IACT,CAAC,KAAA,CAAM,WAAA,CAAY,aAAa,eAAA,EAAiB,QAAQ,CAAC,GAAG;AAAA,MAC3D,UAAA,EAAY,WAAW,QAAQ,CAAA,WAAA;AAAA;AACjC,GACD;AACH,CAAA,CAAA;;;;"}