office-ui-fabric-react/lib-es2015/components/ActivityItem/ActivityItem.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { autobind, BaseComponent } from '../../Utilities';
import { getClassNames } from './ActivityItem.classNames';
import { getStyles } from './ActivityItem.styles';
import { PersonaSize, PersonaCoin } from '../../Persona';
var ActivityItem = /** @class */ (function (_super) {
    tslib_1.__extends(ActivityItem, _super);
    function ActivityItem(props) {
        return _super.call(this, props) || this;
    }
    ActivityItem.prototype.render = function () {
        var _a = this.props, _b = _a.onRenderIcon, onRenderIcon = _b === void 0 ? this._onRenderIcon : _b, _c = _a.onRenderActivityDescription, onRenderActivityDescription = _c === void 0 ? this._onRenderActivityDescription : _c, _d = _a.onRenderComments, onRenderComments = _d === void 0 ? this._onRenderComments : _d, _e = _a.onRenderTimeStamp, onRenderTimeStamp = _e === void 0 ? this._onRenderTimeStamp : _e, customStyles = _a.styles;
        this._styles = getStyles(undefined, customStyles);
        this._classNames = getClassNames(this._styles, this.props.className, this.props.activityPersonas, this.props.isCompact);
        return (React.createElement("div", { className: this._classNames.root, style: this.props.style },
            (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) &&
                React.createElement("div", { className: this._classNames.activityTypeIcon }, onRenderIcon(this.props)),
            React.createElement("div", { className: this._classNames.activityContent },
                onRenderActivityDescription(this.props, this._onRenderActivityDescription),
                onRenderComments(this.props, this._onRenderComments),
                onRenderTimeStamp(this.props, this._onRenderTimeStamp))));
    };
    ActivityItem.prototype._onRenderIcon = function (props) {
        if (props.activityPersonas) {
            return this._onRenderPersonaArray(props);
        }
        else {
            return this.props.activityIcon;
        }
    };
    ActivityItem.prototype._onRenderActivityDescription = function (props) {
        var activityDescription = props.activityDescription || props.activityDescriptionText;
        if (activityDescription) {
            return (React.createElement("span", { className: this._classNames.activityText }, activityDescription));
        }
        return null;
    };
    ActivityItem.prototype._onRenderComments = function (props) {
        var comments = props.comments || props.commentText;
        if (!props.isCompact && comments) {
            return (React.createElement("div", { className: this._classNames.commentText }, comments));
        }
        return null;
    };
    ActivityItem.prototype._onRenderTimeStamp = function (props) {
        if (!props.isCompact && props.timeStamp) {
            return (React.createElement("div", { className: this._classNames.timeStamp }, props.timeStamp));
        }
        return null;
    };
    // If activityPersonas is an array of persona props, build the persona cluster element.
    ActivityItem.prototype._onRenderPersonaArray = function (props) {
        var _this = this;
        var personaElement = null;
        var activityPersonas = props.activityPersonas;
        if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
            var personaList_1 = [];
            var showSize16Personas_1 = (activityPersonas.length > 1 || props.isCompact);
            var personaLimit_1 = props.isCompact ? 3 : 4;
            var style_1 = undefined;
            if (props.isCompact) {
                style_1 = {
                    display: 'inline-block',
                    width: '10px',
                    minWidth: '10px',
                    overflow: 'visible'
                };
            }
            activityPersonas.filter(function (person, index) { return index < personaLimit_1; }).forEach(function (person, index) {
                personaList_1.push(React.createElement(PersonaCoin, tslib_1.__assign({}, person, { 
                    // tslint:disable-next-line:no-string-literal
                    key: person['key'] ? person['key'] : index, className: _this._classNames.activityPersona, size: showSize16Personas_1 ? PersonaSize.size16 : PersonaSize.size32, style: style_1 })));
            });
            personaElement = React.createElement("div", { className: this._classNames.personaContainer }, personaList_1);
        }
        return personaElement;
    };
    tslib_1.__decorate([
        autobind
    ], ActivityItem.prototype, "_onRenderIcon", null);
    tslib_1.__decorate([
        autobind
    ], ActivityItem.prototype, "_onRenderActivityDescription", null);
    tslib_1.__decorate([
        autobind
    ], ActivityItem.prototype, "_onRenderComments", null);
    tslib_1.__decorate([
        autobind
    ], ActivityItem.prototype, "_onRenderTimeStamp", null);
    tslib_1.__decorate([
        autobind
    ], ActivityItem.prototype, "_onRenderPersonaArray", null);
    return ActivityItem;
}(BaseComponent));
export { ActivityItem };
//# sourceMappingURL=ActivityItem.js.map