@momentum-ui/react/es/Chip/index.js

Cisco Momentum UI framework for ReactJs applications

/** @component chip */
import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from "./..";

var Chip = function Chip(_ref) {
  var className = _ref.className,
      leftContent = _ref.leftContent,
      fileDownloadLink = _ref.fileDownloadLink,
      fileType = _ref.fileType,
      rightContent = _ref.rightContent,
      subTitle = _ref.subTitle,
      title = _ref.title,
      type = _ref.type;
  Chip.displayName = 'Chip'; // This appears to be a false positive
  // See: https://github.com/yannickcr/eslint-plugin-react/issues/1181
  // eslint-disable-next-line react/no-multi-comp

  function buildChipLeft() {
    if (type === 'file') {
      return /*#__PURE__*/React.createElement(Icon, {
        name: "file-" + fileType + "_32"
      });
    }

    if (type === 'recording') {
      return /*#__PURE__*/React.createElement(Icon, {
        name: "play-circle_32",
        color: "white"
      });
    }

    if (type === 'unauthorized') {
      return /*#__PURE__*/React.createElement(Icon, {
        name: "warning_32"
      });
    }

    return leftContent;
  } // eslint-disable-next-line react/no-multi-comp


  function buildChipRight() {
    if (rightContent) {
      return rightContent;
    }

    if (type === 'file' && fileDownloadLink) {
      return /*#__PURE__*/React.createElement("a", {
        className: "file-download",
        download: true,
        href: fileDownloadLink
      }, /*#__PURE__*/React.createElement("i", {
        className: "icon icon-download_32"
      }));
    }

    return null;
  }

  var chipLeft = buildChipLeft();
  var chipRight = buildChipRight();
  return /*#__PURE__*/React.createElement("div", {
    className: 'md-chip' + ("" + (className && " " + className || ''))
  }, /*#__PURE__*/React.createElement("div", {
    className: 'md-chip-left' + ("" + (type && " " + type || ''))
  }, chipLeft), /*#__PURE__*/React.createElement("div", {
    className: "md-chip-center"
  }, title && /*#__PURE__*/React.createElement("div", {
    className: "md-chip__title lead"
  }, title), subTitle && /*#__PURE__*/React.createElement("div", {
    className: "md-chip__sub-title subheader"
  }, subTitle)), chipRight && /*#__PURE__*/React.createElement("div", {
    className: "md-chip-right"
  }, chipRight));
};

Chip.propTypes = {
  /** @prop Optional css class string | '' */
  className: PropTypes.string,

  /** @prop Sets file for anchor element to download | '' */
  fileDownloadLink: PropTypes.string,

  /** @prop Sets type of file | null */
  fileType: PropTypes.oneOf(['audio', 'graph', 'image', 'locked', 'missing', 'pdf', 'spreadsheet', 'text', 'video', 'zip']),

  /** @prop Node that becomes the content on the left of Chip | null */
  leftContent: PropTypes.node,

  /** @prop NOde that becomes the content on the right of Chip | null */
  rightContent: PropTypes.node,

  /** @prop Text of the Chip's subtitle | '' */
  subTitle: PropTypes.string,

  /** @prop Text of the Chip's title | null */
  title: PropTypes.string,

  /** @prop Sets the type of icon for the Chip | null */
  type: PropTypes.oneOf(['file', 'recording', 'unauthorized'])
};
Chip.defaultProps = {
  className: '',
  fileDownloadLink: '',
  fileType: null,
  leftContent: null,
  rightContent: null,
  subTitle: '',
  title: null,
  type: null
};
export default Chip;