@grafana/ui/dist/esm/components/transitions/SlideOutTransition.mjs.map

Grafana Components Library

{"version":3,"file":"SlideOutTransition.mjs","sources":["../../../../src/components/transitions/SlideOutTransition.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ntype Props = {\n  children: React.ReactElement;\n  visible: boolean;\n  size: number;\n\n  duration?: number;\n  horizontal?: boolean;\n};\n\nexport function SlideOutTransition(props: Props) {\n  const { visible, children, duration = 250, horizontal, size } = props;\n  const styles = useStyles2(getStyles, duration, horizontal ? 'width' : 'height', size);\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, measurement: 'width' | 'height', size: number) => ({\n  enter: css({\n    label: 'enter',\n    [`${measurement}`]: 0,\n    opacity: 0,\n  }),\n  enterActive: css({\n    label: 'enterActive',\n    [`${measurement}`]: `${size}px`,\n    opacity: 1,\n    [theme.transitions.handleMotion('no-preference')]: {\n      transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`,\n    },\n    [theme.transitions.handleMotion('reduce')]: {\n      transition: `opacity ${duration}ms ease-out`,\n    },\n  }),\n  exit: css({\n    label: 'exit',\n    [`${measurement}`]: `${size}px`,\n    opacity: 1,\n  }),\n  exitActive: css({\n    label: 'exitActive',\n    opacity: 0,\n    [`${measurement}`]: 0,\n    [theme.transitions.handleMotion('no-preference')]: {\n      transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`,\n    },\n    [theme.transitions.handleMotion('reduce')]: {\n      transition: `opacity ${duration}ms ease-out`,\n    },\n  }),\n});\n"],"names":[],"mappings":";;;;;;;AAkBO,SAAS,mBAAmB,KAAc,EAAA;AAC/C,EAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,WAAW,GAAK,EAAA,UAAA,EAAY,MAAS,GAAA,KAAA;AAChE,EAAA,MAAM,SAAS,UAAW,CAAA,SAAA,EAAW,UAAU,UAAa,GAAA,OAAA,GAAU,UAAU,IAAI,CAAA;AACpF,EAAM,MAAA,aAAA,GAAgB,OAAO,IAAI,CAAA;AAEjC,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,OAAA;AAAA,MACJ,YAAc,EAAA,IAAA;AAAA,MACd,aAAe,EAAA,IAAA;AAAA,MACf,OAAS,EAAA,QAAA;AAAA,MACT,UAAY,EAAA,MAAA;AAAA,MACZ,OAAS,EAAA,aAAA;AAAA,MAER,gBAAM,YAAa,CAAA,QAAA,EAAU,EAAE,GAAA,EAAK,eAAe;AAAA;AAAA,GACtD;AAEJ;AAEA,MAAM,SAAY,GAAA,CAAC,KAAsB,EAAA,QAAA,EAAkB,aAAiC,IAAkB,MAAA;AAAA,EAC5G,OAAO,GAAI,CAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,CAAC,CAAA,EAAG,WAAW,CAAA,CAAE,GAAG,CAAA;AAAA,IACpB,OAAS,EAAA;AAAA,GACV,CAAA;AAAA,EACD,aAAa,GAAI,CAAA;AAAA,IACf,KAAO,EAAA,aAAA;AAAA,IACP,CAAC,CAAG,EAAA,WAAW,CAAE,CAAA,GAAG,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,IAC3B,OAAS,EAAA,CAAA;AAAA,IACT,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,MACjD,YAAY,CAAW,QAAA,EAAA,QAAQ,CAAgB,aAAA,EAAA,WAAW,IAAI,QAAQ,CAAA,WAAA;AAAA,KACxE;AAAA,IACA,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,QAAQ,CAAC,GAAG;AAAA,MAC1C,UAAA,EAAY,WAAW,QAAQ,CAAA,WAAA;AAAA;AACjC,GACD,CAAA;AAAA,EACD,MAAM,GAAI,CAAA;AAAA,IACR,KAAO,EAAA,MAAA;AAAA,IACP,CAAC,CAAG,EAAA,WAAW,CAAE,CAAA,GAAG,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,IAC3B,OAAS,EAAA;AAAA,GACV,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,KAAO,EAAA,YAAA;AAAA,IACP,OAAS,EAAA,CAAA;AAAA,IACT,CAAC,CAAA,EAAG,WAAW,CAAA,CAAE,GAAG,CAAA;AAAA,IACpB,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,MACjD,YAAY,CAAW,QAAA,EAAA,QAAQ,CAAgB,aAAA,EAAA,WAAW,IAAI,QAAQ,CAAA,WAAA;AAAA,KACxE;AAAA,IACA,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,QAAQ,CAAC,GAAG;AAAA,MAC1C,UAAA,EAAY,WAAW,QAAQ,CAAA,WAAA;AAAA;AACjC,GACD;AACH,CAAA,CAAA;;;;"}