@grafana/ui
Version:
Grafana Components Library
1 lines • 6.23 kB
Source Map (JSON)
{"version":3,"file":"TypeaheadItem.mjs","sources":["../../../../src/components/Typeahead/TypeaheadItem.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\nimport Highlighter from 'react-highlight-words';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { CompletionItem, CompletionItemKind } from '../../types/completion';\n\nimport { PartialHighlighter } from './PartialHighlighter';\n\ninterface Props {\n isSelected: boolean;\n item: CompletionItem;\n style: React.CSSProperties;\n prefix?: string;\n\n onClickItem?: (event: React.MouseEvent) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n typeaheadItem: css({\n border: 'none',\n background: 'none',\n textAlign: 'left',\n label: 'type-ahead-item',\n height: 'auto',\n fontFamily: theme.typography.fontFamilyMonospace,\n padding: theme.spacing(1, 1, 1, 2),\n fontSize: theme.typography.bodySmall.fontSize,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n zIndex: 11,\n display: 'block',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition:\n 'color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)',\n },\n }),\n\n typeaheadItemSelected: css({\n label: 'type-ahead-item-selected',\n backgroundColor: theme.colors.background.secondary,\n }),\n\n typeaheadItemMatch: css({\n label: 'type-ahead-item-match',\n color: theme.v1.palette.yellow,\n borderBottom: `1px solid ${theme.v1.palette.yellow}`,\n padding: 'inherit',\n background: 'inherit',\n }),\n\n typeaheadItemGroupTitle: css({\n label: 'type-ahead-item-group-title',\n color: theme.colors.text.secondary,\n fontSize: theme.typography.bodySmall.fontSize,\n lineHeight: theme.typography.body.lineHeight,\n padding: theme.spacing(1),\n }),\n});\n\nexport const TypeaheadItem = (props: Props) => {\n const styles = useStyles2(getStyles);\n\n const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;\n const className = isSelected ? cx([styles.typeaheadItem, styles.typeaheadItemSelected]) : cx([styles.typeaheadItem]);\n const highlightClassName = cx([styles.typeaheadItemMatch]);\n const itemGroupTitleClassName = cx([styles.typeaheadItemGroupTitle]);\n const label = item.label || '';\n\n if (item.kind === CompletionItemKind.GroupTitle) {\n return (\n <li className={itemGroupTitleClassName} style={style}>\n <span>{label}</span>\n </li>\n );\n }\n\n return (\n <li role=\"none\">\n <button\n role=\"menuitem\"\n className={className}\n style={style}\n onMouseDown={onClickItem}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n {item.highlightParts !== undefined ? (\n <PartialHighlighter\n text={label}\n highlightClassName={highlightClassName}\n highlightParts={item.highlightParts}\n ></PartialHighlighter>\n ) : (\n <Highlighter\n textToHighlight={label}\n searchWords={[prefix ?? '']}\n autoEscape={true}\n highlightClassName={highlightClassName}\n />\n )}\n </button>\n </li>\n );\n};\n"],"names":[],"mappings":"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"}