@grafana/ui/dist/esm/components/Collapse/Collapse.mjs.map

Grafana Components Library

{"version":3,"file":"Collapse.mjs","sources":["../../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { clearButtonStyles } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  collapse: css({\n    label: 'collapse',\n    marginBottom: theme.spacing(1),\n    backgroundColor: theme.colors.background.primary,\n    border: `1px solid ${theme.colors.border.weak}`,\n    position: 'relative',\n    borderRadius: theme.shape.radius.default,\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    flex: '1 1 0',\n  }),\n  collapseBody: css({\n    label: 'collapse__body',\n    padding: theme.spacing(theme.components.panel.padding),\n    paddingTop: 0,\n    flex: 1,\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  bodyContentWrapper: css({\n    label: 'bodyContentWrapper',\n    flex: 1,\n  }),\n  loader: css({\n    label: 'collapse__loader',\n    height: '2px',\n    position: 'relative',\n    overflow: 'hidden',\n    background: 'none',\n    margin: theme.spacing(0.5),\n  }),\n  loaderActive: css({\n    label: 'collapse__loader_active',\n    '&:after': {\n      content: \"' '\",\n      display: 'block',\n      width: '25%',\n      top: 0,\n      height: '250%',\n      position: 'absolute',\n      animation: 'loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms',\n      animationIterationCount: 100,\n      left: '-25%',\n      background: theme.colors.primary.main,\n    },\n    '@keyframes loader': {\n      from: {\n        left: '-25%',\n        opacity: 0.1,\n      },\n      to: {\n        left: '100%',\n        opacity: 1,\n      },\n    },\n  }),\n  header: css({\n    label: 'collapse__header',\n    padding: theme.spacing(1, 2, 1, 2),\n    display: 'flex',\n  }),\n  headerCollapsed: css({\n    label: 'collapse__header--collapsed',\n    padding: theme.spacing(1, 2, 1, 2),\n  }),\n  headerLabel: css({\n    label: 'collapse__header-label',\n    fontWeight: theme.typography.fontWeightMedium,\n    marginRight: theme.spacing(1),\n    fontSize: theme.typography.size.md,\n    display: 'flex',\n    flex: '0 0 100%',\n  }),\n  icon: css({\n    label: 'collapse__icon',\n    margin: theme.spacing(0.25, 1, 0, -1),\n  }),\n});\n\nexport interface Props {\n  /** Expand or collapse te content */\n  isOpen?: boolean;\n  /** Element or text for the Collapse header */\n  label: React.ReactNode;\n  /** Indicates loading state of the content */\n  loading?: boolean;\n  /** Toggle collapsed header icon */\n  collapsible?: boolean;\n  /** Callback for the toggle functionality */\n  onToggle?: (isOpen: boolean) => void;\n  /** Additional class name for the root element */\n  className?: string;\n}\n\nexport const ControlledCollapse = ({ isOpen, onToggle, ...otherProps }: React.PropsWithChildren<Props>) => {\n  const [open, setOpen] = useState(isOpen);\n  return (\n    <Collapse\n      isOpen={open}\n      collapsible\n      {...otherProps}\n      onToggle={() => {\n        setOpen(!open);\n        if (onToggle) {\n          onToggle(!open);\n        }\n      }}\n    />\n  );\n};\n\nexport const Collapse = ({\n  isOpen,\n  label,\n  loading,\n  collapsible,\n  onToggle,\n  className,\n  children,\n}: React.PropsWithChildren<Props>) => {\n  const buttonStyles = useStyles2(clearButtonStyles);\n  const style = useStyles2(getStyles);\n  const onClickToggle = () => {\n    if (onToggle) {\n      onToggle(!isOpen);\n    }\n  };\n\n  const panelClass = cx([style.collapse, className]);\n  const loaderClass = loading ? cx([style.loader, style.loaderActive]) : cx([style.loader]);\n  const headerClass = collapsible ? cx([style.header]) : cx([style.headerCollapsed]);\n\n  return (\n    <div className={panelClass}>\n      <button type=\"button\" className={cx(buttonStyles, headerClass)} onClick={onClickToggle}>\n        {collapsible && <Icon className={style.icon} name={isOpen ? 'angle-down' : 'angle-right'} />}\n        <div className={cx([style.headerLabel])}>{label}</div>\n      </button>\n      {isOpen && (\n        <div className={cx([style.collapseBody])}>\n          <div className={loaderClass} />\n          <div className={style.bodyContentWrapper}>{children}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nCollapse.displayName = 'Collapse';\n"],"names":[],"mappings":"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"}