office-ui-fabric-react/lib/components/DocumentCard/DocumentCardActivity.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css } from '../../Utilities';
import { PersonaSize } from '../../Persona';
import { PersonaCoin } from '../../PersonaCoin';
import * as stylesImport from './DocumentCard.scss';
var styles = stylesImport;
var DocumentCardActivity = /** @class */ (function (_super) {
    tslib_1.__extends(DocumentCardActivity, _super);
    function DocumentCardActivity() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DocumentCardActivity.prototype.render = function () {
        var _a = this.props, activity = _a.activity, people = _a.people;
        if (!people || people.length === 0) {
            return null;
        }
        return (React.createElement("div", { className: css('ms-DocumentCardActivity', styles.activity, (_b = {},
                _b['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople] = people.length > 1,
                _b)) },
            this._renderAvatars(people),
            React.createElement("div", { className: css('ms-DocumentCardActivity-details', styles.activityDetails) },
                React.createElement("span", { className: css('ms-DocumentCardActivity-name', styles.name) }, this._getNameString(people)),
                React.createElement("span", { className: css('ms-DocumentCardActivity-activity', styles.activityActivity) }, activity))));
        var _b;
    };
    DocumentCardActivity.prototype._renderAvatars = function (people) {
        return (React.createElement("div", { className: css('ms-DocumentCardActivity-avatars', styles.avatars) },
            people.length > 1 ? this._renderAvatar(people[1]) : null,
            this._renderAvatar(people[0])));
    };
    DocumentCardActivity.prototype._renderAvatar = function (person) {
        return (React.createElement("div", { className: css('ms-DocumentCardActivity-avatar', styles.avatar) },
            React.createElement(PersonaCoin, { imageInitials: person.initials, text: person.name, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, allowPhoneInitials: person.allowPhoneInitials, role: "persentation", size: PersonaSize.size32 })));
    };
    DocumentCardActivity.prototype._getNameString = function (people) {
        var nameString = people[0].name;
        if (people.length >= 2) {
            nameString += ' +' + (people.length - 1);
        }
        return nameString;
    };
    return DocumentCardActivity;
}(BaseComponent));
export { DocumentCardActivity };
//# sourceMappingURL=DocumentCardActivity.js.map