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

Salesforce Lightning Design System for React

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

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// ### React
import React from 'react';
import createReactClass from 'create-react-class';
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';
import { MEDIA_OBJECT } from '../../utilities/constants'; // Allow for predicatable DOM queries with `querySelectorAll(cssClasses.base)`

export var cssClasses = {
  base: 'slds-media',
  figure: 'slds-media__figure',
  body: 'slds-media__body'
};
/**
 * When you need text and a figure next to each other, use a media object.
 */

var MediaObject = createReactClass({
  // ### Display Name
  // Always use the canonical component name as the React display name.
  displayName: MEDIA_OBJECT,
  // ### Prop Types
  propTypes: {
    /**
     * Often the body may need to be truncated for correct layout. This is only applicable if using the component within a flexbox container.
     */
    canTruncate: PropTypes.bool,

    /**
     * Class names to be added to the component's HTML tag with `slds-media` class.
     */
    className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

    /**
     * The body is often text such as a heading or paragraph.
     */
    body: PropTypes.node,

    /**
     * The figure is the optional visualization of the text within the body.
     */
    figure: PropTypes.node,

    /**
     * Vertically centers the body with the middle of the figure.
     */
    verticalCenter: PropTypes.bool
  },
  render: function render() {
    return React.createElement("div", {
      className: classnames(cssClasses.base, {
        'slds-media--center': this.props.verticalCenter,
        'slds-has-flexi-truncate': this.props.canTruncate
      }, this.props.className)
    }, this.props.figure ? React.createElement("div", {
      className: cssClasses.figure
    }, this.props.figure, " ") : null, React.createElement("div", {
      className: cssClasses.body
    }, this.props.body));
  }
});
export default MediaObject;
//# sourceMappingURL=index.js.map