metadata-based-explorer1/es/elements/content-sidebar/activity-feed/task-new/AvatarGroup.js

Box UI Elements

var _statusMessages;

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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 _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; }

import * as React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import uniqueId from 'lodash/uniqueId';
import { Flyout, Overlay } from '../../../../components/flyout';
import Tooltip from '../../../../components/tooltip';
import PlainButton from '../../../../components/plain-button';
import ReadableTime from '../../../../components/time/ReadableTime';
import messages from './messages';
import AvatarGroupAvatar from './AvatarGroupAvatar';
import { TASK_NEW_APPROVED, TASK_NEW_REJECTED, TASK_NEW_COMPLETED, TASK_NEW_NOT_STARTED } from '../../../../constants';
import './AvatarGroup.scss';
var MAX_AVATARS = 3;
var statusMessages = (_statusMessages = {}, _defineProperty(_statusMessages, TASK_NEW_APPROVED, messages.tasksFeedStatusApproved), _defineProperty(_statusMessages, TASK_NEW_REJECTED, messages.tasksFeedStatusRejected), _defineProperty(_statusMessages, TASK_NEW_COMPLETED, messages.tasksFeedStatusCompleted), _defineProperty(_statusMessages, TASK_NEW_NOT_STARTED, null), _statusMessages);

var Datestamp = function Datestamp(_ref) {
  var date = _ref.date;
  return React.createElement(ReadableTime, {
    timestamp: new Date(date).getTime(),
    alwaysShowTime: true,
    relativeThreshold: 0
  });
};

var AvatarDetails = React.memo(function (_ref2) {
  var user = _ref2.user,
      status = _ref2.status,
      completedAt = _ref2.completedAt,
      className = _ref2.className;
  var statusMessage = statusMessages[status] || null;
  return React.createElement("div", {
    className: className
  }, React.createElement("div", {
    className: "bcs-AvatarGroup-detailsName"
  }, user.name), statusMessage && completedAt && React.createElement("div", {
    className: "bcs-AvatarGroup-detailsStatus"
  }, React.createElement(FormattedMessage, _extends({}, statusMessage, {
    values: {
      dateTime: React.createElement(Datestamp, {
        date: completedAt
      })
    }
  }))));
});

var AvatarGroup =
/*#__PURE__*/
function (_React$Component) {
  _inherits(AvatarGroup, _React$Component);

  function AvatarGroup() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, AvatarGroup);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(AvatarGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "listTitleId", uniqueId('avatar-group-list-title-'));

    return _this;
  }

  _createClass(AvatarGroup, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          maxAvatars = _this$props.maxAvatars,
          users = _this$props.users,
          getAvatarUrl = _this$props.getAvatarUrl,
          intl = _this$props.intl;
      var _users$entries = users.entries,
          entries = _users$entries === void 0 ? [] : _users$entries,
          next_marker = users.next_marker;
      var entryCount = entries.length;
      var hiddenAvatarCount = Math.max(0, entryCount - maxAvatars);
      var areThereMoreEntries = !!next_marker; // there are more entries in another page of results

      var visibleAvatars = entries.slice(0, maxAvatars).map(function (_ref3) {
        var id = _ref3.id,
            target = _ref3.target,
            status = _ref3.status,
            completedAt = _ref3.completed_at;
        return React.createElement(Tooltip, {
          key: id,
          text: React.createElement(AvatarDetails, {
            className: "bcs-AvatarGroup-tooltip",
            user: target,
            status: status,
            completedAt: completedAt
          })
        }, React.createElement(AvatarGroupAvatar, {
          status: status,
          user: target,
          getAvatarUrl: getAvatarUrl
        }));
      });
      var allUsers = entries.map(function (_ref4) {
        var id = _ref4.id,
            target = _ref4.target,
            status = _ref4.status,
            completedAt = _ref4.completed_at;
        return React.createElement("li", {
          key: id,
          className: "bcs-AvatarGroup-listItem"
        }, React.createElement(AvatarGroupAvatar, {
          status: status,
          className: "bcs-AvatarGroup-listItemAvatar",
          user: target,
          getAvatarUrl: getAvatarUrl
        }), React.createElement(AvatarDetails, {
          className: "bcs-AvatarGroup-listItemDetails",
          user: target,
          status: status,
          completedAt: completedAt
        }));
      });
      return React.createElement("div", {
        className: "bcs-AvatarGroup"
      }, visibleAvatars, hiddenAvatarCount > 0 && React.createElement(Flyout, {
        position: "top-left",
        shouldDefaultFocus: true
      }, React.createElement(PlainButton, {
        type: "button",
        className: "bcs-AvatarGroup-overflowCountContainer"
      }, React.createElement(Tooltip, {
        text: intl.formatMessage(messages.tasksFeedMoreAssigneesLabel)
      }, React.createElement("span", {
        className: "bcs-AvatarGroup-overflowCount bcs-AvatarGroup-avatar"
      }, areThereMoreEntries ? "".concat(hiddenAvatarCount, "+") : "+".concat(hiddenAvatarCount)))), React.createElement(Overlay, {
        className: "bcs-AvatarGroup-listFlyout"
      }, React.createElement("p", {
        className: "bcs-AvatarGroup-listTitle",
        id: this.listTitleId
      }, React.createElement(FormattedMessage, messages.tasksFeedAssigneeListTitle)), React.createElement("ul", {
        className: "bcs-AvatarGroup-list",
        "arial-labelledby": this.listTitleId
      }, allUsers))));
    }
  }]);

  return AvatarGroup;
}(React.Component);

_defineProperty(AvatarGroup, "defaultProps", {
  maxAvatars: MAX_AVATARS,
  users: {}
});

export default injectIntl(AvatarGroup);