synapse-react-client/dist/components/row_renderers/utils/CardFooter.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as e, jsxs as a } from "react/jsx-runtime";
import { convertDoiToLink as h } from "../../../utils/functions/RegularExpressions.js";
import { Component as m, Fragment as p } from "react";
import w from "../../IconSvg/IconSvg.js";
class M extends m {
  constructor(t) {
    super(t), this.state = {
      isShowMoreOn: !1,
      isDesktop: !1
    }, this.toggleShowMore = this.toggleShowMore.bind(this), this.updatePredicate = this.updatePredicate.bind(this);
  }
  toggleShowMore() {
    this.setState({
      isShowMoreOn: !this.state.isShowMoreOn
    });
  }
  componentDidMount() {
    this.updatePredicate(), window.addEventListener("resize", this.updatePredicate);
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updatePredicate);
  }
  updatePredicate() {
    this.setState({ isDesktop: window.innerWidth > 600 });
  }
  renderRowValue = (t) => {
    if (typeof t != "string")
      return t;
    const r = t.trim(), i = h(r);
    return i ? /* @__PURE__ */ e("a", { target: "_blank", rel: "noopener noreferrer", href: i, children: r }) : t;
  };
  renderRows = (t, r, i) => t.map((o, s) => {
    const { columnDisplayName: n, value: d } = o, l = s >= r ? "SRC-hidden" : "", c = this.renderRowValue(d);
    return i ? /* @__PURE__ */ a("tr", { className: "SRC-cardRowDesktop " + l, children: [
      /* @__PURE__ */ e("td", { className: "SRC-verticalAlignTop SRC-row-label", children: n }),
      /* @__PURE__ */ e("td", { className: "SRC-row-data SRC-limitMaxWidth ", children: c })
    ] }, s) : /* @__PURE__ */ a(p, { children: [
      /* @__PURE__ */ e("tr", { className: "SRC-cardRowMobile " + l, children: /* @__PURE__ */ e("td", { className: "SRC-verticalAlignTop SRC-row-label", children: n }) }),
      /* @__PURE__ */ e("tr", { className: "SRC-cardRowMobile " + l, children: /* @__PURE__ */ e("td", { className: "SRC-row-data SRC-limitMaxWidth", children: c }) })
    ] }, s);
  });
  render() {
    const { values: t, secondaryLabelLimit: r = 3, cardTopContent: i } = this.props, { isShowMoreOn: o, isDesktop: s } = this.state, n = t.filter((c) => !!c.value), d = n.length > r, l = !d || o ? 1 / 0 : r;
    return /* @__PURE__ */ a(
      "div",
      {
        "data-testid": "CardFooter",
        className: `SRC-cardMetadata ${this.props.className ?? ""}`,
        children: [
          i,
          /* @__PURE__ */ a(
            "table",
            {
              style: {
                width: "100%",
                wordBreak: "break-word"
              },
              children: [
                /* @__PURE__ */ a("colgroup", { children: [
                  /* @__PURE__ */ e("col", { className: "SRC-cardMetadata-column1" }),
                  /* @__PURE__ */ e("col", { className: "SRC-cardMetadata-column2" })
                ] }),
                /* @__PURE__ */ a("tbody", { children: [
                  this.renderRows(n, l, s),
                  d && /* @__PURE__ */ e("tr", { className: "SRC-cardRow", children: /* @__PURE__ */ e("td", { children: /* @__PURE__ */ a(
                    "a",
                    {
                      style: { textAlign: "left", margin: 0, padding: 0 },
                      onClick: this.toggleShowMore,
                      className: "highlight-link",
                      children: [
                        "Show ",
                        o ? "Less" : "More",
                        /* @__PURE__ */ e(
                          w,
                          {
                            icon: o ? "expandLess" : "expandMore"
                          }
                        )
                      ]
                    }
                  ) }) })
                ] })
              ]
            }
          )
        ]
      }
    );
  }
}
export {
  M as default
};
//# sourceMappingURL=CardFooter.js.map