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

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var InlineList = require('../List/InlineList.cjs');
var List = require('../List/List.cjs');
var VizLegendListItem = require('./VizLegendListItem.cjs');

"use strict";
const VizLegendList = ({
  items,
  itemRenderer,
  onLabelMouseOver,
  onLabelMouseOut,
  onLabelClick,
  placement,
  className,
  readonly,
  limit = 0,
  filterAction
}) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const allItemsSelected = React.useMemo(() => !items.some((item) => item.disabled), [items]);
  if (!itemRenderer) {
    itemRenderer = (item) => /* @__PURE__ */ jsxRuntime.jsx(
      VizLegendListItem.VizLegendListItem,
      {
        item,
        onLabelClick,
        onLabelMouseOver,
        onLabelMouseOut,
        readonly,
        allItemsSelected
      }
    );
  }
  const leftItems = React.useMemo(
    () => placement === "right" ? items : items.filter((item) => item.yAxis === 1),
    [placement, items]
  );
  const rightItems = React.useMemo(
    () => placement === "right" ? [] : items.filter((item) => item.yAxis !== 1),
    [placement, items]
  );
  const getItemKey = (item) => `${item.getItemKey ? item.getItemKey() : item.label}`;
  switch (placement) {
    case "right": {
      const renderItem = (item, index) => {
        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemRight, children: itemRenderer(item, index) });
      };
      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.rightWrapper, className), children: [
        filterAction && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemRight, children: filterAction }),
        /* @__PURE__ */ jsxRuntime.jsx(List.List, { items: leftItems, renderItem, getItemKey, limit })
      ] });
    }
    case "bottom":
    default: {
      const renderItem = (item, index) => {
        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemBottom, children: itemRenderer(item, index) });
      };
      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.bottomWrapper, className), children: [
        leftItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
          filterAction && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemBottom, children: filterAction }),
          /* @__PURE__ */ jsxRuntime.jsx(InlineList.InlineList, { items: leftItems, renderItem, getItemKey, limit })
        ] }),
        rightItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.section, styles.sectionRight), children: [
          !leftItems.length && filterAction && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemBottom, children: filterAction }),
          /* @__PURE__ */ jsxRuntime.jsx(InlineList.InlineList, { items: rightItems, renderItem, getItemKey, limit })
        ] })
      ] });
    }
  }
};
VizLegendList.displayName = "VizLegendList";
const getStyles = (theme) => {
  const itemStyles = css.css({
    paddingRight: "10px",
    display: "flex",
    fontSize: theme.typography.bodySmall.fontSize,
    whiteSpace: "nowrap"
  });
  return {
    itemBottom: itemStyles,
    itemRight: css.cx(
      itemStyles,
      css.css({
        marginBottom: theme.spacing(0.5)
      })
    ),
    rightWrapper: css.css({
      padding: theme.spacing(0.5)
    }),
    bottomWrapper: css.css({
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "space-between",
      width: "100%",
      padding: theme.spacing(0.5),
      gap: "15px 25px"
    }),
    section: css.css({
      display: "flex",
      flexWrap: "wrap"
    }),
    sectionRight: css.css({
      justifyContent: "flex-end",
      flexGrow: 1,
      flexBasis: "50%"
    })
  };
};

exports.VizLegendList = VizLegendList;
//# sourceMappingURL=VizLegendList.cjs.map