@grafana/ui
Version:
Grafana Components Library
115 lines (112 loc) • 3.73 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { useMemo } from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { InlineList } from '../List/InlineList.mjs';
import { List } from '../List/List.mjs';
import { VizLegendListItem } from './VizLegendListItem.mjs';
"use strict";
const VizLegendList = ({
items,
itemRenderer,
onLabelMouseOver,
onLabelMouseOut,
onLabelClick,
placement,
className,
readonly,
limit = 0,
filterAction
}) => {
const styles = useStyles2(getStyles);
const allItemsSelected = useMemo(() => !items.some((item) => item.disabled), [items]);
if (!itemRenderer) {
itemRenderer = (item) => /* @__PURE__ */ jsx(
VizLegendListItem,
{
item,
onLabelClick,
onLabelMouseOver,
onLabelMouseOut,
readonly,
allItemsSelected
}
);
}
const leftItems = useMemo(
() => placement === "right" ? items : items.filter((item) => item.yAxis === 1),
[placement, items]
);
const rightItems = 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__ */ jsx("span", { className: styles.itemRight, children: itemRenderer(item, index) });
};
return /* @__PURE__ */ jsxs("div", { className: cx(styles.rightWrapper, className), children: [
filterAction && /* @__PURE__ */ jsx("span", { className: styles.itemRight, children: filterAction }),
/* @__PURE__ */ jsx(List, { items: leftItems, renderItem, getItemKey, limit })
] });
}
case "bottom":
default: {
const renderItem = (item, index) => {
return /* @__PURE__ */ jsx("span", { className: styles.itemBottom, children: itemRenderer(item, index) });
};
return /* @__PURE__ */ jsxs("div", { className: cx(styles.bottomWrapper, className), children: [
leftItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
filterAction && /* @__PURE__ */ jsx("span", { className: styles.itemBottom, children: filterAction }),
/* @__PURE__ */ jsx(InlineList, { items: leftItems, renderItem, getItemKey, limit })
] }),
rightItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: cx(styles.section, styles.sectionRight), children: [
!leftItems.length && filterAction && /* @__PURE__ */ jsx("span", { className: styles.itemBottom, children: filterAction }),
/* @__PURE__ */ jsx(InlineList, { items: rightItems, renderItem, getItemKey, limit })
] })
] });
}
}
};
VizLegendList.displayName = "VizLegendList";
const getStyles = (theme) => {
const itemStyles = css({
paddingRight: "10px",
display: "flex",
fontSize: theme.typography.bodySmall.fontSize,
whiteSpace: "nowrap"
});
return {
itemBottom: itemStyles,
itemRight: cx(
itemStyles,
css({
marginBottom: theme.spacing(0.5)
})
),
rightWrapper: css({
padding: theme.spacing(0.5)
}),
bottomWrapper: css({
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
width: "100%",
padding: theme.spacing(0.5),
gap: "15px 25px"
}),
section: css({
display: "flex",
flexWrap: "wrap"
}),
sectionRight: css({
justifyContent: "flex-end",
flexGrow: 1,
flexBasis: "50%"
})
};
};
export { VizLegendList };
//# sourceMappingURL=VizLegendList.mjs.map