@grafana/ui/dist/cjs/components/List/AbstractList.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 i18n = require('@grafana/i18n');
var stylesFactory = require('../../themes/stylesFactory.cjs');
var Button = require('../Button/Button.cjs');
var hooks = require('./hooks.cjs');

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

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