UNPKG

@grafana/ui

Version:
1 lines 4.37 kB
{"version":3,"file":"TitleItem.mjs","sources":["../../../../src/components/PanelChrome/TitleItem.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, LinkModel, LinkTarget } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { Button } from '../Button';\n\ntype TitleItemProps = {\n className?: string;\n children: React.ReactNode;\n onClick?: LinkModel['onClick'];\n href?: string;\n target?: LinkTarget;\n title?: string;\n};\n\ntype TitleItemElement = HTMLAnchorElement & HTMLButtonElement;\n\nexport const TitleItem = forwardRef<TitleItemElement, TitleItemProps>(\n ({ className, children, href, onClick, target, title, ...rest }, ref) => {\n const styles = useStyles2(getStyles);\n\n if (href) {\n return (\n <a\n ref={ref}\n href={href}\n onClick={onClick}\n target={target}\n title={title}\n className={cx(styles.linkItem, className)}\n {...rest}\n >\n {children}\n </a>\n );\n } else if (onClick) {\n return (\n <Button ref={ref} className={cx(styles.item, className)} variant=\"secondary\" fill=\"text\" onClick={onClick}>\n {children}\n </Button>\n );\n } else {\n return (\n <span ref={ref} className={cx(styles.item, className)} {...rest}>\n {children}\n </span>\n );\n }\n }\n);\n\nTitleItem.displayName = 'TitleItem';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const item = css({\n color: `${theme.colors.text.secondary}`,\n label: 'panel-header-item',\n cursor: 'auto',\n border: 'none',\n borderRadius: `${theme.shape.radius.default}`,\n padding: `${theme.spacing(0, 1)}`,\n height: `${theme.spacing(theme.components.panel.headerHeight)}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n '&:focus, &:focus-visible': {\n ...getFocusStyles(theme),\n zIndex: 1,\n },\n '&: focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n '&:hover ': {\n boxShadow: `${theme.shadows.z1}`,\n background: `${theme.colors.background.secondary}`,\n color: `${theme.colors.text.primary}`,\n },\n });\n\n return {\n item,\n linkItem: cx(item, css({ cursor: 'pointer' })),\n };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,QAAU,EAAA,IAAA,EAAM,OAAS,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AACvE,IAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,IAAA,IAAI,IAAM,EAAA;AACR,MACE,uBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA;AAAA,UACA,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,UACvC,GAAG,IAAA;AAAA,UAEH;AAAA;AAAA,OACH;AAAA,eAEO,OAAS,EAAA;AAClB,MAAA,uBACG,GAAA,CAAA,MAAA,EAAA,EAAO,GAAU,EAAA,SAAA,EAAW,GAAG,MAAO,CAAA,IAAA,EAAM,SAAS,CAAA,EAAG,OAAQ,EAAA,WAAA,EAAY,IAAK,EAAA,MAAA,EAAO,SACtF,QACH,EAAA,CAAA;AAAA,KAEG,MAAA;AACL,MACE,uBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,IAAA,EAAM,SAAS,CAAA,EAAI,GAAG,IAAA,EACxD,QACH,EAAA,CAAA;AAAA;AAEJ;AAEJ;AAEA,SAAA,CAAU,WAAc,GAAA,WAAA;AAExB,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAA,MAAM,OAAO,GAAI,CAAA;AAAA,IACf,KAAO,EAAA,CAAA,EAAG,KAAM,CAAA,MAAA,CAAO,KAAK,SAAS,CAAA,CAAA;AAAA,IACrC,KAAO,EAAA,mBAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,MAAQ,EAAA,MAAA;AAAA,IACR,YAAc,EAAA,CAAA,EAAG,KAAM,CAAA,KAAA,CAAM,OAAO,OAAO,CAAA,CAAA;AAAA,IAC3C,SAAS,CAAG,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA;AAAA,IAC/B,MAAA,EAAQ,GAAG,KAAM,CAAA,OAAA,CAAQ,MAAM,UAAW,CAAA,KAAA,CAAM,YAAY,CAAC,CAAA,CAAA;AAAA,IAC7D,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAEhB,0BAA4B,EAAA;AAAA,MAC1B,GAAG,eAAe,KAAK,CAAA;AAAA,MACvB,MAAQ,EAAA;AAAA,KACV;AAAA,IACA,8BAAA,EAAgC,oBAAyB,CAAA;AAAA,IAEzD,UAAY,EAAA;AAAA,MACV,SAAW,EAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,EAAE,CAAA,CAAA;AAAA,MAC9B,UAAY,EAAA,CAAA,EAAG,KAAM,CAAA,MAAA,CAAO,WAAW,SAAS,CAAA,CAAA;AAAA,MAChD,KAAO,EAAA,CAAA,EAAG,KAAM,CAAA,MAAA,CAAO,KAAK,OAAO,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,QAAA,EAAU,GAAG,IAAM,EAAA,GAAA,CAAI,EAAE,MAAQ,EAAA,SAAA,EAAW,CAAC;AAAA,GAC/C;AACF,CAAA;;;;"}