gather-content-ui/dist/lib/src/modules/person/Person.js

GatherContent UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Person = Person;
var _react = _interopRequireDefault(require("react"));
var _ = require("../../..");
var _classnames = _interopRequireDefault(require("classnames"));
var _TextHighlighter = require("../../../helpers/TextHighlighter");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function Person(_ref) {
  var name = _ref.name,
    subtitle = _ref.subtitle,
    avatarUrl = _ref.avatarUrl,
    initials = _ref.initials,
    className = _ref.className,
    selected = _ref.selected,
    interactive = _ref.interactive,
    collapse = _ref.collapse,
    bordered = _ref.bordered,
    onClick = _ref.onClick,
    highlightText = _ref.highlightText,
    colour = _ref.colour,
    locked = _ref.locked,
    lockedTooltipText = _ref.lockedTooltipText,
    pending = _ref.pending;
  var classes = (0, _classnames["default"])("gui-person", className, {
    "gui-person-selected": selected,
    "gui-person-interactive": interactive,
    "gui-person-collapse": collapse,
    "gui-person-bordered": bordered
  });
  var WrapperElement = interactive ? "button" : "div";
  var shouldHighlightSubtitle = !!highlightText.length && typeof subtitle === "string";
  return /*#__PURE__*/_react["default"].createElement(WrapperElement, {
    className: classes,
    onClick: onClick
  }, /*#__PURE__*/_react["default"].createElement(_.Avatar, {
    url: avatarUrl,
    initials: initials,
    colour: colour
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "gui-person-right"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "gui-person-name"
  }, highlightText ? /*#__PURE__*/_react["default"].createElement(_TextHighlighter.TextHighlighter, {
    highlight: highlightText,
    text: name
  }) : name), !!subtitle && /*#__PURE__*/_react["default"].createElement("div", {
    className: "gui-person-subtitle"
  }, pending && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "gui-person-pending"
  }, "Pending"), " \u2022", " "), shouldHighlightSubtitle ? /*#__PURE__*/_react["default"].createElement(_TextHighlighter.TextHighlighter, {
    highlight: highlightText,
    text: subtitle
  }) : subtitle)), selected && !locked && /*#__PURE__*/_react["default"].createElement(_.Icon, {
    className: "gui-person-tick",
    name: "tick16",
    types: ["primary-blue"]
  }), locked && /*#__PURE__*/_react["default"].createElement(_.TooltipWrapper, {
    id: "".concat(avatarUrl, "-initials-locked"),
    tooltipText: lockedTooltipText
  }, /*#__PURE__*/_react["default"].createElement(_.Icon, {
    name: "lock",
    className: "gui-person-lock",
    types: ["neutral-20"],
    defaultActiveColor: false
  })));
}
Person.defaultProps = {
  interactive: false,
  highlightText: "",
  locked: false,
  lockedTooltipText: "",
  pending: false
};
//# sourceMappingURL=Person.js.map