@activecollab/components/dist/esm/components/EntityCard/EntityCard.js

ActiveCollab Components

import React, { forwardRef, useCallback } from "react";
import classnames from "classnames";
import { StyledEntityCard } from "./Styles";
export const EntityCard = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    renderAs = "list-item",
    properties,
    className
  } = _ref;
  const renderAsListItem = useCallback(properties => {
    return properties.filter(p => p.showInList).map(p => {
      return /*#__PURE__*/React.createElement("div", {
        key: p.name,
        className: "entity-property-" + p.name
      }, p.render());
    });
  }, []);
  const renderAsGridItem = useCallback(properties => {
    const headerSection = properties.filter(p => p.cardSection === "header");
    const bodySection = properties.filter(p => p.cardSection === "body");
    const footerSection = properties.filter(p => p.cardSection === "footer");
    const renderProperty = p => /*#__PURE__*/React.createElement("div", {
      key: p.name,
      className: "entity-property-" + p.name
    }, p.render());
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "card-header"
    }, headerSection.map(p => renderProperty(p))), /*#__PURE__*/React.createElement("div", {
      className: "card-body"
    }, bodySection.map(p => renderProperty(p))), /*#__PURE__*/React.createElement("div", {
      className: "card-footer"
    }, footerSection.map(p => renderProperty(p))));
  }, []);
  return /*#__PURE__*/React.createElement(StyledEntityCard, {
    ref: ref,
    hoverable: true,
    className: classnames("entity-card-wrapper", {
      "grid-item": renderAs === "grid-item",
      "list-item": renderAs === "list-item"
    }, className),
    variant: renderAs === "grid-item" ? "paper-1" : "paper-2",
    $renderAs: renderAs
  }, renderAs === "list-item" ? renderAsListItem(properties) : null, renderAs === "grid-item" ? renderAsGridItem(properties) : null);
});
EntityCard.displayName = "EntityCard";
//# sourceMappingURL=EntityCard.js.map