@salesforce/design-system-react/module/components/card/index.js

Salesforce Lightning Design System for React

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// # Card Component
// Implements the [Card design pattern](https://www.lightningdesignsystem.com/components/cards/) in React.
// Based on SLDS v2.2.1
// ### React
import React from 'react';
import PropTypes from 'prop-types'; // ### classNames
// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
// This project uses `classnames`, "a simple javascript utility for conditionally
// joining classNames together."

import classnames from 'classnames'; // ## Children

import Header from './private/header';
import Body from './private/body';
import Footer from './private/footer';
import Empty from './empty';
import { CARD } from '../../utilities/constants';
import getAriaProps from '../../utilities/get-aria-props';
import getDataProps from '../../utilities/get-data-props';
var idSuffixes = {
  body: '__body',
  headerActions: '__header-actions',
  heading: '__heading',
  filter: '__filter-input'
};
/**
 * Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination. `aria-` and `data-` props can be provided and will be destructured on the root `article` element.
 */

var Card = function Card(_ref) {
  var _ref$heading = _ref.heading,
      heading = _ref$heading === void 0 ? 'Related Items' : _ref$heading,
      bodyClassName = _ref.bodyClassName,
      children = _ref.children,
      className = _ref.className,
      empty = _ref.empty,
      filter = _ref.filter,
      footer = _ref.footer,
      hasNoHeader = _ref.hasNoHeader,
      header = _ref.header,
      headerActions = _ref.headerActions,
      icon = _ref.icon,
      id = _ref.id,
      style = _ref.style,
      rest = _objectWithoutProperties(_ref, ["heading", "bodyClassName", "children", "className", "empty", "filter", "footer", "hasNoHeader", "header", "headerActions", "icon", "id", "style"]);

  var props = _objectSpread({
    heading: heading,
    bodyClassName: bodyClassName,
    children: children,
    className: className,
    empty: empty,
    filter: filter,
    footer: footer,
    hasNoHeader: hasNoHeader,
    header: header,
    headerActions: headerActions,
    icon: icon,
    id: id,
    style: style
  }, rest);

  var ariaProps = getAriaProps(props);
  var dataProps = getDataProps(props);
  var bodyId = id ? id + idSuffixes.body : null;
  var filterId = id ? id + idSuffixes.filter : null;
  var headingId = id ? id + idSuffixes.heading : null;
  var headerActionsId = id ? id + idSuffixes.headerActions : null;
  var resolvedEmpty = empty;

  if (resolvedEmpty === true) {
    // Can be overridden by passing in a node to the empty prop
    resolvedEmpty = /*#__PURE__*/React.createElement(Empty, {
      id: id,
      heading: heading
    });
  }

  return /*#__PURE__*/React.createElement("article", _extends({
    id: id,
    className: classnames('slds-card', className),
    style: style
  }, ariaProps, dataProps), !hasNoHeader && /*#__PURE__*/React.createElement(Header, {
    header: header,
    headingId: headingId,
    icon: icon,
    filter: filter,
    filterId: filterId,
    heading: heading,
    headerActions: headerActions,
    headerActionsId: headerActionsId
  }), !resolvedEmpty ? /*#__PURE__*/React.createElement(Body, {
    id: bodyId,
    className: bodyClassName
  }, children) : /*#__PURE__*/React.createElement(Body, {
    id: bodyId,
    className: bodyClassName
  }, resolvedEmpty), footer ? /*#__PURE__*/React.createElement(Footer, null, footer) : null);
}; // ### Display Name
// Always use the canonical component name as the React display name.


Card.displayName = CARD; // ### Prop Types

Card.propTypes = {
  /**
   * CSS classes to be added to the card body (wraps children).
   */
  bodyClassName: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

  /**
   * The main section of the card. It often contains a `DataTable` or `Tile`.
   */
  children: PropTypes.node,

  /**
   * CSS classes to be added to the card.
   */
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

  /**
   * Replaces the body (that is the children) with the specified empty state, this will also remove header actions, the filter, and the icon. If the default empty state is wanted, set to `true`.
   */
  empty: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),

  /**
   * Adds a filter input to the card header.
   */
  filter: PropTypes.node,

  /**
   * Footer often contains pagination.
   */
  footer: PropTypes.node,

  /**
   * Allows card to have no header, and ignores header related props altogether.
   */
  hasNoHeader: PropTypes.bool,

  /**
   * Allows a custom header (the media object with the icon in the first column). `icon`, `heading` and other props are passed into the media object from Card if present. Use `design-system-react/components/media-object` to create your own custom header.
   */
  header: PropTypes.node,

  /**
   * The heading is the name of the related item group and should only contain inline elements.
   */
  heading: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),

  /**
   * Actions to perform on selected items or actions that are not specific to one item such as adding an item. If no group actions are needed, then the number of selected items is often present.
   */
  headerActions: PropTypes.node,

  /**
   * Icon associated with the items within the `body`.
   */
  icon: PropTypes.node,

  /**
   * Set the HTML `id` of the card. This also sets the `id` of the filter and the header actions.
   */
  id: PropTypes.string,

  /**
   * Custom styles to be added to the card.
   */
  style: PropTypes.object
};
export default Card;
export { idSuffixes };
//# sourceMappingURL=index.js.map