@grafana/ui
Version:
Grafana Components Library
1 lines • 6.16 kB
Source Map (JSON)
{"version":3,"file":"SidebarPaneHeader.cjs","sources":["../../../../src/components/Sidebar/SidebarPaneHeader.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { type ReactNode } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Text } from '../Text/Text';\n\nimport { useSidebarContext } from './useSidebar';\n\nexport interface Props {\n children?: ReactNode;\n title: string;\n}\n\nexport function SidebarPaneHeader({ children, title }: Props) {\n const styles = useStyles2(getStyles);\n const sidebarContext = useSidebarContext();\n\n if (!sidebarContext) {\n throw new Error('SidebarPaneHeader must be used within a Sidebar');\n }\n\n return (\n <div className={styles.wrapper}>\n <div className={styles.header}>\n {sidebarContext.onGoBack && (\n <IconButton\n variant=\"secondary\"\n size=\"lg\"\n name=\"arrow-left\"\n onClick={sidebarContext.onGoBack}\n disabled={!sidebarContext.canGoBack}\n aria-label={t('grafana-ui.sidebar.go-back', 'Go back')}\n tooltip={t('grafana-ui.sidebar.go-back', 'Go back')}\n data-testid={selectors.components.Sidebar.goBack}\n />\n )}\n <Text weight=\"medium\" variant=\"h6\" truncate data-testid={selectors.components.Sidebar.headerTitle}>\n {title}\n </Text>\n <div className={styles.flexGrow} />\n {sidebarContext.onToggleDock && (\n <IconButton\n name={'web-section-alt'}\n onClick={sidebarContext.onToggleDock}\n className={sidebarContext.isDocked ? undefined : styles.dockedButtonUndocked}\n tooltip={\n sidebarContext.isDocked ? t('grafana-ui.sidebar.undock', 'Undock') : t('grafana-ui.sidebar.dock', 'Dock')\n }\n data-testid={selectors.components.Sidebar.dockToggle}\n />\n )}\n {sidebarContext.onClosePane && (\n <IconButton\n variant=\"secondary\"\n size=\"lg\"\n name=\"times\"\n onClick={sidebarContext.onClosePane}\n aria-label={t('grafana-ui.sidebar.close', 'Close')}\n tooltip={t('grafana-ui.sidebar.close', 'Close')}\n data-testid={selectors.components.Sidebar.closePane}\n />\n )}\n </div>\n {children && <div className={styles.actions}>{children}</div>}\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n wrapper: css({\n display: 'flex',\n flexDirection: 'column',\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n header: css({\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(1.5, 1, 1.5, 1.5),\n gap: theme.spacing(1),\n }),\n flexGrow: css({\n flexGrow: 1,\n }),\n actions: css({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n padding: theme.spacing(0, 1, 1.5, 1),\n '&:empty': {\n display: 'none',\n },\n }),\n dockedButtonUndocked: css({\n opacity: 0.6,\n }),\n };\n};\n"],"names":["useStyles2","useSidebarContext","jsxs","jsx","IconButton","t","selectors","Text","css"],"mappings":"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"}