metadata-based-explorer1

Version:
Box UI Elements
developer.box.com/docs/box-ui-elements
112 lines (104 loc) • 5.24 kB
JavaScript
var _statusMessages;

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 { FormattedMessage } from 'react-intl';
import PlainButton from '../../../../components/plain-button';
import ReadableTime from '../../../../components/time/ReadableTime';
import commonMessages from '../../../common/messages';
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 './AssigneeList.scss';
var DEFAULT_ASSIGNEES_SHOWN = 3;
var TASKS_PAGE_SIZE = 20; // service does not return the page size to the client at the moment

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-AssigneeList-detailsName"
  }, user.name ? user.name : React.createElement(FormattedMessage, commonMessages.priorCollaborator)), statusMessage && completedAt && React.createElement("div", {
    className: "bcs-AssigneeList-detailsStatus"
  }, React.createElement(FormattedMessage, _extends({}, statusMessage, {
    values: {
      dateTime: React.createElement(Datestamp, {
        date: completedAt
      })
    }
  }))));
});

function AssigneeList(props) {
  var _props$initialAssigne = props.initialAssigneeCount,
      initialAssigneeCount = _props$initialAssigne === void 0 ? DEFAULT_ASSIGNEES_SHOWN : _props$initialAssigne,
      _props$users = props.users,
      users = _props$users === void 0 ? {} : _props$users,
      getAvatarUrl = props.getAvatarUrl,
      isOpen = props.isOpen,
      onCollapse = props.onCollapse,
      onExpand = props.onExpand;
  var _users$entries = users.entries,
      entries = _users$entries === void 0 ? [] : _users$entries,
      next_marker = users.next_marker;
  var entryCount = entries.length;
  var numVisibleAssignees = isOpen ? entryCount : initialAssigneeCount;
  var visibleUsers = entries.slice(0, numVisibleAssignees).map(function (_ref3) {
    var id = _ref3.id,
        target = _ref3.target,
        status = _ref3.status,
        completedAt = _ref3.completed_at;
    return React.createElement("li", {
      key: id,
      className: "bcs-AssigneeList-listItem"
    }, React.createElement(AvatarGroupAvatar, {
      status: status,
      className: "bcs-AssigneeList-listItemAvatar",
      user: target,
      getAvatarUrl: getAvatarUrl
    }), React.createElement(AvatarDetails, {
      className: "bcs-AssigneeList-listItemDetails",
      user: target,
      status: status,
      completedAt: completedAt
    }));
  });
  var hiddenAssigneeCount = Math.max(0, entryCount - initialAssigneeCount);
  var maxAdditionalAssignees = TASKS_PAGE_SIZE - initialAssigneeCount;
  var hasMoreAssigneesThanPageSize = hiddenAssigneeCount > maxAdditionalAssignees || next_marker;
  var additionalAssigneeMessage = hasMoreAssigneesThanPageSize ? messages.taskShowMoreAssigneesOverflow : messages.taskShowMoreAssignees;
  return React.createElement("div", {
    className: "bcs-AssigneeList"
  }, React.createElement("ul", {
    className: "bcs-AssigneeList-list"
  }, visibleUsers), !isOpen && hiddenAssigneeCount > 0 && React.createElement("div", {
    className: "bcs-AssigneeList-toggleBtn"
  }, React.createElement(PlainButton, {
    "data-resin-target": "showmorebtn",
    onClick: onExpand,
    className: "lnk"
  }, React.createElement(FormattedMessage, _extends({}, additionalAssigneeMessage, {
    values: {
      additionalAssigneeCount: hasMoreAssigneesThanPageSize ? maxAdditionalAssignees : hiddenAssigneeCount
    }
  })))), isOpen && React.createElement("div", {
    className: "bcs-AssigneeList-toggleBtn"
  }, React.createElement(PlainButton, {
    "data-resin-target": "showlessbtn",
    onClick: onCollapse,
    className: "lnk"
  }, React.createElement(FormattedMessage, messages.taskShowLessAssignees))));
}

export default AssigneeList;