@grafana/ui/dist/cjs/components/VizLegend/VizLegendList.cjs.map

Grafana Components Library

{"version":3,"file":"VizLegendList.cjs","sources":["../../../../src/components/VizLegend/VizLegendList.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { InlineList } from '../List/InlineList';\nimport { List } from '../List/List';\n\nimport { VizLegendListItem } from './VizLegendListItem';\nimport { type VizLegendBaseProps, type VizLegendItem } from './types';\n\nexport interface Props<T> extends VizLegendBaseProps<T> {}\n\n/**\n * @internal\n */\nexport const VizLegendList = <T extends unknown>({\n  items,\n  itemRenderer,\n  onLabelMouseOver,\n  onLabelMouseOut,\n  onLabelClick,\n  placement,\n  className,\n  readonly,\n  limit = 0,\n  filterAction,\n}: Props<T>) => {\n  const styles = useStyles2(getStyles);\n\n  const allItemsSelected = useMemo(() => !items.some((item) => item.disabled), [items]);\n\n  if (!itemRenderer) {\n    /* eslint-disable-next-line react/display-name */\n    itemRenderer = (item) => (\n      <VizLegendListItem\n        item={item}\n        onLabelClick={onLabelClick}\n        onLabelMouseOver={onLabelMouseOver}\n        onLabelMouseOut={onLabelMouseOut}\n        readonly={readonly}\n        allItemsSelected={allItemsSelected}\n      />\n    );\n  }\n\n  const leftItems = useMemo(\n    () => (placement === 'right' ? items : items.filter((item) => item.yAxis === 1)),\n    [placement, items]\n  );\n  const rightItems = useMemo(\n    () => (placement === 'right' ? [] : items.filter((item) => item.yAxis !== 1)),\n    [placement, items]\n  );\n\n  const getItemKey = (item: VizLegendItem<T>) => `${item.getItemKey ? item.getItemKey() : item.label}`;\n\n  switch (placement) {\n    case 'right': {\n      const renderItem = (item: VizLegendItem<T>, index: number) => {\n        return <span className={styles.itemRight}>{itemRenderer!(item, index)}</span>;\n      };\n\n      return (\n        <div className={cx(styles.rightWrapper, className)}>\n          {filterAction && <span className={styles.itemRight}>{filterAction}</span>}\n          <List items={leftItems} renderItem={renderItem} getItemKey={getItemKey} limit={limit} />\n        </div>\n      );\n    }\n    case 'bottom':\n    default: {\n      const renderItem = (item: VizLegendItem<T>, index: number) => {\n        return <span className={styles.itemBottom}>{itemRenderer!(item, index)}</span>;\n      };\n\n      return (\n        <div className={cx(styles.bottomWrapper, className)}>\n          {leftItems.length > 0 && (\n            <div className={styles.section}>\n              {filterAction && <span className={styles.itemBottom}>{filterAction}</span>}\n              <InlineList items={leftItems} renderItem={renderItem} getItemKey={getItemKey} limit={limit} />\n            </div>\n          )}\n          {rightItems.length > 0 && (\n            <div className={cx(styles.section, styles.sectionRight)}>\n              {!leftItems.length && filterAction && <span className={styles.itemBottom}>{filterAction}</span>}\n              <InlineList items={rightItems} renderItem={renderItem} getItemKey={getItemKey} limit={limit} />\n            </div>\n          )}\n        </div>\n      );\n    }\n  }\n};\n\nVizLegendList.displayName = 'VizLegendList';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const itemStyles = css({\n    paddingRight: '10px',\n    display: 'flex',\n    fontSize: theme.typography.bodySmall.fontSize,\n    whiteSpace: 'nowrap',\n  });\n\n  return {\n    itemBottom: itemStyles,\n    itemRight: cx(\n      itemStyles,\n      css({\n        marginBottom: theme.spacing(0.5),\n      })\n    ),\n    rightWrapper: css({\n      padding: theme.spacing(0.5),\n    }),\n    bottomWrapper: css({\n      display: 'flex',\n      flexWrap: 'wrap',\n      justifyContent: 'space-between',\n      width: '100%',\n      padding: theme.spacing(0.5),\n      gap: '15px 25px',\n    }),\n    section: css({\n      display: 'flex',\n      flexWrap: 'wrap',\n    }),\n    sectionRight: css({\n      justifyContent: 'flex-end',\n      flexGrow: 1,\n      flexBasis: '50%',\n    }),\n  };\n};\n"],"names":["useStyles2","useMemo","jsx","VizLegendListItem","cx","List","jsxs","InlineList","css"],"mappings":"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"}