@grafana/ui/dist/esm/components/DataLinks/DataLinkSuggestions.mjs.map

Grafana Components Library

{"version":3,"file":"DataLinkSuggestions.mjs","sources":["../../../../src/components/DataLinks/DataLinkSuggestions.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { groupBy, capitalize } from 'lodash';\nimport { useRef, useMemo } from 'react';\nimport * as React from 'react';\nimport useClickAway from 'react-use/lib/useClickAway';\n\nimport { VariableSuggestion, GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { List } from '../List/List';\n\ninterface DataLinkSuggestionsProps {\n  activeRef?: React.RefObject<HTMLDivElement>;\n  suggestions: VariableSuggestion[];\n  activeIndex: number;\n  onSuggestionSelect: (suggestion: VariableSuggestion) => void;\n  onClose?: () => void;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    list: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n      '&:last-child': {\n        border: 'none',\n      },\n    }),\n    wrapper: css({\n      background: theme.colors.background.primary,\n      width: '250px',\n    }),\n    item: css({\n      background: 'none',\n      padding: '2px 8px',\n      userSelect: 'none',\n      color: theme.colors.text.primary,\n      cursor: 'pointer',\n      '&:hover': {\n        background: theme.colors.action.hover,\n      },\n    }),\n    label: css({\n      color: theme.colors.text.secondary,\n    }),\n    activeItem: css({\n      background: theme.colors.background.secondary,\n      '&:hover': {\n        background: theme.colors.background.secondary,\n      },\n    }),\n    itemValue: css({\n      fontFamily: theme.typography.fontFamilyMonospace,\n      fontSize: theme.typography.size.sm,\n    }),\n  };\n};\n\nexport const DataLinkSuggestions = ({ suggestions, ...otherProps }: DataLinkSuggestionsProps) => {\n  const ref = useRef(null);\n\n  useClickAway(ref, () => {\n    if (otherProps.onClose) {\n      otherProps.onClose();\n    }\n  });\n\n  const groupedSuggestions = useMemo(() => {\n    return groupBy(suggestions, (s) => s.origin);\n  }, [suggestions]);\n\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div role=\"menu\" ref={ref} className={styles.wrapper}>\n      {Object.keys(groupedSuggestions).map((key, i) => {\n        const indexOffset =\n          i === 0\n            ? 0\n            : Object.keys(groupedSuggestions).reduce((acc, current, index) => {\n                if (index >= i) {\n                  return acc;\n                }\n                return acc + groupedSuggestions[current].length;\n              }, 0);\n\n        return (\n          <DataLinkSuggestionsList\n            {...otherProps}\n            suggestions={groupedSuggestions[key]}\n            label={capitalize(key)}\n            activeIndex={otherProps.activeIndex}\n            activeIndexOffset={indexOffset}\n            key={key}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nDataLinkSuggestions.displayName = 'DataLinkSuggestions';\n\ninterface DataLinkSuggestionsListProps extends DataLinkSuggestionsProps {\n  label: string;\n  activeIndexOffset: number;\n  activeRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst DataLinkSuggestionsList = React.memo(\n  ({\n    activeIndex,\n    activeIndexOffset,\n    label,\n    onClose,\n    onSuggestionSelect,\n    suggestions,\n    activeRef: selectedRef,\n  }: DataLinkSuggestionsListProps) => {\n    const styles = useStyles2(getStyles);\n\n    return (\n      <>\n        <List\n          className={styles.list}\n          items={suggestions}\n          renderItem={(item, index) => {\n            const isActive = index + activeIndexOffset === activeIndex;\n            return (\n              // key events are handled by DataLinkInput\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <div\n                role=\"menuitem\"\n                tabIndex={0}\n                className={cx(styles.item, isActive && styles.activeItem)}\n                ref={isActive ? selectedRef : undefined}\n                onClick={() => {\n                  onSuggestionSelect(item);\n                }}\n                title={item.documentation}\n              >\n                <span className={styles.itemValue}>\n                  <span className={styles.label}>{label}</span> {item.label}\n                </span>\n              </div>\n            );\n          }}\n        />\n      </>\n    );\n  }\n);\n\nDataLinkSuggestionsList.displayName = 'DataLinkSuggestionsList';\n"],"names":[],"mappings":"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"}