@grafana/ui/dist/esm/components/List/AbstractList.mjs

Grafana Components Library

import { jsxs, jsx } from 'react/jsx-runtime';
import { css, cx } from '@emotion/css';
import { useMemo } from 'react';
import { Trans } from '@grafana/i18n';
import { stylesFactory } from '../../themes/stylesFactory.mjs';
import { Button } from '../Button/Button.mjs';
import { useLimit } from './hooks.mjs';

"use strict";
const getStyles = stylesFactory((inlineList = false) => ({
  list: css({
    listStyleType: "none",
    margin: 0,
    padding: 0
  }),
  item: css({
    display: inlineList && "inline-block" || "block"
  })
}));
const AbstractList = ({
  items,
  renderItem,
  getItemKey,
  className,
  inline,
  limit = 0
}) => {
  const styles = getStyles(inline);
  const [curLimit, setLimit] = useLimit(limit);
  const limitedItems = useMemo(() => curLimit > 0 ? items.slice(0, curLimit) : items, [items, curLimit]);
  return /* @__PURE__ */ jsxs("ul", { className: cx(styles.list, className), children: [
    limitedItems.map((item, i) => {
      return /* @__PURE__ */ jsx("li", { className: styles.item, children: renderItem(item, i) }, getItemKey ? getItemKey(item) : i);
    }),
    curLimit > 0 && items.length > curLimit && /* @__PURE__ */ jsx("li", { className: styles.item, children: /* @__PURE__ */ jsx(Button, { fill: "text", variant: "primary", size: "sm", onClick: () => setLimit(0), children: /* @__PURE__ */ jsxs(Trans, { i18nKey: "legend.container.show-all-series", children: [
      "...show all ",
      { total: items.length },
      " items"
    ] }) }) }, "__limit")
  ] });
};

export { AbstractList };
//# sourceMappingURL=AbstractList.mjs.map